From 4bcc414a4f750ba19d03337d32e16bdb6b619436 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 Nov 2023 18:12:56 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=99=E0=B8=AB=E0=B8=B2?=
 =?UTF-8?q?=20keyword?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormTime.vue     |  4 +--
 src/components/PopUp.vue        | 10 +-----
 src/components/TableHistory.vue | 63 +++++++++++++++++++++++++++++++--
 src/components/ToolBar.vue      |  8 ++---
 src/stores/chekin.ts            | 22 ++++++------
 src/views/HistoryView.vue       |  7 ++--
 6 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index 1f35dc1..ca7955a 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -59,6 +59,7 @@ const checkstatusBox = ref<boolean>(false)
 
 /** function checkValidate*/
 function onCkickSave() {
+  props.closePopup?.()
   const hasError = []
   for (const key in objectRef) {
     if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
@@ -99,13 +100,12 @@ async function createListTime(data: FormTimeStemp) {
   await http
     .post(config.API.createTimeStamp(), data)
     .then(() => {
-      success($q, 'บันทึกข้อมูลาำเร็จ')
+      success($q, 'บันทึกข้อมูลสำเร็จ')
     })
     .catch((err) => {
       console.log(err)
     })
     .finally(() => {
-      props.fetcthDataTable?.()
       props.closePopup?.()
     })
 }
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index cd09708..2ffadac 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -21,10 +21,6 @@ const props = defineProps({
     type: Object,
     default: null,
   },
-  fetcthDataTable: {
-    type: Function,
-    require: true,
-  },
 })
 
 const data = ref<any>()
@@ -43,11 +39,7 @@ watch(
   <q-dialog v-model="props.modal">
     <q-card class="column" style="width: 300px; min-height: 600px">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
-      <FormTime
-        :dataById="data"
-        :closePopup="clickClosePopup"
-        :fetcthDataTable="props.fetcthDataTable"
-      />
+      <FormTime :dataById="data" :closePopup="clickClosePopup" />
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index baa0c31..0a96529 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -77,6 +77,8 @@ const props = defineProps({
   },
 })
 
+const keyword = ref<string>()
+
 const emit = defineEmits(['update:change-page'])
 
 // Pagination - initial pagination
@@ -96,7 +98,8 @@ watch(
       'update:change-page',
       currentPage.value,
       initialPagination.value.rowsPerPage,
-      true
+      true,
+      keyword.value
     )
   }
 )
@@ -107,6 +110,16 @@ async function updatePagination(newPagination: any) {
   currentPage.value = 1 // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
+async function filterFn() {
+  emit(
+    'update:change-page',
+    1,
+    initialPagination.value.rowsPerPage,
+    true,
+    keyword.value
+  )
+}
+
 /** column history table */
 const columns = ref<QTableProps['columns']>([
   {
@@ -173,6 +186,15 @@ const columns = ref<QTableProps['columns']>([
     style: 'font-size: 14px; width:15%;',
   },
 ])
+const visibleColumns = ref<string[]>([
+  'checkInDate',
+  'checkInTime',
+  'checkInLocation',
+  'checkInStatus',
+  'checkOutTime',
+  'checkOutLocation',
+  'checkOutStatus',
+])
 // popup
 const modalPopup = ref<boolean>(false)
 const titlePopup = ref<string>('')
@@ -214,12 +236,47 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
 </script>
 
 <template>
+  <div class="row col-12 q-col-gutter-sm q-mb-sm">
+    <q-space />
+    <div class="col-xs-12 col-sm-3 col-md-2">
+      <q-input
+        for="filterTable"
+        dense
+        outlined
+        v-model="keyword"
+        label="ค้นหา"
+        debounce="300"
+        @keydown.enter.prevent="filterFn"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </div>
+    <div class="col-xs-12 col-sm-3 col-md-2">
+      <q-select
+        for="visibleColumns"
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        options-cover
+      />
+    </div>
+  </div>
   <q-table
     flat
     bordered
     class="custom-table2"
     :columns="columns"
     :rows="stores.rows"
+    :visible-columns="visibleColumns"
     virtual-scroll
     v-model:selected="selected"
     :virtual-scroll-sticky-size-start="48"
@@ -271,12 +328,12 @@ const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
             color="cyan-6"
             @click="openPopup(props.row)"
           />
-          <q-chip
+          <!-- <q-chip
             v-else
             :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
             :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
             >{{ props.row.statusEdit }}</q-chip
-          >
+          > -->
         </q-td>
       </q-tr>
     </template>
diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index be36abc..b652dae 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -27,6 +27,7 @@ function onClickopen() {
 }
 function onClickClose() {
   modalPopup.value = false
+  props.fetchData?.()
 }
 </script>
 <template>
@@ -79,12 +80,7 @@ function onClickClose() {
     </div>
   </div>
 
-  <Popup
-    :modal="modalPopup"
-    :title="titleName"
-    :clickClose="onClickClose"
-    :fetcthDataTable="props.fetchData"
-  />
+  <Popup :modal="modalPopup" :title="titleName" :clickClose="onClickClose" />
 </template>
 
 <style scoped></style>
diff --git a/src/stores/chekin.ts b/src/stores/chekin.ts
index 171545e..cd03e61 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@@ -52,21 +52,21 @@ export const useChekIn = defineStore('checkin', () => {
   //       return 'อนุมัติ'
   //   }
   // }
-  // function classColorStatus(val: string) {
-  //   switch (val) {
-  //     case 'wait':
-  //       return 'orange'
-  //     case 'approve':
-  //       return 'green'
-  //     case 'reject':
-  //       return 'red'
-  //   }
-  // }
+  function classColorStatus(val: string) {
+    switch (val) {
+      case 'wait':
+        return 'orange'
+      case 'approve':
+        return 'green'
+      case 'reject':
+        return 'red'
+    }
+  }
 
   return {
     rows,
     fetchHistoryList,
-    // classColorStatus,
+    classColorStatus,
     // fetchlistHistory,
   }
 })
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index 9e31e10..3685034 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -34,10 +34,12 @@ const filter = ref<string>('') //search data table
 async function changePage(
   pageVal: number,
   pageSizeVal: number,
-  loading: false
+  loading: false,
+  key: string
 ) {
   page.value = await pageVal
   pageSize.value = await pageSizeVal
+  filter.value = await key
   fetchlistHistory(loading)
 }
 
@@ -56,6 +58,7 @@ async function fetchlistHistory(loading = true) {
       const data = res.data.result.data
       total.value = res.data.result.total
       maxPage.value = await Math.ceil(total.value / pageSize.value)
+
       fetchHistoryList(data) // ปิดกรณีมี total
     })
     .catch((err) => {
@@ -77,7 +80,7 @@ async function updateYear(y: number) {
 
 /** Hook*/
 onMounted(() => {
-  fetchlistHistory()
+  fetchlistHistory(true)
 })
 </script>
 <template>