From 20b7fdf3cf91a6a76b4431f5ce9f558d20463ca4 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 5 Oct 2023 11:40:16 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=84=E0=B8=B1=E0=B8=94=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=20-=20=E0=B8=A5=E0=B8=9A=E0=B8=A7=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=20=E0=B8=A2=E0=B9=89=E0=B8=B2=E0=B8=A2=E0=B8=9B=E0=B8=B8?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=20icon=20=E0=B9=80=E0=B8=9B=E0=B9=87?=
 =?UTF-8?q?=E0=B8=99=20list=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=20icon=20=E0=B8=96=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=81=E0=B8=AD=E0=B8=B5=E0=B9=80=E0=B8=A1=E0=B8=A5=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=20icon=20=E0=B8=AD=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TableCandidate.vue             | 256 +++++++++++++-----
 .../views/02_qualify/manageDetail.vue         | 160 +----------
 .../03_recruiting/views/03_editor/index.vue   |   4 +-
 3 files changed, 185 insertions(+), 235 deletions(-)

diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index 62b989ae5..5107d117d 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -1,48 +1,74 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm items-center">
-      <span class="text-subtitle1">{{ titleText }}</span>
-      <q-select
-        dense
-        outlined
-        :model-value="inputvisibleFilter"
-        :options="optionsFilter"
-        class="col-2"
-        option-value="id"
-        option-label="name"
-        map-options
-        emit-value
-        @update:model-value="updateVisibleFilter"
-        v-if="optionsFilter != undefined && optionsFilter.length > 0"
-      />
-      <q-btn
-        size="md"
-        icon="mdi-email-check-outline"
-        round
-        flat
-        color="green-6"
-        @click="candidateCheckProfileDialog"
-        :disabled="
-          attrs.rows.filter((r) => r.status == 'checkRegister').length == 0
-        "
-      >
-        <q-tooltip>ตรวจสอบข้อมูล</q-tooltip>
-      </q-btn>
-      <q-file
-        v-model="files"
-        dense
-        :label="setSeat == false ? 'อัปโหลดที่นั่งสอบ' : 'อัปโหลดคะแนนสอบ'"
-        outlined
-        use-chips
-        multiple
-        v-if="statusPayment"
-        class="q-pl-lg"
-      >
-        <template v-slot:prepend>
-          <q-icon name="attach_file" color="blue" />
-        </template>
-      </q-file>
-      <q-btn
+    <q-card bordered flat class="col-12 row q-py-sm items-center bg-grey-1" v-show="statusPayment">
+      <div class="col-12 row q-col-gutter-sm">
+        <span class="text-subtitle1">{{ titleText }}</span>
+        <q-select
+          dense
+          outlined
+          :model-value="inputvisibleFilter"
+          :options="optionsFilter"
+          option-value="id"
+          option-label="name"
+          map-options
+          class="col-xs-12 col-sm-3"
+          label="สถานะ"
+          emit-value
+          @update:model-value="updateVisibleFilter"
+          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+         
+        />
+        <q-file
+          v-model="files"
+          dense
+          :label="setSeat == false ? 'อัปโหลดที่นั่งสอบ' : 'อัปโหลดคะแนนสอบ'"
+          outlined
+          use-chips
+          multiple
+          class="col-xs-12 col-sm-4"
+          v-if="statusPayment"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" color="blue" />
+          </template>
+        </q-file>
+      </div>
+    </q-card>
+    <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+      <div class="col-xs-12 col-sm-3" v-show="!statusPayment">
+        <q-select
+          dense
+          outlined
+          :model-value="inputvisibleFilter"
+          :options="optionsFilter"
+          option-value="id"
+          option-label="name"
+          map-options
+          class=""
+          label="สถานะ"
+          emit-value
+          @update:model-value="updateVisibleFilter"
+          v-if="optionsFilter != undefined && optionsFilter.length > 0"
+          />
+      </div>
+      <div>
+        <q-btn
+          size="md"
+          icon="mdi-playlist-check"
+          round
+          flat
+          color="primary"
+          @click="candidateCheckProfileDialog"
+          :disabled="
+            attrs.rows.filter((r) => r.status == 'checkRegister').length == 0
+          "
+          
+        >
+          <q-tooltip>ตรวจสอบข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+      <div> 
+        <q-btn
         size="md"
         icon="mdi-upload"
         round
@@ -54,36 +80,56 @@
         <q-tooltip v-if="setSeat == false">อัปโหลดที่นั่งสอบ</q-tooltip>
         <q-tooltip v-if="setSeat == true">อัปโหลดคะแนนสอบ</q-tooltip>
       </q-btn>
