cancel changes

sometimes resets new entry
This commit is contained in:
Julian Krauser 2024-09-10 17:11:51 +02:00
parent 0dd5ad09a8
commit 5e50b85631
21 changed files with 193 additions and 53 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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