fix: dialog status handling

src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -124,11 +124,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
-          primary-outline
-          @click="closeModal"
-          :disabled="status != null && status != 'loading' && status?.status != 'failed'"
-        >
           abbrechen
         </button>
       </div>
@@ -194,6 +190,7 @@ export default defineComponent({
         location: formData.location.value,
         allDay: this.allDay,
       };
+      this.status = "loading";
       this.createCalendar(createCalendar)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/calendar/DeleteCalendarModal.vue

@@ -38,7 +38,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -78,6 +80,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useCalendarStore, ["deleteCalendar"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteCalendar(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/calendar/UpdateCalendarModal.vue

@@ -166,11 +166,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
-          primary-outline
-          @click="closeModal"
-          :disabled="status != null && status != 'loading' && status?.status != 'failed'"
-        >
           abbrechen / schließen
         </button>
       </div>
@@ -264,6 +260,7 @@ export default defineComponent({
         location: formData.location.value,
         allDay: this.calendar.allDay,
       };
+      this.status = "loading";
       this.updateCalendar(updateCalendar)
         .then(() => {
           this.fetchItem();

src/components/admin/club/member/CreateMemberModal.vue

@@ -133,6 +133,7 @@ export default defineComponent({
         birthdate: formData.birthdate.value,
         internalId: formData.internalId.value,
       };
+      this.status = "loading";
       this.createMember(createMember)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/DeleteMemberModal.vue

@@ -72,6 +72,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMemberStore, ["deleteMember"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMember(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberAwardCreateModal.vue

@@ -140,6 +140,7 @@ export default defineComponent({
         given: formData.given.checked,
         awardId: this.selectedAward.id,
       };
+      this.status = "loading";
       this.createMemberAward(createMemberAward)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberAwardDeleteModal.vue

@@ -65,6 +65,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMemberAwardStore, ["deleteMemberAward"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMemberAward(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberAwardEditModal.vue

@@ -83,7 +83,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">schließen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
       </div>
     </div>
   </div>
@@ -167,6 +169,7 @@ export default defineComponent({
         given: formData.given.checked,
         awardId: this.memberAward.awardId,
       };
+      this.status = "loading";
       this.updateMemberAward(updateMemberAward)
         .then(() => {
           this.fetchItem();

src/components/admin/club/member/MemberCommunicationCreateModal.vue

@@ -175,6 +175,7 @@ export default defineComponent({
         isSMSAlarming: formData.isSMSAlarming?.checked,
         typeId: this.selectedCommunicationType.id,
       };
+      this.status = "loading";
       this.createCommunication(createCommunication)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberCommunicationDeleteModal.vue

@@ -68,6 +68,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useCommunicationStore, ["deleteCommunication"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteCommunication(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberCommunicationEditModal.vue

@@ -62,7 +62,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">schließen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
       </div>
     </div>
   </div>
@@ -144,6 +146,7 @@ export default defineComponent({
         isNewsletterMain: formData.isNewsletterMain.checked,
         isSMSAlarming: formData.isSMSAlarming?.checked,
       };
+      this.status = "loading";
       this.updateCommunication(updateCommunication)
         .then(() => {
           this.fetchItem();

src/components/admin/club/member/MemberExecutivePositionCreateModal.vue

@@ -141,6 +141,7 @@ export default defineComponent({
         note: formData.note.value,
         executivePositionId: this.selectedExecutivePosition.id,
       };
+      this.status = "loading";
       this.createMemberExecutivePosition(createMemberExecutivePosition)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberExecutivePositionDeleteModal.vue

@@ -65,6 +65,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMemberExecutivePositionStore, ["deleteMemberExecutivePosition"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMemberExecutivePosition(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberExecutivePositionEditModal.vue

@@ -89,7 +89,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">schließen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
       </div>
     </div>
   </div>
@@ -176,6 +178,7 @@ export default defineComponent({
         note: formData.note.value,
         executivePositionId: this.memberExecutivePosition.executivePositionId,
       };
+      this.status = "loading";
       this.updateMemberExecutivePosition(updateMemberExecutivePosition)
         .then(() => {
           this.fetchItem();

src/components/admin/club/member/MemberQualificationCreateModal.vue

@@ -148,6 +148,7 @@ export default defineComponent({
         note: formData.note.value,
         qualificationId: this.selectedQualification.id,
       };
+      this.status = "loading";
       this.createMemberQualification(createMemberQualification)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberQualificationDeleteModal.vue

@@ -69,6 +69,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMemberQualificationStore, ["deleteMemberQualification"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMemberQualification(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MemberQualificationEditModal.vue

@@ -90,7 +90,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">schließen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
       </div>
     </div>
   </div>
@@ -175,6 +177,7 @@ export default defineComponent({
         terminationReason: formData.terminationReason.value,
         qualificationId: this.memberQualification.qualificationId,
       };
+      this.status = "loading";
       this.updateMemberQualification(updateMemberQualification)
         .then(() => {
           this.fetchItem();

src/components/admin/club/member/MembershipCreateModal.vue

@@ -131,6 +131,7 @@ export default defineComponent({
         start: formData.start.value,
         statusId: this.selectedStatus.id,
       };
+      this.status = "loading";
       this.createMembership(createMember)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MembershipDeleteModal.vue

@@ -67,6 +67,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMembershipStore, ["deleteMembership"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMembership(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/member/MembershipEditModal.vue

@@ -86,7 +86,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">schließen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          schließen
+        </button>
       </div>
     </div>
   </div>
@@ -170,6 +172,7 @@ export default defineComponent({
         terminationReason: formData.terminationReason.value,
         statusId: this.membership.statusId,
       };
+      this.status = "loading";
       this.updateMembership(updateMembership)
         .then(() => {
           this.fetchItem();

src/components/admin/club/newsletter/CreateNewsletterModal.vue

@@ -61,6 +61,7 @@ export default defineComponent({
       let createNewsletter: CreateNewsletterViewModel = {
         title: formData.title.value,
       };
+      this.status = "loading";
       this.createNewsletter(createNewsletter)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/club/protocol/CreateProtocolModal.vue

@@ -64,6 +64,7 @@ export default defineComponent({
         title: formData.title.value,
         date: formData.date.value,
       };
+      this.status = "loading";
       this.createProtocol(createProtocol)
         .then(() => {
           this.status = { status: "success" };

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

@@ -19,7 +19,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
       let createAward: CreateAwardViewModel = {
         award: formData.award.value,
       };
+      this.status = "loading";
       this.createAward(createAward)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useAwardStore, ["deleteAward"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteAward(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/calendarType/CreateCalendarTypeModal.vue

@@ -32,11 +32,7 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
-          primary-outline
-          @click="closeModal"
-          :disabled="status != null && status != 'loading' && status?.status != 'failed'"
-        >
           abbrechen
         </button>
       </div>
@@ -82,6 +78,7 @@ export default defineComponent({
         nscdr: formData.nscdr.checked,
         passphrase: formData.passphrase.value,
       };
+      this.status = "loading";
       this.createCalendarType(createCalendarType)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/calendarType/DeleteCalendarTypeModal.vue

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -56,6 +58,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useCalendarTypeStore, ["deleteCalendarType"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteCalendarType(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -65,7 +65,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -114,6 +116,7 @@ export default defineComponent({
         type: formData.communicationType.value,
         fields: this.selectedFields,
       };
+      this.status = "loading";
       this.createCommunicationType(createCommunicationType)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -56,6 +58,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useCommunicationTypeStore, ["deleteCommunicationType"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteCommunicationType(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -19,7 +19,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
       let createExecutivePosition: CreateExecutivePositionViewModel = {
         position: formData.executivePosition.value,
       };
+      this.status = "loading";
       this.createExecutivePosition(createExecutivePosition)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useExecutivePositionStore, ["deleteExecutivePosition"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteExecutivePosition(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -19,7 +19,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
       let createMembershipStatus: CreateMembershipStatusViewModel = {
         status: formData.membershipStatus.value,
       };
+      this.status = "loading";
       this.createMembershipStatus(createMembershipStatus)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useMembershipStatusStore, ["deleteMembershipStatus"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteMembershipStatus(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -23,7 +23,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -62,6 +64,7 @@ export default defineComponent({
         qualification: formData.qualification.value,
         description: formData.description.value,
       };
+      this.status = "loading";
       this.createQualification(createQualification)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useQualificationStore, ["deleteQualification"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteQualification(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/queryStore/CreateQueryStoreModal.vue

@@ -19,7 +19,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -62,6 +64,7 @@ export default defineComponent({
         title: formData.title.value,
         query: this.query ?? "",
       };
+      this.status = "loading";
       this.createQueryStore(createAward)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/queryStore/DeleteQueryStoreModal.vue

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -56,6 +58,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useQueryStoreStore, ["deleteQueryStore"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteQueryStore(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/queryStore/UpdateQueryStoreModal.vue

@@ -21,7 +21,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -73,6 +75,7 @@ export default defineComponent({
         id: this.data,
         query: this.query ?? "",
       };
+      this.status = "loading";
       this.updateActiveQueryStore(updateQuery)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/settings/template/CreateTemplateModal.vue

@@ -23,7 +23,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -62,6 +64,7 @@ export default defineComponent({
         template: formData.template.value,
         description: formData.description.value,
       };
+      this.status = "loading";
       this.createTemplate(createTemplate)
         .then((res) => {
           this.status = { status: "success" };

src/components/admin/settings/template/DeleteTemplateModal.vue

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -57,6 +59,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useTemplateStore, ["deleteTemplate"]),
     triggerDelete() {
+      this.status = "loading";
       this.deleteTemplate(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -19,7 +19,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -53,6 +55,7 @@ export default defineComponent({
     ...mapActions(useRoleStore, ["createRole"]),
     triggerCreateRole(e: any) {
       let formData = e.target.elements;
+      this.status = "loading";
       this.createRole(formData.role.value)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -56,6 +58,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useRoleStore, ["deleteRole"]),
     triggerDeleteRole() {
+      this.status = "loading";
       this.deleteRole(this.data)
         .then(() => {
           this.status = { status: "success" };

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

@@ -16,7 +16,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -56,6 +58,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["closeModal"]),
     ...mapActions(useUserStore, ["deleteUser"]),
     triggerDeleteUser() {
+      this.status = "loading";
       this.deleteUser(this.data)
         .then(() => {
           this.status = { status: "success" };

src/components/admin/user/user/InviteUserModal.vue

@@ -32,7 +32,9 @@
 
     <div class="flex flex-row justify-end">
       <div class="flex flex-row gap-4 py-2">
-        <button primary-outline @click="closeModal" :disabled="status != null">abbrechen</button>
+        <button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
+          abbrechen
+        </button>
       </div>
     </div>
   </div>
@@ -70,13 +72,13 @@ export default defineComponent({
     ...mapActions(useInviteStore, ["createInvite"]),
     invite(e: any) {
       let formData = e.target.elements;
-      this.status = "loading";
       let createInvite: CreateInviteViewModel = {
         username: formData.username.value,
         mail: formData.mail.value,
         firstname: formData.firstname.value,
         lastname: formData.lastname.value,
       };
+      this.status = "loading";
       this.createInvite(createInvite)
         .then((result) => {
           this.status = { status: "success" };
@@ -86,7 +88,7 @@ export default defineComponent({
         })
         .catch((err) => {
           this.status = { status: "failed", reason: err.response.data };
-        })
+        });
     },
   },
 });

src/serverCom.ts

@@ -66,7 +66,11 @@ http.interceptors.response.use(
     }
 
     const notificationStore = useNotificationStore();
+    if (error.toString().includes("Network Error")) {
+      notificationStore.push("Netzwerkfehler", "Server nicht erreichbar!", "error");
+    } else {
       notificationStore.push("Fehler", error.response.data, "error");
+    }
 
     return Promise.reject(error);
   }