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-outline class="!w-fit" @click="reset" :disabled="!detect_change">verwerfen</button>
-      <button primary class="!w-fit" @click="$emit('savePermissions', permissionUpdate)">speichern</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" />

src/main.css

@@ -71,7 +71,9 @@ a[button][primary-outline]:not([primary-outline="false"]) {
   @apply border-2 border-primary text-black hover:bg-primary;
 }
 
-button:disabled {
+button:disabled,
+a[button]:disabled,
+a[button].disabled {
   @apply opacity-75 pointer-events-none;
 }
 

src/stores/admin/award.ts

@@ -61,13 +61,15 @@ export const useAwardStore = defineStore("award", {
     },
     updateActiveAward(award: CreateOrUpdateAwardViewModel) {
       if (this.award == null) return;
+      let id = this.award.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/award/${this.award.id}`, {
+        .patch(`/admin/award/${id}`, {
           award: award.award,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchAwardById(id);
           this.fetchAwards();
         })
         .catch((err) => {

src/stores/admin/communicationType.ts

@@ -79,14 +79,16 @@ export const useCommunicationTypeStore = defineStore("communicationType", {
     },
     updateActiveCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
       if (this.communicationType == null) return;
+      let id = this.communicationType.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/communicationType/${this.communicationType.id}`, {
+        .patch(`/admin/communicationType/${id}`, {
           communicationType: communicationType.type,
           fields: communicationType.fields,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchCommunicationTypeById(id);
           this.fetchCommunicationTypes();
         })
         .catch((err) => {

src/stores/admin/executivePosition.ts

@@ -64,13 +64,15 @@ export const useExecutivePositionStore = defineStore("executivePosition", {
     },
     updateActiveExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
       if (this.executivePosition == null) return;
+      let id = this.executivePosition.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/executivePosition/${this.executivePosition.id}`, {
+        .patch(`/admin/executivePosition/${id}`, {
           executivePosition: executivePosition.position,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchExecutivePositionById(id);
           this.fetchExecutivePositions();
         })
         .catch((err) => {

src/stores/admin/membershipStatus.ts

@@ -64,13 +64,15 @@ export const useMembershipStatusStore = defineStore("membershipStatus", {
     },
     updateActiveMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
       if (this.membershipStatus == null) return;
+      let id = this.membershipStatus.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/membershipStatus/${this.membershipStatus.id}`, {
+        .patch(`/admin/membershipStatus/${id}`, {
           membershipStatus: membershipStatus.status,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchMembershipStatusById(id);
           this.fetchMembershipStatuss();
         })
         .catch((err) => {

src/stores/admin/qualification.ts

@@ -65,14 +65,16 @@ export const useQualificationStore = defineStore("qualification", {
     },
     updateActiveQualification(qualification: CreateOrUpdateQualificationViewModel) {
       if (this.qualification == null) return;
+      let id = this.qualification.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/qualification/${this.qualification.id}`, {
+        .patch(`/admin/qualification/${id}`, {
           qualification: qualification.qualification,
           description: qualification.description,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchQualificationById(id);
           this.fetchQualifications();
         })
         .catch((err) => {

src/stores/admin/role.ts

@@ -62,13 +62,15 @@ export const useRoleStore = defineStore("role", {
     },
     updateActiveRole(role: string) {
       if (this.role == null) return;
+      let id = this.role.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/role/${this.role.id}`, {
+        .patch(`/admin/role/${id}`, {
           role: role,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchRoleById(id);
           this.fetchRoles();
         })
         .catch((err) => {
@@ -77,13 +79,15 @@ export const useRoleStore = defineStore("role", {
     },
     updateActiveRolePermissions(permission: PermissionObject) {
       if (this.role == null) return;
+      let id = this.role.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/role/${this.role.id}/permissions`, {
+        .patch(`/admin/role/${id}/permissions`, {
           permissions: permission,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchRoleById(id);
           this.fetchRoles();
         })
         .catch((err) => {

src/stores/admin/user.ts

@@ -48,9 +48,10 @@ export const useUserStore = defineStore("user", {
     },
     updateActiveUser(user: CreateOrUpdateUserViewModel) {
       if (this.user == null) return;
+      let id = this.user.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/user/${this.user.id}`, {
+        .patch(`/admin/user/${id}`, {
           username: user.username,
           firstname: user.firstname,
           lastname: user.lastname,
@@ -58,6 +59,7 @@ export const useUserStore = defineStore("user", {
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchUserById(id);
           this.fetchUsers();
         })
         .catch((err) => {
@@ -66,13 +68,15 @@ export const useUserStore = defineStore("user", {
     },
     updateActiveUserPermissions(permission: PermissionObject) {
       if (this.user == null) return;
+      let id = this.user.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/user/${this.user.id}/permissions`, {
+        .patch(`/admin/user/${id}/permissions`, {
           permissions: permission,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchUserById(id);
           this.fetchUsers();
         })
         .catch((err) => {
@@ -81,13 +85,15 @@ export const useUserStore = defineStore("user", {
     },
     updateActiveUserRoles(roles: Array<number>) {
       if (this.user == null) return;
+      let id = this.user.id;
       this.updateStatus = "loading";
       http
-        .patch(`/admin/user/${this.user.id}/roles`, {
+        .patch(`/admin/user/${id}/roles`, {
           roleIds: roles,
         })
         .then((result) => {
           this.updateStatus = { status: "success" };
+          this.fetchUserById(id);
           this.fetchUsers();
         })
         .catch((err) => {

src/views/admin/settings/AwardEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,10 +14,12 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
         <div>
           <label for="award">Bezeichnung</label>
-          <input type="text" id="award" required :value="award?.award" />
+          <input type="text" id="award" required :value="award?.award" @change="detectChange" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -45,6 +47,11 @@ export default defineComponent({
   props: {
     id: String,
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+    };
+  },
   computed: {
     ...mapState(useAwardStore, ["award", "updateStatus", "loadingSingle"]),
   },
@@ -54,12 +61,17 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward", "resetStatus"]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerUpdate(e: any) {
       let formData = e.target.elements;
       let updateAward: CreateOrUpdateAwardViewModel = {
         award: formData.award.value,
       };
       this.updateActiveAward(updateAward);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/settings/CommunicationTypeEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,7 +14,7 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
         <div>
           <label for="communicationType">Bezeichnung</label>
-          <input type="text" id="communicationType" required :value="communicationType?.type" />
+          <input type="text" id="communicationType" required :value="communicationType?.type" @change="detectChange" />
         </div>
         <div>
           <Listbox v-model="selectedFields" multiple>
@@ -62,7 +62,9 @@
           </Listbox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="reset">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -92,16 +94,20 @@ export default defineComponent({
   props: {
     id: String,
   },
-  data() {
-    return {
-      selectedFields: [] as Array<string>,
-    };
-  },
   watch: {
+    selectedFields() {
+      this.detectChange();
+    },
     loadingSingle() {
       if (this.loadingSingle == "fetched") this.selectedFields = this.communicationType?.fields ?? [];
     },
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+      selectedFields: [] as Array<string>,
+    };
+  },
   computed: {
     ...mapState(useCommunicationTypeStore, ["communicationType", "updateStatus", "loadingSingle", "availableFields"]),
   },
@@ -117,6 +123,14 @@ export default defineComponent({
       "resetStatus",
       "fetchAvailableFields",
     ]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
+    reset() {
+      this.change_detect = false;
+      this.selectedFields = this.communicationType?.fields ?? [];
+    },
     triggerUpdate(e: any) {
       let formData = e.target.elements;
       let updateCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
@@ -124,6 +138,7 @@ export default defineComponent({
         fields: this.selectedFields,
       };
       this.updateActiveCommunicationType(updateCommunicationType);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/settings/ExecutivePositionEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,10 +14,18 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
         <div>
           <label for="executivePosition">Bezeichnung</label>
-          <input type="text" id="executivePosition" required :value="executivePosition?.position" />
+          <input
+            type="text"
+            id="executivePosition"
+            required
+            :value="executivePosition?.position"
+            @change="detectChange"
+          />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -45,6 +53,11 @@ export default defineComponent({
   props: {
     id: String,
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+    };
+  },
   computed: {
     ...mapState(useExecutivePositionStore, ["executivePosition", "updateStatus", "loadingSingle"]),
   },
@@ -58,12 +71,17 @@ export default defineComponent({
       "updateActiveExecutivePosition",
       "resetStatus",
     ]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerUpdate(e: any) {
       let formData = e.target.elements;
       let updateExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
         position: formData.executivePosition.value,
       };
       this.updateActiveExecutivePosition(updateExecutivePosition);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/settings/MembershipStatusEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,10 +14,12 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
         <div>
           <label for="membershipStatus">Bezeichnung</label>
-          <input type="text" id="membershipStatus" required :value="membershipStatus?.status" />
+          <input type="text" id="membershipStatus" required :value="membershipStatus?.status" @change="detectChange" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -45,6 +47,11 @@ export default defineComponent({
   props: {
     id: String,
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+    };
+  },
   computed: {
     ...mapState(useMembershipStatusStore, ["membershipStatus", "updateStatus", "loadingSingle"]),
   },
@@ -58,12 +65,17 @@ export default defineComponent({
       "updateActiveMembershipStatus",
       "resetStatus",
     ]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerUpdate(e: any) {
       let formData = e.target.elements;
       let updateMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
         status: formData.membershipStatus.value,
       };
       this.updateActiveMembershipStatus(updateMembershipStatus);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/settings/QualificationEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,14 +14,16 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
         <div>
           <label for="qualification">Bezeichnung</label>
-          <input type="text" id="qualification" required :value="qualification?.qualification" />
+          <input type="text" id="qualification" required :value="qualification?.qualification" @change="detectChange" />
         </div>
         <div>
           <label for="description">Beschreibung (optional)</label>
-          <input type="text" id="description" :value="qualification?.description" />
+          <input type="text" id="description" :value="qualification?.description" @change="detectChange" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -49,6 +51,11 @@ export default defineComponent({
   props: {
     id: String,
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+    };
+  },
   computed: {
     ...mapState(useQualificationStore, ["qualification", "updateStatus", "loadingSingle"]),
   },
@@ -58,6 +65,10 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification", "resetStatus"]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerUpdate(e: any) {
       let formData = e.target.elements;
       let updateQualification: CreateOrUpdateQualificationViewModel = {
@@ -65,6 +76,7 @@ export default defineComponent({
         description: formData.description.value,
       };
       this.updateActiveQualification(updateQualification);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/user/RoleEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,11 +14,13 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerRoleUpdate">
         <div>
           <label for="role">Rollenbezeichnung</label>
-          <input type="text" id="role" required :value="role?.role" />
+          <input type="text" id="role" required :value="role?.role" @change="detectChange" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+            verwerfen
+          </button>
+          <button primary type="submit" class="!w-fit" :disabled="updateStatus != null">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
           <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
@@ -44,6 +46,11 @@ export default defineComponent({
   props: {
     id: String,
   },
+  data() {
+    return {
+      change_detect: false as boolean,
+    };
+  },
   computed: {
     ...mapState(useRoleStore, ["role", "updateStatus", "loadingSingle"]),
   },
@@ -53,9 +60,14 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole", "resetStatus"]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerRoleUpdate(e: any) {
       let formData = e.target.elements;
       this.updateActiveRole(formData.role.value);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/user/RoleEditPermission.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -16,7 +16,7 @@
         :permissions="role?.permissions"
         :status="updateStatus"
         @savePermissions="triggerPermissionUpdate"
-        @abortPermissions="$router.push('../')"
+        @resetStatus="resetStatus"
       />
     </template>
   </MainTemplate>

src/views/admin/user/UserEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -14,22 +14,24 @@
       <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdateUser">
         <div>
           <label for="username">Nutzername</label>
-          <input type="text" id="username" required :value="user?.username" />
+          <input type="text" id="username" required :value="user?.username" @change="detectChange" />
         </div>
         <div>
           <label for="firstname">Vorname</label>
-          <input type="text" id="firstname" required :value="user?.firstname" />
+          <input type="text" id="firstname" required :value="user?.firstname" @change="detectChange" />
         </div>
         <div>
           <label for="lastname">Nachname</label>
-          <input type="text" id="lastname" required :value="user?.lastname" />
+          <input type="text" id="lastname" required :value="user?.lastname" @change="detectChange" />
         </div>
         <div>
           <label for="mail">Mailadresse</label>
-          <input type="email" id="mail" required :value="user?.mail" />
+          <input type="email" id="mail" required :value="user?.mail" @change="detectChange" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+            verwerfen
+          </button>
           <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
           <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
           <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
@@ -59,7 +61,7 @@ export default defineComponent({
   },
   data() {
     return {
-      localUser: null as null | UserViewModel,
+      change_detect: false as boolean,
     };
   },
   computed: {
@@ -71,6 +73,10 @@ export default defineComponent({
   },
   methods: {
     ...mapActions(useUserStore, ["fetchUserById", "updateActiveUser", "resetStatus"]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
     triggerUpdateUser(e: any) {
       let formData = e.target.elements;
       let user: CreateOrUpdateUserViewModel = {
@@ -80,6 +86,7 @@ export default defineComponent({
         mail: formData.mail.value,
       };
       this.updateActiveUser(user);
+      this.change_detect = false;
     },
   },
 });

src/views/admin/user/UserEditPermission.vue

@@ -16,7 +16,7 @@
         :permissions="user?.permissions"
         :status="updateStatus"
         @savePermissions="triggerPermissionUpdate"
-        @abortPermissions="$router.push('../')"
+        @resetStatus="resetStatus"
       />
     </template>
   </MainTemplate>

src/views/admin/user/UserEditRoles.vue

@@ -1,7 +1,7 @@
 <template>
   <MainTemplate>
     <template #headerInsert>
-      <RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
+      <RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@@ -39,7 +39,7 @@
           </div>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
+          <button primary-outline class="!w-fit" :disabled="!change_detect" @click="reset">verwerfen</button>
           <button primary class="!w-fit" :disabled="updateStatus == 'loading'" @click="triggerRolesUpdate">
             speichern
           </button>
@@ -79,6 +79,7 @@ export default defineComponent({
   },
   data() {
     return {
+      change_detect: false as boolean,
       assigned: [] as Array<number>,
     };
   },
@@ -100,13 +101,24 @@ export default defineComponent({
   methods: {
     ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles", "resetStatus"]),
     ...mapActions(useRoleStore, ["fetchRoles"]),
+    detectChange() {
+      this.resetStatus();
+      this.change_detect = true;
+    },
+    reset() {
+      this.change_detect = false;
+      this.assigned = this.user?.roles.map((r) => r.id) ?? [];
+    },
     addAvailable(id: number) {
+      this.detectChange();
       this.assigned.push(id);
     },
     removeAssigned(id: number) {
+      this.detectChange();
       this.assigned = this.assigned.filter((roleId) => roleId !== id);
     },
     triggerRolesUpdate() {
+      this.change_detect = false;
       this.updateActiveUserRoles(this.assigned);
     },
   },