[feat] add displaymode setting

user can choose, how users will be shown

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>

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;

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',
+}

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
+      <user-session v-for="(session, index) in sessions" :key="'session' + index" v-model="sessions[index]"
-        v-for="(session, index) in sessions"
+        @delete="removeSession(session)" />
-        :key="'session' + index"
+      <q-btn label="List Widgets" @click="listWidgets" />
-        v-model="sessions[index]"
-        @delete="removeSession(session)"
-      />
     </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,
     };
   },
 });