feat(compete):add DialogCandidates (#1473)

src/modules/03_recruiting/views/01_compete/Detail.vue

@@ -6,14 +6,16 @@ import { useRouter, useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
-import Table from "@/modules/03_recruiting/components/Table.vue";
-import genReportXLSX from "@/plugins/genreportxlsx";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
+import Table from "@/modules/03_recruiting/components/Table.vue";
+import DialogCandidates from "@/modules/03_recruiting/components/DialogCandidates.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -60,7 +62,6 @@ const visibleColumns = ref<String[]>([
   "examResult",
   "applyDate",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "examID",
@@ -295,6 +296,7 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 ]);
+const modalCandidates = ref(false); // dialog บรรจุผู้ผ่านการสอบแข่งขัน
 
 function clickDetail(examID: string) {
   router.push(`/compete/import/${importId.value}/${examID}`);
@@ -401,7 +403,19 @@ async function fetchData() {
     });
 }
 
-async function candidateToPlacement() {
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกส่งบรรจุผู้ผ่านการสอบแข่งขัน
+ * @param date วันที่บัญชีใช้ได้ตั้งแต่
+ */
+function onSubmitCandidates(date: Date) {
   $q.dialog({
     title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
     message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
@@ -414,28 +428,28 @@ async function candidateToPlacement() {
     .onOk(async () => {
       showLoader();
       await http
-        .get(config.API.periodRecruitToPlacement(importId.value))
-        .then((res) => {
+        .post(config.API.periodRecruitToPlacement(importId.value), {
+          accountStartDate: date,
+        })
+        .then(() => {
           success($q, "นำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ");
+          modalCandidates.value = false;
+          router.go(-1);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(async () => {
           hideLoader();
-          router.go(-1);
         });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 }
 
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
+/** ฟังก์ชันเปิดโมดัลสำหรับผู้ส่งผ่านการสอบแข่งขัน */
+function openModalCandidates() {
+  modalCandidates.value = true;
 }
 
 onMounted(async () => {
@@ -443,6 +457,7 @@ onMounted(async () => {
   await fetchData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -464,7 +479,7 @@ onMounted(async () => {
       flat
       color="indigo"
       v-if="rows.length > 0"
-      @click="candidateToPlacement"
+      @click="openModalCandidates"
     >
       <q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
     </q-btn>
@@ -491,6 +506,7 @@ onMounted(async () => {
       </q-menu>
     </q-btn>
   </div>
+
   <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
     <div class="col-12">
       <Table
@@ -565,6 +581,12 @@ onMounted(async () => {
       </Table>
     </div>
   </q-card>
+
+  <DialogCandidates
+    :title="'ส่งผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ'"
+    v-model:modal="modalCandidates"
+    :on-submit="onSubmitCandidates"
+  />
 </template>
 
 <style></style>