hrms-mgt/src/modules/04_registryPerson/components/requestEdit/Dialog02_EditIDP.vue

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useCounterMixin } from "@/stores/mixin";
import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
import config from "@/app.config";
import http from "@/plugins/http";

import type {
  DataOption,
  DataItemsDevelopment,
} from "@/modules/04_registryPerson/interface/index/Main";
import type { FormDataIDP } from "@/modules/04_registryPerson/interface/request/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const store = useRequestEditStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
const { fetchDataList } = defineProps({
  fetchDataList: { type: Function, require: true },
});

const isReadOnly = ref<boolean>(false); //อ่านอย่างเดียว

//ฟอร์มข้อมูลการพัฒนารายบุคคล
const formData = reactive<FormDataIDP>({
  topic: "", //ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา
  developmentProjects: [], //วิธีการพัฒนา
  reasonDevelopment70: "", //อื่นๆ 70 การลงมือปฏิบัติ
  reasonDevelopment20: "", //อื่นๆ 20 การเรียนรู้จากผู้อื่น
  reasonDevelopment10: "", //อื่นๆ 10 การฝึกอบรมอื่นๆ
  developmentTarget: "", //เป้าหมายการนำไปพัฒนางาน
  developmentResults: "", //วิธีการวัดผลการพัฒนา
  developmentReport: "", //รายงานผลการพัฒนา
  status: "", //สถานะ
  reason: "", //หมายเหตุ
});

