Retrieve users when using the UserSelector

src/plugins/user/components/UserSelector.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from '@vue/composition-api';
+import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
 
@@ -25,6 +25,13 @@ export default defineComponent({
   props: ['user'],
   setup(props: Props, { root, emit }) {
     const store = <Store<StateInterface>>root.$store;
+
+    onBeforeMount(() => {
+      store.dispatch('user/getUsers').catch((error) => {
+        console.error(error);
+      });
+    });
+
     const users = computed(() => store.state.user.users);
     const updated = (value: FG.User) => {
       emit('update:user', value);
@@ -32,8 +39,8 @@ export default defineComponent({
 
     return {
       updated,
-      users
+      users,
     };
-  }
+  },
 });
 </script>

src/plugins/user/pages/AdminSettings.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
+    <q-tabs
+      v-model="tab"
+      v-if="$q.screen.gt.sm"
+    >
       <q-tab
         v-for="(tabindex, index) in tabs"
         :key="'tab' + index"
@@ -8,8 +11,16 @@
         :label="tabindex.label"
       />
     </q-tabs>
-    <div class="fit row justify-end" v-else>
-      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" />
+    <div
+      class="fit row justify-end"
+      v-else
+    >
+      <q-btn
+        flat
+        round
+        icon="mdi-menu"
+        @click="showDrawer = !showDrawer"
+      />
     </div>
     <q-drawer
       side="right"
@@ -54,12 +65,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeMount,
-  ref
-} from '@vue/composition-api';
+import { computed, defineComponent, ref } from '@vue/composition-api';
 import RoleSettings from '../components/settings/RoleSettings.vue';
 import UpdateUser from '../components/UpdateUser.vue';
 import NewUser from '../components/NewUser.vue';
@@ -75,10 +81,6 @@ export default defineComponent({
   setup(_, { root }) {
     const store = <Store<StateInterface>>root.$store;
 
-    onBeforeMount(() => {
-      store.dispatch('user/getUsers').catch(error => console.warn(error));
-    });
-
     const canEditRoles = computed(() =>
       hasPermission(PERMISSIONS.ROLES_EDIT, store)
     );
@@ -91,7 +93,7 @@ export default defineComponent({
     const tabs: Tab[] = [
       { name: 'user', label: 'Mitglieder' },
       { name: 'newUser', label: 'Neues Mitglied' },
-      { name: 'roles', label: 'Rollen' }
+      { name: 'roles', label: 'Rollen' },
     ];
 
     const drawer = ref<boolean>(false);
@@ -102,7 +104,7 @@ export default defineComponent({
       },
       set: (val: boolean) => {
         drawer.value = val;
-      }
+      },
     });
 
     const tab = ref<string>('user');
@@ -111,8 +113,8 @@ export default defineComponent({
       canEditRoles,
       showDrawer,
       tab,
-      tabs
+      tabs,
     };
-  }
+  },
 });
 </script>