82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<template>
|
|
<MainTemplate :title="`Webapi-Token ${webapi?.title} - Berechtigungen bearbeiten`">
|
|
<template #headerInsert>
|
|
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
|
|
</template>
|
|
<template #main>
|
|
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
|
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
|
<Permission
|
|
v-else-if="webapi != null"
|
|
:permissions="webapi.permissions"
|
|
:status="status"
|
|
@savePermissions="triggerUpdate"
|
|
/>
|
|
</template>
|
|
</MainTemplate>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import { mapState, mapActions } from "pinia";
|
|
import MainTemplate from "@/templates/Main.vue";
|
|
import { useWebapiStore } from "@/stores/admin/management/webapi";
|
|
import Permission from "@/components/admin/Permission.vue";
|
|
import Spinner from "@/components/Spinner.vue";
|
|
import type { PermissionObject } from "@/types/permissionTypes";
|
|
import type { WebapiViewModel } from "@/viewmodels/admin/management/webapi.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 },
|
|
webapi: null as null | WebapiViewModel,
|
|
timeout: null as any,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.fetchItem();
|
|
},
|
|
beforeUnmount() {
|
|
try {
|
|
clearTimeout(this.timeout);
|
|
} catch (error) {}
|
|
},
|
|
methods: {
|
|
...mapActions(useWebapiStore, ["fetchWebapiById", "updateActiveWebapiPermissions"]),
|
|
fetchItem() {
|
|
this.fetchWebapiById(parseInt(this.id ?? ""))
|
|
.then((result) => {
|
|
this.webapi = result.data;
|
|
this.loading = "fetched";
|
|
})
|
|
.catch((err) => {
|
|
this.loading = "failed";
|
|
});
|
|
},
|
|
triggerUpdate(e: PermissionObject) {
|
|
if (this.webapi == null) return;
|
|
this.status = "loading";
|
|
this.updateActiveWebapiPermissions(this.webapi.id, e)
|
|
.then(() => {
|
|
this.fetchItem();
|
|
this.status = { status: "success" };
|
|
})
|
|
.catch((err) => {
|
|
this.status = { status: "failed" };
|
|
})
|
|
.finally(() => {
|
|
this.timeout = setTimeout(() => {
|
|
this.status = null;
|
|
}, 2000);
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|