Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 12 Pull requests Projects Releases 25 Packages Wiki Activity Actions

form state rewrite

Browse source
This commit is contained in:
Julian Krauser 2024-09-15 13:52:54 +02:00
parent 5e50b85631
commit b0ea9d13e7
40 changed files with 1123 additions and 1070 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/admin/Permission.vue
View file

@ -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 class="!w-fit" @click="submit" :disabled="status != null">speichern</button>
<button primary-outline class="!w-fit" @click="reset" :disabled="canSaveOrReset">verwerfen</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;
},
},
});

45
src/components/admin/settings/award/CreateAwardModal.vue
View file

@ -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'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

38
src/components/admin/settings/award/DeleteAwardModal.vue
View file

@ -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" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});

42
src/components/admin/settings/communicationType/CreateCommunicationTypeModal.vue
View file

@ -56,18 +56,16 @@
</div>
<div class="flex flex-row gap-2">
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

38
src/components/admin/settings/communicationType/DeleteCommunicationTypeModal.vue
View file

@ -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" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});

45
src/components/admin/settings/executivePosition/CreateExecutivePositionModal.vue
View file

@ -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'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

38
src/components/admin/settings/executivePosition/DeleteExecutivePositionModal.vue
View file

@ -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" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});

45
src/components/admin/settings/membershipStatus/CreateMembershipStatusModal.vue
View file

@ -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'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

44
src/components/admin/settings/membershipStatus/DeleteMembershipStatusModal.vue
View file

@ -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" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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"]),
membershipStatus() {
return this.membershipStatuss.find((r) => r.id == this.data);
...mapState(useMembershipStatusStore, ["membershipStatus"]),
mStatus() {
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" };
});
},
},
});

45
src/components/admin/settings/qualification/CreateQualificationModal.vue
View file

@ -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'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

38
src/components/admin/settings/qualification/DeleteQualificationModal.vue
View file

@ -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" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});

41
src/components/admin/user/role/CreateRoleModal.vue
View file

@ -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'">
erstellen
</button>
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.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" };
});
},
},
});

42
src/components/admin/user/role/DeleteRoleModal.vue
View file

@ -6,21 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button
primary
:disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
@click="triggerDeleteRole"
>
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteRole">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});

42
src/components/admin/user/user/DeleteUserModal.vue
View file

@ -6,21 +6,17 @@
<br />
<div class="flex flex-row gap-2">
<button
primary
:disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
@click="triggerDeleteUser"
>
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteUser">
unwiederuflich löschen
</button>
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
<FailureXMark v-else-if="deleteStatus?.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>
<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" };
});
},
},
});