form state rewrite
This commit is contained in:
parent
5e50b85631
commit
b0ea9d13e7
40 changed files with 1123 additions and 1070 deletions
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchAwardById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward", "resetStatus"]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward"]),
|
||||
resetForm() {
|
||||
this.award = cloneDeep(this.origin);
|
||||
},
|
||||
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.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveAward(updateAward)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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,
|
||||
selectedFields: [] as Array<string>,
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
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() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
resetForm() {
|
||||
this.communicationType = cloneDeep(this.origin);
|
||||
},
|
||||
reset() {
|
||||
this.change_detect = false;
|
||||
this.selectedFields = this.communicationType?.fields ?? [];
|
||||
fetchItem() {
|
||||
this.fetchCommunicationTypeById(parseInt(this.id ?? ""))
|
||||
.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.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveCommunicationType(updateCommunicationType)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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
|
||||
type="text"
|
||||
id="executivePosition"
|
||||
required
|
||||
:value="executivePosition?.position"
|
||||
@change="detectChange"
|
||||
/>
|
||||
<input type="text" id="executivePosition" required v-model="executivePosition.position" />
|
||||
</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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchExecutivePositionById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useExecutivePositionStore, [
|
||||
"fetchExecutivePositionById",
|
||||
"updateActiveExecutivePosition",
|
||||
"resetStatus",
|
||||
]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useExecutivePositionStore, ["fetchExecutivePositionById", "updateActiveExecutivePosition"]),
|
||||
resetForm() {
|
||||
this.executivePosition = cloneDeep(this.origin);
|
||||
},
|
||||
fetchItem() {
|
||||
this.fetchExecutivePositionById(parseInt(this.id ?? ""))
|
||||
.then((result) => {
|
||||
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.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveExecutivePosition(updateExecutivePosition)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
v-for="membershipStatus in membershipStatuss"
|
||||
:key="membershipStatus.id"
|
||||
:membershipStatus="membershipStatus"
|
||||
/>
|
||||
<MembershipStatusListItem v-for="status in membershipStatus" :key="status.id" :membershipStatus="status" />
|
||||
</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(
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<input type="text" id="membershipStatus" required :value="membershipStatus?.status" @change="detectChange" />
|
||||
<label for="membershipStatusStatus">Bezeichnung</label>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchMembershipStatusById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMembershipStatusStore, [
|
||||
"fetchMembershipStatusById",
|
||||
"updateActiveMembershipStatus",
|
||||
"resetStatus",
|
||||
]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useMembershipStatusStore, ["fetchMembershipStatusById", "updateActiveMembershipStatus"]),
|
||||
resetForm() {
|
||||
this.membershipStatus = cloneDeep(this.origin);
|
||||
},
|
||||
fetchItem() {
|
||||
this.fetchMembershipStatusById(parseInt(this.id ?? ""))
|
||||
.then((result) => {
|
||||
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 = {
|
||||
status: formData.membershipStatus.value,
|
||||
let updateMembershipStatus: UpdateMembershipStatusViewModel = {
|
||||
id: this.membershipStatus.id,
|
||||
status: formData.membershipStatusStatus.value,
|
||||
};
|
||||
this.updateActiveMembershipStatus(updateMembershipStatus);
|
||||
this.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveMembershipStatus(updateMembershipStatus)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchQualificationById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification", "resetStatus"]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification"]),
|
||||
resetForm() {
|
||||
this.qualification = cloneDeep(this.origin);
|
||||
},
|
||||
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.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveQualification(updateQualification)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchRoleById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole", "resetStatus"]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole"]),
|
||||
resetForm() {
|
||||
this.role = cloneDeep(this.origin);
|
||||
},
|
||||
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.change_detect = false;
|
||||
this.status = "loading";
|
||||
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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,14 +9,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<Permission
|
||||
v-else
|
||||
:permissions="role?.permissions"
|
||||
:status="updateStatus"
|
||||
@savePermissions="triggerPermissionUpdate"
|
||||
@resetStatus="resetStatus"
|
||||
v-else-if="role != null"
|
||||
:permissions="role.permissions"
|
||||
:status="status"
|
||||
@savePermissions="triggerUpdate"
|
||||
/>
|
||||
</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: {
|
||||
...mapState(useRoleStore, ["role", "loadingSingle", "updateStatus"]),
|
||||
data() {
|
||||
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.fetchRoleById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions", "resetStatus"]),
|
||||
triggerPermissionUpdate(e: PermissionObject) {
|
||||
this.updateActiveRolePermissions(e);
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions"]),
|
||||
fetchItem() {
|
||||
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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == '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">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<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>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
<button primary type="submit" class="!w-fit" :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'" />
|
||||
</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.fetchUserById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUser", "resetStatus"]),
|
||||
detectChange() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUser"]),
|
||||
resetForm() {
|
||||
this.user = cloneDeep(this.origin);
|
||||
},
|
||||
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.change_detect = false;
|
||||
this.status = "loading";
|
||||
this.updateActiveUser(user)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,14 +9,13 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<Permission
|
||||
v-else
|
||||
:permissions="user?.permissions"
|
||||
:status="updateStatus"
|
||||
@savePermissions="triggerPermissionUpdate"
|
||||
@resetStatus="resetStatus"
|
||||
v-else-if="user != null"
|
||||
:permissions="user.permissions"
|
||||
:status="status"
|
||||
@savePermissions="triggerUpdate"
|
||||
/>
|
||||
</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: {
|
||||
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
|
||||
data() {
|
||||
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.fetchUserById(parseInt(this.id ?? ""));
|
||||
this.fetchItem();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions", "resetStatus"]),
|
||||
triggerPermissionUpdate(e: PermissionObject) {
|
||||
this.updateActiveUserPermissions(e);
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions"]),
|
||||
fetchItem() {
|
||||
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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<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 class="!w-fit" :disabled="updateStatus == 'loading'" @click="triggerRolesUpdate">
|
||||
<button primary-outline class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">verwerfen</button>
|
||||
<button primary class="!w-fit" :disabled="status == 'loading' || canSaveOrReset" @click="triggerRolesUpdate">
|
||||
speichern
|
||||
</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<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>
|
||||
</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() {
|
||||
this.resetStatus();
|
||||
this.change_detect = true;
|
||||
resetForm() {
|
||||
this.assigned = this.origin?.roles.map((r) => r.id) ?? [];
|
||||
},
|
||||
reset() {
|
||||
this.change_detect = false;
|
||||
this.assigned = this.user?.roles.map((r) => r.id) ?? [];
|
||||
fetchItem() {
|
||||
this.fetchUserById(parseInt(this.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;
|
||||
this.updateActiveUserRoles(this.assigned);
|
||||
if (this.origin == null) return;
|
||||
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);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue