From 5cba196dd23e1eba9bd3c9b142f95fe3ad15da93 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 11 Sep 2023 13:27:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue    | 234 +++++++++++++++---
 1 file changed, 201 insertions(+), 33 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 458cb4532..68e75c611 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -169,6 +169,36 @@ const probationlist = ref<any>([]);
 onMounted(async () => {
   getpersonalList();
 });
+const fillter = ref<number>(0);
+const Opfillter = ref<any>([{ id: 0, value: "ทั้งหมด" }]);
+const fillterStatus = ref<any>([]);
+const ProbationMainFilter = () => {
+  const useStatus = new Set();
+  fillterStatus.value.forEach((item: any) => {
+    const ID = item.probation_status;
+    const title = statusProbationMain(Number(item.probation_status));
+    if (ID !== null && !useStatus.has(ID)) {
+      Opfillter.value.push({
+        id: ID,
+        value: title,
+      });
+      useStatus.add(ID);
+    }
+  });
+  Opfillter.value.sort((a: any, b: any) => a.id - b.id);
+};
+const dataUpdate = ref<any>([]);
+const updateRows = (body: any) => {
+  console.log(body.value);
+  if (body.value !== "ทั้งหมด") {
+    const filteredRows = dataUpdate.value.filter(
+      (item: any) => item.probation_status === body.value
+    );
+    rows.value = filteredRows;
+  } else {
+    rows.value = dataUpdate.value;
+  }
+};
 
 const getpersonalList = async () => {
   showLoader();
@@ -176,6 +206,11 @@ const getpersonalList = async () => {
     .get(config.API.probationPersonalList())
     .then((res) => {
       const data = res.data.data;
+      fillterStatus.value = data;
+      console.log(
+        "🚀 ~ file: MainProbation.vue:193 ~ .then ~ fillterStatus:",
+        fillterStatus
+      );
       rows.value = data.map((item: FormMainProbation) => ({
         personal_id: item.personal_id,
         name: item.name,
@@ -188,8 +223,10 @@ const getpersonalList = async () => {
         order_number: item.order_number,
         probation_status: statusProbationMain(Number(item.probation_status)),
       }));
+      dataUpdate.value = rows.value;
+      ProbationMainFilter();
     })
-    .catch(() => { })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -208,7 +245,7 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => { });
+    .finally(() => {});
 };
 const fecthlistProbation = async (id: string, data: any) => {
   try {
@@ -226,6 +263,7 @@ const fecthlistProbation = async (id: string, data: any) => {
     hideLoader();
   }
 };
+
 const findlist = async (id: string) => {
   let data = [
     { criteriaType: "is_retire", criteriaValue: "false" },
@@ -354,29 +392,92 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
-        <div>
-          <q-btn @click="fecthlistPersonal" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-          </q-btn>
+        <div class="col-6">
+          <div class="row">
+            <q-select
+              class="col-5 q-mr-sm"
+              v-model="fillter"
+              label="สถานะ"
+              dense
+              map-options
+              option-label="value"
+              :options="Opfillter"
+              option-value="id"
+              lazy-rules
+              hide-bottom-space
+              :readonly="false"
+              :borderless="false"
+              :outlined="true"
+              :hide-dropdown-icon="false"
+              @update:model-value="updateRows(fillter)"
+            />
+            <q-btn
+              @click="fecthlistPersonal"
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+            >
+              <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+            </q-btn>
+          </div>
         </div>
         <q-space />
-
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-          debounce="300" placeholder="ค้นหา">
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
           <template v-slot:append>
             <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
         </q-input>
 
-        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2" />
+        <q-select
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
       </div>
       <div class="col-12">
-        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="Order" flat bordered
-          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel" v-model:pagination="pagination">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
           <template v-slot:header="props">
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -385,8 +486,11 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.row.personal_id}`)">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
+            >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
@@ -435,8 +539,16 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
             </q-tr>
           </template>
           <template v-slot:pagination="scope">
-            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
           </template>
         </q-table>
       </div>
@@ -446,23 +558,55 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 900px; max-width: 80vw">
       <q-form ref="myForm">
-        <DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-sm">
-          <q-input class="col-12" standout dense v-model="filterKeyword2" ref="filterRef2" outlined debounce="300"
-            placeholder="ค้นหา">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
-              <q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter2" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
             </template>
           </q-input>
           <div class="col-12">
-            <q-table ref="table2" :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="Order" flat bordered
-              :paging="true" dense class="custom-header-table" v-bind="attrs" :pagination-label="paginationLabel2"
-              v-model:pagination="pagination2">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel2"
+              v-model:pagination="pagination2"
+            >
               <template v-slot:header="props">
                 <q-tr :props="props">
-                  <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <span class="text-weight-medium">{{ col.label }}</span>
                   </q-th>
                   <q-th auto-width />
@@ -470,26 +614,50 @@ const paginationLabel2 = (start: string, end: string, total: string) => {
               </template>
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
-                  <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
                     <div v-else-if="col.name == 'status'" class="text-center">
-                      <q-icon v-if="col.value === true" name="mdi-check" color="positive" size="sm"/>
+                      <q-icon
+                        v-if="col.value === true"
+                        name="mdi-check"
+                        color="positive"
+                        size="sm"
+                      />
                     </div>
                     <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
                   <q-td auto-width>
-                    <q-btn dense class="q-px-md" outline color="primary" label="เพิ่ม" @click="clickAdd(props.row.id)">
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
                     </q-btn>
                   </q-td>
                 </q-tr>
               </template>
               <template v-slot:pagination="scope">
-                <q-pagination v-model="pagination2.page" active-color="primary" color="dark" :max="scope.pagesNumber"
-                  :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+                <q-pagination
+                  v-model="pagination2.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
               </template>
             </q-table>
           </div>