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] 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>