Role management on new Admin UI. In development.

Author: riclolsen

src/AdminUI/src/components/AdminPage.vue

@@ -2,41 +2,60 @@
   <v-container fluid class="admin-page">
     <v-card class="fill-height d-flex flex-column">
       <v-tabs v-model="activeTab" color="primary" align-tabs="center">
-        <v-tab :value="1">{{ $t('admin.tabs.userManagement') }}</v-tab>
-        <v-tab :value="2">{{ $t('admin.tabs.rolesManagement') }}</v-tab>
+        <v-tab :value="1" @click="fetchUsersAndRoles">{{
+          $t('admin.tabs.userManagement') }}</v-tab>
+        <v-tab :value="2" @click="fetchRoles">{{ $t('admin.tabs.rolesManagement') }}</v-tab>
         <v-tab :value="3">{{ $t('admin.tabs.systemSettings') }}</v-tab>
         <v-tab :value="4">{{ $t('admin.tabs.logs') }}</v-tab>
       </v-tabs>
 
       <v-card-text>
         <v-window v-model="activeTab">
           <v-window-item :value="1">
-            <user-management-tab />
+            <user-management-tab ref="userManagementTabRef" />
           </v-window-item>
 
           <v-window-item :value="2">
-            <roles-management-tab />
+            <roles-management-tab ref="rolesManagementTabRef" />
           </v-window-item>
 
           <v-window-item :value="3">
-            <system-settings-tab />
+            <system-settings-tab ref="systemSettingsTabRef" />
           </v-window-item>
 
           <v-window-item :value="4">
-            <logs-tab />
+            <logs-tab ref="logsTab" />
           </v-window-item>
         </v-window>
       </v-card-text>
     </v-card>
   </v-container>
 </template>
 
+
 <script setup>
-import { ref } from 'vue';
 import UserManagementTab from './UserManagementTab.vue';
 import RolesManagementTab from './RolesManagementTab.vue';
 import SystemSettingsTab from './SystemSettingsTab.vue';
 import LogsTab from './LogsTab.vue';
+import { ref } from 'vue';
+
+const userManagementTabRef = ref(null);
+const rolesManagementTabRef = ref(null);
+const systemSettingsTabRef = ref(null);
+const logsTab = ref(null);
+
+const fetchUsersAndRoles = () => {
+  if (userManagementTabRef?.value?.fetchUsers)
+    userManagementTabRef.value.fetchUsers();
+  if (userManagementTabRef?.value?.fetchRoles)
+    userManagementTabRef.value.fetchRoles();
+}
+
+const fetchRoles = () => {
+  if (rolesManagementTabRef?.value?.fetchRoles)
+    rolesManagementTabRef.value.fetchRoles();
+}
 
 const activeTab = ref(1);
 </script>
@@ -46,4 +65,4 @@ const activeTab = ref(1);
   padding-top: 2rem;
   padding-bottom: 2rem;
 }
-</style>
+</style>

src/AdminUI/src/components/UserManagementTab.vue

@@ -240,10 +240,10 @@ const updateUser = async (user) => {
   if (user.value) user = user.value;
   roleChange(user);
   const userDup = Object.assign({}, user);
-  delete userDup["id"];
-  delete userDup["rolesText"];
-  delete userDup["roles"];
-  delete userDup["__v"];
+  if (userDup.id) delete userDup.id;
+  if (userDup.rolesText) delete userDup.rolesText;
+  if (userDup.roles) delete userDup.roles;
+  if (userDup.__v) delete userDup.__v;
   if ("password" in userDup)
     if (userDup.password === "" || userDup.password === null)
       delete userDup["password"];
@@ -352,4 +352,8 @@ const createUser = async () => {
     })
     .catch((err) => { error.value = true; console.warn(err); });
 }
+
+defineExpose({ fetchUsers, fetchRoles })
+
 </script>
+