feat: add delete is OWNER

src/modules/05_placement/views/02_transferMain.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
 
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import {
   checkPermission,
   checkPermissionList,
@@ -20,11 +20,19 @@ import DialogOrders from "@/modules/05_placement/components/Transfer/DialogOrder
 
 const $q = useQuasar();
 const router = useRouter();
+const route = useRoute();
 const mixin = useCounterMixin();
 const store = useTransferDataStore();
 const { statusText, filterOption } = useTransferDataStore();
-const { date2Thai, messageError, showLoader, hideLoader, onSearchDataTable } =
-  mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  onSearchDataTable,
+  dialogRemove,
+  success,
+} = mixin;
 
 const modal = ref<boolean>(false); //ส่งไปออกคำสั่ง
 const dataTransfer = ref<ResponseData[]>([]); //ช่อมูลรายการขอโอน
@@ -141,6 +149,15 @@ const visibleColumns = ref<string[]>([
   "createdAt",
 ]);
 
+const isPermissionDelete = computed(() => {
+  return (status: string) => {
+    return (
+      checkPermission(route)?.attrOwnership === "OWNER" &&
+      !store.statusDelete.includes(status)
+    );
+  };
+});
+
 /** ฟังก์ชันดึงข้อมูรายการขอโอน*/
 async function fetchData() {
   showLoader();
@@ -194,6 +211,21 @@ function onSearch() {
   );
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.transfer + `/admin/${id}`);
+      await fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  * จะเรียกใช้ fetchData เพื่อดึงข้อมูลรายการขอโอน
@@ -337,6 +369,18 @@ onMounted(async () => {
                 >
                   <q-tooltip>รายละเอียด</q-tooltip>
                 </q-btn>
+
+                <q-btn
+                  v-if="isPermissionDelete(props.row.status)"
+                  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" :key="col.id">
                 <div v-if="col.name === 'no'">