[core] change style of menulinks in drawer

This commit is contained in:
Tim Gröger 2021-04-18 22:33:32 +02:00
parent a8a6cd8814
commit 81c5b10101
3 changed files with 55 additions and 7 deletions

View File

@ -0,0 +1,46 @@
<template>
<q-expansion-item v-if="isGranted(entry)" clickable tag="a" target="self" :label='title' :icon='entry.icon' expand-separator>
<q-list class='q-ml-lg'>
<div v-for='child in entry.children' :key='child.link'>
<q-item v-if='isGranted(child)' clickable :to='{name: child.link}'>
<q-item-section avatar>
<q-icon :name='child.icon' />
</q-item-section>
<q-item-section>
<q-item-label>
{{child.title}}
</q-item-label>
</q-item-section>
</q-item>
</div>
</q-list>
</q-expansion-item>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, PropType } from 'vue';
import { hasPermissions } from 'src/utils/permission';
import { FG_Plugin } from 'src/plugins';
export default defineComponent({
name: 'EssentialExpansionLink',
components: { },
props: {
entry: {
type: Object as PropType<FG_Plugin.MenuLink>,
required: true,
},
},
setup(props) {
function isGranted(val: FG_Plugin.MenuLink) { return hasPermissions(val.permissions || [])};
const title = computed(() =>
typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
);
onMounted(() => {
console.log(props.entry.children)
})
return { isGranted, title };
},
});
</script>

View File

@ -51,18 +51,18 @@
> >
<!-- Plugins --> <!-- Plugins -->
<q-list> <q-list>
<essential-link <essential-expansion-link
v-for="(entry, index) in mainLinks" v-for="(entry, index) in menuLinks"
:key="'plugin' + index" :key="'plugin' + index"
:entry="entry" :entry="entry"
/> />
<q-separator /> <!--<q-separator />
<!-- Plugin functions --> Plugin functions
<essential-link <essential-link
v-for="(entry, index) in subLinks" v-for="(entry, index) in subLinks"
:key="'childPlugin' + index" :key="'childPlugin' + index"
:entry="entry" :entry="entry"
/> />-->
</q-list> </q-list>
<q-separator /> <q-separator />
<essential-link <essential-link
@ -87,6 +87,7 @@ import { FG_Plugin } from 'src/plugins';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { Screen } from 'quasar'; import { Screen } from 'quasar';
import config from 'src/config'; import config from 'src/config';
import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
const essentials: FG_Plugin.MenuLink[] = [ const essentials: FG_Plugin.MenuLink[] = [
{ {
@ -98,7 +99,7 @@ const essentials: FG_Plugin.MenuLink[] = [
export default defineComponent({ export default defineComponent({
name: 'MainLayout', name: 'MainLayout',
components: { EssentialLink, ShortcutLink, Notification }, components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification },
setup() { setup() {
const router = useRouter(); const router = useRouter();
const mainStore = useMainStore(); const mainStore = useMainStore();
@ -170,6 +171,7 @@ export default defineComponent({
leftDrawer, leftDrawer,
leftDrawerMini, leftDrawerMini,
logout, logout,
menuLinks: computed(() => flaschengeist?.menuLinks),
mainLinks, mainLinks,
notifications, notifications,
noPermission, noPermission,

View File

@ -95,7 +95,7 @@ export default defineComponent({
const status = await mainStore.login(userid.value, password.value); const status = await mainStore.login(userid.value, password.value);
if (status === true) { if (status === true) {
mainStore.user = (await useUserStore().getUser(userid.value)) || undefined; mainStore.user = (await useUserStore().getUser(userid.value, true)) || undefined;
const x = router.currentRoute.value.query['redirect']; const x = router.currentRoute.value.query['redirect'];
void router.push(typeof x === 'string' ? { path: x } : mainRoute); void router.push(typeof x === 'string' ? { path: x } : mainRoute);
} else { } else {