filter input

src/modules/07_insignia/components/5_Borrow/Main.vue

@@ -19,15 +19,18 @@ const tab = ref<string>("");
 
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundOption = ref<any>([]);
 const selectRoundAllOption = ref<OptionDataYear[]>([]);
+const filterSelectRoundAllOption = ref<OptionDataYear[]>([]);
 
 const modal = ref<boolean>(false);
 const action = ref<string>("");
 const profileId = ref<string>("");
 const roundYear = ref<any>();
 const insigniaList = ref<any>([]);
+const fileterInsigniaList = ref<any>([]);
 const loadView = ref<boolean>(false);
-
+const employeeClassOps = ref<any>(DataStore.employeeClassOps)
 onMounted(async () => {
   await fecthRound();
 });
@@ -58,8 +61,10 @@ const fecthRound = async () => {
             year: e.year,
           });
         });
-
+        filterSelectRoundAllOption.value = selectRoundAllOption.value
         selectRound.value = data[0].id;
+        filterSelectRoundOption.value = selectRoundOption.value
+        console.log(filterSelectRoundOption.value)
         yearRound.value = data[0].year;
         roundYear.value = data[0].year;
         if (roundYear.value) {
@@ -326,6 +331,7 @@ watch(tab, async () => {
     (x: any) => x.type == tab.value || x.type == ""
   );
   DataStore.insignia = "";
+  fileterInsigniaList.value = insigniaList.value
   fecthlistInsignia();
 });
 
@@ -392,6 +398,44 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+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
+      fileterInsigniaList.value = insigniaList.value.filter(
+          (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
+        );
+    }
+    }
+  )
+}
+
+const clearInsigniaFilters = (name: string) => {
+  if (name === "employeeClassOps") {
+    DataStore.employeeClass = "all";
+    employeeClassOps.value = DataStore.employeeClassOps;
+  }
+  else if (name === "fileterInsigniaList") {
+    DataStore.insignia = "";
+    fileterInsigniaList.value = insigniaList.value;
+  }
+  //  else if (name === 'employeeClassOps') {
+
+  // }
+};
 </script>
 
 <template>
@@ -426,7 +470,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
       >
         <div class="q-pa-md">
           <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-            <div>
+
               <q-select
                 v-model="yearRound"
                 dense
@@ -436,26 +480,30 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 :label="`${'รอบการเสนอขอเครื่องราชฯ'}`"
                 emit-value
                 map-options
+                use-input
                 option-label="name"
-                :options="selectRoundAllOption"
+                :options="filterSelectRoundAllOption"
                 option-value="year"
                 :borderless="false"
                 style="min-width: 150px"
                 @update:model-value="selectorRound"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundAllOption'
+                      ) "
               />
-            </div>
             <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="insigniaList"
+                :options="fileterInsigniaList"
                 option-value="id"
                 :readonly="false"
                 :borderless="false"
@@ -466,31 +514,68 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     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>
+        </q-select>
             </div>
             <div>
+
               <q-select
-                v-model="DataStore.employeeClass"
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                :label="`${'สถานภาพ'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="DataStore.employeeClassOps"
-                option-value="id"
-                :readonly="false"
-                :borderless="false"
-                style="min-width: 150px"
-                @update:model-value="
-                  DataStore.searchDatatable(
-                    DataStore.insignia,
-                    DataStore.employeeClass
-                  )
+          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>
+          </q-select>
             </div>
 
             <div>
@@ -600,7 +685,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
       :round-id="selectRound == '0' ? 'all' : selectRound"
       :action="action"
       :profile-id="profileId"
-      :select-round-option="selectRoundOption"
+      v-model:selectRoundOption="selectRoundOption"
+      v-model:filterSelectRoundOption="filterSelectRoundOption"
       :type-id="tab"
     />
   </q-card>