ค้นหา keyword

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?.()
     })
 }

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>

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>

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>