From 81c5b101015f7a8bf35b520a1261c7046df0229a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 18 Apr 2021 22:33:32 +0200
Subject: [PATCH 1/3] [core] change style of menulinks in drawer

---
 .../navigation/EssentialExpansionLink.vue     | 46 +++++++++++++++++++
 src/layouts/MainLayout.vue                    | 14 +++---
 src/pages/Login.vue                           |  2 +-
 3 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 src/components/navigation/EssentialExpansionLink.vue

diff --git a/src/components/navigation/EssentialExpansionLink.vue b/src/components/navigation/EssentialExpansionLink.vue
new file mode 100644
index 0000000..2726583
--- /dev/null
+++ b/src/components/navigation/EssentialExpansionLink.vue
@@ -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>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index d70329f..c13be44 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -51,18 +51,18 @@
     >
       <!-- Plugins -->
       <q-list>
-        <essential-link
-          v-for="(entry, index) in mainLinks"
+        <essential-expansion-link
+          v-for="(entry, index) in menuLinks"
           :key="'plugin' + index"
           :entry="entry"
         />
-        <q-separator />
-        <!-- Plugin functions -->
+        <!--<q-separator />
+        Plugin functions
         <essential-link
           v-for="(entry, index) in subLinks"
           :key="'childPlugin' + index"
           :entry="entry"
-        />
+        />-->
       </q-list>
       <q-separator />
       <essential-link
@@ -87,6 +87,7 @@ import { FG_Plugin } from 'src/plugins';
 import { useRouter } from 'vue-router';
 import { Screen } from 'quasar';
 import config from 'src/config';
