feat: add delete button for owner only

src/modules/14_KPI/views/02_kpiLists.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
@@ -22,8 +22,18 @@ import DialogEvalute from "@/modules/14_KPI/components/Tab/Dialog/DialogEvalute.
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
-const { pagination, params, onRequest } = usePagination("", fetchList);
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  dialogRemove,
+  success,
+} = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 const year = ref<number | null>(calculateFiscalYear(new Date())); //ปีงบประมาณ
 const formQuery = reactive({
@@ -39,8 +49,6 @@ const modalDialog = ref<boolean>(false); //modal สร้างแบบปร
 
 /** Table*/
 const rows = ref<any[]>([]); //รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
-const maxPage = ref<number>(1); //จำนวนหน้าทั้งหมด
-const totalList = ref<number>(0); //จำนวนรายการทั้งหมด
 const visibleColumns = ref<string[]>([
   "firstName",
   "createdAt",
@@ -213,6 +221,22 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    try {
+      await http.delete(config.API.kpiUserEvaluation + `/${id}`);
+      await checkAndUpdatePage(rows.value.length);
+      await fetchList();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /** Hook */
 onMounted(async () => {
   await fetchRoundOption();
@@ -444,6 +468,18 @@ onMounted(async () => {
                   >
                     <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                   </q-btn>
+
+                  <q-btn
+                    v-if="checkPermission($route)?.attrOwnership === 'OWNER'"
+                    @click="handleDelete(props.row.id)"
+                    round
+                    color="red"
+                    flat
+                    dense
+                    icon="delete"
+                  >
+                    <q-tooltip>ลบข้อมูล</q-tooltip>
+                  </q-btn>
                 </q-td>
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div>