[feat] sort nam eby displaymode setting

src/components/UserSelector.vue

@@ -1,21 +1,12 @@
 <template>
-  <q-select
+  <q-select v-model="selected" filled :label="label" :options="users" :option-label="showName" option-value="userid"
-    v-model="selected"
+    map-options use-input input-debounce="0" @filter="filterFn" />
-    filled
-    :label="label"
-    :options="users"
-    option-label="display_name"
-    option-value="userid"
-    map-options
-    use-input
-    input-debounce="0"
-    @filter="filterFn"
-  />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, onBeforeMount, ref } from 'vue';
 import { useUserStore } from '@flaschengeist/api';
+import { DisplayNameMode } from '../models';
 
 export default defineComponent({
   name: 'UserSelector',
@@ -29,6 +20,7 @@ export default defineComponent({
 
     onBeforeMount(() => {
       void userStore.getUsers(false);
+      void userStore.getDisplayNameModeSetting(true);
     });
 
     const users = computed(() =>
@@ -66,11 +58,26 @@ export default defineComponent({
       get: () => props.modelValue,
       set: (value: FG.User | undefined) => (value ? emit('update:modelValue', value) : undefined),
     });
+    function showName(user: FG.User) {
+      switch (userStore.userSettings.display_name) {
+        case DisplayNameMode.DISPLAYNAME:
+          return user.display_name;
+        case DisplayNameMode.FIRSTNAME:
+          return user.firstname;
+        case DisplayNameMode.LASTNAME:
+          return user.lastname;
+        case DisplayNameMode.FIRSTNAME_LASTNAME:
+          return `${user.firstname} ${user.lastname}`;
+        case DisplayNameMode.LASTNAME_FIRSTNAME:
+          return `${user.lastname}, ${user.firstname}`;
+      }
+    }
 
     return {
       selected,
       users,
       filterFn,
+      showName,
     };
   },
 });

src/index.ts

@@ -1,6 +1,7 @@
 import { FG_Plugin } from '@flaschengeist/types';
 import { defineAsyncComponent } from 'vue';
 import routes from './routes';
+import { DisplayNameMode } from './models';
 
 const plugin: FG_Plugin.Plugin = {
   id: 'users',
@@ -27,3 +28,4 @@ const plugin: FG_Plugin.Plugin = {
 };
 
 export default plugin;
+export { DisplayNameMode };