+import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
 
 const essentials: FG_Plugin.MenuLink[] = [
   {
@@ -98,7 +99,7 @@ const essentials: FG_Plugin.MenuLink[] = [
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink, ShortcutLink, Notification },
+  components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification },
   setup() {
     const router = useRouter();
     const mainStore = useMainStore();
@@ -170,6 +171,7 @@ export default defineComponent({
       leftDrawer,
       leftDrawerMini,
       logout,
+      menuLinks: computed(() => flaschengeist?.menuLinks),
       mainLinks,
       notifications,
       noPermission,
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index e41400b..68bde36 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -95,7 +95,7 @@ export default defineComponent({
       const status = await mainStore.login(userid.value, password.value);
 
       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'];
         void router.push(typeof x === 'string' ? { path: x } : mainRoute);
       } else {

From 3c7d711f59e3f77c317c8a3c79c161ad644317c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 18 Apr 2021 23:26:54 +0200
Subject: [PATCH 2/3] [core] dynamic shortcutlinks

---
 .../navigation/EssentialExpansionLink.vue     | 19 ++++---
 src/components/navigation/ShortcutLink.vue    | 22 ++++++--
 src/layouts/MainLayout.vue                    | 51 ++++++++++++++-----
 src/stores/index.ts                           | 12 +++++
 4 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/src/components/navigation/EssentialExpansionLink.vue b/src/components/navigation/EssentialExpansionLink.vue
index 2726583..778dd22 100644
--- a/src/components/navigation/EssentialExpansionLink.vue
+++ b/src/components/navigation/EssentialExpansionLink.vue
@@ -3,6 +3,9 @@
       <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>
@@ -18,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { hasPermissions } from 'src/utils/permission';
 import { FG_Plugin } from 'src/plugins';
 
@@ -31,16 +34,20 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: {
+    addShortCut: (val: FG_Plugin.MenuLink) => val.link,
+  },
+  setup(props, {emit}) {
 
-  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 };
+    function addShortCut(val: FG_Plugin.MenuLink) {
+      emit('addShortCut', val)
+    }
+
+    return { isGranted, title, addShortCut};
   },
 });
 </script>
diff --git a/src/components/navigation/ShortcutLink.vue b/src/components/navigation/ShortcutLink.vue
index 1a00c44..79f35f1 100644
--- a/src/components/navigation/ShortcutLink.vue
+++ b/src/components/navigation/ShortcutLink.vue
@@ -1,5 +1,9 @@
 <template>
-  <q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" />
+  <q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" round>
+    <q-menu v-if='context' context-menu>
+      <q-btn v-close-popup label='Verknüpfung entfernen' @click='deleteShortcut'/>
+    </q-menu>
+  </q-btn>
 </template>
 
 <script lang="ts">
@@ -12,12 +16,22 @@ export default defineComponent({
   props: {
     shortcut: {
       required: true,
-      type: Object as PropType<FG_Plugin.Shortcut>,
+      type: Object as PropType<FG_Plugin.Shortcut | FG_Plugin.MenuLink>,
     },
+    context: {
+      type: Boolean,
+      default: false,
+    }
   },
-  setup(props) {
+  emits: {
+    deleteShortcut: (val: FG_Plugin.MenuLink| FG_Plugin.Shortcut) => val.link
+  },
+  setup(props, {emit}) {
     const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
-    return { isGranted };
+    function deleteShortcut() {
+      emit('deleteShortcut', props.shortcut)
+    }
+    return { isGranted, deleteShortcut};
   },
 });
 </script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c13be44..f6ec065 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -33,10 +33,17 @@
             <div v-else class="q-pa-sm">Keine neuen Benachrichtigungen</div>
           </q-menu>
         </q-btn>
-        <shortcut-link
+        <!--<shortcut-link
           v-for="(shortcut, index) in shortcuts"
           :key="'shortcut' + index"
           :shortcut="shortcut"
+        />-->
+        <shortcut-link
+          v-for="(shortcut, index) in shortCuts"
+          :key="'shortcut' + index"
+          :shortcut="shortcut"
+          context
+          @delete-shortcut="deleteShortcut"
         />
         <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
       </q-toolbar>
@@ -52,9 +59,10 @@
       <!-- Plugins -->
       <q-list>
         <essential-expansion-link
-          v-for="(entry, index) in menuLinks"
+          v-for="(entry, index) in mainLinks"
           :key="'plugin' + index"
           :entry="entry"
+          @add-short-cut="addShortcut"
         />
         <!--<q-separator />
         Plugin functions
@@ -88,7 +96,6 @@ import { useRouter } from 'vue-router';
 import { Screen } from 'quasar';
 import config from 'src/config';
 import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
-
 const essentials: FG_Plugin.MenuLink[] = [
   {
     title: 'Über Flaschengeist',
@@ -106,21 +113,16 @@ export default defineComponent({
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(true);
     const leftDrawerMini = ref(false);
-    const shortcuts = flaschengeist?.shortcuts || [];
     const mainLinks = flaschengeist?.menuLinks || [];
     const notifications = computed(() => mainStore.notifications.slice().reverse());
     const polling = ref(NaN);
     const useNative = 'Notification' in window && window.Notification !== undefined;
     const noPermission = ref(!useNative || window.Notification.permission !== 'granted');
 
-    const subLinks = computed(() => {
-      const matched = router.currentRoute.value.matched[1];
-      return flaschengeist?.menuLinks.find((link) => matched.name == link.link)?.children;
-    });
-
     onBeforeMount(() => {
       polling.value = window.setInterval(() => pollNotification(), config.pollingInterval);
       pollNotification();
+      void mainStore.getShortcuts();
     });
     onBeforeUnmount(() => window.clearInterval(polling.value));
 
@@ -166,21 +168,46 @@ export default defineComponent({
         });
     }
 
+    const shortCuts = computed({
+      get: () => mainStore.shortcuts,
+      set: (val: Array<FG_Plugin.MenuLink>) => {
+        console.log('hier bin ich', val);
+        mainStore.shortcuts = val;
+      },
+    });
+
+    function addShortcut(val: FG_Plugin.MenuLink) {
+      const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
+      if (idx < 0) {
+        shortCuts.value.push(val);
+        void mainStore.setShortcuts();
+      }
+    }
+
+    function deleteShortcut(val: FG_Plugin.MenuLink) {
+      console.log('deleteShortcut');
+      const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
+      if (idx > -1) {
+        shortCuts.value.splice(idx, 1);
+        void mainStore.setShortcuts();
+      }
+    }
+
     return {
       essentials,
       leftDrawer,
       leftDrawerMini,
       logout,
-      menuLinks: computed(() => flaschengeist?.menuLinks),
       mainLinks,
       notifications,
       noPermission,
       openMenu,
       remove,
       requestPermission,
-      shortcuts,
-      subLinks,
       useNative,
+      shortCuts,
+      addShortcut,
+      deleteShortcut,
     };
   },
 });
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 089fc3c..f10bdba 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -25,6 +25,7 @@ export const useMainStore = defineStore({
     session: loadCurrentSession(),
     user: loadUser(),
     notifications: [] as Array<FG_Plugin.Notification>,
+    shortcuts: [] as FG_Plugin.MenuLink[],
   }),
 
   getters: {
@@ -139,6 +140,17 @@ export const useMainStore = defineStore({
             this.notifications.splice(idx, this.notifications.length - idx - 1);
         }
     },
+
+    async getShortcuts() {
+      const { data } = await api.get<Array<FG_Plugin.MenuLink>>(
+        `users/${this.currentUser.userid}/shortcuts`
+      );
+      this.shortcuts = data;
+    },
+
+    async setShortcuts() {
+      await api.put(`users/${this.currentUser.userid}/shortcuts`, this.shortcuts);
+    },
   },
 });
 

From 95867428a822a858c4e26fb935deb0bd1e26e67a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sun, 18 Apr 2021 23:43:16 +0200
Subject: [PATCH 3/3] [core] draggable shortcutlinks

---
 src/components/navigation/ShortcutLink.vue | 14 +++---
 src/layouts/MainLayout.vue                 | 52 +++++++++++-----------
 src/pages/Login.vue                        | 14 ++++--
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/components/navigation/ShortcutLink.vue b/src/components/navigation/ShortcutLink.vue
index 79f35f1..f8ec670 100644
--- a/src/components/navigation/ShortcutLink.vue
+++ b/src/components/navigation/ShortcutLink.vue
@@ -1,7 +1,7 @@
 <template>
   <q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" round>
-    <q-menu v-if='context' context-menu>
-      <q-btn v-close-popup label='Verknüpfung entfernen' @click='deleteShortcut'/>
+    <q-menu v-if="context" context-menu>
+      <q-btn v-close-popup label="Verknüpfung entfernen" @click="deleteShortcut" />
     </q-menu>
   </q-btn>
 </template>
@@ -21,17 +21,17 @@ export default defineComponent({
     context: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   emits: {
-    deleteShortcut: (val: FG_Plugin.MenuLink| FG_Plugin.Shortcut) => val.link
+    deleteShortcut: (val: FG_Plugin.MenuLink | FG_Plugin.Shortcut) => val.link,
   },
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
     function deleteShortcut() {
-      emit('deleteShortcut', props.shortcut)
+      emit('deleteShortcut', props.shortcut);
     }
-    return { isGranted, deleteShortcut};
+    return { isGranted, deleteShortcut };
   },
 });
 </script>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index f6ec065..a888aa6 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -14,8 +14,10 @@
         </q-toolbar-title>
 
         <!-- Hier kommen die Shortlinks hin -->
-        <q-btn icon="mdi-message-bulleted" flat dense
-          ><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
+        <q-btn icon="mdi-message-bulleted" flat dense round>
+          <q-badge color="negative" floating>
+            {{ notifications.length }}
+          </q-badge>
           <q-menu style="max-height: 400px; overflow: auto">
             <q-btn
               v-if="useNative && noPermission"
@@ -33,18 +35,11 @@
             <div v-else class="q-pa-sm">Keine neuen Benachrichtigungen</div>
           </q-menu>
         </q-btn>
-        <!--<shortcut-link
-          v-for="(shortcut, index) in shortcuts"
-          :key="'shortcut' + index"
-          :shortcut="shortcut"
-        />-->
-        <shortcut-link
-          v-for="(shortcut, index) in shortCuts"
-          :key="'shortcut' + index"
-          :shortcut="shortcut"
-          context
-          @delete-shortcut="deleteShortcut"
-        />
+        <drag v-model="shortCuts" item-key="link" ghost-class="ghost">
+          <template #item="{ element }">
+            <shortcut-link :shortcut="element" context @delete-shortcut="deleteShortcut" />
+          </template>
+        </drag>
         <q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
       </q-toolbar>
     </q-header>
@@ -64,13 +59,6 @@
           :entry="entry"
           @add-short-cut="addShortcut"
         />
-        <!--<q-separator />
-        Plugin functions
-        <essential-link
-          v-for="(entry, index) in subLinks"
-          :key="'childPlugin' + index"
-          :entry="entry"
-        />-->
       </q-list>
       <q-separator />
       <essential-link
@@ -89,13 +77,23 @@
 import EssentialLink from 'src/components/navigation/EssentialLink.vue';
 import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
 import Notification from 'src/components/Notification.vue';
-import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue';
+import {
+  defineComponent,
+  ref,
+  inject,
+  computed,
+  onBeforeMount,
+  onBeforeUnmount,
+  ComponentPublicInstance,
+} from 'vue';
 import { useMainStore } from 'src/stores';
 import { FG_Plugin } from 'src/plugins';
 import { useRouter } from 'vue-router';
 import { Screen } from 'quasar';
 import config from 'src/config';
 import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
+import draggable from 'vuedraggable';
+const drag: ComponentPublicInstance = <ComponentPublicInstance>draggable;
 const essentials: FG_Plugin.MenuLink[] = [
   {
     title: 'Über Flaschengeist',
@@ -106,7 +104,7 @@ const essentials: FG_Plugin.MenuLink[] = [
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification },
+  components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification, drag },
   setup() {
     const router = useRouter();
     const mainStore = useMainStore();
@@ -171,8 +169,8 @@ export default defineComponent({
     const shortCuts = computed({
       get: () => mainStore.shortcuts,
       set: (val: Array<FG_Plugin.MenuLink>) => {
-        console.log('hier bin ich', val);
         mainStore.shortcuts = val;
+        void mainStore.setShortcuts();
       },
     });
 
@@ -185,7 +183,6 @@ export default defineComponent({
     }
 
     function deleteShortcut(val: FG_Plugin.MenuLink) {
-      console.log('deleteShortcut');
       const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
       if (idx > -1) {
         shortCuts.value.splice(idx, 1);
@@ -212,3 +209,8 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped lang="sass">
+.ghost
+  opacity: 0.5
+  background: $accent
+</style>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 68bde36..6ebd442 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -36,9 +36,15 @@
         </q-form>
       </q-card-section>
       <div class="row justify-end">
-        <q-btn v-if='$q.platform.is.cordova || $q.platform.is.electron' flat round icon="mdi-menu-down"  @click="openServerSettings" />
+        <q-btn
+          v-if="$q.platform.is.cordova || $q.platform.is.electron"
+          flat
+          round
+          icon="mdi-menu-down"
+          @click="openServerSettings"
+        />
       </div>
-      <q-slide-transition v-if='$q.platform.is.cordova || $q.platform.is.electron'>
+      <q-slide-transition v-if="$q.platform.is.cordova || $q.platform.is.electron">
         <div v-show="visible">
           <q-separator />
           <q-card-section>
@@ -78,7 +84,7 @@ export default defineComponent({
     const password = ref('');
     const server = ref<string | undefined>(api.defaults.baseURL);
     const visible = ref(false);
-    const $q = useQuasar()
+    const $q = useQuasar();
 
     function openServerSettings() {
       visible.value = !visible.value;
@@ -152,7 +158,7 @@ export default defineComponent({
       server,
       userid,
       visible,
-      $q
+      $q,
     };
   },
 });