เลือกคนไปบรรจุเพิ่ม filter แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -21,6 +21,9 @@ const positionData = defineModel<any[]>("position", { required: true }); //ข
 const isAll = defineModel<boolean>("isAll", { required: true }); //แสดงตำแหน่งทั้งหมด
 const isBlank = defineModel<boolean>("isBlank", { required: true }); //แสดงเฉพาะตำแหน่งว่าง
 
+const positionRows = ref<DataPositionNo[]>(positionData.value);
+const isPosition = ref<boolean>(true);
+
 //Table
 const filters = ref<string>(""); //คำค้นหา
 const rowsPosition = ref<Positions[]>([]); //รายการตำแหน่ง
@@ -180,9 +183,7 @@ const visibleColumns = ref<string[]>([
 async function onClickSelectPos(id: string) {
   positionId.value = id;
   selected.value = [];
-  const position: DataPositionNo = positionData.value.find(
-    (e: DataPositionNo) => e.id === id
-  );
+  const position = positionRows.value.find((e: DataPositionNo) => e.id === id);
 
   // หาตำแหน่ง
   if (position) {
@@ -195,6 +196,28 @@ async function onClickSelectPos(id: string) {
   }
 }
 
+/**
+ * function ค้นหาตำแหน่งตามการเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ
+ */
+async function fetchIsPosition() {
+  // ถ้าเลือกแสดงเฉพาะตำแหน่งที่ตรงกับการสอบ ระบบจะ filter เลือกเฉพาะข้อมูลที่ตรงกับการสอบ
+  if (isPosition.value) {
+    const lists = await positionData.value.filter(
+      (e: any) => e.isPosition === true
+    );
+    positionRows.value = lists;
+  }
+  // ถ้าไม่ได้เลือกระบบจะแสดงตำแหน่งทั้งหมด
+  else {
+    positionRows.value = positionData.value;
+  }
+}
+
+// เช็คว่าถ้ามีการปรับ filter ระบบจะนำข้อมูลไปเช็ค filter แสดงเฉพาะตำแหน่งที่ตรงกับการสอบใหม่อีกครั้ง
+watch(positionData, (newVal, oldVal) => {
+  if (newVal != oldVal) fetchIsPosition();
+});
+
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -203,6 +226,8 @@ onMounted(async () => {
     setTimeout(async () => {
       await onClickSelectPos(positionId.value);
     }, 1000);
+  } else {
+    fetchIsPosition();
   }
 });
 </script>
@@ -216,31 +241,41 @@ onMounted(async () => {
           เลือกตำแหน่งเลขที่
         </div>
         <div class="col-12"><q-separator /></div>
+        <div class="col-12">
+          <q-checkbox
+            keep-color
+            v-model="isBlank"
+            label="แสดงเฉพาะตำแหน่งว่าง"
+            color="primary"
+          >
+            <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+          </q-checkbox>
+          <q-checkbox
+            keep-color
+            v-model="isPosition"
+            label="แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ"
+            color="primary"
+            @update:model-value="fetchIsPosition"
+          >
+            <q-tooltip>แสดงเฉพาะตำแหน่งที่ตรงกับการสอบ</q-tooltip>
+          </q-checkbox>
+
+          <q-checkbox
+            keep-color
+            v-model="isAll"
+            label="แสดงตำแหน่งทั้งหมด"
+            color="primary"
+          >
+            <q-tooltip
+              >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+            >
+          </q-checkbox>
+        </div>
         <div class="col-12 q-pa-md">
           <q-toolbar style="padding: 0px">
-            <div class="row q-gutter-md">
-              <q-checkbox
-                keep-color
-                v-model="isBlank"
-                label="แสดงเฉพาะตำแหน่งว่าง"
-                color="primary"
-              >
-                <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
-              </q-checkbox>
-            </div>
             <q-space />
 
             <div class="row q-gutter-md">
-              <q-checkbox
-                keep-color
-                v-model="isAll"
-                label="แสดงตำแหน่งทั้งหมด"
-                color="primary"
-              >
-                <q-tooltip
-                  >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
-                >
-              </q-checkbox>
               <div>
                 <q-input outlined dense v-model="filters" label="ค้นหา">
                   <template v-slot:append>
@@ -266,10 +301,11 @@ onMounted(async () => {
               </div>
             </div>
           </q-toolbar>
+
           <d-table
             ref="table"
             :columns="columns"
-            :rows="positionData"
+            :rows="positionRows"
             :filter="filters"
             row-key="id"
             flat