cancel changes

sometimes resets new entry

src/components/admin/Permission.vue

@@ -66,8 +66,8 @@
       </div>
     </div>
     <div class="flex flex-row gap-2 self-end pt-4">
-      <button primary-outline class="!w-fit" @click="$emit('abortPermissions')">abbrechen</button>
-      <button primary class="!w-fit" @click="$emit('savePermissions', permissionUpdate)">speichern</button>
+      <button primary-outline class="!w-fit" @click="reset" :disabled="!detect_change">verwerfen</button>
+      <button primary class="!w-fit" @click="submit" :disabled="status != null">speichern</button>
       <Spinner v-if="status == 'loading'" class="my-auto" />
       <SuccessCheckmark v-else-if="status?.status == 'success'" />
       <FailureXMark v-else-if="status?.status == 'failed'" />
@@ -111,13 +111,14 @@ export default defineComponent({
       default: null,
     },
   },
-  emits: ["savePermissions", "abortPermissions"],
+  emits: ["savePermissions", "resetStatus"],
   data() {
     return {
       isAdmin: false,
       sections: [] as Array<PermissionSection>,
       permissionStructure: {} as SectionsAndModulesObject,
       permissionUpdate: {} as PermissionObject,
+      detect_change: false as boolean,
     };
   },
   computed: {
@@ -132,11 +133,17 @@ export default defineComponent({
   },
   methods: {
     toggleAdmin(e: Event) {
+      this.detect_change = true;
+      this.$emit("resetStatus");
+
       const target = e.target as HTMLInputElement;
       this.isAdmin = target.checked ?? false;
       this.permissionUpdate.admin = this.isAdmin;
     },
     togglePermission(type: PermissionType, section: PermissionSection, modul?: PermissionModule) {
+      this.detect_change = true;
+      this.$emit("resetStatus");
+
       let permissions = [] as Array<PermissionType> | "*";
       if (!modul) {
         permissions = this.permissionUpdate[section]?.all ?? [];
@@ -169,6 +176,17 @@ export default defineComponent({
         this.permissionUpdate[section][modul] = permissions;
       }
     },
+    reset() {
+      this.detect_change = false;
+
+      this.permissionUpdate = _cloneDeep(this.permissions);
+      this.isAdmin = this.permissions.admin ?? false;
+    },
+    submit() {
+      this.$emit("savePermissions", this.permissionUpdate);
+
+      this.detect_change = false;
+    },
   },
 });
 </script>

src/components/admin/user/role/RoleListItem.vue

@@ -4,7 +4,7 @@
       <p>{{ role.role }} <small v-if="role.permissions?.isAdmin">(Admin)</small></p>
       <div class="flex flex-row">
         <RouterLink
-          v-if="can('update', 'user', 'role')"
+          v-if="can('admin', 'user', 'role')"
           :to="{ name: 'admin-user-role-permission', params: { id: role.id } }"
         >
           <WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />

src/components/admin/user/user/UserListItem.vue

@@ -10,7 +10,7 @@
           <UserGroupIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
         </RouterLink>
         <RouterLink
-          v-if="can('update', 'user', 'user')"
+          v-if="can('admin', 'user') && false"
           :to="{ name: 'admin-user-user-permission', params: { id: user.id } }"
         >
           <WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />