From 0ee7dff491bb166e0615de6c1c6bebd00d505f7a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Mon, 16 Oct 2023 17:39:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B1=E0=B8=9A-=E0=B8=84=E0=B8=B7=E0=B8=99?=
 =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/5_Borrow/Main.vue  | 341 ++++++------------
 1 file changed, 108 insertions(+), 233 deletions(-)

diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index 383894ec0..f0930fed2 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -109,7 +109,7 @@ const fecthInsigniaType = async () => {
     .catch((err) => {
       messageError($q, err);
     })
-    .finally(() => {});
+    .finally(() => { });
 };
 
 const visibleColumns = ref<String[]>([
@@ -402,17 +402,17 @@ const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
     const needle = val.toLowerCase();
     if (name === "employeeClassOps") {
-      DataStore.employeeClass = "";
+      // DataStore.employeeClass = "";
       employeeClassOps.value = DataStore.employeeClassOps.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "fileterInsigniaList") {
-      DataStore.insignia = null as any;
+      // DataStore.insignia = null as any;
       fileterInsigniaList.value = insigniaList.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     } else if (name === "filterSelectRoundAllOption") {
-      yearRound.value = null as any;
+      // yearRound.value = null as any;
       filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
@@ -438,54 +438,23 @@ const clearInsigniaFilters = (name: string) => {
   <div class="toptitle text-dark col-12 row items-center">
     ยืม-คืนเครื่องราชฯ
   </div>
-  <q-card
-    flat
-    bordered
-    class="col-12 q-my-md q-mt-sm rounded-borders"
-    v-if="loadView == true"
-  >
-    <q-tabs
-      dense
-      v-model="tab"
-      align="left"
-      class="bg-white text-grey"
-      active-color="primary"
-      indicator-color="primary"
-    >
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders" v-if="loadView == true">
+    <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 />
     <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">
-            <q-select
-              v-model="yearRound"
-              dense
-              outlined
-              lazy-rules
-              hide-bottom-space
-              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
-              emit-value
-              map-options
-              use-input
-              option-label="name"
-              :options="filterSelectRoundAllOption"
-              option-value="year"
-              :borderless="false"
-              style="min-width: 150px"
-              @update:model-value="selectorRound"
-              @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
-                      ) "
-            >
+      <q-tab-panel v-for="item in DataStore.insigniaType" :key="item.name" :name="item.name" class="q-pa-md">
+        <div class="row col-12">
+          <div class="row col-12 q-col-gutter-sm">
+            <q-select v-model="yearRound" dense outlined lazy-rules hide-bottom-space
+              :label="`${'รอบการเสนอขอเครื่องราชฯ'}`" emit-value map-options use-input option-label="name"
+              :options="filterSelectRoundAllOption" option-value="year" :borderless="false" style="min-width: 150px"
+              @update:model-value="selectorRound" @filter="(inputValue: any,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
+                )">
               <template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey">
@@ -494,197 +463,110 @@ const clearInsigniaFilters = (name: string) => {
                 </q-item>
               </template>
             </q-select>
-            <div>
-              <q-select
-                v-model="DataStore.insignia"
-                dense
-                outlined
-                use-input
-                lazy-rules
-                hide-bottom-space
-                :label="`${'เครื่องราชฯ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="fileterInsigniaList"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'fileterInsigniaList'
-                      ) "
-              >
-                <template v-if="DataStore.insignia !== ''" v-slot:append>
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('fileterInsigniaList'),
-                        DataStore.searchDatatable(
-                          DataStore.insignia,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-            <div>
-              <q-select
-                class="col-2"
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                use-input
-                map-options
-                option-label="name"
-                :options="employeeClassOps"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
-                "
-                @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-              >
-                <template
-                  v-if="DataStore.employeeClass !== 'all'"
-                  v-slot:append
-                >
-                  <q-icon
-                    name="cancel"
-                    @click.stop.prevent="
-                      clearInsigniaFilters('employeeClassOps'),
-                        DataStore.searchDatatable(
-                          DataStore.insignia,
-                          DataStore.employeeClass
-                        )
-                    "
-                    class="cursor-pointer"
-                  />
-                </template>
-                <template v-slot:no-option>
-                  <q-item>
-                    <q-item-section class="text-grey">
-                      ไม่มีข้อมูล
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select>
-            </div>
-
-            <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>
+            <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filter" ref="filterRef" outlined
+              debounce="300" placeholder="ค้นหา">
+              <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>
+
+            <q-select 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 style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
           </div>
-          <d-table
-            :rows="DataStore.rows"
-            :columns="columns"
-            :visible-columns="visibleColumns"
-            :filter="filter"
-            row-key="id"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-            :paging="true"
-          >
+
+          <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+            <div class="row col-12 q-col-gutter-sm">
+              <q-select v-model="DataStore.insignia" dense outlined use-input lazy-rules hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="fileterInsigniaList"
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 230px" @update:model-value="
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )
+                  " @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
+    )">
+                <template v-if="DataStore.insignia !== ''" v-slot:append>
+                  <!-- <q-icon name="cancel" @click.stop.prevent="
+                    clearInsigniaFilters('fileterInsigniaList'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
+                    " class="cursor-pointer" /> -->
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
+                :label="`${'สถานภาพ'}`" emit-value use-input map-options option-label="name" :options="employeeClassOps"
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 240px" @update:model-value="
+                  DataStore.searchDatatable(
+                    DataStore.insignia,
+                    DataStore.employeeClass
+                  )" 
+                  @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+    )"
+    >
+                <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+                  <!-- <q-icon name="cancel" @click.stop.prevent="
+                    clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDatatable(
+                      DataStore.insignia,
+                      DataStore.employeeClass
+                    )
+                    " class="cursor-pointer" /> -->
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+
+              <q-space />
+              <div>
+                <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+                  <q-tooltip>เพิ่ม</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </q-card>
+        </div>
+
+        <div class="col-12 q-pt-sm">
+          <d-table :rows="DataStore.rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter"
+            row-key="id" :pagination-label="paginationLabel" v-model:pagination="pagination" :paging="true">
             <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>
                 <div v-else-if="props.col.name == 'returnOrganization'">
                   {{
                     props.row.returnOrganization == null
-                      ? "-"
-                      : props.row.returnOrganization
+                    ? "-"
+                    : props.row.returnOrganization
                   }}
                 </div>
                 <div v-else>
@@ -697,17 +579,10 @@ const clearInsigniaFilters = (name: string) => {
       </q-tab-panel>
     </q-tab-panels>
 
-    <DialogForm
-      :modal="modal"
-      :close="close"
-      :close-and-fecth="closeAndFecth"
-      :round-id="selectRound == '0' ? 'all' : selectRound"
-      :action="action"
-      :profile-id="profileId"
-      v-model:selectRoundOption="selectRoundOption"
-      v-model:filterSelectRoundOption="filterSelectRoundOption"
-      :type-id="tab"
-    />
+    <DialogForm :modal="modal" :close="close" :close-and-fecth="closeAndFecth"
+      :round-id="selectRound == '0' ? 'all' : selectRound" :action="action" :profile-id="profileId"
+      v-model:selectRoundOption="selectRoundOption" v-model:filterSelectRoundOption="filterSelectRoundOption"
+      :type-id="tab" />
   </q-card>
   <q-card v-else>
     <div class="q-pa-md q-gutter-sm">