From a4b7549cd3d11ab319d3c400534e8be8642831fa Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 9 Oct 2023 09:42:55 +0700
Subject: [PATCH] v-slot:no-option

---
 .../07_insignia/components/2_Manage/Tab1.vue  |  14 ++
 .../07_insignia/components/2_Manage/Tab2.vue  |  14 ++
 .../07_insignia/components/2_Manage/Tab3.vue  |  14 ++
 .../components/4_Allocate/Main.vue            |  15 ++
 .../07_insignia/components/5_Borrow/Main.vue  | 215 ++++++++++--------
 .../components/report/Report_02.vue           |  10 +-
 src/modules/07_insignia/views/ResultPage.vue  |  21 ++
 7 files changed, 204 insertions(+), 99 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 9f67d4aec..86f5b97f9 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -721,6 +721,13 @@ const clearInsigniaFilters = (name: string) => {
               )
               " 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>
           <q-select class="col-2" v-model="DataStore.employeeClass" dense outlined lazy-rules hide-bottom-space
@@ -742,6 +749,13 @@ const clearInsigniaFilters = (name: string) => {
                 )
                 " 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>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index b7601b306..c30cbf972 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -314,6 +314,13 @@ const clearInsigniaFilters = (name: string) => {
               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>
           <q-select
@@ -356,6 +363,13 @@ const clearInsigniaFilters = (name: string) => {
                 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>
         <q-space />
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 90c698360..e16e9e537 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -311,6 +311,13 @@ const clearInsigniaFilters = (name: string) => {
               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>
           <q-select
@@ -353,6 +360,13 @@ const clearInsigniaFilters = (name: string) => {
                 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>
         <q-space />
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index 5f59ec1da..edaad2878 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -316,6 +316,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
   )
 }
 const clearInsigniaFilters = (name: string) => {
+  console.log(insigniaOp.value)
   if (name === "filterInsigniaOp") {
     DataStore.insignia = '';
     filterInsigniaOp.value = insigniaOp.value;
@@ -352,6 +353,13 @@ const clearInsigniaFilters = (name: string) => {
         input-class="text-bold text-grey"
         @update:model-value="selectorRound(selectRound)"
       >
+      <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
       </q-select>
     </div>
     <q-separator />
@@ -412,6 +420,13 @@ const clearInsigniaFilters = (name: string) => {
               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>
 
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index bea7ee40f..383894ec0 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -30,7 +30,7 @@ const roundYear = ref<any>();
 const insigniaList = ref<any>([]);
 const fileterInsigniaList = ref<any>([]);
 const loadView = ref<boolean>(false);
-const employeeClassOps = ref<any>(DataStore.employeeClassOps)
+const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 onMounted(async () => {
   await fecthRound();
 });
@@ -61,10 +61,10 @@ const fecthRound = async () => {
             year: e.year,
           });
         });
-        filterSelectRoundAllOption.value = selectRoundAllOption.value
+        filterSelectRoundAllOption.value = selectRoundAllOption.value;
         selectRound.value = data[0].id;
-        filterSelectRoundOption.value = selectRoundOption.value
-        console.log(filterSelectRoundOption.value)
+        filterSelectRoundOption.value = selectRoundOption.value;
+        console.log(filterSelectRoundOption.value);
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
         if (roundYear.value) {
@@ -331,7 +331,7 @@ watch(tab, async () => {
     (x: any) => x.type == tab.value || x.type == ""
   );
   DataStore.insignia = "";
-  fileterInsigniaList.value = insigniaList.value
+  fileterInsigniaList.value = insigniaList.value;
   fecthlistInsignia();
 });
 
@@ -401,34 +401,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
 const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
     const needle = val.toLowerCase();
-    if (name === 'employeeClassOps') {
-      DataStore.employeeClass = ''
-        employeeClassOps.value = DataStore.employeeClassOps.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    }
-    else if (name === 'fileterInsigniaList') {
-      DataStore.insignia = null as any
+    if (name === "employeeClassOps") {
+      DataStore.employeeClass = "";
+      employeeClassOps.value = DataStore.employeeClassOps.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "fileterInsigniaList") {
+      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
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "filterSelectRoundAllOption") {
+      yearRound.value = null as any;
       filterSelectRoundAllOption.value = selectRoundAllOption.value.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
     }
-    }
-  )
-}
+  });
+};
 
 const clearInsigniaFilters = (name: string) => {
   if (name === "employeeClassOps") {
     DataStore.employeeClass = "all";
     employeeClassOps.value = DataStore.employeeClassOps;
-  }
-  else if (name === "fileterInsigniaList") {
+  } else if (name === "fileterInsigniaList") {
     DataStore.insignia = "";
     fileterInsigniaList.value = insigniaList.value;
   }
@@ -470,27 +466,34 @@ const clearInsigniaFilters = (name: string) => {
       >
         <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,
+            <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">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
             <div>
               <q-select
                 v-model="DataStore.insignia"
@@ -514,68 +517,84 @@ const clearInsigniaFilters = (name: string) => {
                     DataStore.employeeClass
                   )
                 "
-          @filter="(inputValue:any,
+                @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'),
+              >
+                <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
                   )
-              "
-              class="cursor-pointer"
-            />
-          </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,
+                "
+                @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>
-          </q-select>
+              >
+                <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>
diff --git a/src/modules/07_insignia/components/report/Report_02.vue b/src/modules/07_insignia/components/report/Report_02.vue
index 23c2a6177..b7741a6e4 100644
--- a/src/modules/07_insignia/components/report/Report_02.vue
+++ b/src/modules/07_insignia/components/report/Report_02.vue
@@ -185,7 +185,15 @@ const filterSelector = (val: any, update: Function, name: any) => {
               @update:model-value="updateSelect"
               @filter="(inputValue:any,doneFn:Function) => 
                 filterSelector(inputValue, doneFn,'selectList') "
-            />
+            >
+            <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
           </q-form>
           <q-space />
           <div class="q-pa-ms q-gutter-sm" style="padding: 0">
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 06e6c6173..46900cc12 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -637,6 +637,13 @@ const clearInsigniaFilters = (name: string) => {
                   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
               v-model="DataStore.invoiceType"
@@ -677,6 +684,13 @@ const clearInsigniaFilters = (name: string) => {
                   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>
               <q-select
@@ -721,6 +735,13 @@ const clearInsigniaFilters = (name: string) => {
                     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>