form state rewrite

package-lock.json

@@ -11,9 +11,11 @@
       "dependencies": {
         "@headlessui/vue": "^1.7.13",
         "@heroicons/vue": "^2.1.5",
+        "@types/lodash.isequal": "^4.5.8",
         "axios": "^0.26.1",
         "jwt-decode": "^4.0.0",
         "lodash.clonedeep": "^4.5.0",
+        "lodash.isequal": "^4.5.0",
         "nprogress": "^0.2.0",
         "pdf-dist": "^1.0.0",
         "pinia": "^2.1.7",
@@ -3068,7 +3070,6 @@
       "version": "4.17.7",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
       "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash.clonedeep": {
@@ -3081,6 +3082,15 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/lodash.isequal": {
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
+      "integrity": "sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "20.14.15",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.15.tgz",
@@ -6624,6 +6634,12 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "dev": true
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",

package.json

@@ -29,6 +29,7 @@
     "axios": "^0.26.1",
     "jwt-decode": "^4.0.0",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "pdf-dist": "^1.0.0",
     "pinia": "^2.1.7",
@@ -44,6 +45,7 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/eslint": "~9.6.0",
     "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^20.14.5",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.5",

src/components/admin/Permission.vue

@@ -66,8 +66,10 @@
       </div>
     </div>
     <div class="flex flex-row gap-2 self-end pt-4">
-      <button primary-outline class="!w-fit" @click="reset" :disabled="!detect_change">verwerfen</button>
+      <button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</button>
-      <button primary class="!w-fit" @click="submit" :disabled="status != null">speichern</button>
+      <button primary class="!w-fit" @click="submit" :disabled="status == 'loading' || canSaveOrReset">
+        speichern
+      </button>
       <Spinner v-if="status == 'loading'" class="my-auto" />
       <SuccessCheckmark v-else-if="status?.status == 'success'" />
       <FailureXMark v-else-if="status?.status == 'failed'" />
@@ -89,7 +91,8 @@ import { sectionsAndModules, permissionSections, permissionTypes } from "@/types
 import { mapState, mapActions } from "pinia";
 import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import { useAbilityStore } from "@/stores/ability";
-import _cloneDeep from "lodash.clonedeep";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
@@ -111,39 +114,35 @@ export default defineComponent({
       default: null,
     },
   },
-  emits: ["savePermissions", "resetStatus"],
+  emits: ["savePermissions"],
   data() {
     return {
       isAdmin: false,
       sections: [] as Array<PermissionSection>,
       permissionStructure: {} as SectionsAndModulesObject,
       permissionUpdate: {} as PermissionObject,
-      detect_change: false as boolean,
     };
   },
   computed: {
     ...mapState(useAbilityStore, ["_can"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.permissions, this.permissionUpdate);
+    },
   },
   mounted() {
     this.sections = permissionSections;
     this.permissionStructure = sectionsAndModules;
-    this.permissionUpdate = _cloneDeep(this.permissions);
+    this.permissionUpdate = cloneDeep(this.permissions);
 
     this.isAdmin = this.permissions.admin ?? false;
   },
   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 ?? [];
@@ -177,15 +176,11 @@ export default defineComponent({
       }
     },
     reset() {
-      this.detect_change = false;
+      this.permissionUpdate = cloneDeep(this.permissions);
-
-      this.permissionUpdate = _cloneDeep(this.permissions);
       this.isAdmin = this.permissions.admin ?? false;
     },
     submit() {
       this.$emit("savePermissions", this.permissionUpdate);
-
-      this.detect_change = false;
     },
   },
 });

src/components/admin/settings/award/CreateAwardModal.vue

@@ -10,18 +10,16 @@
         <input type="text" id="award" required />
       </div>
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useAwardStore } from "@/stores/admin/award";
-import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
+import type { CreateAwardViewModel } from "@/viewmodels/admin/award.models";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
   },