//70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const itemsDevelopment70 = ref<DataItemsDevelopment[]>([
  {
    value: "on_the_job_training",
    label: "การฝึกปฏิบัติในงาน (On the job training)",
  },
  {
    value: "job_project_assignment",
    label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
  },
  {
    value: "job_shadowing",
    label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
  },
  {
    value: "job_enlargement",
    label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
  },
  {
    value: "internal_trainer",
    label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
  },
  {
    value: "rotation",
    label: "การหมุนเวียนงาน (Rotation)",
  },
  {
    value: "activity",
    label: "การทำกิจกรรม (Activity)",
  },
  {
    value: "site_visit",
    label: "การศึกษาดูงานนอกสถานที่ (Site visit)",
  },
  {
    value: "benchmarking",
    label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
  },
  {
    value: "problem_solving",
    label: "การแก้ปัญหา (Problem-solving)",
  },
  {
    value: "team_working",
    label: "การทำงานเป็นทีม (Team working)",
  },
  {
    value: "other1",
    label: "อื่น ๆ (ระบุ)",
  },
]);
//20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
const itemsDevelopment20 = ref<DataItemsDevelopment[]>([
  { value: "coaching", label: "การสอนงาน (Coaching)" },
  { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
  { value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
  { value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
  { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
  { value: "other2", label: "อื่น ๆ (ระบุ)" },
]);
//10 การฝึกอบรมอื่นๆ
const itemsDevelopment10 = ref<DataItemsDevelopment[]>([
  {
    value: "self_learning",
    label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self – learning)",
  },
  { value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
  {
    value: "in_house_training",
    label: "การฝึกอบรมภายในองค์กร (In – house training)",
  },
  {
    value: "public_training",
    label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
  },
  {
    value: "e_training",
    label: "การฝึกอบรมผ่าน online (e – training / e – learning)",
  },
  { value: "meeting", label: "การประชุม (Meeting)" },
  { value: "seminar", label: "การสัมมนา (Seminar)" },
  { value: "other3", label: "อื่น ๆ (ระบุ)" },
]);
//ข้อมูลรายการสถานะ
const statusOptionMain = ref<DataOption[]>(
  store.optionStatusIDP.filter((e: DataOption) => e.id !== "")
);
const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ

/**
 * function fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
 * @param id ID ที่ต้องการดูรายละเอียด
 */
function fetchDataByid(id: string) {
  showLoader();
  http
    .get(config.API.requestDevelopmentEdit + `admin/${id}`)
    .then((res) => {
      const data = res.data.result;
      formData.topic = data.name;
      formData.developmentProjects = data.developmentProjects;
      formData.developmentTarget = data.developmentTarget;
      formData.developmentResults = data.developmentResults;
      formData.developmentReport = data.developmentReport;
      formData.reasonDevelopment70 = data.reasonDevelopment70;
      formData.reasonDevelopment20 = data.reasonDevelopment20;
      formData.reasonDevelopment10 = data.reasonDevelopment10;
      formData.status = data.status;
      formData.reason = data.reason;
    })
    .catch((err) => {
      messageError($q, err);
    })
    .finally(() => {
      hideLoader();
    });
}

/**
 * function ค้นหาคำใน select  สถานะคำร้อง
 * @param val คำค้น
 * @param update Function
 */
function filterOption(val: string, update: Function) {
  update(() => {
    formData.status = val ? "" : formData.status;
    statusOption.value = statusOptionMain.value.filter(
      (v: DataOption) => v.name.indexOf(val) > -1
    );
  });
}

/** function บันทึกข้อมูลการพัฒนารายบุคคล */
function onSubmit() {
  dialogConfirm($q, async () => {
    showLoader();
    await http
      .patch(config.API.requestDevelopmentEdit + `admin/${requestId.value}`, {
        status: formData.status,
        reason: formData.reason,
      })
      .then(async () => {
        await fetchDataList?.();
        success($q, "บันทึกข้อมูลสำเร็จ");
        closeDialog();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * function ปิด popup
 * และกำหนด formData เป็นค่า Defult
 */
function closeDialog() {
  modal.value = false;
  formData.topic = "";
  formData.developmentProjects = [];
  formData.reasonDevelopment70 = "";
  formData.reasonDevelopment20 = "";
  formData.reasonDevelopment10 = "";
  formData.developmentTarget = "";
  formData.developmentResults = "";
  formData.developmentReport = "";
  formData.status = "";
  formData.reason = "";
}

/**
 * class inpui
 * @param val ค่าสถานะ
 */
function classInput(val: boolean) {
  return {
    "full-width cursor-pointer ": val,
    "full-width cursor-pointer inputgreen": !val,
  };
}

/**
 * ดูการเปลี่ยนแปลงของ modal เมื่อ modal เป็น True
 * fetch ข้อมูลการพัฒนารายบุคคลตาม ID ที่ค้องการ
 */
watch(modal, (val) => {
  if (val) {
    fetchDataByid(requestId.value);
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 90%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader tittle="ข้อมูลการพัฒนารายบุคคล" :close="closeDialog" />
        <q-separator />

        <q-card-section style="max-height: 84vh" class="scroll">
          <div class="row q-col-gutter-sm">
            <div class="col-md-3 col-xs-12">
              <div class="row q-col-gutter-sm">
                <!-- สถานะ -->
                <div class="col-12">
                  <q-select
                    :class="classInput(isReadOnly)"
                    v-model="formData.status"
                    label="สถานะ"
                    dense
                    outlined
                    emit-value
                    map-options
                    :options="statusOption"
                    :rules="[(val:string) => !!val || `${'กรุณาเลือกสถานะ'}`]"
                    lazy-rules
                    hide-bottom-space
                    use-input
                    option-label="name"
                    option-value="id"
                    @filter="(inputValue:string,
                        doneFn:Function) => filterOption(inputValue, doneFn
                        ) "
                  >
                    <template v-slot:no-option>
                      <q-item>
                        <q-item-section class="text-grey">
                          ไม่มีข้อมูล
                        </q-item-section>
                      </q-item>
                    </template>
                  </q-select>
                </div>

                <!-- หมายเหตุ -->
                <div class="col-12">
                  <q-input
                    :class="classInput(isReadOnly)"
                    v-model="formData.reason"
                    label="หมายเหตุ"
                    dense
                    outlined
                    type="textarea"
                    hide-bottom-space
                  />
                </div>
              </div>
            </div>

            <div class="col-md-9 col-xs-12">
              <div class="row q-col-gutter-sm">
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.topic"
                    label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
                    dense
                  />
                </div>

                <div class="col-12">
                  <div class="q-mb-sm text-weight-medium text-body2">
                    วิธีการพัฒนา
                  </div>
                  <div class="row col-12 q-ml-md q-col-gutter-sm">
                    <!-- 70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย) -->
                    <div class="col-4">
                      <div class="q-mb-sm text-weight-medium text-body2">
                        70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
                      </div>
                      <q-option-group
                        disable
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        dense
                        v-model="formData.developmentProjects"
                        :options="itemsDevelopment70"
                        type="checkbox"
                      />

                      <div
                        class="row"
                        v-if="formData.developmentProjects.includes('other1')"
                      >
                        <div class="col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              readonly
                              v-model="formData.reasonDevelopment70"
                              dense
                              outlined
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting) -->
                    <div class="col-4">
                      <div class="q-mb-sm text-weight-medium text-body2">
                        20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
                      </div>
                      <q-option-group
                        disable
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        dense
                        v-model="formData.developmentProjects"
                        :options="itemsDevelopment20"
                        type="checkbox"
                      />
                      <div
                        class="row"
                        v-if="formData.developmentProjects.includes('other2')"
                      >
                        <div class="col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              readonly
                              v-model="formData.reasonDevelopment20"
                              dense
                              outlined
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 10 การฝึกอบรมอื่นๆ -->
                    <div class="col-4">
                      <div class="q-mb-sm text-weight-medium text-body2">
                        10 การฝึกอบรมอื่นๆ
                      </div>
                      <q-option-group
                        disable
                        class="check_box q-mt-sm"
                        keep-color
                        color="primary"
                        dense
                        v-model="formData.developmentProjects"
                        :options="itemsDevelopment10"
                        type="checkbox"
                      />
                      <div
                        class="row"
                        v-if="formData.developmentProjects.includes('other3')"
                      >
                        <div class="offset-4 col-8 q-mt-sm relative-position">
                          <div class="other_custom_input">
                            <q-input
                              readonly
                              v-model="formData.reasonDevelopment10"
                              dense
                              outlined
                              label="กรุณาระบุ"
                            ></q-input>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- เป้าหมายการนำไปพัฒนางาน -->
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.developmentTarget"
                    label="เป้าหมายการนำไปพัฒนางาน"
                    dense
                    type="textarea"
                  />
                </div>

                <!-- วิธีการวัดผลการพัฒนา -->
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.developmentResults"
                    label="วิธีการวัดผลการพัฒนา"
                    dense
                    type="textarea"
                  />
                </div>

                <!-- รายงานผลการพัฒนา -->
                <div class="col-12">
                  <q-input
                    readonly
                    outlined
                    v-model="formData.developmentReport"
                    label="รายงานผลการพัฒนา"
                    dense
                    type="textarea"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" color="secondary" type="submit"
            ><q-tooltip>บันทึก</q-tooltip></q-btn
          >
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>