Fixed Typings

This commit is contained in:
Tim Gröger 2020-10-31 19:33:05 +01:00
parent a1f1be7fb6
commit ef71481931
7 changed files with 74 additions and 63 deletions

View File

@ -27,13 +27,15 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
to.matched.every((record: RouteRecord) => { to.matched.every((record: RouteRecord) => {
if (!('meta' in record) || !('permissions' in record.meta)) if (!('meta' in record) || !('permissions' in record.meta))
return true; return true;
const test = record.meta.permissions.every((permission: string) => { if (record.meta) {
return permissions.includes( if ((<{permissions: FG.Permission[]}>record.meta).permissions) {
permission return (<{permissions: FG.Permission[]}>record.meta).permissions.every((permission: string) => {
); return permissions.includes(
}) permission
console.log('permissions', test) );
return test })
}
}
}) })
) { ) {
next(); next();

View File

@ -1,20 +1,22 @@
<template> <template>
<q-item clickable tag="a" target="self" :to="{ name: link }"> <q-item clickable tag="a" target="self" :to="{ name: link }" v-if="hasPermissions">
<q-item-section v-if="icon" avatar> <q-item-section v-if="icon" avatar>
<q-icon :name="icon" /> <q-icon :name="icon"/>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label>{{ realTitle }}</q-item-label> <q-item-label>{{ realTitle }}</q-item-label>
<q-item-label caption> <q-item-label caption>
{{ caption }} {{ permissions }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from '@vue/composition-api'; import {computed, defineComponent} from '@vue/composition-api';
import {Store} from 'vuex'
import {StateInterface} from "src/store";
export default defineComponent({ export default defineComponent({
name: 'EssentialLink', name: 'EssentialLink',
@ -37,10 +39,13 @@ export default defineComponent({
icon: { icon: {
type: String, type: String,
default: '' default: ''
},
permissions: {
default: undefined
} }
}, },
setup(props, { root }) { setup(props, {root}) {
let title = computed<string>(() => { let title = computed<string>(() => {
if (props.title.includes('loadFromStore')) { if (props.title.includes('loadFromStore')) {
const startIndex = props.title.indexOf('(') + 1; const startIndex = props.title.indexOf('(') + 1;
@ -53,7 +58,18 @@ export default defineComponent({
} }
return props.title; return props.title;
}); });
return { realTitle: title };
const hasPermissions = computed(() => {
let permissions = props.permissions
if (permissions) {
return (<string[]>permissions).every(permission => {
return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
})
}
return true
})
return {realTitle: title, hasPermissions};
} }
}); });
</script> </script>

View File

@ -1,9 +1,11 @@
<template> <template>
<q-btn flat dense :icon="icon" :to="{ name: link }" /> <q-btn flat dense :icon="icon" :to="{ name: link }" v-if="hasPermissions"/>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from '@vue/composition-api'; import {computed, defineComponent} from '@vue/composition-api';
import {Store} from "vuex";
import {StateInterface} from "src/store";
export default defineComponent({ export default defineComponent({
name: 'ShortCutLink', name: 'ShortCutLink',
props: { props: {
@ -14,7 +16,23 @@ export default defineComponent({
icon: { icon: {
required: true, required: true,
type: String type: String
},
permissions: {
default: undefined
} }
},
setup(props, {root}) {
const hasPermissions = computed(() => {
let permissions = props.permissions
if (permissions) {
return (<string[]>permissions).every(permission => {
return (<{'user/permissions': string[]}>(<Store<StateInterface>>root.$store).getters)['user/permissions'].includes(permission)
})
}
return true
})
return {hasPermissions}
} }
}); });
</script> </script>

View File

@ -14,7 +14,7 @@
<q-toolbar-title> <q-toolbar-title>
<q-avatar> <q-avatar>
<img src="logo.svg" /> <img src="logo.svg"/>
</q-avatar> </q-avatar>
<span class="gt-xs"> <span class="gt-xs">
Flaschengeist Flaschengeist
@ -28,10 +28,10 @@
:key="'shortcut' + index" :key="'shortcut' + index"
:link="shortcut.link" :link="shortcut.link"
:icon="shortcut.icon" :icon="shortcut.icon"
v-if="hasPermissions(shortcut.permissions)" :permissions="shortcut.permissions"
/> />
</div> </div>
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" /> <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()"/>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
@ -51,10 +51,10 @@
:title="link.title" :title="link.title"
:link="link.link" :link="link.link"
:icon="link.icon" :icon="link.icon"
v-if="hasPermissions(link.permissions)" :permissions="link.permissions"
/> />
</q-list> </q-list>
<q-separator /> <q-separator/>
<!-- Plugin functions --> <!-- Plugin functions -->
<!-- <router-view name="plugin-nav" /> --> <!-- <router-view name="plugin-nav" /> -->
@ -65,7 +65,7 @@
:title="link.title" :title="link.title"
:link="link.link" :link="link.link"
:icon="link.icon" :icon="link.icon"
v-if="hasPermissions(link.permissions)" :permissions="link.permissions"
/> />
</q-list> </q-list>
@ -81,7 +81,7 @@
/> />
</div> </div>
<q-separator /> <q-separator/>
<essential-link <essential-link
v-for="(link, index) in links" v-for="(link, index) in links"
@ -89,12 +89,12 @@
:title="link.title" :title="link.title"
:link="link.link" :link="link.link"
:icon="link.icon" :icon="link.icon"
v-if="hasPermissions(link.permissions)" :permissions="link.permissions"
/> />
</q-drawer> </q-drawer>
<q-page-container> <q-page-container>
<router-view /> <router-view/>
</q-page-container> </q-page-container>
</q-layout> </q-layout>
</template> </template>
@ -102,11 +102,11 @@
<script lang="ts"> <script lang="ts">
import EssentialLink from 'components/navigation/EssentialLink.vue'; import EssentialLink from 'components/navigation/EssentialLink.vue';
import ShortCutLink from 'components/navigation/ShortCutLink.vue'; import ShortCutLink from 'components/navigation/ShortCutLink.vue';
import { Screen } from 'quasar'; import {Screen} from 'quasar';
import { defineComponent, ref, computed } from '@vue/composition-api'; import {defineComponent, ref, computed} from '@vue/composition-api';
import { Store } from 'vuex'; import {Store} from 'vuex';
import { StateInterface } from 'src/store'; import {StateInterface} from 'src/store';
import { FG_Plugin } from 'src/plugins'; import {FG_Plugin} from 'src/plugins';
const links = [ const links = [
{ {
@ -140,7 +140,7 @@ declare module 'vue/types/vue' {
export default defineComponent({ export default defineComponent({
name: 'MainLayout', name: 'MainLayout',
components: { EssentialLink, ShortCutLink }, components: {EssentialLink, ShortCutLink},
setup(_, ctx) { setup(_, ctx) {
const leftDrawer = ref(false); const leftDrawer = ref(false);
@ -151,6 +151,7 @@ export default defineComponent({
}) })
); );
const leftDrawerMini = ref(false); const leftDrawerMini = ref(false);
function leftDrawerClicker() { function leftDrawerClicker() {
if (leftDrawerMini.value) { if (leftDrawerMini.value) {
leftDrawerMini.value = false; leftDrawerMini.value = false;
@ -184,15 +185,6 @@ export default defineComponent({
}); });
} }
function hasPermissions(permissions: FG.Permission[] | undefined) {
if (permissions) {
return permissions.every(permission => {
return ctx.root.$store.getters['user/permissions'].includes(permission)
})
}
return true
}
return { return {
leftDrawerOpen, leftDrawerOpen,
leftDrawerMini, leftDrawerMini,
@ -200,8 +192,7 @@ export default defineComponent({
links, links,
pluginChildLinks, pluginChildLinks,
shortcuts, shortcuts,
logout, logout
hasPermissions
}; };
} }
}); });

View File

@ -13,7 +13,7 @@
:title="route.title" :title="route.title"
:icon="route.icon" :icon="route.icon"
:link="route.name" :link="route.name"
v-if="hasPermissions(route.permissions)" :permissions="route.meta.permissions"
/> />
</q-list> </q-list>
</q-card-section> </q-card-section>
@ -34,15 +34,7 @@ export default defineComponent({
const checkMain = computed(() => { const checkMain = computed(() => {
return root.$route.matched.length == 2; return root.$route.matched.length == 2;
}); });
function hasPermissions(permissions: FG.Permission[] | undefined) { return { checkMain, mainRoutes };
if (permissions) {
return permissions.every(permission => {
return root.$store.getters['user/permissions'].includes(permission)
})
}
return true
}
return { checkMain, mainRoutes, hasPermissions };
} }
}); });
</script> </script>

View File

@ -66,7 +66,7 @@ export default defineComponent({
? 'mdi-linux' ? 'mdi-linux'
: platform == 'windows' : platform == 'windows'
? 'mdi-microsoft-windows' ? 'mdi-microsoft-windows'
: platform == 'apple' : platform == 'macos'
? 'mdi-apple' ? 'mdi-apple'
: 'mdi-help'; : 'mdi-help';
} }

View File

@ -13,7 +13,7 @@
:title="route.title" :title="route.title"
:icon="route.icon" :icon="route.icon"
:link="route.name" :link="route.name"
v-if="hasPermissions(route.permissions)" :permissions="route.meta.permissions"
/> />
</q-list> </q-list>
</q-card-section> </q-card-section>
@ -34,15 +34,7 @@ export default defineComponent({
const checkMain = computed(() => { const checkMain = computed(() => {
return root.$route.matched.length == 2; return root.$route.matched.length == 2;
}); });
function hasPermissions(permissions: FG.Permission[] | undefined) { return { checkMain, mainRoutes};
if (permissions) {
return permissions.every(permission => {
return root.$store.getters['user/permissions'].includes(permission)
})
}
return true
}
return { checkMain, mainRoutes, hasPermissions};
} }
}); });
</script> </script>