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

cancel changes

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -66,8 +66,8 @@
</div>
</div>
<div class="flex flex-row gap-2 self-end pt-4">
<button primary-outline class="!w-fit" @click="$emit('abortPermissions')">abbrechen</button>
<button primary class="!w-fit" @click="$emit('savePermissions', permissionUpdate)">speichern</button>
<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>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
@ -111,13 +111,14 @@ export default defineComponent({
default: null,
},
},
emits: ["savePermissions", "abortPermissions"],
emits: ["savePermissions", "resetStatus"],
data() {
return {
isAdmin: false,
sections: [] as Array<PermissionSection>,
permissionStructure: {} as SectionsAndModulesObject,
permissionUpdate: {} as PermissionObject,
detect_change: false as boolean,
};
},
computed: {
@ -132,11 +133,17 @@ export default defineComponent({
},
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 ?? [];
@ -169,6 +176,17 @@ export default defineComponent({
this.permissionUpdate[section][modul] = permissions;
}
},
reset() {
this.detect_change = false;
this.permissionUpdate = _cloneDeep(this.permissions);
this.isAdmin = this.permissions.admin ?? false;
},
submit() {
this.$emit("savePermissions", this.permissionUpdate);
this.detect_change = false;
},
},
});
</script>

2
src/components/admin/user/role/RoleListItem.vue
View file

@ -4,7 +4,7 @@
<p>{{ role.role }} <small v-if="role.permissions?.isAdmin">(Admin)</small></p>
<div class="flex flex-row">
<RouterLink
v-if="can('update', 'user', 'role')"
v-if="can('admin', 'user', 'role')"
:to="{ name: 'admin-user-role-permission', params: { id: role.id } }"
>
<WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />

2
src/components/admin/user/user/UserListItem.vue
View file

@ -10,7 +10,7 @@
<UserGroupIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
</RouterLink>
<RouterLink
v-if="can('update', 'user', 'user')"
v-if="can('admin', 'user') && false"
:to="{ name: 'admin-user-user-permission', params: { id: user.id } }"
>
<WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />

4
src/main.css
View file

