Settings form and handling

src/components/admin/management/setting/BaseSetting.vue

@@ -0,0 +1,79 @@
+<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">
+          <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,
+    },
+  },
+  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>