-      <q-btn icon="mdi-download" round color="primary" flat>
-        <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
-        <q-menu>
-          <q-list style="min-width: 100px">
-            <q-item clickable v-close-popup @click="downloadFile()">
-              <q-item-section class="text-blue"
-                >ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section
-              >
-            </q-item>
-            <q-item clickable v-close-popup @click="downloadFileDetail()">
-              <q-item-section class="text-primary"
-                >ดาวน์โหลดข้อมูลผู้สมัคร</q-item-section
-              >
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-btn>
-      <q-btn
-        size="md"
-        icon="mdi-content-save-move-outline"
-        round
-        flat
-        color="indigo"
-        v-if="statusPayment && setSeat == true"
-        @click="candidateToPlacement"
-      >
-        <q-tooltip>บรรจุผู้ผ่านการคัดเลือก</q-tooltip>
-      </q-btn>
+      </div>
+      <div>
+        <q-btn icon="mdi-download" round color="green-6" flat>
+          <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
+          <q-menu>
+            <q-list style="min-width: 100px">
+              <q-item clickable v-close-popup @click="downloadFileDashboard">
+                <q-item-section
+                  >ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-item-section
+                >
+              </q-item>
+              <q-item clickable v-close-popup @click.stop.prevent="clickCandidateList()">
+                <q-item-section
+                  >ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-item-section
+                >
+              </q-item>
+              <q-item clickable v-close-popup @click.stop.prevent="clickPassExam()">
+                <q-item-section
+                  >ดาวน์โหลดรายชื่อผู้สอบคัดเลือกได้</q-item-section
+                >
+              </q-item>
+              <q-item clickable v-close-popup @click="downloadFile()">
+                <q-item-section
+                  >ดาวน์โหลดจัดการรายชื่อผู้สมัคร</q-item-section
+                >
+              </q-item>
+              <q-item clickable v-close-popup @click="downloadFileDetail()">
+                <q-item-section
+                  >ดาวน์โหลดข้อมูลผู้สมัคร</q-item-section
+                >
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div>
+      <div> 
+        <q-btn
+          size="md"
+          icon="mdi-content-save-move-outline"
+          round
+          flat
+          color="indigo"
+          v-if="statusPayment && setSeat == true"
+          @click="candidateToPlacement"
+        >
+          <q-tooltip>บรรจุผู้ผ่านการคัดเลือก</q-tooltip>
+        </q-btn>
+      </div>
       <q-space />
-      <div class="items-center" style="display: flex">
+      <div class="items-center gt-xs" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
         <q-input
           standout
@@ -121,7 +167,7 @@
           map-options
           emit-value
           style="min-width: 150px"
-          class="gt-xs q-ml-sm"
+          class="q-ml-sm"
         />
       </div>
     </div>
@@ -144,7 +190,7 @@
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th auto-width>
-            <q-checkbox v-model="props.selected" />
+            <q-checkbox v-model="props.selected"/>
           </q-th>
           <q-th auto-width v-if="boss == true" />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -187,6 +233,9 @@ const examId = ref<string>(route.params.examId.toString());
 const candidateId = ref<string[]>([]);
 const selected = ref<string[]>([]);
 const { messageError, showLoader, hideLoader } = mixin;
