From c38032085f90197335c2169f3b2881ea0b50befb Mon Sep 17 00:00:00 2001
From: groegert <thomas@groeger-clan.de>
Date: Thu, 27 May 2021 12:35:25 +0200
Subject: [PATCH] [core] added computation in EssentialExpansionLink

fixes #9
---
 .../navigation/EssentialExpansionLink.vue     | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/navigation/EssentialExpansionLink.vue b/src/components/navigation/EssentialExpansionLink.vue
index 99bb12a..446bce9 100644
--- a/src/components/navigation/EssentialExpansionLink.vue
+++ b/src/components/navigation/EssentialExpansionLink.vue
@@ -1,11 +1,7 @@
+yarn run v1.22.10
+$ /mnt/data/home/thomas/devel/flaschengeist/flaschengeist-frontend/node_modules/.bin/prettier src/components/navigation/EssentialExpansionLink.vue
 <template>
-  <q-expansion-item
-    v-if="isGranted(entry)"
-    clickable
-    :label="getTitle(entry)"
-    :icon="entry.icon"
-    expand-separator
-  >
+  <q-expansion-item v-if="isGranted(entry)" clickable :label="getTitle(entry)" :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 }">
@@ -27,9 +23,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
+import { hasPermissions } from '@flaschengeist/api';
 import { FG_Plugin } from '@flaschengeist/types';
-import { useMainStore } from 'app/api';
 
 export default defineComponent({
   name: 'EssentialExpansionLink',
@@ -44,13 +40,11 @@ export default defineComponent({
     addShortCut: (val: FG_Plugin.MenuLink) => val.link,
   },
   setup(props, { emit }) {
-    const store = useMainStore();
-
     function isGranted(val: FG_Plugin.MenuLink) {
-      return !val.permissions || val.permissions.every((p) => store.permissions.includes(p));
+      return computed(() => hasPermissions(val.permissions || []));
     }
     function getTitle(entry: FG_Plugin.MenuLink) {
-      return typeof entry.title === 'function' ? entry.title() : entry.title;
+      return computed(() => (typeof entry.title === 'function' ? entry.title() : entry.title)).value;
     }
 
     function addShortCut(val: FG_Plugin.MenuLink) {
@@ -61,3 +55,4 @@ export default defineComponent({
   },
 });
 </script>
+Done in 0.67s.