feat(leave): add delete

src/modules/09_leave/components/05_Leave/TableList.vue

@@ -1,17 +1,58 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const q = useQuasar();
 const leaveStore = useLeavelistDataStore();
+const route = useRoute();
 const router = useRouter();
+const { showLoader, hideLoader, messageError, dialogRemove } =
+  useCounterMixin();
 
 const total = defineModel<number>("total", { required: true });
 const totalList = defineModel<number>("totalList", { required: true });
 const pagination = defineModel<any>("pagination", { required: true });
+const props = defineProps({
+  getList: Function,
+  rows: {
+    type: Object,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  totalList: {
+    type: Number,
+    require: true,
+  },
+  dataToobar: Object,
+});
+
+const isPermissionDelete = computed(() => {
+  return (status: string) => {
+    return (
+      checkPermission(route)?.attrOwnership === "OWNER" &&
+      !leaveStore.statusDelete.includes(status)
+    );
+  };
+});
 
 /** ข้อมูลหัวตาราง รายการลา */
 const columnsLeave = ref<QTableProps["columns"]>([
@@ -212,31 +253,6 @@ const visibleReject = ref<string[]>([
   "status",
 ]);
 
-const props = defineProps({
-  getList: Function,
-  rows: {
-    type: Object,
-    require: true,
-  },
-  page: {
-    type: Number,
-    require: true,
-  },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  totalList: {
-    type: Number,
-    require: true,
-  },
-  dataToobar: Object,
-});
-
 /** ไปหน้ารายละเอียด */
 function redirectToDetail(id: string) {
   const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
@@ -264,6 +280,24 @@ function getStatusColor(statusText: string) {
   return statusMap[statusText.toUpperCase()] ?? "";
 }
 
+function handleDelete(id: string) {
+  dialogRemove(q, async () => {
+    try {
+      showLoader();
+      const API =
+        leaveStore.tabMenu === "1"
+          ? config.API.leaveList()
+          : config.API.leaveListDelete();
+      await http.delete(API + `/${id}`);
+      await props.getList?.();
+    } catch (error) {
+      messageError(q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /** Hook*/
 onMounted(() => {
   if (leaveStore.tabMenu === "1") {
@@ -313,6 +347,17 @@ onMounted(() => {
           >
             <q-tooltip>รายละเอียด</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="isPermissionDelete(props.row.statusText)"
+            flat
+            round
+            dense
+            icon="mdi-delete"
+            color="red"
+            @click.prevent="handleDelete(props.row.id)"
+          >
+            <q-tooltip>รายละเอียด</q-tooltip>
+          </q-btn>
         </q-td>
         <q-td
           v-for="col in props.cols"

src/modules/09_leave/stores/LeaveStore.ts

@@ -44,6 +44,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
 
   const leaveType = ref<LeaveType[]>([]);
 
+  const statusDelete = ["APPROVE", "DELETING", "DELETE"];
+
   /**
    * ฟังก์ชั่น fetchListLeave
    * @param data รับข้อมูลจาก Page
@@ -264,5 +266,6 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     leaveTypeOption,
     leaveTypeList,
     fetchKeycloakPosition,
+    statusDelete,
   };
 });