From cf82684ce4ed9f8fe63b45512aafbec08705fdf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Tue, 8 Oct 2024 14:02:52 +0200
Subject: [PATCH] [feat] add displaymode setting

user can choose, how users will be shown
---
 src/components/SettingWidget.vue | 59 ++++++++++++++++++++++++++++++++
 src/index.ts                     |  8 +++++
 src/models.ts                    |  9 +++++
 src/pages/Settings.vue           | 29 +++++++++++-----
 4 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SettingWidget.vue

diff --git a/src/components/SettingWidget.vue b/src/components/SettingWidget.vue
new file mode 100644
index 0000000..857ecf9
--- /dev/null
+++ b/src/components/SettingWidget.vue
@@ -0,0 +1,59 @@
+<template>
+  <q-card>
+    <q-card-section class="text-h6"> Einstellungen Benutzer </q-card-section>
+    <q-card-section>
+      <q-select v-model="displayNameMode" :options="options" label="Anzeige des Namens" emit-value map-options
+        input-debounce="0" filled />
+    </q-card-section>
+  </q-card>
+</template>
+<script lang="ts">
+import { defineComponent, onBeforeMount, computed } from 'vue';
+import { useUserStore } from '@flaschengeist/api';
+import { DisplayNameMode } from '../models';
+export default defineComponent({
+  name: 'SettingWidget',
+  setup() {
+    const store = useUserStore();
+    onBeforeMount(() => {
+      void store.getDisplayNameModeSetting(true);
+    });
+
+    const displayNameMode = computed({
+      get: () => store.userSettings.display_name || DisplayNameMode.DISPLAYNAME,
+      set: (val) => {
+        console.log('set', val);
+        void store.setDisplayNameModeSetting(val);
+      },
+    });
+
+    const options = [
+      {
+        label: 'Anzeigename',
+        value: DisplayNameMode.DISPLAYNAME,
+      },
+      {
+        label: 'Vorname',
+        value: DisplayNameMode.FIRSTNAME,
+      },
+      {
+        label: 'Nachname',
+        value: DisplayNameMode.LASTNAME,
+      },
+      {
+        label: 'Vor- und Nachname',
+        value: DisplayNameMode.FIRSTNAME_LASTNAME,
+      },
+      {
+        label: 'Nachname, Vorname',
+        value: DisplayNameMode.LASTNAME_FIRSTNAME,
+      },
+    ];
+
+    return {
+      displayNameMode,
+      options,
+    };
+  },
+});
+</script>
diff --git a/src/index.ts b/src/index.ts
index 1d85f99..414d774 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,6 +16,14 @@ const plugin: FG_Plugin.Plugin = {
       widget: defineAsyncComponent(() => import('./components/Widget.vue')),
     },
   ],
+  settingWidgets: [
+    {
+      priority: 1,
+      name: 'userSettings',
+      permissions: [],
+      widget: defineAsyncComponent(() => import('./components/SettingWidget.vue')),
+    },
+  ],
 };
 
 export default plugin;
diff --git a/src/models.ts b/src/models.ts
index b0d9a69..013ff4d 100644
--- a/src/models.ts
+++ b/src/models.ts
@@ -12,3 +12,12 @@ export interface LoginResponse {
 export interface CurrentUserResponse extends FG.User {
   permissions: FG.Permission[];
 }
+
+export enum DisplayNameMode {
+  FIRSTNAME = 'firstname',
+  LASTNAME = 'lastname',
+  FULLNAME = 'fullname',
+  DISPLAYNAME = 'display_name',
+  FIRSTNAME_LASTNAME = 'firstname_lastname',
+  LASTNAME_FIRSTNAME = 'lastname_firstname',
+}
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 22b0c5c..8030866 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -7,22 +7,23 @@
         </q-card-section>
         <MainUserSettings :user="currentUser" @update:user="updateUser" />
       </q-card>
+      <div v-for="(item, index) in widgets" :key="index" class="full-height col-12">
+        <component :is="item.widget" />
+      </div>
       <div class="col-12 text-left text-h6">Aktive Sessions:</div>
-      <user-session
-        v-for="(session, index) in sessions"
-        :key="'session' + index"
-        v-model="sessions[index]"
-        @delete="removeSession(session)"
-      />
+      <user-session v-for="(session, index) in sessions" :key="'session' + index" v-model="sessions[index]"
+        @delete="removeSession(session)" />
+      <q-btn label="List Widgets" @click="listWidgets" />
     </q-page>
   </div>
 </template>
 
 <script lang="ts">
-import { useMainStore, useUserStore, useSessionStore } from '@flaschengeist/api';
+import { useMainStore, useUserStore, useSessionStore, hasPermissions } from '@flaschengeist/api';
 import MainUserSettings from '../components/settings/MainUserSettings.vue';
-import { defineComponent, onBeforeMount, ref } from 'vue';
+import { defineComponent, onBeforeMount, ref, computed, inject } from 'vue';
 import UserSession from '../components/settings/UserSession.vue';
+import { FG_Plugin } from '@flaschengeist/types';
 import { Notify } from 'quasar';
 
 export default defineComponent({
@@ -47,17 +48,29 @@ export default defineComponent({
         progress: true,
         actions: [{ icon: 'mdi-close', color: 'white' }],
       });
+      console.log(widgets);
     }
 
     function removeSession(s: FG.Session) {
       sessions.value = sessions.value.filter((ss) => ss.token !== s.token);
     }
 
+    const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
+    const widgets = computed(() =>
+      flaschengeist?.settingWidgets.filter((widget) => hasPermissions(widget.permissions))
+    );
+
+    function listWidgets() {
+      console.log(widgets);
+    }
+
     return {
       currentUser,
       sessions,
       updateUser,
       removeSession,
+      widgets,
+      listWidgets,
     };
   },
 });