@ -71,7 +71,9 @@ a[button][primary-outline]:not([primary-outline="false"]) {
@apply border-2 border-primary text-black hover:bg-primary;
}
button:disabled {
button:disabled,
a[button]:disabled,
a[button].disabled {
@apply opacity-75 pointer-events-none;
}

4
src/stores/admin/award.ts
View file

@ -61,13 +61,15 @@ export const useAwardStore = defineStore("award", {
},
updateActiveAward(award: CreateOrUpdateAwardViewModel) {
if (this.award == null) return;
let id = this.award.id;
this.updateStatus = "loading";
http
.patch(`/admin/award/${this.award.id}`, {
.patch(`/admin/award/${id}`, {
award: award.award,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchAwardById(id);
this.fetchAwards();
})
.catch((err) => {

4
src/stores/admin/communicationType.ts
View file

@ -79,14 +79,16 @@ export const useCommunicationTypeStore = defineStore("communicationType", {
},
updateActiveCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
if (this.communicationType == null) return;
let id = this.communicationType.id;
this.updateStatus = "loading";
http
.patch(`/admin/communicationType/${this.communicationType.id}`, {
.patch(`/admin/communicationType/${id}`, {
communicationType: communicationType.type,
fields: communicationType.fields,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchCommunicationTypeById(id);
this.fetchCommunicationTypes();
})
.catch((err) => {

4
src/stores/admin/executivePosition.ts
View file

@ -64,13 +64,15 @@ export const useExecutivePositionStore = defineStore("executivePosition", {
},
updateActiveExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
if (this.executivePosition == null) return;
let id = this.executivePosition.id;
this.updateStatus = "loading";
http
.patch(`/admin/executivePosition/${this.executivePosition.id}`, {
.patch(`/admin/executivePosition/${id}`, {
executivePosition: executivePosition.position,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchExecutivePositionById(id);
this.fetchExecutivePositions();
})
.catch((err) => {

4
src/stores/admin/membershipStatus.ts
View file

@ -64,13 +64,15 @@ export const useMembershipStatusStore = defineStore("membershipStatus", {
},
updateActiveMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
if (this.membershipStatus == null) return;
let id = this.membershipStatus.id;
this.updateStatus = "loading";
http
.patch(`/admin/membershipStatus/${this.membershipStatus.id}`, {
.patch(`/admin/membershipStatus/${id}`, {
membershipStatus: membershipStatus.status,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchMembershipStatusById(id);
this.fetchMembershipStatuss();
})
.catch((err) => {

4
src/stores/admin/qualification.ts
View file

@ -65,14 +65,16 @@ export const useQualificationStore = defineStore("qualification", {
},
updateActiveQualification(qualification: CreateOrUpdateQualificationViewModel) {
if (this.qualification == null) return;
let id = this.qualification.id;
this.updateStatus = "loading";
http
.patch(`/admin/qualification/${this.qualification.id}`, {
.patch(`/admin/qualification/${id}`, {
qualification: qualification.qualification,
description: qualification.description,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchQualificationById(id);
this.fetchQualifications();
})
.catch((err) => {

8
src/stores/admin/role.ts
View file

@ -62,13 +62,15 @@ export const useRoleStore = defineStore("role", {
},
updateActiveRole(role: string) {
if (this.role == null) return;
let id = this.role.id;
this.updateStatus = "loading";
http
.patch(`/admin/role/${this.role.id}`, {
.patch(`/admin/role/${id}`, {
role: role,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchRoleById(id);
this.fetchRoles();
})
.catch((err) => {
@ -77,13 +79,15 @@ export const useRoleStore = defineStore("role", {
},
updateActiveRolePermissions(permission: PermissionObject) {
if (this.role == null) return;
let id = this.role.id;
this.updateStatus = "loading";
http
.patch(`/admin/role/${this.role.id}/permissions`, {
.patch(`/admin/role/${id}/permissions`, {
permissions: permission,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchRoleById(id);
this.fetchRoles();
})
.catch((err) => {

12
src/stores/admin/user.ts
View file

@ -48,9 +48,10 @@ export const useUserStore = defineStore("user", {
},
updateActiveUser(user: CreateOrUpdateUserViewModel) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${this.user.id}`, {
.patch(`/admin/user/${id}`, {
username: user.username,
firstname: user.firstname,
lastname: user.lastname,
@ -58,6 +59,7 @@ export const useUserStore = defineStore("user", {
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {
@ -66,13 +68,15 @@ export const useUserStore = defineStore("user", {
},
updateActiveUserPermissions(permission: PermissionObject) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${this.user.id}/permissions`, {
.patch(`/admin/user/${id}/permissions`, {
permissions: permission,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {
@ -81,13 +85,15 @@ export const useUserStore = defineStore("user", {
},
updateActiveUserRoles(roles: Array<number>) {
if (this.user == null) return;
let id = this.user.id;
this.updateStatus = "loading";
http
.patch(`/admin/user/${this.user.id}/roles`, {
.patch(`/admin/user/${id}/roles`, {
roleIds: roles,
})
.then((result) => {
this.updateStatus = { status: "success" };
this.fetchUserById(id);
this.fetchUsers();
})
.catch((err) => {

18
src/views/admin/settings/AwardEdit.vue
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;
},
},
});

31
src/views/admin/settings/CommunicationTypeEdit.vue
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;
},
},
});

24
src/views/admin/settings/ExecutivePositionEdit.vue
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;
},
},
});

18
src/views/admin/settings/MembershipStatusEdit.vue
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;
},
},
});

20
src/views/admin/settings/QualificationEdit.vue
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;
},
},
});

20
src/views/admin/user/RoleEdit.vue
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;
},
},
});

4
src/views/admin/user/RoleEditPermission.vue
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>

21
src/views/admin/user/UserEdit.vue
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;
},
},
});

2
src/views/admin/user/UserEditPermission.vue
View file

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

16
src/views/admin/user/UserEditRoles.vue
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);
},
},