From 94e70ea205df07168f182112f9b42bb135ab4421 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 28 Sep 2023 17:14:37 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A3=E0=B9=8C=20input=20=E0=B8=84=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87(=E0=B8=A2=E0=B8=B7=E0=B8=A1-=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=99=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF)=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87=E0=B8=97=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=95=E0=B9=88=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  |  97 +++++++-
 .../07_insignia/components/2_Manage/Tab2.vue  |  94 ++++++-
 .../07_insignia/components/2_Manage/Tab3.vue  |  91 ++++++-
 .../components/4_Allocate/Main.vue            |  40 ++-
 src/modules/07_insignia/store.ts              |   4 +-
 src/modules/07_insignia/storeResult.ts        |   2 +-
 src/modules/07_insignia/views/ResultPage.vue  | 229 ++++++++++++------
 7 files changed, 461 insertions(+), 96 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index eb88cffc5..f3186f5c3 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -39,7 +39,8 @@ const organization = ref<string>("");
 const dialogNote = ref<boolean>(false);
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
-
+const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
+const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 // แจ้งเตือน
 const dialogWarn = ref<boolean>(false);
 const checkboxData = ref<any>([
@@ -57,6 +58,7 @@ const checkboxData = ref<any>([
 ]);
 
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
+const filterOrganizationOP = ref<any>([]);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -286,6 +288,7 @@ onMounted(async () => {
       DataStore.mainTab = props.tab;
     }
   }
+  filterOrganizationOP.value = organizationOptions.value;
 });
 // เช็คสถานนะแสดงปุ่มเพิ่ม
 const checkStatus = computed(() => {
@@ -298,8 +301,8 @@ const checkStatus = computed(() => {
 });
 // เลือกหน่วยงาน
 const changtypeOc = () => {
-  if (props.fecthInsigniaByOc) {
-    props.fecthInsigniaByOc(
+  if (organization.value !== null) {
+    props.fecthInsigniaByOc?.(
       props.roundId,
       organization.value,
       "officer",
@@ -644,6 +647,41 @@ const clickCloseReson = () => {
 const clickShowWarn = () => {
   dialogWarn.value = true;
 };
+
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'typeinsigniaOptions') {
+      DataStore.typeinsignia = ''
+        typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'employeeClassOps'){
+      DataStore.employeeClass = ''
+        employeeClassOps.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'filterOrganizationOP'){
+      filterOrganizationOP.value = organizationOptions.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
+
+const clearInsigniaFilters = (name: string) => {
+  if (name === "typeinsigniaOptions") {
+    DataStore.typeinsignia = "all";
+    typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
+  } else if (name === 'employeeClassOps') {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+};
 </script>
 
 <template>
@@ -651,16 +689,18 @@ const clickShowWarn = () => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
+        class="col-4"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
           dense
           emit-value
           map-options
-          :options="organizationOptions"
+          :options="filterOrganizationOP"
           option-value="id"
           option-label="name"
           lazy-rules
+          use-input
           hide-bottom-space
           :readonly="false"
           :borderless="false"
@@ -668,18 +708,23 @@ const clickShowWarn = () => {
           :hide-dropdown-icon="false"
           style="min-width: 150px"
           @update:model-value="changtypeOc"
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
+                      ) "
         />
         <q-select
+        class="col-1"
           v-model="DataStore.typeinsignia"
           label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options
-          :options="DataStore.typeinsigniaOptions"
+          :options="typeinsigniaOptions"
           option-value="id"
           option-label="name"
           lazy-rules
           hide-bottom-space
+          use-input
           :readonly="false"
           :borderless="false"
           :outlined="true"
@@ -691,9 +736,27 @@ const clickShowWarn = () => {
               DataStore.employeeClass
             )
           "
-        />
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
+                      ) "
+        >
+          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('typeinsigniaOptions'),
+                  DataStore.searchDataTable(
+                    DataStore.typeinsignia,
+                    DataStore.employeeClass
+                  )
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
         <div>
           <q-select
+          class="col-2"
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -701,9 +764,10 @@ const clickShowWarn = () => {
             hide-bottom-space
             :label="`${'สถานภาพ'}`"
             emit-value
+            use-input
             map-options
             option-label="name"
-            :options="DataStore.employeeClassOps"
+            :options="employeeClassOps"
             option-value="id"
             :readonly="false"
             :borderless="false"
@@ -714,7 +778,24 @@ const clickShowWarn = () => {
                 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.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
         </div>
         <div>
           <q-btn
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 2f3e1a731..b7601b306 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -27,6 +27,9 @@ const props = defineProps({
 
 const organization = ref<string>("1");
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
+const filterOrganizationOP = ref<any>([]);
+const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
+const employeeClassOps = ref<any>(DataStore.employeeClassOps);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -160,11 +163,12 @@ onMounted(async () => {
       DataStore.mainTab = props.tab;
     }
   }
+  filterOrganizationOP.value = organizationOptions.value
 });
 // เลือกหน่วยงาน
 const changtypeOc = () => {
-  if (props.fecthInsigniaByOc) {
-    props.fecthInsigniaByOc(
+  if (organization.value !== null) {
+    props.fecthInsigniaByOc?.(
       props.roundId,
       organization.value,
       "officer",
@@ -207,22 +211,57 @@ const showReson = (name: string, requestNote: string) => {
 const closeReson = () => {
   dialogNote.value = false;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'typeinsigniaOptions') {
+      DataStore.typeinsignia = ''
+        typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'employeeClassOps'){
+      DataStore.employeeClass = ''
+        employeeClassOps.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'filterOrganizationOP'){
+      filterOrganizationOP.value = organizationOptions.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
+const clearInsigniaFilters = (name: string) => {
+  if (name === "typeinsigniaOptions") {
+    DataStore.typeinsignia = "all";
+    typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
+  } else if (name === 'employeeClassOps') {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+};
 </script>
 <template>
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
+        class="col-4"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
           dense
           emit-value
           map-options
-          :options="organizationOptions"
+          :options="filterOrganizationOP"
           option-value="id"
           option-label="name"
           lazy-rules
+          use-input
           hide-bottom-space
           :readonly="false"
           :borderless="false"
@@ -230,18 +269,23 @@ const closeReson = () => {
           :hide-dropdown-icon="false"
           style="min-width: 150px"
           @update:model-value="changtypeOc"
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
+                      ) "
         />
         <q-select
+        class="col-1"
           v-model="DataStore.typeinsignia"
           label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options
-          :options="DataStore.typeinsigniaOptions"
+          :options="typeinsigniaOptions"
           option-value="id"
           option-label="name"
           lazy-rules
           hide-bottom-space
+          use-input
           :readonly="false"
           :borderless="false"
           :outlined="true"
@@ -253,9 +297,27 @@ const closeReson = () => {
               DataStore.employeeClass
             )
           "
-        />
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
+                      ) "
+        >
+          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('typeinsigniaOptions'),
+                  DataStore.searchDataTable(
+                    DataStore.typeinsignia,
+                    DataStore.employeeClass
+                  )
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
         <div>
           <q-select
+          class="col-2"
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -263,9 +325,10 @@ const closeReson = () => {
             hide-bottom-space
             :label="`${'สถานภาพ'}`"
             emit-value
+            use-input
             map-options
             option-label="name"
-            :options="DataStore.employeeClassOps"
+            :options="employeeClassOps"
             option-value="id"
             :readonly="false"
             :borderless="false"
@@ -276,7 +339,24 @@ const closeReson = () => {
                 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.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </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 7029ae604..90c698360 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -26,7 +26,9 @@ const props = defineProps({
     type: Function,
   },
 });
-
+const typeinsigniaOptions = ref<any>(DataStore.typeinsigniaOptions);
+const employeeClassOps = ref<any>(DataStore.employeeClassOps);
+  const filterOrganizationOP = ref<any>([]);
 const organization = ref<string>("1");
 const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
@@ -160,6 +162,7 @@ onMounted(async () => {
       DataStore.mainTab = props.tab;
     }
   }
+  filterOrganizationOP.value = organizationOptions.value
 });
 const changtypeOc = async () => {
   if (props.fecthInsigniaByOc) {
@@ -205,22 +208,57 @@ const showNote = (row: any) => {
 const closeReson = () => {
   dialogNote.value = false;
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'typeinsigniaOptions') {
+      DataStore.typeinsignia = ''
+        typeinsigniaOptions.value = DataStore.typeinsigniaOptions.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'employeeClassOps'){
+      DataStore.employeeClass = ''
+        employeeClassOps.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'filterOrganizationOP'){
+      filterOrganizationOP.value = organizationOptions.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
+const clearInsigniaFilters = (name: string) => {
+  if (name === "typeinsigniaOptions") {
+    DataStore.typeinsignia = "all";
+    typeinsigniaOptions.value = DataStore.typeinsigniaOptions;
+  } else if (name === 'employeeClassOps') {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+};
 </script>
 <template>
   <div class="col-12 row q-pa-md">
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
+        class="col-4"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
           dense
           emit-value
           map-options
-          :options="organizationOptions"
+          :options="filterOrganizationOP"
           option-value="id"
           option-label="name"
           lazy-rules
+          use-input
           hide-bottom-space
           :readonly="false"
           :borderless="false"
@@ -228,18 +266,23 @@ const closeReson = () => {
           :hide-dropdown-icon="false"
           style="min-width: 150px"
           @update:model-value="changtypeOc"
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
+                      ) "
         />
         <q-select
+        class="col-1"
           v-model="DataStore.typeinsignia"
           label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
           emit-value
           map-options
-          :options="DataStore.typeinsigniaOptions"
+          :options="typeinsigniaOptions"
           option-value="id"
           option-label="name"
           lazy-rules
           hide-bottom-space
+          use-input
           :readonly="false"
           :borderless="false"
           :outlined="true"
@@ -251,9 +294,27 @@ const closeReson = () => {
               DataStore.employeeClass
             )
           "
-        />
+          @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
+                      ) "
+        >
+          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('typeinsigniaOptions'),
+                  DataStore.searchDataTable(
+                    DataStore.typeinsignia,
+                    DataStore.employeeClass
+                  )
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
         <div>
           <q-select
+          class="col-2"
             v-model="DataStore.employeeClass"
             dense
             outlined
@@ -261,9 +322,10 @@ const closeReson = () => {
             hide-bottom-space
             :label="`${'สถานภาพ'}`"
             emit-value
+            use-input
             map-options
             option-label="name"
-            :options="DataStore.employeeClassOps"
+            :options="employeeClassOps"
             option-value="id"
             :readonly="false"
             :borderless="false"
@@ -274,7 +336,24 @@ const closeReson = () => {
                 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.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </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 ce7c2f3e4..4a8600000 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -41,6 +41,7 @@ const modal = ref<boolean>(false);
 const action = ref<string>("");
 const roundYear = ref<number>();
 const insigniaOp = ref<any>([]);
+const filterInsigniaOp = ref<any>({insigniaOp:[]})
 const loadView = ref<boolean>(false);
 
 onMounted(async () => {
@@ -175,6 +176,7 @@ watch(tab, () => {
   if (!a) {
     DataStore.insignia = "";
   }
+  filterInsigniaOp.value = insigniaOp.value
   fecthlistInsignia();
 });
 
@@ -300,6 +302,25 @@ const resetFilter = () => {
   filter.value = "";
   filterRef.value!.focus();
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterInsigniaOp') {
+      DataStore.insignia = null as any
+      filterInsigniaOp.value = insigniaOp.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
+const clearInsigniaFilters = (name: string) => {
+  if (name === "filterInsigniaOp") {
+    DataStore.insignia = '';
+    filterInsigniaOp.value = insigniaOp.value;
+  }
+};
 </script>
 
 <template>
@@ -368,15 +389,30 @@ const resetFilter = () => {
                 emit-value
                 map-options
                 option-label="name"
-                :options="insigniaOp"
+                :options="filterInsigniaOp"
                 option-value="id"
                 :readonly="false"
+                use-input
                 :borderless="false"
                 style="min-width: 200px"
                 @update:model-value="
                   DataStore.selectInsignia(DataStore.insignia)
                 "
-              />
+               @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInsigniaOp'
+                      ) "
+        >
+          <template v-if="DataStore.insignia !== 'all'" v-slot:append>
+            <q-icon
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('filterInsigniaOp'),
+                DataStore.selectInsignia(DataStore.insignia)
+              "
+              class="cursor-pointer"
+            />
+          </template>
+        </q-select>
             </div>
 
             <div>
diff --git a/src/modules/07_insignia/store.ts b/src/modules/07_insignia/store.ts
index da03624e6..9670fd785 100644
--- a/src/modules/07_insignia/store.ts
+++ b/src/modules/07_insignia/store.ts
@@ -100,8 +100,8 @@ export const useInsigniaDataStore = defineStore("insignia", () => {
   };
   // ค้นหาข้อมมูลราชชื่อ ตาม ประเท๓และสถานภาพ
   const searchDataTable = async (type: string, employeeClasstype: string) => {
-    typeinsignia.value = type;
-    employeeClass.value = employeeClasstype;
+    typeinsignia.value = type
+    employeeClass.value = employeeClasstype
     if (type !== "all" && employeeClasstype !== "all") {
       rows.value = listinsignia.value.filter(
         (e: any) =>
diff --git a/src/modules/07_insignia/storeResult.ts b/src/modules/07_insignia/storeResult.ts
index c4d8a1c7a..7a1b665d2 100644
--- a/src/modules/07_insignia/storeResult.ts
+++ b/src/modules/07_insignia/storeResult.ts
@@ -16,7 +16,7 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
   const invoiceType = ref<string>('all')
   const invoiceTypeop = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ใบกำกับที่ค้างจ่าย", id: "noDate" }, { name: "ใบกำกับที่จ่ายแล้ว", id: "haveDate" }])
   const employeeClass = ref<string>("all");
-  const employeeClassOps = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ข้าราชการ กทม.สามัญ", id: "officer" }, { name: "ลูกจ้างประจำ", id: "perm" }])
+  const employeeClassOps = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ข้าราชการ กทม.สามัญ", id: "officer" }, { name: "ลูกจ้างประจำ", id: "employee" }])
   const rows = ref<any>([])
   const listInsignia = ref<any>([])
 
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index be1724193..679e1530a 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -37,11 +37,13 @@ const fileinvoice = ref<any>(null);
 const loadView = ref<boolean>(false);
 const insigniaTypeOption = ref<any>([]);
 const insigniaTypeFilter = ref<any>({
-  insigniaTypeOption:[],
+  insigniaTypeOption: [],
 });
+const filterInvoice = ref<any>(DataStore.invoiceTypeop);
+const filterEmployee = ref<any>(DataStore.employeeClassOps);
 const ModalDialog = ref<boolean>(false);
-const dateReceiveInsignia = ref<Date>()
-const fileCheck = ref<any>()
+const dateReceiveInsignia = ref<Date>();
+const fileCheck = ref<any>();
 onMounted(async () => {
   await fecthRound();
 });
@@ -273,6 +275,7 @@ watch(tab, () => {
     insigniaTypeOption.value = DataStore.insigniaOp.filter(
       (e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
     );
+    insigniaTypeFilter.value = insigniaTypeOption.value;
   }
 });
 watch(modal, () => {
@@ -406,7 +409,7 @@ const perviewfile = async (event: any, actionType: string) => {
         }));
       })
       .catch((err) => {
-        messageError($q,err)
+        messageError($q, err);
       })
       .finally(() => {
         modelPerview.value = true;
@@ -431,19 +434,53 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-const OpenModal = (data:any) => {
+const OpenModal = (data: any) => {
   ModalDialog.value = true;
-  fileCheck.value = data.docReceiveInsignia
-  personId.value = data.id
+  fileCheck.value = data.docReceiveInsignia;
+  personId.value = data.id;
 };
 const filterSelector = (val: any, update: Function, name: any) => {
   update(() => {
-    const needle = val.toLowerCase()
-    insigniaTypeFilter.value = insigniaTypeOption.value.filter(
-      (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-    );
-  });
-};
+    const needle = val.toLowerCase();
+    if (name === 'insigniaTypeFilter') {
+      DataStore.insignia = ''
+        insigniaTypeFilter.value = insigniaTypeOption.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'filterInvoice'){
+      DataStore.invoiceType =''
+        filterInvoice.value = DataStore.invoiceTypeop.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+    else if(name === 'filterEmployee'){
+      DataStore.employeeClass = ''
+        filterEmployee.value = DataStore.employeeClassOps.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
+
+
+const clearInsigniaFilters = (name: string) => {
+  if (name ==='insigniaTypeFilter' ) {
+       DataStore.insignia = "";
+      insigniaTypeFilter.value = insigniaTypeOption.value
+
+  }
+  else if(name === 'filterInvoice'){
+    DataStore.invoiceType = "all";
+      filterInvoice.value = DataStore.invoiceTypeop
+  }
+  else if(name === 'filterEmployee'){
+    DataStore.employeeClass = "all";
+      filterEmployee.value = DataStore.employeeClassOps
+  }
+}
 </script>
 
 <template>
@@ -566,54 +603,78 @@ const filterSelector = (val: any, update: Function, name: any) => {
             </div>
           </div>
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <div>
-              <q-select
-                v-model="DataStore.insignia"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'เครื่องราชฯ'}`"
-                emit-value
-                map-options
-                use-input
-                clearable
-                option-label="name"
-                :options="insigniaTypeFilter"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="selectorInsignia"
-                @filter="(inputValue:any,
+            <q-select
+              class="col-2"
+              v-model="DataStore.insignia"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'เครื่องราชฯ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="insigniaTypeFilter"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="min-width: 150px"
+              @update:model-value="selectorInsignia"
+              @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaTypeFilter'
                       ) "
-              />
-            </div>
-            <div>
-              <q-select
-                v-model="DataStore.invoiceType"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'ใบกำกับ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="DataStore.invoiceTypeop"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchData(
-                    DataStore.invoiceType,
-                    DataStore.employeeClass
-                  )
-                "
-              />
-            </div>
+            >
+              <template v-if="DataStore.insignia" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('insigniaTypeFilter'),
+                    selectorInsignia()"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+            <q-select
+              v-model="DataStore.invoiceType"
+              dense
+              outlined
+              lazy-rules
+              hide-bottom-space
+              :label="`${'ใบกำกับ'}`"
+              emit-value
+              map-options
+              use-input
+              option-label="name"
+              :options="filterInvoice"
+              option-value="id"
+              :readonly="false"
+              :borderless="false"
+              style="min-width: 150px"
+              @update:model-value="
+                DataStore.searchData(
+                  DataStore.invoiceType,
+                  DataStore.employeeClass
+                )
+              "
+              @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterInvoice'
+                      ) "
+            >
+              <template v-if="DataStore.invoiceType !== 'all'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    clearInsigniaFilters('filterInvoice'),
+                      DataStore.searchData(
+                        DataStore.invoiceType,
+                        DataStore.employeeClass
+                      )
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
             <div>
               <q-select
                 v-model="DataStore.employeeClass"
@@ -624,8 +685,9 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :label="`${'สถานภาพ'}`"
                 emit-value
                 map-options
+                use-input
                 option-label="name"
-                :options="DataStore.employeeClassOps"
+                :options="filterEmployee"
                 option-value="id"
                 :readonly="false"
                 :borderless="false"
@@ -636,7 +698,27 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     DataStore.employeeClass
                   )
                 "
-              />
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterEmployee'
+                      ) "
+              >
+                <template
+                  v-if="DataStore.employeeClass !== 'all'"
+                  v-slot:append
+                >
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      clearInsigniaFilters('filterEmployee'),
+                        DataStore.searchData(
+                          DataStore.invoiceType,
+                          DataStore.employeeClass
+                        )
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+              </q-select>
             </div>
 
             <div>
@@ -741,9 +823,15 @@ const filterSelector = (val: any, update: Function, name: any) => {
                           </q-item-section>
                           <q-item-section>เเก้ไขข้อมูล</q-item-section>
                         </q-item>
-                        <q-item 
-                        :disable="props.row.docReceiveInsignia !== null && props.row.docReturnInsignia !== null"
-                        clickable v-close-popup @click="OpenModal(props.row)">
+                        <q-item
+                          :disable="
+                            props.row.docReceiveInsignia !== null &&
+                            props.row.docReturnInsignia !== null
+                          "
+                          clickable
+                          v-close-popup
+                          @click="OpenModal(props.row)"
+                        >
                           <q-item-section
                             style="min-width: 0px"
                             avatar
@@ -776,12 +864,13 @@ const filterSelector = (val: any, update: Function, name: any) => {
       </q-tab-panel>
     </q-tab-panels>
 
-    <Dialogbody 
-    :modal="ModalDialog" 
-    :close="close" 
-    :fileCheck="fileCheck"
-    :personId="personId"
-    :fecthlistInsignia="fecthlistInsignia"/>
+    <Dialogbody
+      :modal="ModalDialog"
+      :close="close"
+      :fileCheck="fileCheck"
+      :personId="personId"
+      :fecthlistInsignia="fecthlistInsignia"
+    />
 
     <DialogForm
       :modal="modal"