ค้นหา keyword

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>