chnage role table so own user can not change his own rules

src/vueLib/tables/roles/RoleTable.ts

@@ -68,7 +68,11 @@ export function useRoleTable() {
       .get('/login/me')
       .then((resp) => {
         userStore
-          .setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role })
+          .setUser({
+            id: resp.data.id,
+            user: resp.data.user,
+            role: { role: resp.data.role, permissions: [] },
+          })
           .catch((err) => NotifyResponse(err, 'error'));
         login.refresh().catch((err) => NotifyResponse(err, 'error'));
       })

src/vueLib/tables/roles/RoleTable.vue

@@ -23,17 +23,11 @@
   >
     <template v-slot:top-left>
       <q-btn-group push flat style="color: grey">
-        <q-btn
+        <q-btn v-if="writePermisssion" dense flat icon="add" @click="openAllValueDialog(null)">
-          v-if="user.isPermittedTo('userSettings', 'write')"
-          dense
-          flat
-          icon="add"
-          @click="openAllValueDialog(null)"
-        >
           <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
         </q-btn>
         <q-btn
-          v-if="user.isPermittedTo('userSettings', 'write')"
+          v-if="writePermisssion"
           dense
           flat
           style="color: grey"
@@ -72,13 +66,9 @@
       <q-td
         :props="props"
         :disable="!autorized(props.row)"
-        :style="
+        :style="autorized(props.row) && writePermisssion ? 'cursor: pointer' : ''"
-          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-            ? 'cursor: pointer'
-            : ''
-        "
         @click="
-          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+          autorized(props.row) && writePermisssion
             ? openSingleValueDialog(props.col.label, props.col.name, props.row)
             : ''
         "
@@ -89,19 +79,18 @@
     <template v-slot:body-cell-permissions="props">
       <q-td :props="props">
         <q-btn
-          :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
+          :disable="
+            !autorized(props.row) || !writePermisssion || user.user?.role.role === props.row.role
+          "
           flat
           dense
           icon="rule"
           :color="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            autorized(props.row) && writePermisssion && user.user?.role.role !== props.row.role
               ? 'secondary'
               : 'grey'
           "
-          @click="
+          @click="writePermisssion && openAllValueDialog(props.row, 'permissions')"
-            user.isPermittedTo('userSettings', 'write') &&
-            openAllValueDialog(props.row, 'permissions')
-          "
         >
           <q-tooltip> {{ $t('permissions') }} </q-tooltip>
         </q-btn>
@@ -145,7 +134,7 @@
 
 <script setup lang="ts">
 import { appApi } from 'src/boot/axios';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import type { Roles, Role } from 'src/vueLib/models/roles';
 import EditOneDialog from 'src/components/EditOneDialog.vue';
 import EditAllDialog from 'src/components/RoleEditAllDialog.vue';
@@ -158,6 +147,8 @@ import { useUserStore } from 'src/vueLib/login/userStore';
 import SearchableInput from '../components/SearchableInput.vue';
 
 const { NotifyResponse } = useNotify();
+const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+
 const editOneDialog = ref();
 const editAllDialog = ref();
 const okDialog = ref();
@@ -169,7 +160,7 @@ const currentUser = ref();
 const filter = ref('');
 const user = useUserStore();
 
-const { roles, pagination, loading, columns, updateRoles } = useRoleTable();
+const writePermisssion = computed(() => user.isPermittedTo('userSettings', 'write'));
 
 //load on mounting page
 onMounted(() => {
@@ -234,10 +225,6 @@ function removeRole(...removeRoles: Roles) {
 </script>
 
 <style>
-.blink-yellow {
-  animation: blink-yellow 1.5s step-start 6 !important;
-}
-
 .bigger-table-text .q-table__middle td {
   font-size: 14px;
 }