add filter so user can not change to admin if the have the right to change user rights

src/components/UserEditAllDialog.vue

@@ -30,6 +30,9 @@
             class="col-5 required"
             :label="$t('role')"
             filled
+            option-label="role"
+            option-value="role"
+            emit-value
             :options="props.roles"
             :rules="[(val) => !!val || $t('roleIsRequired')]"
             v-model="role"

src/pages/UserSettings.vue

@@ -11,8 +11,15 @@
         align="justify"
         narrow-indicator
       >
-        <q-tab name="users" no-caps :label="$t('users')" />
-        <q-tab name="roles" no-caps :label="$t('roles')" />
+        <q-tab name="users" icon="people" no-caps :label="$t('users')" />
+        <q-tab name="roles" icon="rule" no-caps :label="$t('roles')" />
+        <q-tab
+          v-if="user?.user?.role.role.includes('admin')"
+          name="workspaces"
+          icon="dashboard"
+          no-caps
+          :label="$t('workspaces')"
+        />
       </q-tabs>
       <q-separator />
 
@@ -23,16 +30,24 @@
         <q-tab-panel name="roles" style="padding: 0px">
           <RoleTable />
         </q-tab-panel>
+        <q-tab-panel name="workspaces" style="padding: 0px">
+          <RoleTable />
+        </q-tab-panel>
       </q-tab-panels>
     </q-card>
   </div>
+  {{ user?.user?.role }}
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import UserTable from 'src/vueLib/tables/users/UserTable.vue';
 import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
 import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import type { UserState } from 'src/vueLib/models/user';
 
 const tab = ref('users');
+const user = ref<UserState>();
+onMounted(() => (user.value = useUserStore()));
 </script>

src/vueLib/models/users.ts

@@ -6,6 +6,7 @@ export interface User {
   user: string;
   email: string;
   role?: Role;
+  roleId?: number;
   expiration?: string;
   password?: string;
   newPassword?: string;

src/vueLib/tables/users/UserTable.vue

@@ -148,7 +148,7 @@
     query-id
     v-on:update="(val) => updateUser(val)"
   ></EditOneDialog>
-  <EditAllDialog ref="editAllDialog" :roles="localRoles" v-on:update="updateUsers"></EditAllDialog>
+  <EditAllDialog ref="editAllDialog" :roles="roles" v-on:update="updateUsers"></EditAllDialog>
   <OkDialog
     ref="okDialog"
     :dialog-label="$t('delete')"
@@ -184,7 +184,10 @@ const editAllDialog = ref();
 const okDialog = ref();
 const deleteText = ref('');
 const localRoles = computed(() => {
-  return roles.value.map((role) => role.role);
+  return roles.value.filter((role) => {
+    if (user.user?.role.role.includes('admin') || !user.user?.role.role.includes('admin'))
+      return role;
+  });
 });
 const selectOption = ref(false);
 const selected = ref<Users>([]);
@@ -272,6 +275,9 @@ function removeUser(...removeUsers: Users) {
 
 // update role select
 function updateUser(user: User) {
+  if (user.role?.id) {
+    user.roleId = user.role?.id;
+  }
   appApi
     .post('/users/update', user)
     .then(() => NotifyResponse(i18n.global.t('userUpdated')))