fix(development - record): add button delete

src/modules/15_development/components/Record.vue

@@ -1,15 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 import type { ResRecord } from "@/modules/15_development/interface/response/Main";
 
 const $q = useQuasar();
-const { date2Thai, onSearchDataTable } = useCounterMixin();
+const {
+  date2Thai,
+  onSearchDataTable,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = useCounterMixin();
 
 //prosp
 const isProfile = defineModel<boolean>("isProfile", { required: true });
@@ -231,10 +240,6 @@ const visibleColumns = ref<string[]>([
   "commandNumber",
   "commandDate",
 ]);
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /**
  * convert status to text
@@ -253,10 +258,11 @@ function formBmaofficer(val: string) {
 
 /** function เรียกข้อมูลโครงการ*/
 function fetchDataProject() {
-  rows.value = listPerson.value.filter(
+  const data = listPerson.value.filter(
     (e: ResRecord) => e.isProfile === isProfile.value
   );
-  rowsMain.value = rows.value;
+  rowsMain.value = data;
+  serchDataTable();
 }
 
 function serchDataTable() {
@@ -267,6 +273,23 @@ function serchDataTable() {
   );
 }
 
+function handleDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      await http.delete(config.API.developmentMain + `/delete/${id}`);
+      success($q, "ลบข้อมูลสำเร็จ");
+      rowsMain.value = rowsMain.value.filter((e: ResRecord) => e.id !== id);
+      listPerson.value = listPerson.value.filter((e: ResRecord) => e.id !== id);
+      serchDataTable();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
 /** ดึงข้อมูลเมื่อคอมโพเนนต์โหลดเสร็จสมบูรณ์  */
 onMounted(() => {
   fetchDataProject();
@@ -314,12 +337,12 @@ onMounted(() => {
       :columns="columns"
       :rows="rows"
       :paging="true"
-      v-model:pagination="pagination"
       :rows-per-page-options="[20, 50, 100]"
       :visible-columns="visibleColumns"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
+          <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
           </q-th>
@@ -327,6 +350,18 @@ onMounted(() => {
       </template>
       <template v-slot:body="props">
         <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn
+              flat
+              round
+              color="red"
+              @click="handleDelete(props.row.id)"
+              icon="mdi-delete"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+
           <q-td v-for="col in props.cols" :key="col.id">
             <div v-if="col.name === 'isDone'" class="text-center">
               <q-icon