107 lines
3.5 KiB
Vue
107 lines
3.5 KiB
Vue
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-header elevated>
|
|
<q-toolbar>
|
|
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
|
|
|
|
<q-toolbar-title> Quasar App </q-toolbar-title>
|
|
|
|
<q-space />
|
|
|
|
<div class="row items-center no-wrap">
|
|
<div class="q-mr-md">Quasar v{{ $q.version }}</div>
|
|
<q-badge outline color="white" class="q-mr-sm">commit {{ commitCode }}</q-badge>
|
|
|
|
<q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
|
|
<q-menu auto-close>
|
|
<q-list>
|
|
<q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
|
|
<q-item-section>{{ loc.label }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
|
<q-scroll-area class="fit">
|
|
<div class="q-pa-md">
|
|
<div class="text-subtitle2 q-mb-sm">Dati contribuente</div>
|
|
<pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(taxpayer.data), null, 2) }}</pre>
|
|
</div>
|
|
<div class="q-pa-md">
|
|
<div class="text-subtitle2 q-mb-sm">Dati stato civile</div>
|
|
<pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(marital.data), null, 2) }}</pre>
|
|
</div>
|
|
<div class="q-pa-md">
|
|
<div class="text-subtitle2 q-mb-sm">Dati figli</div>
|
|
<pre class="q-pa-sm bg-grey-2 text-body2" style="white-space:pre-wrap">{{ JSON.stringify(unref(children.data), null, 2) }}</pre>
|
|
</div>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
|
|
<q-footer elevated class="bg-white">
|
|
<q-toolbar class="q-pl-md q-pr-md">
|
|
<div class="row items-center no-wrap">
|
|
<div class="col"> </div>
|
|
<div>
|
|
<q-btn flat dense icon="language" :label="currentLocaleLabel" aria-label="Language">
|
|
<q-menu auto-close>
|
|
<q-list>
|
|
<q-item clickable v-for="loc in locales" :key="loc.code" @click="setLocale(loc.code)">
|
|
<q-item-section>{{ loc.label }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-toolbar>
|
|
</q-footer>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, unref, computed } from 'vue';
|
|
import { useTaxpayerStore } from '../stores/taxpayer'
|
|
import { useMaritalStore } from '../stores/marital';
|
|
import { useChildrenStore } from '../stores/children'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { COMMIT_CODE } from '../generated/commit-info'
|
|
|
|
const leftDrawerOpen = ref(false);
|
|
|
|
const taxpayer = useTaxpayerStore()
|
|
const marital = useMaritalStore()
|
|
const children = useChildrenStore()
|
|
|
|
const { locale } = useI18n()
|
|
const commitCode = COMMIT_CODE
|
|
|
|
const locales = [
|
|
{ code: 'it-IT', label: 'Italiano' },
|
|
{ code: 'en-US', label: 'English' },
|
|
{ code: 'fr-FR', label: 'Français' },
|
|
{ code: 'de-DE', label: 'Deutsch' }
|
|
]
|
|
|
|
function setLocale(code: string) {
|
|
locale.value = code
|
|
}
|
|
|
|
const currentLocaleLabel = computed(() => {
|
|
const found = locales.find(l => l.code === locale.value)
|
|
return found ? found.label : String(locale.value)
|
|
})
|
|
|
|
function toggleLeftDrawer() {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
}
|
|
</script>
|