chore: refactor a lot, add codegen and upgrade vue
This commit is contained in:
+45
-57
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<v-app :key="$i18n.locale + isAuthenticated">
|
||||
<v-app :key='$i18n.locale + isAuthenticated'>
|
||||
<themed>
|
||||
<v-navigation-drawer v-model="nav" temporary app>
|
||||
<v-navigation-drawer v-model='nav' temporary app>
|
||||
<v-list dense>
|
||||
<v-list-item>
|
||||
<v-list-item-action>
|
||||
<v-switch v-model="darkMode" />
|
||||
<v-switch v-model='darkMode' />
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.darkMode') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
@@ -15,62 +15,62 @@
|
||||
<v-list-item @click="locale = 'sv'">
|
||||
<v-list-item-title>På Svenska 🇸🇪</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="!user" link @click="doLogin">
|
||||
<v-list-item v-if='!user' link @click='doLogin'>
|
||||
<v-list-item-title>{{ $t('app.login') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item v-if='isAuthenticated && user'>
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name" />
|
||||
<v-img :src='user.picture' :alt='user.name' />
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title><span v-html="user.name" /></v-list-item-title>
|
||||
<v-list-item-title><span v-text='user.name' /></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item link to="/">
|
||||
<v-list-item link to='/'>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-calendar-outline</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.events') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link to="/origins/">
|
||||
<v-list-item v-if='isAuthenticated' link to='/origins/'>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.origins') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link to="/filters/">
|
||||
<v-list-item v-if='isAuthenticated' link to='/filters/'>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-title>{{ $t('app.links.filters') }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item v-if="isAuthenticated" link>
|
||||
<v-list-item v-if='isAuthenticated' link>
|
||||
<v-list-item-action>
|
||||
<v-icon>exit_to_app</v-icon>
|
||||
</v-list-item-action>
|
||||
<v-list-item-content @click="doLogout">
|
||||
<v-list-item-content @click='doLogout'>
|
||||
<v-list-item-title>{{ $t('app.logout') }}</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon @click="nav = !nav" />
|
||||
<v-toolbar-title><span v-html="title" /></v-toolbar-title>
|
||||
<v-app-bar-nav-icon @click='nav = !nav' />
|
||||
<v-toolbar-title><span v-text='title' /></v-toolbar-title>
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if="isAuthenticated && user">
|
||||
<v-list-item v-if='isAuthenticated && user'>
|
||||
<v-list-item-avatar>
|
||||
<v-img :src="user.picture" :alt="user.name" />
|
||||
<v-img :src='user.picture' :alt='user.name' />
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title><span v-html="user.name" /></v-list-item-title>
|
||||
<v-list-item-title><span v-text='user.name' /></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container v-if="!loading" fluid>
|
||||
<v-container v-if='!loading' fluid>
|
||||
<nuxt />
|
||||
</v-container>
|
||||
</v-main>
|
||||
@@ -78,38 +78,28 @@
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
// We need this line to import all global styling
|
||||
@import 'assets/scss/global.scss';
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
background-color: white;
|
||||
|
||||
.log-out {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { computed, ref } from '@vue/composition-api'
|
||||
import { useRouter, useState } from '@u3u/vue-hooks'
|
||||
import dayjs from 'dayjs'
|
||||
import sv from 'dayjs/locale/sv'
|
||||
import { setDarkMode } from '../utils/localStorage'
|
||||
|
||||
import { computed, getCurrentInstance, provide, ref } from 'vue'
|
||||
import { useRouter, useStore } from '@nuxtjs/composition-api'
|
||||
import { DefaultApolloClient } from '@vue/apollo-composable'
|
||||
import Themed from './components/themed'
|
||||
import { useAuth } from '../plugins/auth'
|
||||
import { setDarkMode } from '~/utils/localStorage'
|
||||
import { useAuth } from '~/plugins/auth'
|
||||
|
||||
export default {
|
||||
name: 'DefaultLayout',
|
||||
components: {
|
||||
Themed
|
||||
},
|
||||
setup(props, context) {
|
||||
const { router } = useRouter()
|
||||
const { title } = useState(['title'])
|
||||
setup() {
|
||||
const instance = getCurrentInstance()
|
||||
if (instance) {
|
||||
provide(DefaultApolloClient, instance.proxy.$apollo)
|
||||
}
|
||||
const router = useRouter()
|
||||
const store = useStore()
|
||||
const { title } = store.state
|
||||
const onRedirectCallback = (appState) => {
|
||||
router.push(
|
||||
appState && appState.targetUrl
|
||||
@@ -120,37 +110,35 @@ export default {
|
||||
const { loading, isAuthenticated, user, loginWithRedirect, logout } =
|
||||
useAuth(onRedirectCallback)
|
||||
const doLogin = () => {
|
||||
loginWithRedirect.value()
|
||||
loginWithRedirect()
|
||||
}
|
||||
const doLogout = () => {
|
||||
logout.value({
|
||||
logout({
|
||||
returnTo: window.location.origin
|
||||
})
|
||||
}
|
||||
const darkMode = computed({
|
||||
get: () => context.root.$vuetify.theme.dark,
|
||||
get: () => (instance ? instance.proxy.$vuetify.theme.dark : false),
|
||||
set: (val) => {
|
||||
context.root.$vuetify.theme.dark = val
|
||||
setDarkMode(context.root.$vuetify.theme.dark)
|
||||
if (instance) {
|
||||
instance.proxy.$vuetify.theme.dark = val
|
||||
setDarkMode(instance.proxy.$vuetify.theme.dark)
|
||||
}
|
||||
}
|
||||
})
|
||||
const locale = computed({
|
||||
get: () => context.root.$i18n.locale,
|
||||
get: () => (instance ? instance.proxy.$i18n.locale : 'sv'),
|
||||
set: (newLocale) => {
|
||||
if (newLocale === 'en') {
|
||||
dayjs.locale(newLocale)
|
||||
} else if (newLocale === 'sv') {
|
||||
dayjs.locale(sv)
|
||||
if (instance) {
|
||||
instance.proxy.$i18n.setLocaleCookie(newLocale)
|
||||
instance.proxy.$vuetify.lang.current = newLocale
|
||||
instance.proxy.$i18n.locale = newLocale
|
||||
}
|
||||
|
||||
context.root.$i18n.setLocaleCookie(newLocale)
|
||||
context.root.$vuetify.lang.current = newLocale
|
||||
context.root.$i18n.locale = newLocale
|
||||
}
|
||||
})
|
||||
|
||||
const nav = ref(false)
|
||||
locale.value = context.root.$i18n.locale
|
||||
locale.value = instance.proxy.$i18n.locale
|
||||
|
||||
return {
|
||||
title,
|
||||
|
||||
Reference in New Issue
Block a user