feat(compete):add DialogCandidates (#1473)

src/modules/03_recruiting/components/DialogCandidates.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai, dateToISO } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+
+const props = defineProps({
+  onSubmit: { type: Function, require: true },
+});
+
+const date = ref<Date>(new Date()); // วันที่บัญชีใช้ได้ตั้งแต่
+
+/** ฟังก์ชันบันทึกข้อมูลวันที่ */
+function onSubmit() {
+  if (!date.value) return;
+  const dateISO = dateToISO(date.value);
+  props.onSubmit?.(dateISO);
+}
+
+/** ฟังก์ชันปิดโมดัล */
+function closeModal() {
+  modal.value = false;
+}
+
+/** watch modal รีเซ็ตวันที่ */
+watch(modal, (value) => {
+  if (value) date.value = new Date();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent class="q-pt-none">
+    <q-card style="min-width: 450px">
+      <q-form @submit.prevent="onSubmit">
+        <DialogHeader :tittle="title" :close="closeModal" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateRef"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :model-value="date != null ? date2Thai(date) : null"
+                  label="วันที่บัญชีใช้ได้ตั้งแต่"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn color="public" label="บันทึก" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>

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))
+        .post(config.API.periodRecruitToPlacement(importId.value), {
-        .then((res) => {
+          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(
+function openModalCandidates() {
-    filter.value,
+  modalCandidates.value = true;
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
 }
 
 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>