From 19f91d2abf62765ec59223e82d50b8bd7057b0ed Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Fri, 13 Nov 2020 04:01:53 +0100
Subject: [PATCH] Allow multiple widgets and minor improvements

* Allow mulitple widgets for plugins, allow setting required permissions
* Split datetime formatter code for reuse
---
 .vscode/settings.json          |  1 -
 src/boot/filter.ts             | 20 +-------------------
 src/boot/plugins.ts            | 11 +++++------
 src/pages/Dashboard.vue        | 15 +++++++++------
 src/plugins.d.ts               | 18 ++++++++++--------
 src/plugins/balance/plugin.ts  | 12 ++++++++----
 src/plugins/schedule/plugin.ts | 12 ++++++++----
 src/plugins/user/plugin.ts     | 12 ++++++++----
 src/utils/datetime.ts          | 18 ++++++++++++++++++
 9 files changed, 67 insertions(+), 52 deletions(-)
 create mode 100644 src/utils/datetime.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8a8acde..43c2ab6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,4 @@
 {
-  "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
diff --git a/src/boot/filter.ts b/src/boot/filter.ts
index 8c4d81b..0d97566 100644
--- a/src/boot/filter.ts
+++ b/src/boot/filter.ts
@@ -1,25 +1,7 @@
 import { boot } from 'quasar/wrappers';
+import { formatDateTime } from 'src/utils/datetime';
 
 export default boot(({ Vue }) => {
-  function formatDateTime(
-    date: Date,
-    useDate = true,
-    useTime = false,
-    useSeconds = false,
-    useWeekday = false
-  ) {
-    const dateTimeFormat = new Intl.DateTimeFormat([], {
-      year: useDate ? 'numeric' : undefined,
-      month: useDate ? '2-digit' : undefined,
-      day: useDate ? '2-digit' : undefined,
-      weekday: useWeekday ? 'long' : undefined,
-      hour: useTime ? '2-digit' : undefined,
-      minute: useTime ? '2-digit' : undefined,
-      second: useTime && useSeconds ? '2-digit' : undefined
-    });
-    return dateTimeFormat.format(date);
-  }
-
   Vue.filter('date', formatDateTime);
   Vue.filter('time', (date: Date, seconds = false) =>
     formatDateTime(date, false, true, seconds)
diff --git a/src/boot/plugins.ts b/src/boot/plugins.ts
index 1c6b647..3b3f2dc 100644
--- a/src/boot/plugins.ts
+++ b/src/boot/plugins.ts
@@ -23,9 +23,7 @@ function combineRoutes(
 ): RouteConfig[] {
   target.forEach(target => {
     if (target.path === mainPath) {
-      console.log('target', target.path);
       source.forEach((sourceMainConfig: FG_Plugin.PluginRouteConfig) => {
-        console.log('sourceMainconfig', sourceMainConfig);
         const targetMainConfig = target.children?.find(
           (targetMainConfig: RouteConfig) => {
             return sourceMainConfig.path === targetMainConfig.path;
@@ -164,12 +162,13 @@ function loadPlugin(
           plugin.outRoutes
         );
       }
-      if (plugin.widget) {
-        loadedPlugins.widgets.push(plugin.widget);
+      if (plugin.widgets.length > 0) {
+        plugin.widgets.forEach(
+          widget => (widget.name = plugin.name + '_' + widget.name)
+        );
+        Array.prototype.push.apply(loadedPlugins.widgets, plugin.widgets);
       }
       if (plugin.store) {
-        console.log(plugin.store);
-        console.log(plugin.store.keys());
         plugin.store.forEach((store_plugin, store_namespace) => {
           store.registerModule(store_namespace, store_plugin);
         });
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 1bc4489..0b27bbe 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -16,21 +16,24 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref } from '@vue/composition-api';
+import { hasPermissions } from 'src/components/permission';
 import { AsyncComponentPromise } from 'vue/types/options';
+
 export default defineComponent({
   name: 'Dashboard',
   setup(_, { root }) {
     const widgets = ref<Array<AsyncComponentPromise>>([]);
+
     onMounted(() => {
-      console.log('mounted!');
-      root.$flaschengeistPlugins.widgets.forEach(widget =>
-        widgets.value.push(widget.widget)
-      );
+      root.$flaschengeistPlugins.widgets.forEach((widget) => {
+        if (hasPermissions(widget.permissions, root.$store))
+          widgets.value.push(widget.widget);
+      });
     });
 
     return {
-      widgets
+      widgets,
     };
-  }
+  },
 });
 </script>
diff --git a/src/plugins.d.ts b/src/plugins.d.ts
index 33f3079..a446976 100644
--- a/src/plugins.d.ts
+++ b/src/plugins.d.ts
@@ -18,14 +18,21 @@ declare namespace FG_Plugin {
     meta?: { permissions?: string[] };
   }
 
+  interface Widget {
+    name: string;
+    priority: number;
+    permissions: FG.Permission[];
+    widget: AsyncComponentPromise;
+  }
+
   interface Plugin {
     name: string;
+    version: string;
+    widgets: Widget[];
+    requiredModules: string[];
     mainRoutes?: PluginRouteConfig[];
     outRoutes?: PluginRouteConfig[];
     store?: Map<string, Module<any, StateInterface>>;
-    widget?: Widget;
-    requiredModules: string[];
-    version: string;
   }
 
   interface PluginMainLink extends PluginChildLink {
@@ -45,11 +52,6 @@ declare namespace FG_Plugin {
     version: string;
   }
 
-  interface Widget {
-    widget: AsyncComponentPromise;
-    priority: number;
-  }
-
   interface LoadedPlugins {
     plugins: LoadedPlugin[];
     routes: RouteConfig[];
diff --git a/src/plugins/balance/plugin.ts b/src/plugins/balance/plugin.ts
index b90d338..31a0f2d 100644
--- a/src/plugins/balance/plugin.ts
+++ b/src/plugins/balance/plugin.ts
@@ -12,10 +12,14 @@ const plugin: FG_Plugin.Plugin = {
   store: new Map<string, Module<BalanceInterface, StateInterface>>([
     ['balance', balance]
   ]),
-  widget: {
-    widget: () => import('./components/Widget.vue'),
-    priority: 0
-  }
+  widgets: [
+    {
+      priority: 0,
+      name: 'current',
+      permissions: ['balance_show'],
+      widget: () => import('./components/Widget.vue')
+    }
+  ]
 };
 
 export default plugin;
diff --git a/src/plugins/schedule/plugin.ts b/src/plugins/schedule/plugin.ts
index 786a74e..124ee48 100644
--- a/src/plugins/schedule/plugin.ts
+++ b/src/plugins/schedule/plugin.ts
@@ -4,10 +4,14 @@ const plugin: FG_Plugin.Plugin = {
   name: 'Schedule',
   requiredModules: [],
   version: '0.0.1',
-  widget: {
-    widget: () => import('./components/Widget.vue'),
-    priority: 0
-  }
+  widgets: [
+    {
+      priority: 0,
+      name: 'stats',
+      permissions: [],
+      widget: () => import('./components/Widget.vue')
+    }
+  ]
 };
 
 export default plugin;
diff --git a/src/plugins/user/plugin.ts b/src/plugins/user/plugin.ts
index 9d03f5f..d6767a8 100644
--- a/src/plugins/user/plugin.ts
+++ b/src/plugins/user/plugin.ts
@@ -14,10 +14,14 @@ const plugin: FG_Plugin.Plugin = {
     ['user', userStore],
     ['session', sessionsStore]
   ]),
-  widget: {
-    priority: 1,
-    widget: () => import('./components/Widget.vue')
-  }
+  widgets: [
+    {
+      priority: 1,
+      name: 'greeting',
+      permissions: [],
+      widget: () => import('./components/Widget.vue')
+    }
+  ]
 };
 
 export default plugin;
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
new file mode 100644
index 0000000..32789d5
--- /dev/null
+++ b/src/utils/datetime.ts
@@ -0,0 +1,18 @@
+export function formatDateTime(
+  date: Date,
+  useDate = true,
+  useTime = false,
+  useSeconds = false,
+  useWeekday = false
+) {
+  const dateTimeFormat = new Intl.DateTimeFormat([], {
+    year: useDate ? 'numeric' : undefined,
+    month: useDate ? '2-digit' : undefined,
+    day: useDate ? '2-digit' : undefined,
+    weekday: useWeekday ? 'long' : undefined,
+    hour: useTime ? '2-digit' : undefined,
+    minute: useTime ? '2-digit' : undefined,
+    second: useTime && useSeconds ? '2-digit' : undefined
+  });
+  return dateTimeFormat.format(date);
+}