+
+const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
+
 const props = defineProps({
   inputfilter: String,
   inputvisible: Array,
@@ -498,6 +547,65 @@ const resetFilter = () => {
   emit("update:inputfilter", "");
   filterRef.value.focus();
 };
+
+const downloadFileDashboard = async () => {
+  showLoader();
+  await http
+    .put(
+      config.API.periodExamDownloadDashboard(examId.value),
+      {
+        dateStart: dateToISO(dateFilter.value[0]),
+        dateEnd: dateToISO(dateFilter.value[1]),
+        responseType: "blob",
+      },
+      {
+        responseType: "blob",
+      }
+    )
+    .then((res) => {
+      const data = res.data;
+      downloadFilePDF(
+        data,
+        `Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
+      );
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickPassExam = async () => {
+  showLoader();
+  await http
+    .get(config.API.exportExamPassExamList(examId.value))
+    .then((res) => {
+      window.open(config.API.exportExamPassExamList(examId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickCandidateList = async () => {
+  showLoader();
+  await http
+    .get(config.API.exportExamCandidateList(examId.value))
+    .then((res) => {
+      window.open(config.API.exportExamCandidateList(examId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 </script>
 <style lang="scss">
 .icon-color {
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 46d62430c..429ee1ca5 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -34,83 +34,9 @@
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
       <div class="col-12 row">
-        <div class="q-pa-md row col-12 no-wrap">
+        <div class="q-py-md q-pl-md q-pr-sm row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
           <div class="col-12 row">
-            <div
-              class="text-grey-7 q-pb-sm row text-weight-medium col-12 items-center"
-            >
-              <!-- สรุปจำนวนผู้สมัครคัดเลือก -->
-              <datepicker
-                v-model="dateFilter"
-                :locale="'th'"
-                autoApply
-                range
-                :enableTimePicker="false"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    class="full-width inputgreen cursor-pointer"
-                    hide-bottom-space
-                    outlined
-                    dense
-                    label="วันที่"
-                    lazy-rules
-                    :model-value="dateThaiRange(dateFilter)"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <q-btn
-                icon="mdi-download"
-                round
-                flat
-                color="primary"
-                @click="downloadFileDashboard"
-                class="q-ml-sm"
-              >
-                <q-tooltip>ดาวน์โหลดสรุปข้อมูลสมัครสอบ</q-tooltip>
-              </q-btn>
-
-              <q-btn
-                dense
-                flat
-                round
-                color="green"
-                class="q-ml-sm"
-                @click.stop.prevent="clickCandidateList()"
-                icon="mdi-clipboard-arrow-down"
-              >
-                <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
-              </q-btn>
-
-              <q-btn
-                dense
-                flat
-                round
-                color="indigo"
-                class="q-ml-sm"
-                @click.stop.prevent="clickPassExam()"
-                icon="mdi-clipboard-arrow-down"
-              >
-                <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบคัดเลือกได้</q-tooltip>
-              </q-btn>
-            </div>
             <div class="col-12">
               <div class="row col-12 q-col-gutter-sm fit">
                 <div
@@ -317,7 +243,6 @@ const status = ref<string>("all");
 const filter = ref<string>(""); //search data table
 const name = ref<string>("");
 const candidateId = ref<string>("");
-const dateFilter = ref<[Date, Date]>([new Date(), new Date()]); //วันที่เลือกค้นหา
 const statusPayment = ref<boolean>(false);
 const setSeat = ref<boolean>(false);
 const modal = ref<boolean>(false);
@@ -526,35 +451,6 @@ onMounted(async () => {
   await fetchDataCom();
 });
 
-const clickPassExam = async () => {
-  showLoader();
-  await http
-    .get(config.API.exportExamPassExamList(examId.value))
-    .then((res) => {
-      window.open(config.API.exportExamPassExamList(examId.value));
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const clickCandidateList = async () => {
-  showLoader();
-  await http
-    .get(config.API.exportExamCandidateList(examId.value))
-    .then((res) => {
-      window.open(config.API.exportExamCandidateList(examId.value));
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 
 const fetchDataCom = async () => {
   await fetchDataSummary();
@@ -644,47 +540,6 @@ const fetchDataSummary = async () => {
     });
 };
 
-const downloadFileDashboard = async () => {
-  showLoader();
-  await http
-    .put(
-      config.API.periodExamDownloadDashboard(examId.value),
-      {
-        dateStart: dateToISO(dateFilter.value[0]),
-        dateEnd: dateToISO(dateFilter.value[1]),
-        responseType: "blob",
-      },
-      {
-        responseType: "blob",
-      }
-    )
-    .then((res) => {
-      const data = res.data;
-      downloadFilePDF(
-        data,
-        `Candidate_Dashboard_${dateToISO(new Date())}.xlsx`
-      );
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-const downloadFilePDF = async (res: string, fileName: string) => {
-  const link = document.createElement("a");
-  link.href = window.URL.createObjectURL(
-    new Blob([res], {
-      type: "application/vnd.ms-excel",
-    })
-  );
-  link.setAttribute("download", fileName);
-  document.body.appendChild(link);
-  link.click();
-};
-
 /**
  * สรุปคะแนนสอบ
  */
@@ -701,19 +556,6 @@ const viewDetail = (id: string, status: string) => {
   }
 };
 
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-};
-
 const statusCandidate = (status: string) => {
   switch (status) {
     case "register":
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 64e88c8f7..7413d8b03 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -455,8 +455,8 @@
             lazy-rules
             :readonly="!editvisible"
             :borderless="!editvisible"
-            :rules="[(val) => !!val || `${'กรุณากรอก ฃื่อ'}`]"
-            label="ฃื่อ"
+            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
+            label="ชื่อ"
           />
           <q-input
             v-model="inputLink"