From 86ae8fa847c2c5fc63be91de111552c14e8801d9 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 12 Jan 2024 13:35:00 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20fetch=20?=
 =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9A=E0=B8=B8?=
 =?UTF-8?q?=E0=B8=84=E0=B8=84=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_evaluate/interface/main.ts     |   6 +
 .../06_evaluate/views/EvaluateMain.vue        | 150 +++++++++++++++++-
 2 files changed, 151 insertions(+), 5 deletions(-)
 create mode 100644 src/modules/06_evaluate/interface/main.ts

diff --git a/src/modules/06_evaluate/interface/main.ts b/src/modules/06_evaluate/interface/main.ts
new file mode 100644
index 0000000..9d7b3e3
--- /dev/null
+++ b/src/modules/06_evaluate/interface/main.ts
@@ -0,0 +1,6 @@
+interface OptionStatus {
+  val: string;
+  label: string;
+}
+
+export type { OptionStatus };
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index eb7713d..290d405 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
@@ -7,6 +7,7 @@ import config from "@/app.config";
 
 /** import Type*/
 import type { ListMenu } from "@/modules/06_evaluate/interface/evalute";
+import type { OptionStatus } from "@/modules/06_evaluate/interface/main";
 
 /** import Components*/
 import TableListEvaluate from "@/modules/06_evaluate/components/TableListEvaluate.vue"; // ตารางประเมิน
@@ -55,11 +56,14 @@ const maxPage = ref<number>(10);
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
   showLoader();
+  const body = {
+    page: page.value,
+    pageSize: pageSize.value,
+    keyword: store.filterKeyword,
+    status: selectedStatus.value,
+  };
   await http
-    .get(
-      config.API.evaluationList() +
-        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${store.filterKeyword}`
-    )
+    .put(config.API.evaluationList(), body)
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
       store.fetchEvaluateList(res.data.result.data);
@@ -90,10 +94,67 @@ async function filterFn() {
   await fetchEvaluteList();
 }
 
+const selectedStatus = ref<string[]>([
+  "CHECK_SPEC",
+  "PREPARE_DOC_V1",
+  "CHECK_DOC_V1",
+  "WAIT_CHECK_DOC_V1",
+  "ANNOUNCE_WEB",
+  "PREPARE_DOC_V2",
+  "WAIT_CHECK_DOC_V2",
+  "CHECK_DOC_V2",
+]);
+const options = ref<OptionStatus[]>([]);
+const optionsMain = ref<OptionStatus[]>([
+  { val: "CHECK_SPEC", label: "ตรวจสอบคุณสมบัติด้วยตนเอง" },
+  { val: "PREPARE_DOC_V1", label: "จัดเตรียมเอกสารเล่ม 1" },
+  { val: "CHECK_DOC_V1", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม 1" },
+  { val: "WAIT_CHECK_DOC_V1", label: "รอตรวจสอบคุณสมบัติ" },
+  { val: "ANNOUNCE_WEB", label: "ประกาศบนเว็บไซต์" },
+  { val: "PREPARE_DOC_V2", label: "จัดเตรียมเอกสารเล่ม 2" },
+  { val: "WAIT_CHECK_DOC_V2", label: "รอพิจารณาผลการประเมิน" },
+  { val: "CHECK_DOC_V2", label: "ตรวจสอบความถูกต้องของเอกสารเล่ม" },
+  { val: "DONE", label: "เสร็จสิ้น" },
+]);
+
+/** ชื่อค่าที่ค้นหาสภานะ*/
+const label = computed(() => {
+  const filterOption = optionsMain.value.filter((option) =>
+    selectedStatus.value.includes(option.val)
+  );
+  const labelval = filterOption.map((e) => e.label);
+  if (labelval.length !== 0) {
+    return labelval.length <= 2
+      ? `${labelval.slice(0, 2).join(", ")}`
+      : `${labelval.slice(0, 2).join(", ")} + ,(${labelval.length - 2})`;
+  } else return "";
+});
+
+/**
+ * function ต้นหาข้อมูลของ Option ขอสถานะ
+ * @param val ค่าที่ต้องการฟิลเตอร์
+ * @param update  อัพเดทค่า
+ * @param refData ดาต้าที่ต้องการฟิลเตอร์
+ */
+function filterOption(val: any, update: Function) {
+  update(() => {
+    options.value = optionsMain.value.filter(
+      (v: any) => v.label.indexOf(val) > -1
+    );
+  });
+}
+
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
 });
+
+watch(
+  () => store.filterKeyword,
+  async () => {
+    store.filterKeyword === "" && (await fetchEvaluteList());
+  }
+);
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -137,6 +198,85 @@ onMounted(async () => {
               </q-btn>
             </div>
             <q-space />
+            <!-- <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-input
+                dense
+                outlined
+                v-model="store.filterKeyword"
+                label="ค้นหา"
+                debounce="300"
+                @keydown.enter.prevent="filterFn"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </div> -->
+            <!-- <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-select
+                v-model="store.visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="store.columns"
+                option-value="name"
+                options-cover
+              />
+            </div> -->
+          </div>
+          <div class="row col-12 q-mb-sm q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-3 col-md-2">
+              <q-select
+                dense
+                outlined
+                multiple
+                v-model="selectedStatus"
+                emit-value
+                map-options
+                :options="options"
+                option-value="val"
+                label="ค้นหาสถานะ"
+                style="width: 28vw"
+                @update:model-value="fetchEvaluteList"
+                use-input
+                @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
+              >
+                <template v-slot:selected>
+                  <div>
+                    {{ label }}
+                  </div>
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+              <!-- <q-btn size="12px" flat round color="primary" icon="mdi-plus">
+                <q-menu>
+                  <q-list style="min-width: auto">
+                    <q-item
+                      v-for="(item, index) in listMenu"
+                      :key="index"
+                      clickable
+                      v-close-popup
+                      @click.stop="onclickAddEvaluate(item)"
+                    >
+                      <q-item-section>{{ item.label }}</q-item-section>
+                      <q-tooltip>{{ item.label }}</q-tooltip>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+                <q-tooltip>เพิ่มการประเมินบุคคล</q-tooltip>
+              </q-btn> -->
+            </div>
+            <q-space />
             <div class="col-xs-12 col-sm-3 col-md-2">
               <q-input
                 dense