From 0873b2da2246d26d3a0ec81ca37b64f41bbd5776 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Thu, 20 May 2021 20:31:37 +0200
Subject: [PATCH] [core][plugin] Fixed compatibility with Pinia

* API BREAK! Menu link title now must be a string or a function return a string
* Pinia unwraps Refs so we had to get rid of the ComputedRef
* Use current typescript
---
 package.json                                  |  2 +-
 .../navigation/EssentialExpansionLink.vue     | 59 +++++++++++--------
 src/components/navigation/EssentialLink.vue   |  2 +-
 src/plugins.d.ts                              |  4 +-
 src/plugins/user/routes/index.ts              |  3 +-
 yarn.lock                                     |  2 +-
 6 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 9215864..ef67c68 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "eslint-plugin-vue": "^7.9.0",
     "eslint-webpack-plugin": "^2.5.4",
     "prettier": "^2.3.0",
-    "typescript": "^4.2.3",
+    "typescript": "^4.2.4",
     "vuedraggable": "^4.0.1"
   },
   "prettier": {
diff --git a/src/components/navigation/EssentialExpansionLink.vue b/src/components/navigation/EssentialExpansionLink.vue
index 778dd22..9c874e9 100644
--- a/src/components/navigation/EssentialExpansionLink.vue
+++ b/src/components/navigation/EssentialExpansionLink.vue
@@ -1,22 +1,30 @@
 <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-menu context-menu>
-        <q-btn v-close-popup label='Verknüpfung erstellen' dense @click='addShortCut(child)'/>
-      </q-menu>
-      <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
+    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-menu context-menu>
+            <q-btn v-close-popup label="Verknüpfung erstellen" dense @click="addShortCut(child)" />
+          </q-menu>
+          <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>
 
@@ -27,7 +35,7 @@ import { FG_Plugin } from 'src/plugins';
 
 export default defineComponent({
   name: 'EssentialExpansionLink',
-  components: {  },
+  components: {},
   props: {
     entry: {
       type: Object as PropType<FG_Plugin.MenuLink>,
@@ -37,17 +45,18 @@ export default defineComponent({
   emits: {
     addShortCut: (val: FG_Plugin.MenuLink) => val.link,
   },
-  setup(props, {emit}) {
-
-    function isGranted(val: FG_Plugin.MenuLink) { return hasPermissions(val.permissions || [])};
+  setup(props, { emit }) {
+    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
+      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
     );
     function addShortCut(val: FG_Plugin.MenuLink) {
-      emit('addShortCut', val)
+      emit('addShortCut', val);
     }
 
-    return { isGranted, title, addShortCut};
+    return { isGranted, title, addShortCut };
   },
 });
 </script>
diff --git a/src/components/navigation/EssentialLink.vue b/src/components/navigation/EssentialLink.vue
index c70ac08..8b53089 100644
--- a/src/components/navigation/EssentialLink.vue
+++ b/src/components/navigation/EssentialLink.vue
@@ -27,7 +27,7 @@ export default defineComponent({
   setup(props) {
     const isGranted = computed(() => hasPermissions(props.entry.permissions || []));
     const title = computed(() =>
-      typeof props.entry.title === 'object' ? props.entry.title.value : props.entry.title
+      typeof props.entry.title === 'function' ? props.entry.title() : props.entry.title
     );
     return { isGranted, title };
   },
diff --git a/src/plugins.d.ts b/src/plugins.d.ts
index 641e592..d041af8 100644
--- a/src/plugins.d.ts
+++ b/src/plugins.d.ts
@@ -1,5 +1,5 @@
 import { RouteLocationRaw, RouteRecordRaw, RouteRecordName } from 'vue-router';
-import { Component, ComputedRef } from 'vue';
+import { Component } from 'vue';
 
 declare namespace FG_Plugin {
   /**
@@ -99,7 +99,7 @@ declare namespace FG_Plugin {
    * Base interface for internal use
    */
   interface MenuEntry {
-    title: string | ComputedRef<string>;
+    title: string | (() => string);
     icon: string;
     permissions?: string[];
     children?: this[];
diff --git a/src/plugins/user/routes/index.ts b/src/plugins/user/routes/index.ts
index e9edc8f..e363060 100644
--- a/src/plugins/user/routes/index.ts
+++ b/src/plugins/user/routes/index.ts
@@ -1,11 +1,10 @@
 import { FG_Plugin } from 'src/plugins';
 import { useMainStore } from 'src/stores';
-import { computed } from 'vue';
 
 const mainRoutes: FG_Plugin.MenuRoute[] = [
   {
     get title() {
-      return computed(() => useMainStore().currentUser.display_name);
+      return () => useMainStore().currentUser.display_name;
     },
     icon: 'mdi-account',
     permissions: ['user'],
diff --git a/yarn.lock b/yarn.lock
index 563f1e0..6c22137 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8024,7 +8024,7 @@ typescript@4.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.2.tgz#1450f020618f872db0ea17317d16d8da8ddb8c4c"
   integrity sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ==
 
-typescript@^4.2.3:
+typescript@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
   integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==