เพิ่ม filter ตามตำแหน่งที่สอบ บรรจุ

src/modules/05_placement/components/PersonalList/TableView.vue

@@ -3,10 +3,9 @@ import { ref, useAttrs } from "vue";
 import { QTooltip, useQuasar } from "quasar";
 import { checkPermission } from "@/utils/permissions";
 
-import type {
-  PersonData,
-  optionData,
-} from "@/modules/05_placement/interface/index/Main";
+import type { PropType } from "vue";
+import type { optionData } from "@/modules/05_placement/interface/index/Main";
+
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
@@ -19,6 +18,10 @@ const bmaOfficerOption = ref<optionData[]>([
   { id: "OFFICER", name: "ขรก.กทม. สามัญ" },
   { id: "EXTERNAL", name: "บุคคลภายนอก" },
 ]);
+
+const positionCandidate = ref<string>("");
+const positionCandidateOptions = ref<optionData[]>([]);
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -35,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  positionCandidateData: {
+    type: Array as PropType<optionData[]>,
+    defualt: [],
+  },
   saveNoDraft: {
     type: Boolean,
     defualt: false,
@@ -138,7 +145,7 @@ function paginationLabel(start: string, end: string, total: string) {
   else return start + "-" + end + " ใน " + total;
 }
 
-/**
+/**.value
  * update ค่าที่ค้นหา
  * @param value string
  */
@@ -157,12 +164,7 @@ function updateVisible(value: any) {
  */
 function updateContain(value: any) {
   emit("update:containfilter", value);
-}
-
-/** reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา */
-function resetFilter() {
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
+  onUpdateNewRows();
 }
 
 /** ส่งรายชื่อไปยังหน่วยงาน */
@@ -177,27 +179,77 @@ function openModalOrder() {
 
 /** ส่งรายชื่อไปยังหน่วยงาน */
 function onUpdateNewRows() {
-  emit("update-newRows", bmaOfficer.value);
+  emit("update-newRows", bmaOfficer.value, positionCandidate.value);
+}
+
+/**
+ * ฟังชั่นฟิลเตอร์ input
+ * @param val input
+ * @param update Function quasar
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    positionCandidateOptions.value =
+      props?.positionCandidateData?.filter(
+        (v: optionData) => v.name.indexOf(val) > -1
+      ) || [];
+  });
 }
 </script>
 
 <template>
   <div class="q-px-md q-pb-md">
     <div class="col-12 row q-py-sm">
-      <q-select
-        outlined
-        dense
-        v-model="bmaOfficer"
-        :options="bmaOfficerOption"
-        emit-value
-        map-options
-        option-value="id"
-        option-label="name"
-        label="สถานภาพ"
-        style="width: 200px"
-        @update:model-value="onUpdateNewRows"
-      >
-      </q-select>
+      <div class="row q-col-gutter-sm">
+        <q-select
+          outlined
+          dense
+          v-model="bmaOfficer"
+          :options="bmaOfficerOption"
+          emit-value
+          map-options
+          option-value="id"
+          option-label="name"
+          label="สถานภาพ"
+          :clearable="bmaOfficer !== ''"
+          style="width: 200px"
+          @update:model-value="onUpdateNewRows"
+          @clear="bmaOfficer = ''"
+        >
+        </q-select>
+
+        <q-select
+          outlined
+          dense
+          v-model="positionCandidate"
+          :options="positionCandidateOptions"
+          emit-value
+          map-options
+          option-value="id"
+          option-label="name"
+          label="ตำแหน่งที่สอบ"
+          style="width: 250px"
+          hide-selected
+          fill-input
+          use-input
+          :clearable="positionCandidate !== ''"
+          @clear="
+            (positionCandidate = ''),
+              (positionCandidateOptions = positionCandidateData || []),
+              onUpdateNewRows()
+          "
+          @update:model-value="onUpdateNewRows"
+          @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn
+                      ) "
+        >
+          <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
           flat
@@ -241,17 +293,9 @@ function onUpdateNewRows() {
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
-          @keydown.enter="onSearch"
+          @keydown.enter="onUpdateNewRows"
         >
-          <template v-slot:append>
-            <q-icon name="search" />
-            <!-- <q-icon
-              v-if="inputfilter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            /> -->
-          </template>
+          <template v-slot:append> </template>
         </q-input>
         <!-- แสดง table ใน คอลัมน์ -->
         <q-select