116 lines
3.6 KiB
Vue
116 lines
3.6 KiB
Vue
<template>
|
|
<MainTemplate>
|
|
<template #headerInsert>
|
|
<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">
|
|
<h1 class="font-bold text-xl h-8">Rolle {{ origin?.role }} - Daten bearbeiten</h1>
|
|
</div>
|
|
</template>
|
|
<template #main>
|
|
<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 v-model="role.role" />
|
|
</div>
|
|
<div class="flex flex-row justify-end gap-2">
|
|
<button primary-outline type="reset" class="!w-fit" :disabled="canSaveOrReset" @click="resetForm">
|
|
verwerfen
|
|
</button>
|
|
<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>
|
|
</MainTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapState, mapActions } from "pinia";
|
|
import MainTemplate from "@/templates/Main.vue";
|
|
import { useRoleStore } from "@/stores/admin/role";
|
|
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">
|
|
export default defineComponent({
|
|
props: {
|
|
id: String,
|
|
},
|
|
data() {
|
|
return {
|
|
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: {
|
|
canSaveOrReset(): boolean {
|
|
return isEqual(this.origin, this.role);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchItem();
|
|
},
|
|
beforeUnmount() {
|
|
try {
|
|
clearTimeout(this.timeout);
|
|
} catch (error) {}
|
|
},
|
|
methods: {
|
|
...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.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);
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|