-  computed: {
-    ...mapState(useAwardStore, ["createStatus"]),
-  },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useAwardStore, ["createAward", "resetStatus"]),
+    ...mapActions(useAwardStore, ["createAward"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createAward: CreateOrUpdateAwardViewModel = {
+      let createAward: CreateAwardViewModel = {
         award: formData.award.value,
       };
-      this.createAward(createAward);
+      this.createAward(createAward)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/award/DeleteAwardModal.vue

@@ -6,17 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -37,21 +37,10 @@ import { useAwardStore } from "@/stores/admin/award";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -59,16 +48,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useAwardStore, ["awards", "deleteStatus"]),
+    ...mapState(useAwardStore, ["awards"]),
     award() {
       return this.awards.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useAwardStore, ["deleteAward", "resetStatus"]),
+    ...mapActions(useAwardStore, ["deleteAward"]),
     triggerDelete() {
-      this.deleteAward(this.data);
+      this.deleteAward(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/communicationType/CreateCommunicationTypeModal.vue

@@ -56,18 +56,16 @@
       </div>
 
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -81,7 +79,7 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
-import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
+import type { CreateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 </script>
@@ -90,21 +88,12 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
       selectedFields: [] as Array<string>,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
   mounted() {
-    this.resetStatus();
     this.fetchAvailableFields();
   },
   beforeUnmount() {
@@ -113,18 +102,27 @@ export default defineComponent({
     } catch (error) {}
   },
   computed: {
-    ...mapState(useCommunicationTypeStore, ["createStatus", "availableFields"]),
+    ...mapState(useCommunicationTypeStore, ["availableFields"]),
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useCommunicationTypeStore, ["createCommunicationType", "fetchAvailableFields", "resetStatus"]),
+    ...mapActions(useCommunicationTypeStore, ["createCommunicationType", "fetchAvailableFields"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
+      let createCommunicationType: CreateCommunicationTypeViewModel = {
         type: formData.communicationType.value,
         fields: this.selectedFields,
       };
-      this.createCommunicationType(createCommunicationType);
+      this.createCommunicationType(createCommunicationType)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/communicationType/DeleteCommunicationTypeModal.vue

@@ -6,17 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -36,21 +36,10 @@ import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -58,16 +47,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useCommunicationTypeStore, ["communicationTypes", "deleteStatus"]),
+    ...mapState(useCommunicationTypeStore, ["communicationTypes"]),
     communicationType() {
       return this.communicationTypes.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useCommunicationTypeStore, ["deleteCommunicationType", "resetStatus"]),
+    ...mapActions(useCommunicationTypeStore, ["deleteCommunicationType"]),
     triggerDelete() {
-      this.deleteCommunicationType(this.data);
+      this.deleteCommunicationType(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/executivePosition/CreateExecutivePositionModal.vue

@@ -10,18 +10,16 @@
         <input type="text" id="executivePosition" required />
       </div>
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
-import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
+import type { CreateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
   },
-  computed: {
-    ...mapState(useExecutivePositionStore, ["createStatus"]),
-  },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useExecutivePositionStore, ["createExecutivePosition", "resetStatus"]),
+    ...mapActions(useExecutivePositionStore, ["createExecutivePosition"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
+      let createExecutivePosition: CreateExecutivePositionViewModel = {
         position: formData.executivePosition.value,
       };
-      this.createExecutivePosition(createExecutivePosition);
+      this.createExecutivePosition(createExecutivePosition)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/executivePosition/DeleteExecutivePositionModal.vue

@@ -6,17 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -37,21 +37,10 @@ import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -59,16 +48,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useExecutivePositionStore, ["executivePositions", "deleteStatus"]),
+    ...mapState(useExecutivePositionStore, ["executivePositions"]),
     executivePosition() {
       return this.executivePositions.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useExecutivePositionStore, ["deleteExecutivePosition", "resetStatus"]),
+    ...mapActions(useExecutivePositionStore, ["deleteExecutivePosition"]),
     triggerDelete() {
-      this.deleteExecutivePosition(this.data);
+      this.deleteExecutivePosition(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/membershipStatus/CreateMembershipStatusModal.vue

@@ -10,18 +10,16 @@
         <input type="text" id="membershipStatus" required />
       </div>
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -35,45 +33,40 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
-import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
+import type { CreateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
   },
-  computed: {
-    ...mapState(useMembershipStatusStore, ["createStatus"]),
-  },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useMembershipStatusStore, ["createMembershipStatus", "resetStatus"]),
+    ...mapActions(useMembershipStatusStore, ["createMembershipStatus"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
+      let createMembershipStatus: CreateMembershipStatusViewModel = {
         status: formData.membershipStatus.value,
       };
-      this.createMembershipStatus(createMembershipStatus);
+      this.createMembershipStatus(createMembershipStatus)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/membershipStatus/DeleteMembershipStatusModal.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="w-full md:max-w-md">
     <div class="flex flex-col items-center">
-      <p class="text-xl font-medium">Auszeichnung {{ membershipStatus?.status }} löschen?</p>
+      <p class="text-xl font-medium">Auszeichnung {{ mStatus?.status }} löschen?</p>
     </div>
     <br />
 
     <div class="flex flex-row gap-2">
-      <button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -37,21 +37,10 @@ import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -59,16 +48,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useMembershipStatusStore, ["membershipStatuss", "deleteStatus"]),
+    ...mapState(useMembershipStatusStore, ["membershipStatus"]),
-    membershipStatus() {
+    mStatus() {
-      return this.membershipStatuss.find((r) => r.id == this.data);
+      return this.membershipStatus.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useMembershipStatusStore, ["deleteMembershipStatus", "resetStatus"]),
+    ...mapActions(useMembershipStatusStore, ["deleteMembershipStatus"]),
     triggerDelete() {
-      this.deleteMembershipStatus(this.data);
+      this.deleteMembershipStatus(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/qualification/CreateQualificationModal.vue

@@ -14,18 +14,16 @@
         <input type="text" id="description" />
       </div>
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -39,46 +37,41 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useQualificationStore } from "@/stores/admin/qualification";
-import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
+import type { CreateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
   },
-  computed: {
-    ...mapState(useQualificationStore, ["createStatus"]),
-  },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useQualificationStore, ["createQualification", "resetStatus"]),
+    ...mapActions(useQualificationStore, ["createQualification"]),
     triggerCreate(e: any) {
       let formData = e.target.elements;
-      let createQualification: CreateOrUpdateQualificationViewModel = {
+      let createQualification: CreateQualificationViewModel = {
         qualification: formData.qualification.value,
         description: formData.description.value,
       };
-      this.createQualification(createQualification);
+      this.createQualification(createQualification)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/settings/qualification/DeleteQualificationModal.vue

@@ -6,17 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDelete">
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -37,21 +37,10 @@ import { useQualificationStore } from "@/stores/admin/qualification";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -59,16 +48,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useQualificationStore, ["qualifications", "deleteStatus"]),
+    ...mapState(useQualificationStore, ["qualifications"]),
     qualification() {
       return this.qualifications.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useQualificationStore, ["deleteQualification", "resetStatus"]),
+    ...mapActions(useQualificationStore, ["deleteQualification"]),
     triggerDelete() {
-      this.deleteQualification(this.data);
+      this.deleteQualification(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

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

@@ -10,18 +10,16 @@
         <input type="text" id="role" required />
       </div>
       <div class="flex flex-row gap-2">
-        <button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
+        <button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
-          erstellen
+        <Spinner v-if="status == 'loading'" class="my-auto" />
-        </button>
+        <SuccessCheckmark v-else-if="status?.status == 'success'" />
-        <Spinner v-if="createStatus == 'loading'" class="my-auto" />
+        <FailureXMark v-else-if="status?.status == 'failed'" />
-        <SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
-        <FailureXMark v-else-if="createStatus?.status == 'failed'" />
       </div>
     </form>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -41,35 +39,30 @@ import { useRoleStore } from "@/stores/admin/role";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    createStatus() {
-      if (this.createStatus != "loading" && this.createStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
     } catch (error) {}
   },
-  computed: {
-    ...mapState(useRoleStore, ["createStatus"]),
-  },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useRoleStore, ["createRole", "resetStatus"]),
+    ...mapActions(useRoleStore, ["createRole"]),
     triggerCreateRole(e: any) {
       let formData = e.target.elements;
-      this.createRole(formData.role.value);
+      this.createRole(formData.role.value)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

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

@@ -6,21 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteRole">
-        primary
-        :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
-        @click="triggerDeleteRole"
-      >
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -40,21 +36,10 @@ import { useRoleStore } from "@/stores/admin/role";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -62,16 +47,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useRoleStore, ["roles", "deleteStatus"]),
+    ...mapState(useRoleStore, ["roles"]),
     role() {
       return this.roles.find((r) => r.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useRoleStore, ["deleteRole", "resetStatus"]),
+    ...mapActions(useRoleStore, ["deleteRole"]),
     triggerDeleteRole() {
-      this.deleteRole(this.data);
+      this.deleteRole(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/components/admin/user/user/DeleteUserModal.vue

@@ -6,21 +6,17 @@
     <br />
 
     <div class="flex flex-row gap-2">
-      <button
+      <button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteUser">
-        primary
-        :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
-        @click="triggerDeleteUser"
-      >
         unwiederuflich löschen
       </button>
-      <Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
+      <Spinner v-if="status == 'loading'" class="my-auto" />
-      <SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
+      <SuccessCheckmark v-else-if="status?.status == 'success'" />
-      <FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
+      <FailureXMark v-else-if="status?.status == 'failed'" />
     </div>
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
       </div>
     </div>
   </div>
@@ -40,21 +36,10 @@ import { useUserStore } from "@/stores/admin/user";
 export default defineComponent({
   data() {
     return {
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
       timeout: undefined as any,
     };
   },
-  watch: {
-    deleteStatus() {
-      if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
-        this.timeout = setTimeout(() => {
-          this.closeModal();
-        }, 1500);
-      }
-    },
-  },
-  mounted() {
-    this.resetStatus();
-  },
   beforeUnmount() {
     try {
       clearTimeout(this.timeout);
@@ -62,16 +47,25 @@ export default defineComponent({
   },
   computed: {
     ...mapState(useModalStore, ["data"]),
-    ...mapState(useUserStore, ["users", "deleteStatus"]),
+    ...mapState(useUserStore, ["users"]),
     user() {
       return this.users.find((u) => u.id == this.data);
     },
   },
   methods: {
     ...mapActions(useModalStore, ["closeModal"]),
-    ...mapActions(useUserStore, ["deleteUser", "resetStatus"]),
+    ...mapActions(useUserStore, ["deleteUser"]),
     triggerDeleteUser() {
-      this.deleteUser(this.data);
+      this.deleteUser(this.data)
+        .then(() => {
+          this.status = { status: "success" };
+          this.timeout = setTimeout(() => {
+            this.closeModal();
+          }, 1500);
+        })
+        .catch(() => {
+          this.status = { status: "failed" };
+        });
     },
   },
 });

src/stores/admin/award.ts

@@ -1,92 +1,49 @@
 import { defineStore } from "pinia";
-import type { CreateOrUpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
+import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
 import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
 
 export const useAwardStore = defineStore("award", {
   state: () => {
     return {
       awards: [] as Array<AwardViewModel>,
-      award: null as null | AwardViewModel,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchAwards() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/award")
         .then((result) => {
           this.awards = result.data;
-          this.loadingAll = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchAwardById(id: number) {
+    fetchAwardById(id: number): Promise<AxiosResponse<any, any>> {
-      this.award = null;
+      return http.get(`/admin/award/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/award/${id}`)
-        .then((result) => {
-          this.award = result.data;
-          this.loadingSingle = "fetched";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
-    createAward(award: CreateOrUpdateAwardViewModel) {
+    async createAward(award: CreateAwardViewModel): Promise<AxiosResponse<any, any>> {
-      this.createStatus = "loading";
+      const result = await http.post(`/admin/award`, {
-      http
-        .post(`/admin/award`, {
         award: award.award,
-        })
-        .then((result) => {
-          this.createStatus = { status: "success" };
-          this.fetchAwards();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed" };
       });
+      this.fetchAwards();
+      return result;
     },
-    updateActiveAward(award: CreateOrUpdateAwardViewModel) {
+    async updateActiveAward(award: UpdateAwardViewModel): Promise<AxiosResponse<any, any>> {
-      if (this.award == null) return;
+      const result = await http.patch(`/admin/award/${award.id}`, {
-      let id = this.award.id;
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/award/${id}`, {
         award: award.award,
-        })
+      });
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchAwardById(id);
       this.fetchAwards();
-        })
+      return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
-        });
     },
-    deleteAward(award: number) {
+    async deleteAward(award: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/award/${award}`);
-      http
-        .delete(`/admin/award/${award}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
       this.fetchAwards();
-        })
+      return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/communicationType.ts

@@ -1,54 +1,36 @@
 import { defineStore } from "pinia";
 import type {
-  CreateOrUpdateCommunicationTypeViewModel,
+  CreateCommunicationTypeViewModel,
+  UpdateCommunicationTypeViewModel,
   CommunicationTypeViewModel,
 } from "../../viewmodels/admin/communicationType.models";
 import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
 
 export const useCommunicationTypeStore = defineStore("communicationType", {
   state: () => {
     return {
       communicationTypes: [] as Array<CommunicationTypeViewModel>,
-      communicationType: null as null | CommunicationTypeViewModel,
       availableFields: [] as Array<string>,
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
       loadingFields: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchCommunicationTypes() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/communicationType")
         .then((result) => {
           this.communicationTypes = result.data;
-          this.loadingAll = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchCommunicationTypeById(id: number) {
+    fetchCommunicationTypeById(id: number): Promise<AxiosResponse<any, any>> {
-      this.communicationType = null;
+      return http.get(`/admin/communicationType/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/communicationType/${id}`)
-        .then((result) => {
-          this.communicationType = result.data;
-          this.loadingSingle = "fetched";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
     fetchAvailableFields() {
       this.loadingFields = "loading";
@@ -62,50 +44,30 @@ export const useCommunicationTypeStore = defineStore("communicationType", {
           this.loadingFields = "failed";
         });
     },
-    createCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
+    async createCommunicationType(
-      this.createStatus = "loading";
+      communicationType: CreateCommunicationTypeViewModel
-      http
+    ): Promise<AxiosResponse<any, any>> {
-        .post(`/admin/communicationType`, {
+      const result = await http.post(`/admin/communicationType`, {
         communicationType: communicationType.type,
         fields: communicationType.fields,
-        })
-        .then((result) => {
-          this.createStatus = { status: "success" };
-          this.fetchCommunicationTypes();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed" };
       });
+      this.fetchCommunicationTypes();
+      return result;
     },
-    updateActiveCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
+    async updateActiveCommunicationType(
-      if (this.communicationType == null) return;
+      communicationType: UpdateCommunicationTypeViewModel
-      let id = this.communicationType.id;
+    ): Promise<AxiosResponse<any, any>> {
-      this.updateStatus = "loading";
+      const result = await http.patch(`/admin/communicationType/${communicationType.id}`, {
-      http
-        .patch(`/admin/communicationType/${id}`, {
         communicationType: communicationType.type,
         fields: communicationType.fields,
-        })
+      });
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchCommunicationTypeById(id);
       this.fetchCommunicationTypes();
-        })
+      return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
-        });
     },
-    deleteCommunicationType(communicationType: number) {
+    async deleteCommunicationType(communicationType: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/communicationType/${communicationType}`);
-      http
-        .delete(`/admin/communicationType/${communicationType}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
       this.fetchCommunicationTypes();
-        })
+      return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/executivePosition.ts

@@ -1,95 +1,55 @@
 import { defineStore } from "pinia";
 import type {
-  CreateOrUpdateExecutivePositionViewModel,
+  CreateExecutivePositionViewModel,
+  UpdateExecutivePositionViewModel,
   ExecutivePositionViewModel,
 } from "../../viewmodels/admin/executivePosition.models";
 import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
 
 export const useExecutivePositionStore = defineStore("executivePosition", {
   state: () => {
     return {
       executivePositions: [] as Array<ExecutivePositionViewModel>,
-      executivePosition: null as null | ExecutivePositionViewModel,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchExecutivePositions() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/executivePosition")
         .then((result) => {
           this.executivePositions = result.data;
-          this.loadingAll = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchExecutivePositionById(id: number) {
+    fetchExecutivePositionById(id: number): Promise<AxiosResponse<any, any>> {
-      this.executivePosition = null;
+      return http.get(`/admin/executivePosition/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/executivePosition/${id}`)
-        .then((result) => {
-          this.executivePosition = result.data;
-          this.loadingSingle = "fetched";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
-    createExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
+    async createExecutivePosition(executivePosition: CreateExecutivePositionViewModel) {
-      this.createStatus = "loading";
+      const result = await http.post(`/admin/executivePosition`, {
-      http
-        .post(`/admin/executivePosition`, {
         executivePosition: executivePosition.position,
-        })
-        .then((result) => {
-          this.createStatus = { status: "success" };
-          this.fetchExecutivePositions();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed" };
       });
+      this.fetchExecutivePositions();
+      return result;
     },
-    updateActiveExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
+    async updateActiveExecutivePosition(
-      if (this.executivePosition == null) return;
+      executivePosition: UpdateExecutivePositionViewModel
-      let id = this.executivePosition.id;
+    ): Promise<AxiosResponse<any, any>> {
-      this.updateStatus = "loading";
+      const result = await http.patch(`/admin/executivePosition/${executivePosition.id}`, {
-      http
-        .patch(`/admin/executivePosition/${id}`, {
         executivePosition: executivePosition.position,
-        })
+      });
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchExecutivePositionById(id);
       this.fetchExecutivePositions();
-        })
+      return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
-        });
     },
-    deleteExecutivePosition(executivePosition: number) {
+    async deleteExecutivePosition(executivePosition: number) {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/executivePosition/${executivePosition}`);
-      http
-        .delete(`/admin/executivePosition/${executivePosition}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
       this.fetchExecutivePositions();
-        })
+      return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/membershipStatus.ts

@@ -1,95 +1,55 @@
 import { defineStore } from "pinia";
 import type {
-  CreateOrUpdateMembershipStatusViewModel,
+  CreateMembershipStatusViewModel,
+  UpdateMembershipStatusViewModel,
   MembershipStatusViewModel,
 } from "../../viewmodels/admin/membershipStatus.models";
 import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
 
 export const useMembershipStatusStore = defineStore("membershipStatus", {
   state: () => {
     return {
-      membershipStatuss: [] as Array<MembershipStatusViewModel>,
+      membershipStatus: [] as Array<MembershipStatusViewModel>,
-      membershipStatus: null as null | MembershipStatusViewModel,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
+    fetchMembershipStatus() {
-      this.createStatus = null;
+      this.loading = "loading";
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
-    fetchMembershipStatuss() {
-      this.loadingAll = "loading";
       http
         .get("/admin/membershipStatus")
-        .then((result) => {
-          this.membershipStatuss = result.data;
-          this.loadingAll = "fetched";
-        })
-        .catch((err) => {
-          this.loadingAll = "failed";
-        });
-    },
-    fetchMembershipStatusById(id: number) {
-      this.membershipStatus = null;
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/membershipStatus/${id}`)
         .then((result) => {
           this.membershipStatus = result.data;
-          this.loadingSingle = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingSingle = "failed";
+          this.loading = "failed";
         });
     },
-    createMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
+    fetchMembershipStatusById(id: number): Promise<AxiosResponse<any, any>> {
-      this.createStatus = "loading";
+      return http.get(`/admin/membershipStatus/${id}`);
-      http
+    },
-        .post(`/admin/membershipStatus`, {
+    async createMembershipStatus(membershipStatus: CreateMembershipStatusViewModel): Promise<AxiosResponse<any, any>> {
+      const result = await http.post(`/admin/membershipStatus`, {
         membershipStatus: membershipStatus.status,
-        })
-        .then((result) => {
-          this.createStatus = { status: "success" };
-          this.fetchMembershipStatuss();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed" };
       });
+      this.fetchMembershipStatus();
+      return result;
     },
-    updateActiveMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
+    async updateActiveMembershipStatus(
-      if (this.membershipStatus == null) return;
+      membershipStatus: UpdateMembershipStatusViewModel
-      let id = this.membershipStatus.id;
+    ): Promise<AxiosResponse<any, any>> {
-      this.updateStatus = "loading";
+      const result = await http.patch(`/admin/membershipStatus/${membershipStatus.id}`, {
-      http
-        .patch(`/admin/membershipStatus/${id}`, {
         membershipStatus: membershipStatus.status,
-        })
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchMembershipStatusById(id);
-          this.fetchMembershipStatuss();
-        })
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
       });
+      this.fetchMembershipStatus();
+      return result;
     },
-    deleteMembershipStatus(membershipStatus: number) {
+    async deleteMembershipStatus(membershipStatus: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/membershipStatus/${membershipStatus}`);
-      http
+      this.fetchMembershipStatus();
-        .delete(`/admin/membershipStatus/${membershipStatus}`)
+      return result;
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
-          this.fetchMembershipStatuss();
-        })
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/qualification.ts

@@ -1,97 +1,55 @@
 import { defineStore } from "pinia";
 import type {
-  CreateOrUpdateQualificationViewModel,
+  CreateQualificationViewModel,
+  UpdateQualificationViewModel,
   QualificationViewModel,
 } from "../../viewmodels/admin/qualification.models";
 import { http } from "../../serverCom";
+import type { AxiosResponse } from "axios";
 
 export const useQualificationStore = defineStore("qualification", {
   state: () => {
     return {
       qualifications: [] as Array<QualificationViewModel>,
-      qualification: null as null | QualificationViewModel,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchQualifications() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/qualification")
         .then((result) => {
           this.qualifications = result.data;
-          this.loadingAll = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchQualificationById(id: number) {
+    fetchQualificationById(id: number): Promise<AxiosResponse<any, any>> {
-      this.qualification = null;
+      return http.get(`/admin/qualification/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/qualification/${id}`)
-        .then((result) => {
-          this.qualification = result.data;
-          this.loadingSingle = "fetched";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
-    createQualification(qualification: CreateOrUpdateQualificationViewModel) {
+    async createQualification(qualification: CreateQualificationViewModel): Promise<AxiosResponse<any, any>> {
-      this.createStatus = "loading";
+      const result = await http.post(`/admin/qualification`, {
-      http
-        .post(`/admin/qualification`, {
         qualification: qualification.qualification,
         description: qualification.description,
-        })
-        .then((result) => {
-          this.createStatus = { status: "success" };
-          this.fetchQualifications();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed" };
       });
+      this.fetchQualifications();
+      return result;
     },
-    updateActiveQualification(qualification: CreateOrUpdateQualificationViewModel) {
+    async updateActiveQualification(qualification: UpdateQualificationViewModel): Promise<AxiosResponse<any, any>> {
-      if (this.qualification == null) return;
+      const result = await http.patch(`/admin/qualification/${qualification.id}`, {
-      let id = this.qualification.id;
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/qualification/${id}`, {
         qualification: qualification.qualification,
         description: qualification.description,
-        })
+      });
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchQualificationById(id);
       this.fetchQualifications();
-        })
+      return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
-        });
     },
-    deleteQualification(qualification: number) {
+    async deleteQualification(qualification: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/qualification/${qualification}`);
-      http
-        .delete(`/admin/qualification/${qualification}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
       this.fetchQualifications();
-        })
+      return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/role.ts

@@ -2,109 +2,56 @@ import { defineStore } from "pinia";
 import type { RoleViewModel } from "../../viewmodels/admin/role.models";
 import { http } from "../../serverCom";
 import type { PermissionObject } from "../../types/permissionTypes";
+import type { AxiosResponse } from "axios";
 
 export const useRoleStore = defineStore("role", {
   state: () => {
     return {
       roles: [] as Array<RoleViewModel>,
-      role: null as null | RoleViewModel,
+      loading: null as null | "loading" | "success" | "failed",
-      loadingAll: null as null | "loading" | "success" | "failed",
-      loadingSingle: null as null | "loading" | "success" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchRoles() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/role")
         .then((result) => {
           this.roles = result.data;
-          this.loadingAll = "success";
+          this.loading = "success";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchRoleById(id: number) {
+    fetchRoleById(id: number): Promise<AxiosResponse<any, any>> {
-      this.role = null;
+      return http.get(`/admin/role/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/role/${id}`)
-        .then((result) => {
-          this.role = result.data;
-          this.loadingSingle = "success";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
-    createRole(role: string) {
+    async createRole(role: string): Promise<AxiosResponse<any, any>> {
-      this.createStatus = "loading";
+      const result = await http.post("/admin/role", {
-      http
-        .post("/admin/role", {
         role: role,
-        })
-        .then((res) => {
-          this.createStatus = { status: "success" };
-          this.fetchRoles();
-        })
-        .catch((err) => {
-          this.createStatus = { status: "failed", reason: err.data };
       });
+      this.fetchRoles();
+      return result;
     },
-    updateActiveRole(role: string) {
+    async updateActiveRole(id: number, role: string): Promise<AxiosResponse<any, any>> {
-      if (this.role == null) return;
+      const result = await http.patch(`/admin/role/${id}`, {
-      let id = this.role.id;
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/role/${id}`, {
         role: role,
-        })
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchRoleById(id);
-          this.fetchRoles();
-        })
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
       });
+      this.fetchRoles();
+      return result;
     },
-    updateActiveRolePermissions(permission: PermissionObject) {
+    async updateActiveRolePermissions(role: number, permission: PermissionObject): Promise<AxiosResponse<any, any>> {
-      if (this.role == null) return;
+      const result = await http.patch(`/admin/role/${role}/permissions`, {
-      let id = this.role.id;
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/role/${id}/permissions`, {
         permissions: permission,
-        })
+      });
-        .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchRoleById(id);
       this.fetchRoles();
-        })
+      return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
-        });
     },
-    deleteRole(role: number) {
+    async deleteRole(role: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      const result = await http.delete(`/admin/role/${role}`);
-      http
-        .delete(`/admin/role/${role}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
       this.fetchRoles();
-        })
+      return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
-        });
     },
   },
 });

src/stores/admin/user.ts

@@ -1,115 +1,69 @@
 import { defineStore } from "pinia";
-import type { CreateOrUpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
+import type { UpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
 import { http } from "../../serverCom";
 import type { PermissionObject } from "../../types/permissionTypes";
+import type { AxiosResponse } from "axios";
 
 export const useUserStore = defineStore("user", {
   state: () => {
     return {
       users: [] as Array<UserViewModel>,
-      user: null as null | UserViewModel,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      loadingAll: "loading" as "loading" | "fetched" | "failed",
-      loadingSingle: "loading" as "loading" | "fetched" | "failed",
-      createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
-      deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
     };
   },
   actions: {
-    resetStatus() {
-      this.createStatus = null;
-      this.updateStatus = null;
-      this.deleteStatus = null;
-    },
     fetchUsers() {
-      this.loadingAll = "loading";
+      this.loading = "loading";
       http
         .get("/admin/user")
         .then((result) => {
           this.users = result.data;
-          this.loadingAll = "fetched";
+          this.loading = "fetched";
         })
         .catch((err) => {
-          this.loadingAll = "failed";
+          this.loading = "failed";
         });
     },
-    fetchUserById(id: number) {
+    fetchUserById(id: number): Promise<AxiosResponse<any, any>> {
-      this.user = null;
+      return http.get(`/admin/user/${id}`);
-      this.loadingSingle = "loading";
-      http
-        .get(`/admin/user/${id}`)
-        .then((result) => {
-          this.user = result.data;
-          this.loadingSingle = "fetched";
-        })
-        .catch((err) => {
-          this.loadingSingle = "failed";
-        });
     },
-    updateActiveUser(user: CreateOrUpdateUserViewModel) {
+    updateActiveUser(user: UpdateUserViewModel): Promise<AxiosResponse<any, any>> {
-      if (this.user == null) return;
+      return http
-      let id = this.user.id;
+        .patch(`/admin/user/${user.id}`, {
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/user/${id}`, {
           username: user.username,
           firstname: user.firstname,
           lastname: user.lastname,
           mail: user.mail,
         })
         .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchUserById(id);
           this.fetchUsers();
-        })
+          return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
         });
     },
-    updateActiveUserPermissions(permission: PermissionObject) {
+    updateActiveUserPermissions(user: number, permission: PermissionObject): Promise<AxiosResponse<any, any>> {
-      if (this.user == null) return;
+      return http
-      let id = this.user.id;
+        .patch(`/admin/user/${user}/permissions`, {
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/user/${id}/permissions`, {
           permissions: permission,
         })
         .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchUserById(id);
           this.fetchUsers();
-        })
+          return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
         });
     },
-    updateActiveUserRoles(roles: Array<number>) {
+    updateActiveUserRoles(user: number, roles: Array<number>): Promise<AxiosResponse<any, any>> {
-      if (this.user == null) return;
+      return http
-      let id = this.user.id;
+        .patch(`/admin/user/${user}/roles`, {
-      this.updateStatus = "loading";
-      http
-        .patch(`/admin/user/${id}/roles`, {
           roleIds: roles,
         })
         .then((result) => {
-          this.updateStatus = { status: "success" };
-          this.fetchUserById(id);
           this.fetchUsers();
-        })
+          return result;
-        .catch((err) => {
-          this.updateStatus = { status: "failed" };
         });
     },
-    deleteUser(user: number) {
+    deleteUser(user: number): Promise<AxiosResponse<any, any>> {
-      this.deleteStatus = "loading";
+      return http.delete(`/admin/user/${user}`).then((result) => {
-      http
-        .delete(`/admin/user/${user}`)
-        .then((res) => {
-          this.deleteStatus = { status: "success" };
         this.fetchUsers();
-        })
+        return result;
-        .catch((err) => {
-          this.deleteStatus = { status: "failed", reason: err.data };
       });
     },
   },

src/viewmodels/admin/award.models.ts

@@ -3,6 +3,11 @@ export interface AwardViewModel {
   award: string;
 }
 
-export interface CreateOrUpdateAwardViewModel {
+export interface CreateAwardViewModel {
+  award: string;
+}
+
+export interface UpdateAwardViewModel {
+  id: number;
   award: string;
 }

src/viewmodels/admin/communicationType.models.ts

@@ -4,7 +4,13 @@ export interface CommunicationTypeViewModel {
   fields: Array<string>;
 }
 
-export interface CreateOrUpdateCommunicationTypeViewModel {
+export interface CreateCommunicationTypeViewModel {
+  type: string;
+  fields: Array<string>;
+}
+
+export interface UpdateCommunicationTypeViewModel {
+  id: number;
   type: string;
   fields: Array<string>;
 }

src/viewmodels/admin/executivePosition.models.ts

@@ -3,6 +3,11 @@ export interface ExecutivePositionViewModel {
   position: string;
 }
 
-export interface CreateOrUpdateExecutivePositionViewModel {
+export interface CreateExecutivePositionViewModel {
+  position: string;
+}
+
+export interface UpdateExecutivePositionViewModel {
+  id: number;
   position: string;
 }

src/viewmodels/admin/membershipStatus.models.ts

@@ -3,6 +3,11 @@ export interface MembershipStatusViewModel {
   status: string;
 }
 
-export interface CreateOrUpdateMembershipStatusViewModel {
+export interface CreateMembershipStatusViewModel {
+  status: string;
+}
+
+export interface UpdateMembershipStatusViewModel {
+  id: number;
   status: string;
 }

src/viewmodels/admin/qualification.models.ts

@@ -4,7 +4,13 @@ export interface QualificationViewModel {
   description: string | null;
 }
 
-export interface CreateOrUpdateQualificationViewModel {
+export interface CreateQualificationViewModel {
+  qualification: string;
+  description: string | null;
+}
+
+export interface UpdateQualificationViewModel {
+  id: number;
   qualification: string;
   description: string | null;
 }

src/viewmodels/admin/user.models.ts

@@ -1,5 +1,5 @@
-import { PermissionObject } from "../../type/permissionTypes";
+import { PermissionObject } from "@/type/permissionTypes";
-import { RoleViewModel } from "./role.models";
+import type { RoleViewModel } from "./role.models";
 
 export interface UserViewModel {
   id: number;
@@ -12,7 +12,15 @@ export interface UserViewModel {
   permissions_total: PermissionObject;
 }
 
-export interface CreateOrUpdateUserViewModel {
+export interface CreateUserViewModel {
+  username: string;
+  mail: string;
+  firstname: string;
+  lastname: string;
+}
+
+export interface UpdateUserViewModel {
+  id: number;
   username: string;
   mail: string;
   firstname: string;

src/views/admin/settings/AwardEdit.vue

@@ -5,25 +5,31 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Auszeichnung {{ award?.award }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Auszeichnung {{ origin?.award }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
+      <form
+        v-else-if="award != null"
+        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" @change="detectChange" />
+          <input type="text" id="award" required v-model="award.award" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -39,7 +45,9 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
+import type { AwardViewModel, UpdateAwardViewModel } from "@/viewmodels/admin/award.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -49,29 +57,63 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | AwardViewModel,
+      award: null as null | AwardViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useAwardStore, ["award", "updateStatus", "loadingSingle"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.award);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchAwardById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward", "resetStatus"]),
+    ...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward"]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.award = cloneDeep(this.origin);
-      this.change_detect = true;
+    },
+    fetchItem() {
+      this.fetchAwardById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.award = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdate(e: any) {
+      if (this.award == null) return;
       let formData = e.target.elements;
-      let updateAward: CreateOrUpdateAwardViewModel = {
+      let updateAward: UpdateAwardViewModel = {
+        id: this.award.id,
         award: formData.award.value,
       };
-      this.updateActiveAward(updateAward);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveAward(updateAward)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/settings/CommunicationTypeEdit.vue

@@ -5,25 +5,29 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ communicationType?.type }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Kommunikationsart {{ origin?.type }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
+      <form
+        v-else-if="communicationType != null"
+        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" @change="detectChange" />
+          <input type="text" id="communicationType" required v-model="communicationType.type" />
         </div>
         <div>
-          <Listbox v-model="selectedFields" multiple>
+          <Listbox v-model="communicationType.fields" multiple>
             <ListboxLabel>Felder</ListboxLabel>
             <div class="relative mt-1">
               <ListboxButton
                 class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
               >
-                <span class="block truncate w-full text-start"> {{ selectedFields.join(", ") }}</span>
+                <span class="block truncate w-full text-start"> {{ communicationType.fields.join(", ") }}</span>
                 <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
                 </span>
@@ -62,13 +66,15 @@
           </Listbox>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="reset">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -84,9 +90,14 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
+import type {
+  CommunicationTypeViewModel,
+  UpdateCommunicationTypeViewModel,
+} from "@/viewmodels/admin/communicationType.models";
 import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -94,51 +105,72 @@ export default defineComponent({
   props: {
     id: String,
   },
-  watch: {
-    selectedFields() {
-      this.detectChange();
-    },
-    loadingSingle() {
-      if (this.loadingSingle == "fetched") this.selectedFields = this.communicationType?.fields ?? [];
-    },
-  },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
-      selectedFields: [] as Array<string>,
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | CommunicationTypeViewModel,
+      communicationType: null as null | CommunicationTypeViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useCommunicationTypeStore, ["communicationType", "updateStatus", "loadingSingle", "availableFields"]),
+    ...mapState(useCommunicationTypeStore, ["availableFields"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.communicationType);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
     this.fetchAvailableFields();
-    this.fetchCommunicationTypeById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
     ...mapActions(useCommunicationTypeStore, [
       "fetchCommunicationTypeById",
       "updateActiveCommunicationType",
-      "resetStatus",
       "fetchAvailableFields",
     ]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.communicationType = cloneDeep(this.origin);
-      this.change_detect = true;
     },
-    reset() {
+    fetchItem() {
-      this.change_detect = false;
+      this.fetchCommunicationTypeById(parseInt(this.id ?? ""))
-      this.selectedFields = this.communicationType?.fields ?? [];
+        .then((result) => {
+          this.communicationType = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdate(e: any) {
+      if (this.communicationType == null) return;
       let formData = e.target.elements;
-      let updateCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
+      let updateCommunicationType: UpdateCommunicationTypeViewModel = {
+        id: this.communicationType.id,
         type: formData.communicationType.value,
-        fields: this.selectedFields,
+        fields: this.communicationType.fields,
       };
-      this.updateActiveCommunicationType(updateCommunicationType);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveCommunicationType(updateCommunicationType)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/settings/ExecutivePositionEdit.vue

@@ -5,31 +5,31 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Vereinsamt {{ executivePosition?.position }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Vereinsamt {{ origin?.position }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
+      <form
+        v-else-if="executivePosition != null"
+        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
+          <input type="text" id="executivePosition" required v-model="executivePosition.position" />
-            type="text"
-            id="executivePosition"
-            required
-            :value="executivePosition?.position"
-            @change="detectChange"
-          />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -45,7 +45,12 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
+import type {
+  ExecutivePositionViewModel,
+  UpdateExecutivePositionViewModel,
+} from "@/viewmodels/admin/executivePosition.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -55,33 +60,63 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | ExecutivePositionViewModel,
+      executivePosition: null as null | ExecutivePositionViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useExecutivePositionStore, ["executivePosition", "updateStatus", "loadingSingle"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.executivePosition);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchExecutivePositionById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useExecutivePositionStore, [
+    ...mapActions(useExecutivePositionStore, ["fetchExecutivePositionById", "updateActiveExecutivePosition"]),
-      "fetchExecutivePositionById",
+    resetForm() {
-      "updateActiveExecutivePosition",
+      this.executivePosition = cloneDeep(this.origin);
-      "resetStatus",
+    },
-    ]),
+    fetchItem() {
-    detectChange() {
+      this.fetchExecutivePositionById(parseInt(this.id ?? ""))
-      this.resetStatus();
+        .then((result) => {
-      this.change_detect = true;
+          this.executivePosition = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdate(e: any) {
+      if (this.executivePosition == null) return;
       let formData = e.target.elements;
-      let updateExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
+      let updateExecutivePosition: UpdateExecutivePositionViewModel = {
+        id: this.executivePosition.id,
         position: formData.executivePosition.value,
       };
-      this.updateActiveExecutivePosition(updateExecutivePosition);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveExecutivePosition(updateExecutivePosition)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/settings/MembershipStatus.vue

@@ -8,11 +8,7 @@
     <template #diffMain>
       <div class="flex flex-col gap-4 grow pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
-          <MembershipStatusListItem
+          <MembershipStatusListItem v-for="status in membershipStatus" :key="status.id" :membershipStatus="status" />
-            v-for="membershipStatus in membershipStatuss"
-            :key="membershipStatus.id"
-            :membershipStatus="membershipStatus"
-          />
         </div>
         <div class="flex flex-row gap-4">
           <button primary class="!w-fit" @click="openCreateModal">Mitgliedsstatus erstellen</button>
@@ -34,13 +30,13 @@ import { useModalStore } from "@/stores/modal";
 <script lang="ts">
 export default defineComponent({
   computed: {
-    ...mapState(useMembershipStatusStore, ["membershipStatuss"]),
+    ...mapState(useMembershipStatusStore, ["membershipStatus"]),
   },
   mounted() {
-    this.fetchMembershipStatuss();
+    this.fetchMembershipStatus();
   },
   methods: {
-    ...mapActions(useMembershipStatusStore, ["fetchMembershipStatuss"]),
+    ...mapActions(useMembershipStatusStore, ["fetchMembershipStatus"]),
     ...mapActions(useModalStore, ["openModal"]),
     openCreateModal() {
       this.openModal(

src/views/admin/settings/MembershipStatusEdit.vue

@@ -5,25 +5,31 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ membershipStatus?.status }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ origin?.status }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
+      <form
+        v-else-if="membershipStatus != null"
+        class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
+        @submit.prevent="triggerUpdate"
+      >
         <div>
-          <label for="membershipStatus">Bezeichnung</label>
+          <label for="membershipStatusStatus">Bezeichnung</label>
-          <input type="text" id="membershipStatus" required :value="membershipStatus?.status" @change="detectChange" />
+          <input type="text" id="membershipStatusStatus" required v-model="membershipStatus.status" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -39,7 +45,12 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
+import type {
+  UpdateMembershipStatusViewModel,
+  MembershipStatusViewModel,
+} from "@/viewmodels/admin/membershipStatus.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -49,33 +60,63 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | MembershipStatusViewModel,
+      membershipStatus: null as null | MembershipStatusViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useMembershipStatusStore, ["membershipStatus", "updateStatus", "loadingSingle"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.membershipStatus);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchMembershipStatusById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useMembershipStatusStore, [
+    ...mapActions(useMembershipStatusStore, ["fetchMembershipStatusById", "updateActiveMembershipStatus"]),
-      "fetchMembershipStatusById",
+    resetForm() {
-      "updateActiveMembershipStatus",
+      this.membershipStatus = cloneDeep(this.origin);
-      "resetStatus",
+    },
-    ]),
+    fetchItem() {
-    detectChange() {
+      this.fetchMembershipStatusById(parseInt(this.id ?? ""))
-      this.resetStatus();
+        .then((result) => {
-      this.change_detect = true;
+          this.membershipStatus = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdate(e: any) {
+      if (this.membershipStatus == null) return;
       let formData = e.target.elements;
-      let updateMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
+      let updateMembershipStatus: UpdateMembershipStatusViewModel = {
-        status: formData.membershipStatus.value,
+        id: this.membershipStatus.id,
+        status: formData.membershipStatusStatus.value,
       };
-      this.updateActiveMembershipStatus(updateMembershipStatus);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveMembershipStatus(updateMembershipStatus)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/settings/QualificationEdit.vue

@@ -5,29 +5,35 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Qualifikation {{ qualification?.qualification }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Qualifikation {{ origin?.qualification }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
+      <form
+        v-else-if="qualification != null"
+        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" @change="detectChange" />
+          <input type="text" id="qualification" required v-model="qualification.qualification" />
         </div>
         <div>
           <label for="description">Beschreibung (optional)</label>
-          <input type="text" id="description" :value="qualification?.description" @change="detectChange" />
+          <input type="text" id="description" v-model="qualification.description" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -43,7 +49,9 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
+import type { UpdateQualificationViewModel, QualificationViewModel } from "@/viewmodels/admin/qualification.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -53,30 +61,64 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | QualificationViewModel,
+      qualification: null as null | QualificationViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useQualificationStore, ["qualification", "updateStatus", "loadingSingle"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.qualification);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchQualificationById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification", "resetStatus"]),
+    ...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification"]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.qualification = cloneDeep(this.origin);
-      this.change_detect = true;
+    },
+    fetchItem() {
+      this.fetchQualificationById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.qualification = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdate(e: any) {
+      if (this.qualification == null) return;
       let formData = e.target.elements;
-      let updateQualification: CreateOrUpdateQualificationViewModel = {
+      let updateQualification: UpdateQualificationViewModel = {
+        id: this.qualification.id,
         qualification: formData.qualification.value,
         description: formData.description.value,
       };
-      this.updateActiveQualification(updateQualification);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveQualification(updateQualification)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/user/RoleEdit.vue

@@ -5,25 +5,31 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Rolle {{ role?.role }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerRoleUpdate">
+      <form
+        v-else-if="role"
+        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" @change="detectChange" />
+          <input type="text" id="role" required v-model="role.role" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus != null">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -39,6 +45,9 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
+import type { RoleViewModel } from "@/viewmodels/admin/role.models";
 </script>
 
 <script lang="ts">
@@ -48,26 +57,59 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | RoleViewModel,
+      role: null as null | RoleViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useRoleStore, ["role", "updateStatus", "loadingSingle"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.role);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchRoleById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole", "resetStatus"]),
+    ...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole"]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.role = cloneDeep(this.origin);
-      this.change_detect = true;
+    },
+    fetchItem() {
+      this.fetchRoleById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.role = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerRoleUpdate(e: any) {
+      if (this.role == null) return;
       let formData = e.target.elements;
-      this.updateActiveRole(formData.role.value);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveRole(this.role.id, formData.role.value)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/user/RoleEditPermission.vue

@@ -9,14 +9,13 @@
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
       <Permission
-        v-else
+        v-else-if="role != null"
-        :permissions="role?.permissions"
+        :permissions="role.permissions"
-        :status="updateStatus"
+        :status="status"
-        @savePermissions="triggerPermissionUpdate"
+        @savePermissions="triggerUpdate"
-        @resetStatus="resetStatus"
       />
     </template>
   </MainTemplate>
@@ -30,6 +29,7 @@ import { useRoleStore } from "../../../stores/admin/role";
 import Permission from "@/components/admin/Permission.vue";
 import Spinner from "@/components/Spinner.vue";
 import type { PermissionObject } from "@/types/permissionTypes";
+import type { RoleViewModel } from "@/viewmodels/admin/role.models";
 </script>
 
 <script lang="ts">
@@ -37,17 +37,50 @@ export default defineComponent({
   props: {
     id: String,
   },
-  computed: {
+  data() {
-    ...mapState(useRoleStore, ["role", "loadingSingle", "updateStatus"]),
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      role: null as null | RoleViewModel,
+      timeout: null as any,
+    };
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchRoleById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions", "resetStatus"]),
+    ...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions"]),
-    triggerPermissionUpdate(e: PermissionObject) {
+    fetchItem() {
-      this.updateActiveRolePermissions(e);
+      this.fetchRoleById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.role = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: PermissionObject) {
+      if (this.role == null) return;
+      this.status = "loading";
+      this.updateActiveRolePermissions(this.role.id, e)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/user/UserEdit.vue

@@ -5,37 +5,43 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Daten bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Daten bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
-      <form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdateUser">
+      <form
+        v-else-if="user != null"
+        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" @change="detectChange" />
+          <input type="text" id="username" required v-model="user.username" />
         </div>
         <div>
           <label for="firstname">Vorname</label>
-          <input type="text" id="firstname" required :value="user?.firstname" @change="detectChange" />
+          <input type="text" id="firstname" required v-model="user.firstname" />
         </div>
         <div>
           <label for="lastname">Nachname</label>
-          <input type="text" id="lastname" required :value="user?.lastname" @change="detectChange" />
+          <input type="text" id="lastname" required v-model="user.lastname" />
         </div>
         <div>
           <label for="mail">Mailadresse</label>
-          <input type="email" id="mail" required :value="user?.mail" @change="detectChange" />
+          <input type="email" id="mail" required v-model="user.mail" />
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline type="reset" class="!w-fit" :disabled="!change_detect" @click="change_detect = false">
+          <button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
             verwerfen
           </button>
-          <button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
+          <button primary type="submit" class="!w-fit" :disabled="status == 'loading' || canSaveOrReset">
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+            speichern
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          </button>
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </form>
     </template>
@@ -51,7 +57,9 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
 import { useUserStore } from "@/stores/admin/user";
-import type { CreateOrUpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
+import type { UpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -61,32 +69,66 @@ export default defineComponent({
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | UserViewModel,
+      user: null as null | UserViewModel,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin, this.user);
+    },
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchUserById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUser", "resetStatus"]),
+    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUser"]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.user = cloneDeep(this.origin);
-      this.change_detect = true;
+    },
+    fetchItem() {
+      this.fetchUserById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.user = result.data;
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     triggerUpdateUser(e: any) {
+      if (this.user == null) return;
       let formData = e.target.elements;
-      let user: CreateOrUpdateUserViewModel = {
+      let user: UpdateUserViewModel = {
+        id: this.user.id,
         username: formData.username.value,
         firstname: formData.firstname.value,
         lastname: formData.lastname.value,
         mail: formData.mail.value,
       };
-      this.updateActiveUser(user);
+      this.status = "loading";
-      this.change_detect = false;
+      this.updateActiveUser(user)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/user/UserEditPermission.vue

@@ -9,14 +9,13 @@
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
       <Permission
-        v-else
+        v-else-if="user != null"
-        :permissions="user?.permissions"
+        :permissions="user.permissions"
-        :status="updateStatus"
+        :status="status"
-        @savePermissions="triggerPermissionUpdate"
+        @savePermissions="triggerUpdate"
-        @resetStatus="resetStatus"
       />
     </template>
   </MainTemplate>
@@ -30,6 +29,7 @@ import Permission from "@/components/admin/Permission.vue";
 import Spinner from "@/components/Spinner.vue";
 import { useUserStore } from "@/stores/admin/user";
 import type { PermissionObject } from "@/types/permissionTypes";
+import type { UserViewModel } from "@/viewmodels/admin/user.models";
 </script>
 
 <script lang="ts">
@@ -37,17 +37,50 @@ export default defineComponent({
   props: {
     id: String,
   },
-  computed: {
+  data() {
-    ...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
+    return {
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      user: null as null | UserViewModel,
+      timeout: null as any,
+    };
   },
   mounted() {
-    this.resetStatus();
+    this.fetchItem();
-    this.fetchUserById(parseInt(this.id ?? ""));
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions", "resetStatus"]),
+    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions"]),
-    triggerPermissionUpdate(e: PermissionObject) {
+    fetchItem() {
-      this.updateActiveUserPermissions(e);
+      this.fetchUserById(parseInt(this.id ?? ""))
+        .then((result) => {
+          this.user = result.data;
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
+    },
+    triggerUpdate(e: PermissionObject) {
+      if (this.user == null) return;
+      this.status = "loading";
+      this.updateActiveUserPermissions(this.user.id, e)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });

src/views/admin/user/UserEditRoles.vue

@@ -5,12 +5,12 @@
     </template>
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
-        <h1 class="font-bold text-xl h-8">Nutzer {{ user?.username }} - Rollen bearbeiten</h1>
+        <h1 class="font-bold text-xl h-8">Nutzer {{ origin?.username }} - Rollen bearbeiten</h1>
       </div>
     </template>
     <template #main>
-      <Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
+      <Spinner v-if="loading == 'loading'" class="mx-auto" />
-      <p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
+      <p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
       <div v-else class="flex flex-col grow gap-4">
         <div class="flex flex-col gap-2 grow">
           <p class="text-xl font-semibold">zugewiesene Rollen</p>
@@ -39,13 +39,13 @@
           </div>
         </div>
         <div class="flex flex-row justify-end gap-2">
-          <button primary-outline class="!w-fit" :disabled="!change_detect" @click="reset">verwerfen</button>
+          <button primary-outline class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
-          <button primary class="!w-fit" :disabled="updateStatus == 'loading'" @click="triggerRolesUpdate">
+          <button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
             speichern
           </button>
-          <Spinner v-if="updateStatus == 'loading'" class="my-auto" />
+          <Spinner v-if="status == 'loading'" class="my-auto" />
-          <SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
+          <SuccessCheckmark v-else-if="status?.status == 'success'" />
-          <FailureXMark v-else-if="updateStatus?.status == 'failed'" />
+          <FailureXMark v-else-if="status?.status == 'failed'" />
         </div>
       </div>
     </template>
@@ -60,11 +60,13 @@ import { useUserStore } from "@/stores/admin/user";
 import { useRoleStore } from "@/stores/admin/role";
 import type { PermissionObject } from "@/types/permissionTypes";
 import MainTemplate from "@/templates/Main.vue";
-import Permission from "@/components/admin/Permission.vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { XMarkIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import type { UserViewModel } from "@/viewmodels/admin/user.models";
+import cloneDeep from "lodash.clonedeep";
+import isEqual from "lodash.isEqual";
 </script>
 
 <script lang="ts">
@@ -74,17 +76,19 @@ export default defineComponent({
   },
   watch: {
     user() {
-      this.assigned = this.user?.roles.map((r) => r.id) ?? [];
+      this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
     },
   },
   data() {
     return {
-      change_detect: false as boolean,
+      loading: "loading" as "loading" | "fetched" | "failed",
+      status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
+      origin: null as null | UserViewModel,
       assigned: [] as Array<number>,
+      timeout: null as any,
     };
   },
   computed: {
-    ...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
     ...mapState(useRoleStore, ["roles"]),
     assignedRoles() {
       return this.roles.filter((r) => this.assigned.includes(r.id));
@@ -92,34 +96,58 @@ export default defineComponent({
     availableRoles() {
       return this.roles.filter((r) => !this.assigned.includes(r.id));
     },
+    canSaveOrReset(): boolean {
+      return isEqual(this.origin?.roles, this.assigned);
+    },
   },
   mounted() {
-    this.resetStatus();
-    this.fetchUserById(parseInt(this.id ?? ""));
     this.fetchRoles();
+    this.fetchItem();
+  },
+  beforeUnmount() {
+    try {
+      clearTimeout(this.timeout);
+    } catch (error) {}
   },
   methods: {
-    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles", "resetStatus"]),
+    ...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles"]),
     ...mapActions(useRoleStore, ["fetchRoles"]),
-    detectChange() {
+    resetForm() {
-      this.resetStatus();
+      this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
-      this.change_detect = true;
     },
-    reset() {
+    fetchItem() {
-      this.change_detect = false;
+      this.fetchUserById(parseInt(this.id ?? ""))
-      this.assigned = this.user?.roles.map((r) => r.id) ?? [];
+        .then((result) => {
+          this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
+          this.origin = cloneDeep(result.data);
+          this.loading = "fetched";
+        })
+        .catch((err) => {
+          this.loading = "failed";
+        });
     },
     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;
+      if (this.origin == null) return;
-      this.updateActiveUserRoles(this.assigned);
+      this.status = "loading";
+      this.updateActiveUserRoles(this.origin.id, this.assigned)
+        .then(() => {
+          this.fetchItem();
+          this.status = { status: "success" };
+        })
+        .catch((err) => {
+          this.status = { status: "failed" };
+        })
+        .finally(() => {
+          this.timeout = setTimeout(() => {
+            this.status = null;
+          }, 2000);
+        });
     },
   },
 });