From 0247619d87d206c3a7857605fb151b4ee35543c2 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 25 Sep 2024 09:29:22 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=84=E0=B8=99=E0=B9=84=E0=B8=9B=E0=B8=9A=E0=B8=A3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=88=E0=B8=B8=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20filter=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B9=80?=
 =?UTF-8?q?=E0=B8=89=E0=B8=9E=E0=B8=B2=E0=B8=B0=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87=E0=B8=97=E0=B8=B5=E0=B9=88?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=87=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=AA=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PersonalList/CardPosition.vue  | 86 +++++++++++++------
 1 file changed, 61 insertions(+), 25 deletions(-)

diff --git a/src/modules/05_placement/components/PersonalList/CardPosition.vue b/src/modules/05_placement/components/PersonalList/CardPosition.vue
index 5cf3d30d2..e977b283c 100644
--- a/src/modules/05_placement/components/PersonalList/CardPosition.vue
+++ b/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