126 lines
3.7 KiB
Vue
126 lines
3.7 KiB
Vue
<template>
|
|
<q-layout view="lHh Lpr lFf">
|
|
<q-header elevated>
|
|
<q-toolbar>
|
|
<q-img
|
|
v-if="localLogo !== undefined && localLogo !== 'undefined'"
|
|
:src="localLogo"
|
|
alt="Logo"
|
|
style="width: 40px; height: 40px; background-color: var(--q-primary)"
|
|
class="q-mr-sm"
|
|
/>
|
|
|
|
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
|
|
|
|
<q-toolbar-title class="text-primary-text"> {{ $t(appName) }} </q-toolbar-title>
|
|
|
|
<div>Version {{ version }}</div>
|
|
<q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
|
|
<LoginMenu />
|
|
</q-toolbar>
|
|
</q-header>
|
|
|
|
<q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
|
|
<q-list>
|
|
<q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
|
|
<q-item-section>{{ $t('login') }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="autorized || user.isPermittedTo('members', 'read')"
|
|
to="/members"
|
|
exact
|
|
clickable
|
|
v-ripple
|
|
@click="closeDrawer"
|
|
>
|
|
<q-item-section> {{ $t('members') }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="autorized || user.isPermittedTo('events', 'read')"
|
|
to="/events"
|
|
exact
|
|
clickable
|
|
v-ripple
|
|
@click="closeDrawer"
|
|
>
|
|
<q-item-section>{{ $t('events') }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="autorized || user.isPermittedTo('responsible', 'read')"
|
|
to="/responsible"
|
|
exact
|
|
clickable
|
|
v-ripple
|
|
@click="closeDrawer"
|
|
>
|
|
<q-item-section>{{ $t('responsible') }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="autorized || user.isPermittedTo('group', 'read')"
|
|
to="/group"
|
|
exact
|
|
clickable
|
|
v-ripple
|
|
@click="closeDrawer"
|
|
>
|
|
<q-item-section>{{ $t('groups') }}</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
|
|
<q-item-section>{{ $t('login') }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
v-if="autorized || user.isPermittedTo('members', 'read')"
|
|
to="/report"
|
|
exact
|
|
clickable
|
|
v-ripple
|
|
@click="closeDrawer"
|
|
>
|
|
<q-item-section> {{ $t('report') }}</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="autorized" to="/stats" exact clickable v-ripple @click="closeDrawer">
|
|
<q-item-section> {{ $t('stats') }}</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-drawer>
|
|
<q-page-container>
|
|
<router-view />
|
|
</q-page-container>
|
|
</q-layout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { version } from '../../package.json';
|
|
import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
|
|
import { useUserStore } from 'src/vueLib/login/userStore';
|
|
import { logo, appName } from 'src/vueLib/models/settings';
|
|
import { useQuasar } from 'quasar';
|
|
|
|
const localLogo = ref(logo);
|
|
|
|
const leftDrawerOpen = ref(false);
|
|
const user = useUserStore();
|
|
const autorized = computed(
|
|
() => user.isAuthorizedAs(['admin']) || user.isPermittedTo('settings', 'read'),
|
|
);
|
|
|
|
function toggleLeftDrawer() {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
}
|
|
|
|
function closeDrawer() {
|
|
leftDrawerOpen.value = false;
|
|
}
|
|
|
|
function refresh() {
|
|
window.location.reload();
|
|
}
|
|
|
|
// Change width based on screen size
|
|
const drawerWidth = computed(() => {
|
|
const $q = useQuasar();
|
|
return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
|
|
});
|
|
</script>
|