ฟิลเตอร์ วินัย/การลา

src/modules/09_leave/components/1_Work/ToolBar.vue

@@ -131,8 +131,17 @@ function calculateMaxDate() {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
-      >
+        </template>
+        <template v-if="filetStatus !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (option = optionMain), (filetStatus = 'ALL'), filterFn()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
     </div>
     <q-space />
     <div class="col-xs-12 col-sm-3 col-md-2">

src/modules/09_leave/components/2_Leave/ToolBarLeave.vue

@@ -209,8 +209,17 @@ onMounted(async () => {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
-      >
+        </template>
+        <template v-if="leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (optionType = optionTypeMain), (leaveStore.filter.type = '00000000-0000-0000-0000-000000000000'), filterListLeave()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+      </q-select>
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
@@ -235,7 +244,17 @@ onMounted(async () => {
           <q-item>
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
-        </template></q-select
+        </template>
+        <template v-if="leaveStore.filter.status !== 'ALL'" v-slot:append>
+          <q-icon
+            name="cancel"
+            @click.stop.prevent="
+              (optionStatus = optionStatusMain), (leaveStore.filter.status = 'ALL'), filterListLeave()
+            "
+            class="cursor-pointer"
+          />
+        </template>
+        </q-select
       >
     </div>
     <q-space />

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -19,7 +19,7 @@ import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore"
 const SpecialTimeStore = useSpecialTimeStore();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
-
+const option = ref<any[]>(SpecialTimeStore.optionStatus);
 const $q = useQuasar();
 
 /** props*/
@@ -159,6 +159,20 @@ watch(
     }
   }
 );
+
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+ function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = SpecialTimeStore.optionStatus.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
 </script>
 
 <template>
@@ -252,12 +266,20 @@ watch(
                 full-width
                 dense
                 v-model="formData.checkInStatus"
-                :options="SpecialTimeStore.optionStatus"
+                :options="option"
                 option-value="id"
                 option-label="name"
                 label="สถานะ"
                 use-input
+                @filter="filterOptionFn"
               >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
               </q-select>
             </div>
           </div>