filter ==> retirement

src/modules/06_retirement/components/02_resign/DialogSendToCommand.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -30,7 +30,7 @@ const dataMapToSend = computed(() => {
   }));
 });
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const { dialogConfirm, date2Thai, onSearchDataTable } = mixin;
 
 /** props*/
 const props = defineProps({
@@ -43,6 +43,8 @@ const props = defineProps({
 });
 
 //Table
+const rowsData = ref<ResponseItems[]>([]);
+const rowsDataMain = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -60,7 +62,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: (row) => `${row.prefix}${row.firstName} ${row.lastName}`,
+    field: "fullname",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -129,7 +134,10 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: (row) => statusText(row.status),
+    field: "status",
+    format(val, row) {
+      return statusText(row.status);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -166,20 +174,31 @@ function updateInput(value: any) {
   emit("update:filterKeyword2", value);
 }
 
-/** รีเซ็ตค่าในช่องค้นหา */
-function Reset() {
-  emit("update:filterKeyword2", "");
+async function onSearch() {
+  rowsData.value = onSearchDataTable(
+    props.filterKeyword2 ? props.filterKeyword2 : "",
+    rowsDataMain.value,
+    columns.value ? columns.value : []
+  );
 }
 
-watchEffect(() => {
-  if (props.modal === true) {
-    selected.value = [];
+watch(
+  () => props.modal,
+  (val) => {
+    if (val) {
+      selected.value = [];
+      rowsData.value = props.rows ? props.rows : [];
+      rowsDataMain.value = props.rows ? props.rows : [];
+    } else {
+      rowsData.value = [];
+      rowsDataMain.value = [];
+    }
   }
-});
+);
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 1200px; max-width: 80vw">
+    <q-card style="min-width: 80%">
       <DialogHeader tittle="ส่งไปออกคำสั่งลาออก" :close="closeModal" />
       <q-separator />
       <q-card-section>
@@ -192,6 +211,7 @@ watchEffect(() => {
               dense
               :model-value="filterKeyword2"
               @update:model-value="updateInput"
+              @keydown.enter="onSearch"
               placeholder="ค้นหา"
             >
               <template v-slot:append>
@@ -217,8 +237,7 @@ watchEffect(() => {
           <div class="col-12">
             <d-table
               :columns="columns"
-              :rows="rows"
-              :filter="filterKeyword2?.trim()"
+              :rows="rowsData"
               row-key="id"
               :visible-columns="visibleColumns"
               selection="multiple"