From e6538a3e4f25df90910835d19cc20d23a8aa2c4c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 13 Feb 2024 10:18:25 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9ATab=20?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=B1=E0=B8=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/calendar/CalendarList.vue      | 192 ++++++++++++------
 src/modules/01_metadataNew/views/personal.vue |  35 +++-
 src/modules/01_metadataNew/views/position.vue |  21 +-
 3 files changed, 171 insertions(+), 77 deletions(-)

diff --git a/src/modules/01_metadataNew/components/calendar/CalendarList.vue b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
index a78838f20..f47ec5f76 100644
--- a/src/modules/01_metadataNew/components/calendar/CalendarList.vue
+++ b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
@@ -18,67 +18,137 @@
         class="q-py-xs col-6 row"
       />
     </q-tabs>
-    <q-table
-      ref="table"
-      flat
-      bordered
-      class="custom-header-table"
-      virtual-scroll
-      :rows="calendarData"
-      :columns="columns"
-      dense
-      :rows-per-page-options="[0]"
-      hide-header
-    >
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td v-for="col in props.cols" :key="col.name" :props="props">
-            <div v-if="col.name == 'week'" class="">
-              {{ dayThaiRange(props.row.dateRange) }}
-            </div>
-            <div v-else-if="col.name == 'holidayDate'" class="">
-              {{ dateThaiRange(props.row.dateRange) }}
-            </div>
-            <div v-else class="my-table-details">
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              flat
-              round
-              color="grey"
-              @click.stop
-              size="10px"
-              icon="more_vert"
-            >
-              <q-menu>
-                <q-list>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="editCalendar(props.row)"
-                  >
-                    <q-item-section>
-                      <q-item-label>แก้ไขวันหยุด</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                  <q-item
-                    clickable
-                    v-close-popup
-                    @click="deleteClick(props.row)"
-                  >
-                    <q-item-section>
-                      <q-item-label>ลบวันหยุด</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-menu>
-            </q-btn>
-          </q-td>
-        </q-tr>
-      </template>
-    </q-table>
+    <q-separator />
+
+    <q-tab-panels v-model="currentTab" animated>
+      <q-tab-panel name="normal">
+        <q-table
+          ref="table"
+          flat
+          bordered
+          class="custom-header-table"
+          virtual-scroll
+          :rows="calendarData"
+          :columns="columns"
+          dense
+          :rows-per-page-options="[0]"
+          hide-header
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'week'" class="">
+                  {{ dayThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else-if="col.name == 'holidayDate'" class="">
+                  {{ dateThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else class="my-table-details">
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  color="grey"
+                  @click.stop
+                  size="10px"
+                  icon="more_vert"
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="editCalendar(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>แก้ไขวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="deleteClick(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>ลบวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-tab-panel>
+
+      <q-tab-panel name="6day">
+        <q-table
+          ref="table"
+          flat
+          bordered
+          class="custom-header-table"
+          virtual-scroll
+          :rows="calendarData"
+          :columns="columns"
+          dense
+          :rows-per-page-options="[0]"
+          hide-header
+        >
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'week'" class="">
+                  {{ dayThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else-if="col.name == 'holidayDate'" class="">
+                  {{ dateThaiRange(props.row.dateRange) }}
+                </div>
+                <div v-else class="my-table-details">
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width>
+                <q-btn
+                  flat
+                  round
+                  color="grey"
+                  @click.stop
+                  size="10px"
+                  icon="more_vert"
+                >
+                  <q-menu>
+                    <q-list>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="editCalendar(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>แก้ไขวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="deleteClick(props.row)"
+                      >
+                        <q-item-section>
+                          <q-item-label>ลบวันหยุด</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-tab-panel>
+    </q-tab-panels>
   </q-card>
 
   <!-- modal เพิ่มวันหยุด -->
diff --git a/src/modules/01_metadataNew/views/personal.vue b/src/modules/01_metadataNew/views/personal.vue
index f107f339f..0830da32b 100644
--- a/src/modules/01_metadataNew/views/personal.vue
+++ b/src/modules/01_metadataNew/views/personal.vue
@@ -50,17 +50,32 @@ onMounted(() => {
           class="q-py-xs"
         />
       </q-tabs>
-      <q-separator size="2px" />
+      <q-separator />
       <!-- person -->
-      <div class="q-pa-md">
-        <ListPrefix v-if="currentTab == 'list_prefix'" />
-        <ListRank v-if="currentTab == 'list_rank'" />
-        <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
-        <ListGender v-if="currentTab == 'list_gender'" />
-        <ListReligion v-if="currentTab == 'list_religion'" />
-        <ListRelationship v-if="currentTab == 'list_relationship'" />
-        <ListEducation v-if="currentTab == 'list_education'" />
-      </div>
+
+      <q-tab-panels v-model="currentTab" animated>
+        <q-tab-panel name="list_prefix">
+          <ListPrefix v-if="currentTab == 'list_prefix'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_rank">
+          <ListRank v-if="currentTab == 'list_rank'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_bloodGroup">
+          <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_gender">
+          <ListGender v-if="currentTab == 'list_gender'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_religion">
+          <ListReligion v-if="currentTab == 'list_religion'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_relationship">
+          <ListRelationship v-if="currentTab == 'list_relationship'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_education">
+          <ListEducation v-if="currentTab == 'list_education'" />
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/01_metadataNew/views/position.vue b/src/modules/01_metadataNew/views/position.vue
index bd15a4547..0c2ce6698 100644
--- a/src/modules/01_metadataNew/views/position.vue
+++ b/src/modules/01_metadataNew/views/position.vue
@@ -41,12 +41,21 @@ onMounted(() => {
         class="q-py-xs"
       />
     </q-tabs>
-    <q-separator size="2px" />
-    <div class="q-pa-md">
-      <ListPosition v-if="store.pathLocation == 'list_position'" />
-      <ListType v-if="store.pathLocation == 'list_type'" />
-      <ListExecutive v-if="store.pathLocation == 'list_executive'" />
-    </div>
+    <q-separator />
+
+    <q-tab-panels v-model="store.pathLocation" animated>
+      <q-tab-panel name="list_position">
+        <ListPosition v-if="store.pathLocation == 'list_position'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_type">
+        <ListType v-if="store.pathLocation == 'list_type'" />
+      </q-tab-panel>
+
+      <q-tab-panel name="list_executive">
+        <ListExecutive v-if="store.pathLocation == 'list_executive'" />
+      </q-tab-panel>
+    </q-tab-panels>
   </q-card>
 </template>