ค้นหา 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
+      <FormTime :dataById="data" :closePopup="clickClosePopup" />
-        :dataById="data"
-        :closePopup="clickClosePopup"
-        :fetcthDataTable="props.fetcthDataTable"
-      />
     </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
+  <Popup :modal="modalPopup" :title="titleName" :clickClose="onClickClose" />
-    :modal="modalPopup"
-    :title="titleName"
-    :clickClose="onClickClose"
-    :fetcthDataTable="props.fetchData"
-  />
 </template>
 
 <style scoped></style>

src/stores/chekin.ts

@@ -52,21 +52,21 @@ export const useChekIn = defineStore('checkin', () => {
   //       return 'อนุมัติ'
   //   }
   // }
-  // function classColorStatus(val: string) {
+  function classColorStatus(val: string) {
-  //   switch (val) {
+    switch (val) {
-  //     case 'wait':
+      case 'wait':
-  //       return 'orange'
+        return 'orange'
-  //     case 'approve':
+      case 'approve':
-  //       return 'green'
+        return 'green'
-  //     case 'reject':
+      case 'reject':
-  //       return 'red'
+        return 'red'
-  //   }
+    }
-  // }
+  }
 
   return {
     rows,
     fetchHistoryList,
-    // classColorStatus,
+    classColorStatus,
     // fetchlistHistory,
   }
 })

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>