87 lines
2.5 KiB
Vue
87 lines
2.5 KiB
Vue
<template>
|
|
<form class="flex flex-col w-full" @submit.prevent="submit">
|
|
<div class="flex flex-row gap-2 items-center border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
|
|
<p class="text-lg font-semibold grow">{{ title }}</p>
|
|
<Spinner v-if="status == 'loading'" />
|
|
<SuccessCheckmark v-else-if="status == 'success'" />
|
|
<FailureXMark v-else-if="status == 'failed'" />
|
|
<div v-else-if="enableEdit" class="flex flex-row gap-2">
|
|
<button type="submit" class="!w-fit !h-fit !p-0">
|
|
<CheckIcon class="h-5 w-5 cursor-pointer" />
|
|
</button>
|
|
<button
|
|
type="reset"
|
|
class="!w-fit !h-fit !p-0"
|
|
@click="
|
|
enableEdit = false;
|
|
$emit('reset');
|
|
"
|
|
>
|
|
<XMarkIcon class="h-5 w-5 cursor-pointer" />
|
|
</button>
|
|
</div>
|
|
<PencilSquareIcon
|
|
v-else-if="can('create', 'management', 'setting')"
|
|
class="h-5 w-5 cursor-pointer"
|
|
@click="enableEdit = true"
|
|
/>
|
|
</div>
|
|
<div class="border-l-3 border-l-primary p-2 rounded-b-lg">
|
|
<slot :enableEdit="enableEdit"></slot>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FailureXMark from "@/components/FailureXMark.vue";
|
|
import Spinner from "@/components/Spinner.vue";
|
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
|
import { useAbilityStore } from "@/stores/ability";
|
|
import { CheckIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/vue/24/outline";
|
|
import { mapActions, mapState } from "pinia";
|
|
import { defineComponent } from "vue";
|
|
import type { PropType } from "vue";
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default defineComponent({
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
submitFunction: {
|
|
type: Function as PropType<(e: any) => Promise<any>>,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: ["reset"],
|
|
data() {
|
|
return {
|
|
enableEdit: false as boolean,
|
|
status: undefined as undefined | "loading" | "success" | "failed",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(useAbilityStore, ["can"]),
|
|
},
|
|
methods: {
|
|
submit(e: any) {
|
|
this.status = "loading";
|
|
this.submitFunction(e)
|
|
.then(() => {
|
|
this.status = "success";
|
|
})
|
|
.catch(() => {
|
|
this.status = "failed";
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
this.enableEdit = false;
|
|
this.status = undefined;
|
|
}, 2000);
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|