From 1e64cc3f609317218562a2987f48c6b84cd88e3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 17 Oct 2020 12:56:25 +0200
Subject: [PATCH] =?UTF-8?q?Title=20f=C3=BCr=20MainLink=20aus=20dem=20Store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Funktion implementiert, damit Namen aus dem Store (getters) geladen werden können. Sobald im Title 'loadFromStore("<parameter>")' vorhanden ist, wird $store.dispatch(parameter) aufgerufen und als titel rausgegeben.
---
 src/components/navigation/EssentialLink.vue | 44 +++++++++++++--------
 src/config.ts                               |  4 +-
 src/plugins/user/plugin.ts                  |  2 +-
 src/plugins/user/store/user.ts              |  3 ++
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/navigation/EssentialLink.vue b/src/components/navigation/EssentialLink.vue
index b8169bf..4749f23 100644
--- a/src/components/navigation/EssentialLink.vue
+++ b/src/components/navigation/EssentialLink.vue
@@ -1,19 +1,11 @@
 <template>
-  <q-item
-    clickable
-    tag="a"
-    target="self"
-    :to="{name:link}"
-  >
-    <q-item-section
-      v-if="icon"
-      avatar
-    >
+  <q-item clickable tag="a" target="self" :to="{ name: link }">
+    <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label>{{ realTitle }}</q-item-label>
       <q-item-label caption>
         {{ caption }}
       </q-item-label>
@@ -22,30 +14,48 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api';
+import { computed, defineComponent } from '@vue/composition-api';
 
 export default defineComponent({
   name: 'EssentialLink',
   props: {
     title: {
       type: String,
-      required: true,
+      required: true
     },
 
     caption: {
       type: String,
-      default: '',
+      default: ''
     },
 
     link: {
       type: String,
-      default: 'home',
+      default: 'home'
     },
 
     icon: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
+
+  setup(props, { root }) {
+    let title = props.title;
+    if (props.title.includes('loadFromStore')) {
+      const startIndex = props.title.indexOf('(') + 1;
+      const endIndex = props.title.indexOf(')');
+      const substring = props.title
+        .substring(startIndex, endIndex)
+        .replace(/"/g, '');
+      console.log(substring);
+      console.log(root.$store.getters[substring]);
+      console.log('loadFromStore');
+      title = computed(() => {
+        return root.$store.getters[substring];
+      });
+    }
+    return { realTitle: title };
+  }
 });
 </script>
diff --git a/src/config.ts b/src/config.ts
index 4e015ab..071be79 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 const config = {
-    baseURL: "http://flaschengeist.local:5000"
+  baseURL: 'http://localhost:5000'
 };
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/src/plugins/user/plugin.ts b/src/plugins/user/plugin.ts
index ebfb36f..73665b5 100644
--- a/src/plugins/user/plugin.ts
+++ b/src/plugins/user/plugin.ts
@@ -6,7 +6,7 @@ import routes from './routes';
 
 const mainLink: PluginMainLink = {
   name: 'user',
-  title: 'User',
+  title: 'loadFromStore("user/displayName")',
   link: 'user',
   icon: 'mdi-account',
   children: [
diff --git a/src/plugins/user/store/user.ts b/src/plugins/user/store/user.ts
index 78bfb95..b289015 100644
--- a/src/plugins/user/store/user.ts
+++ b/src/plugins/user/store/user.ts
@@ -134,6 +134,9 @@ const getters: GetterTree<UserStateInterface, StateInterface> = {
   },
   loginLoading({ loginLoading }) {
     return loginLoading;
+  },
+  displayName({ user }) {
+    return `${user.firstname} ${user.lastname}`;
   }
 };