From c7aa139d7479786bf279406a8b837687156c1858 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 1 Feb 2024 14:14:50 +0700
Subject: [PATCH 1/2] table position

---
 .../components/listView.vue                   |   2 +-
 .../components/tableTree.vue                  | 176 ++++++++++--------
 2 files changed, 99 insertions(+), 79 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index 4fb08251b..be42f4ada 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -116,7 +116,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     .finally(() => {
       setTimeout(() => {
         isLoad.value = false;
-      }, 1500);
+      }, 500);
     });
 }
 
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index a750554ad..cbc6151e1 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -297,7 +297,6 @@ function updatePagination(newPagination: NewPagination) {
       bordered
       :paging="true"
       dense
-      class="custom-header-table"
       :rows-per-page-options="[10, 25, 50, 100]"
       :filter="filter"
       @update:pagination="updatePagination"
@@ -376,84 +375,78 @@ function updatePagination(newPagination: NewPagination) {
         <q-tr v-show="props.expand" :props="props">
           <q-td colspan="100%">
             <div class="text-left q-pa-md">
-              <div class="col-12">
-                <q-table
-                  :columns="columnsExpand"
-                  :rows="props.row.positions"
-                  row-key="id"
-                  bordered
-                  dense
-                  class="custom-header-table"
-                >
-                  <template v-slot:header="props">
-                    <q-tr :props="props">
-                      <q-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <span class="text-weight-medium">{{ col.label }}</span>
-                      </q-th>
-                      <q-th auto-width></q-th>
-                    </q-tr>
-                  </template>
-                  <template v-slot:body="props">
-                    <q-tr :props="props" class="cursor-pointer">
-                      <q-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                      >
-                        <div v-if="col.name == 'no'">
-                          {{ props.rowIndex + 1 }}
-                        </div>
+              <q-table
+                flat
+                :columns="columnsExpand"
+                :rows="props.row.positions"
+                row-key="id"
+                dense
+                hide-bottom
+                class="custom-header-table-expand"
+              >
+                <template v-slot:header="props">
+                  <q-tr :props="props">
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <span class="text-weight-medium">{{ col.label }}</span>
+                    </q-th>
+                    <!-- <q-th auto-width></q-th> -->
+                  </q-tr>
+                </template>
+                <template v-slot:body="props">
+                  <q-tr :props="props" class="cursor-pointer">
+                    <q-td
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      <div v-if="col.name == 'no'">
+                        {{ props.rowIndex + 1 }}
+                      </div>
 
-                        <div v-else>
-                          {{ col.value }}
-                        </div>
-                      </q-td>
-                      <q-td>
-                        <q-btn
-                          flat
-                          dense
-                          icon="mdi-dots-vertical"
-                          class="q-pa-none q-ml-xs"
-                          color="grey-13"
-                        >
-                          <q-menu>
-                            <q-list
-                              dense
-                              style="min-width: 200px"
-                              v-for="(item, index) in listMenu"
-                              :key="index"
+                      <div v-else>
+                        {{ col.value }}
+                      </div>
+                    </q-td>
+                    <!-- <q-td>
+                      <q-btn
+                        flat
+                        dense
+                        icon="mdi-dots-vertical"
+                        class="q-pa-none q-ml-xs"
+                        color="grey-13"
+                      >
+                        <q-menu>
+                          <q-list
+                            dense
+                            style="min-width: 200px"
+                            v-for="(item, index) in listMenu"
+                            :key="index"
+                          >
+                            <q-item
+                              clickable
+                              v-close-popup
+                              @click="
+                                item.type === 'VIEWDETIAL'
+                                  ? onClickViewDetail()
+                                  : null
+                              "
                             >
-                              <q-item
-                                clickable
-                                v-close-popup
-                                @click="
-                                  item.type === 'VIEWDETIAL'
-                                    ? onClickViewDetail()
-                                    : null
-                                "
-                              >
-                                <q-item-section avatar>
-                                  <q-icon
-                                    :color="item.color"
-                                    :name="item.icon"
-                                  />
-                                </q-item-section>
-                                <q-item-section>{{
-                                  item.label
-                                }}</q-item-section>
-                              </q-item>
-                            </q-list>
-                          </q-menu>
-                        </q-btn>
-                      </q-td>
-                    </q-tr>
-                  </template>
-                </q-table>
-              </div>
+                              <q-item-section avatar>
+                                <q-icon :color="item.color" :name="item.icon" />
+                              </q-item-section>
+                              <q-item-section>{{ item.label }}</q-item-section>
+                            </q-item>
+                          </q-list>
+                        </q-menu>
+                      </q-btn>
+                    </q-td> -->
+                  </q-tr>
+                </template>
+              </q-table>
             </div>
           </q-td>
         </q-tr>
@@ -485,4 +478,31 @@ function updatePagination(newPagination: NewPagination) {
   <DialogSort v-model:sort-position="modalSort" v-model:data="dataSort" />
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.custom-header-table-expand {
+  height: auto;
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+  .q-table tr:nth-child(even) td {
+    background: white;
+  }
+
+  .q-table thead tr {
+    background: white;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>

From 039d4081d6d65f5b1e737f9b6c26c99bb3f74c9a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 1 Feb 2024 14:31:22 +0700
Subject: [PATCH 2/2] filter keyword

---
 .../components/listView.vue                   |  7 +++++
 .../components/tableTree.vue                  | 31 ++++++++-----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/listView.vue b/src/modules/02_organizationalNew/components/listView.vue
index be42f4ada..0b6cedcde 100644
--- a/src/modules/02_organizationalNew/components/listView.vue
+++ b/src/modules/02_organizationalNew/components/listView.vue
@@ -120,6 +120,12 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
     });
 }
 
+async function filterKeyword() {
+  reqMaster.page = 1;
+  action1.value === false &&
+    fetchDataTable(reqMaster.id, reqMaster.type, false);
+}
+
 /**lifecycle Hook*/
 onMounted(async () => {
   const id =
@@ -197,6 +203,7 @@ watch(
               v-model:reqMaster="reqMaster"
               v-model:totalPage="totalPage"
               v-model:posMaster="posMaster"
+              :filterKeyword="filterKeyword"
             />
 
             <q-banner v-else class="q-pa-lg col-12 text-center">
diff --git a/src/modules/02_organizationalNew/components/tableTree.vue b/src/modules/02_organizationalNew/components/tableTree.vue
index cbc6151e1..640a68b49 100644
--- a/src/modules/02_organizationalNew/components/tableTree.vue
+++ b/src/modules/02_organizationalNew/components/tableTree.vue
@@ -17,6 +17,10 @@ import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosi
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 
+const props = defineProps({
+  filterKeyword: { type: Function, require: true, default: () => {} },
+});
+
 const dataSort = ref<Array<any>>([]);
 const modalSort = ref<boolean>(false);
 const showAllData = ref<boolean>(false);
@@ -188,22 +192,6 @@ const columnsExpand = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const rows = ref<any>([
-  {
-    noPosition: "สกง.1",
-    namePosition: "นักทรัพยากรบุคคล",
-    typePosition: "ทั่วไป",
-    levelPositoion: "ชำนาญการ / ?",
-    isStatus: "ไม่มี",
-  },
-  {
-    noPosition: "สกง.2",
-    namePosition: "นักทรัพยากรบุคคล",
-    typePosition: "ทั่วไป",
-    levelPositoion: "ชำนาญการ / ?",
-    isStatus: "ไม่มี",
-  },
-]);
 
 const dialogPosition = ref<boolean>(false);
 function onClickPosition(type: string) {
@@ -281,7 +269,15 @@ function updatePagination(newPagination: NewPagination) {
             >
           </q-checkbox>
         </div>
-        <div><q-input outlined dense v-model="filter" label="ค้นหา" /></div>
+        <div>
+          <q-input
+            outlined
+            dense
+            v-model="reqMaster.keyword"
+            label="ค้นหา"
+            @keydown.enter.prevent="props.filterKeyword(reqMaster.keyword)"
+          />
+        </div>
       </div>
     </q-toolbar>
   </div>
@@ -298,7 +294,6 @@ function updatePagination(newPagination: NewPagination) {
       :paging="true"
       dense
       :rows-per-page-options="[10, 25, 50, 100]"
-      :filter="filter"
       @update:pagination="updatePagination"
     >
       <template v-slot:header="props">