From d2f28ad2f80e62544df82e7913f7dc5eb709d991 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 28 Aug 2023 16:38:04 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20tab=20?=
 =?UTF-8?q?=20=E0=B8=A2=E0=B8=B7=E0=B8=A1=E0=B8=84=E0=B8=B7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/4_Allocate/Main.vue            |   5 +-
 .../07_insignia/components/5_Borrow/Main.vue  | 302 +++++++++---------
 src/modules/07_insignia/storeAllocate.ts      |   5 +-
 3 files changed, 155 insertions(+), 157 deletions(-)

diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index ad2a6704d..470a4cba8 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -82,7 +82,7 @@ const fecthInsignia = async () => {
     })
     .finally(async () => {
       insigniaOp.value = await DataStore.insigniaOp.filter(
-        (x: any) => x.type == tab.value
+        (x: any) => x.type == tab.value  || x.type === ""
       );
     });
 };
@@ -159,8 +159,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 watch(tab, () => {
+  console.log(DataStore.insigniaOp);
   insigniaOp.value = DataStore.insigniaOp.filter(
-    (x: any) => x.type == tab.value
+    (x: any) => x.type == tab.value || x.type === ""
   );
   DataStore.insignia = "";
   fecthlistInsignia();
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index 4077f71b1..752fd205d 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -46,24 +46,32 @@ const fecthRound = async () => {
     .get(config.API.noteround())
     .then((res) => {
       let data = res.data.result;
-      selectRoundAllOption.value = [{
-        name: "ทั้งหมด",
-        id: "00000000-0000-0000-0000-000000000000",
-        year: 0,
-      }]
+      selectRoundAllOption.value = [
+        {
+          name: "ทั้งหมด",
+          id: "00000000-0000-0000-0000-000000000000",
+          year: 0,
+        },
+      ];
 
       data.map((e: any) => {
-        selectRoundOption.value = [...selectRoundOption.value, {
-          name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
-          id: e.id,
-          year: e.year
-        }]
+        selectRoundOption.value = [
+          ...selectRoundOption.value,
+          {
+            name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+            id: e.id,
+            year: e.year,
+          },
+        ];
 
-        selectRoundAllOption.value = [...selectRoundAllOption.value, {
-          name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
-          id: e.id,
-          year: e.year
-        }]
+        selectRoundAllOption.value = [
+          ...selectRoundAllOption.value,
+          {
+            name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+            id: e.id,
+            year: e.year,
+          },
+        ];
       });
       selectRound.value = data[0].id;
       roundYear.value = data[0].year;
@@ -83,9 +91,12 @@ const fecthInsignia = async () => {
     })
     .catch((err) => {
       console.log(err);
-    }).finally(async () => {
-      insigniaList.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value || x.type == '')
     })
+    .finally(async () => {
+      insigniaList.value = await DataStore.insigniaOp.filter(
+        (x: any) => x.type == tab.value || x.type == ""
+      );
+    });
 };
 
 const fecthInsigniaType = async () => {
@@ -276,14 +287,19 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 watch(tab, async () => {
-  insigniaList.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value || x.type == '')
-  DataStore.insignia = ''
+  insigniaList.value = await DataStore.insigniaOp.filter(
+    (x: any) => x.type == tab.value || x.type == ""
+  );
+  DataStore.insignia = "";
   fecthlistInsignia();
 });
 
-const selectorInsignia = async() => {
+const selectorInsignia = async () => {
   const dataCopy = await DataStore.listInsignia;
-  rows.value = DataStore.insignia != '' ? dataCopy.filter((x:any)=>x.requestInsigniaId == DataStore.insignia): dataCopy
+  rows.value =
+    DataStore.insignia != ""
+      ? dataCopy.filter((x: any) => x.requestInsigniaId == DataStore.insignia)
+      : dataCopy;
 };
 
 // const selectorRound = (round: string) => {
@@ -294,10 +310,12 @@ const rows = ref<any[]>([]);
 const fecthlistInsignia = async () => {
   showLoader();
   await http
-    .get(config.API.insigniaManageBorrowList(Number(roundYear.value), tab.value))
+    .get(
+      config.API.insigniaManageBorrowList(Number(roundYear.value), tab.value)
+    )
     .then(async (res) => {
-      await DataStore.fetchlistinsignia(res.data.result)
-      rows.value = DataStore.rows
+      await DataStore.fetchlistinsignia(res.data.result);
+      rows.value = DataStore.rows;
     })
     .catch((err) => {
       console.log(err);
@@ -317,7 +335,7 @@ const close = () => {
 
 const closeAndFecth = () => {
   modal.value = false;
-  fecthlistInsignia()
+  fecthlistInsignia();
 };
 
 const addData = () => {
@@ -329,7 +347,6 @@ const editData = (id: any) => {
   profileId.value = id;
   action.value = "editData";
   modal.value = true;
-
 };
 
 const resetFilter = () => {
@@ -344,18 +361,27 @@ const resetFilter = () => {
     ยืม-คืนเครื่องราชฯ
   </div>
   <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
+    <q-tabs
+      dense
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
       <div v-for="item in DataStore.insigniaType">
         <q-tab :name="item.name" :label="item.label" />
       </div>
-
     </q-tabs>
-
     <q-separator />
-
-    <div>
-      <div v-for="item in DataStore.insigniaType">
-        <div v-if="tab == item.name" class="q-pa-md">
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="item in DataStore.insigniaType"
+        :key="item.name"
+        :name="item.name"
+        class="q-pa-none"
+      >
+        <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
             <!-- <div>
               <q-select v-model="selectRound" dense outlined lazy-rules hide-bottom-space
@@ -364,14 +390,34 @@ const resetFilter = () => {
                 style="min-width: 150px" @update:emit-value="selectorRound" />
             </div> -->
             <div>
-              <q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
-                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="insigniaList"
-                option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
-                @update:model-value="selectorInsignia" />
+              <q-select
+                v-model="DataStore.insignia"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="insigniaList"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 150px"
+                @update:model-value="selectorInsignia"
+              />
             </div>
 
             <div>
-              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
                 <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
@@ -379,31 +425,68 @@ const resetFilter = () => {
 
             <div class="items-center" style="display: flex">
               <!-- ค้นหาข้อความใน table -->
-              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                style="max-width: 200px" class="q-ml-sm">
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
                 <template v-slot:append>
                   <q-icon v-if="filter == ''" name="search" />
-                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
                 </template>
               </q-input>
               <!-- แสดงคอลัมน์ใน table -->
-              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                class="gt-xs q-ml-sm" />
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
             </div>
           </div>
-
-          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
             <template v-slot:body-cell="props">
               <q-td :props="props">
                 <div v-if="props.col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
 
-                <div v-else-if="props.col.name == 'action' && props.row.returnDate == '-'">
+                <div
+                  v-else-if="
+                    props.col.name == 'action' && props.row.returnDate == '-'
+                  "
+                >
                   <q-td>
-
-                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
+                    <q-btn
+                      label="คืนเครื่องราชฯ"
+                      @click="editData(props.row.id)"
+                      color="blue"
+                    />
                   </q-td>
                 </div>
 
@@ -414,112 +497,23 @@ const resetFilter = () => {
             </template>
           </d-table>
         </div>
+      </q-tab-panel>
+    </q-tab-panels>
 
-        <div v-else-if="tab == item.name" class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
-              emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
-              input-debounce="0" style="min-width: 150px" />
-            <div>
-              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-
-            <q-space />
-
-            <div class="items-center" style="display: flex">
-              <!-- ค้นหาข้อความใน table -->
-              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                style="max-width: 200px" class="q-ml-sm">
-                <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                </template>
-              </q-input>
-              <!-- แสดงคอลัมน์ใน table -->
-              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                class="gt-xs q-ml-sm" />
-            </div>
-          </div>
-
-          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-            <template v-slot:body-cell="props">
-              <q-td :props="props">
-                <div v-if="props.col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
-                <div v-else-if="props.col.name == 'action' && props.row.returnDate == '-'">
-                  <q-td>
-                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
-                  </q-td>
-                </div>
-
-                <div v-else>
-                  {{ props.value }}
-                </div>
-              </q-td>
-            </template>
-          </d-table>
-        </div>
-
-        <div v-else-if="tab == item.name" class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
-              emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
-              input-debounce="0" style="min-width: 150px" />
-            <div>
-              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
-                <q-tooltip>เพิ่ม</q-tooltip>
-              </q-btn>
-            </div>
-            <q-space />
-
-            <div class="items-center" style="display: flex">
-              <!-- ค้นหาข้อความใน table -->
-              <q-input standout dense v-model="filter" ref="filterRef" outlined debounce="300" placeholder="ค้นหา"
-                style="max-width: 200px" class="q-ml-sm">
-                <template v-slot:append>
-                  <q-icon v-if="filter == ''" name="search" />
-                  <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-                </template>
-              </q-input>
-              <!-- แสดงคอลัมน์ใน table -->
-              <q-select v-model="visibleColumns" :display-value="$q.lang.table.columns" multiple outlined dense
-                :options="columns" options-dense option-value="name" map-options emit-value style="min-width: 150px"
-                class="gt-xs q-ml-sm" />
-            </div>
-          </div>
-
-          <d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
-            <template v-slot:body-cell="props">
-              <q-td :props="props">
-                <div v-if="props.col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-
-                <div v-else-if="props.col.name == 'action' && props.row.returnDate == '-'">
-                  <q-td>
-                    <q-btn label="คืนเครื่องราชฯ" @click="editData(props.row.id)" color="blue" />
-                  </q-td>
-                </div>
-
-                <div v-else>
-                  {{ props.value }}
-                </div>
-              </q-td>
-            </template>
-          </d-table>
-        </div>
-      </div>
-
-    </div>
-
-    <DialogForm :modal="modal" :close="close" :close-and-fecth="closeAndFecth"
-      :round-id="selectRound == '00000000-0000-0000-0000-000000000000' ? 'all' : selectRound" :action="action"
-      :profile-id="profileId" :select-round-option="selectRoundOption" :type-id="tab" />
+    <DialogForm
+      :modal="modal"
+      :close="close"
+      :close-and-fecth="closeAndFecth"
+      :round-id="
+        selectRound == '00000000-0000-0000-0000-000000000000'
+          ? 'all'
+          : selectRound
+      "
+      :action="action"
+      :profile-id="profileId"
+      :select-round-option="selectRoundOption"
+      :type-id="tab"
+    />
   </q-card>
 </template>
 <style lang="scss" scoped>
diff --git a/src/modules/07_insignia/storeAllocate.ts b/src/modules/07_insignia/storeAllocate.ts
index ace861f76..14732def1 100644
--- a/src/modules/07_insignia/storeAllocate.ts
+++ b/src/modules/07_insignia/storeAllocate.ts
@@ -41,7 +41,10 @@ export const useAllocateDataStore = defineStore("insigniaallocate", () => {
   }
   const selectInsignia = () => {
     console.log(insignia.value);
-    rows.value = listInsignia.value.filter((e: any) => e.insigniaId === insignia.value)
+    if (insignia.value !== "") {
+      rows.value = listInsignia.value.filter((e: any) => e.insigniaId === insignia.value)
+    } else rows.value = listInsignia.value
+
   }
   const profileType = (val: string) => {
     switch (val) {