hrms-mgt/src/modules/03_recruiting/components/Education.vue

<script setup lang="ts">
import { ref, onMounted, watch, type PropType } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";

import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";

import type {
  DataOption,
  Education,
} from "@/modules/03_recruiting/interface/index/Main";

import {
  defaultEducation,
  changeData,
} from "@/modules/03_recruiting/interface/index/Main";
import HeaderTop from "@/modules/03_recruiting/components/top.vue";

const props = defineProps({
  status: {
    type: String,
    required: true,
  },
  form: {
    type: Object,
    required: true,
  },
  educationLevelOptions: {
    type: Array as PropType<DataOption[]>,
    required: true,
  },
});

const $q = useQuasar();
const route = useRoute();

const edit = ref<boolean>(true);
const showEducationName = ref<boolean>(true);
const myform = ref<object | null>(null);
const candidateId = ref<string>(route.params.candidateId.toString());
const educationTypeOptions = ref<DataOption[]>([
  {
    name: "รัฐบาล",
    id: "รัฐบาล",
  },
  {
    name: "เอกชน",
    id: "เอกชน",
  },
]);

const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, date2Thai } = mixin;

const emit = defineEmits(["update:form"]);

watch(myform, async (count: any) => {
  emit("update:form", count);
});

watch(defaultEducation, async (count: Education) => {
  await changeData("education", count);
});

onMounted(async () => {
  await fetchData();
});

const fetchData = async () => {
  showLoader();
  await http
    .get(config.API.candidateEducation(candidateId.value))
    .then((res) => {
      const data = res.data.result;
      if (data != null) {
        defaultEducation.value.educationLevelExamId = data.educationLevelExamId;
        defaultEducation.value.educationName = data.educationName;
        defaultEducation.value.educationMajor = data.educationMajor;
        defaultEducation.value.educationLocation = data.educationLocation;
        defaultEducation.value.educationType = data.educationType;
        defaultEducation.value.educationEndDate = data.educationEndDate;
        defaultEducation.value.educationScores = data.educationScores;
        defaultEducation.value.educationLevelHighId = data.educationLevelHighId;
        checkInputName();
      }
    })
    .catch((e) => {
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};

const checkInputName = () => {
  showEducationName.value =
    props.educationLevelOptions.filter(
      (x) =>
        x.id == defaultEducation.value.educationLevelExamId &&
        (x.name == "ปริญญาตรี" || x.name == "ปริญญาโท" || x.name == "ปริญญาเอก")
    ).length == 0
      ? false
      : true;
};

const getClass = (val: boolean) => {
  return {
    "full-width inputgreen cursor-pointer": val,
    "full-width cursor-pointer": !val,
  };
};
</script>

<template>
  <HeaderTop
    v-model:edit="edit"
    header="วุฒิที่ใช้สมัครสอบ"
    icon="mdi-briefcase"
    :addData="true"
    :editOnly="false"
    :editData="false"
  />
  <q-form ref="myform">
    <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-xs">
      <div class="col-12 row q-col-gutter-sm">
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationLevelOptions"
            v-model="defaultEducation.educationLevelExamId"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก วุฒิที่ใช้สมัครสอบ'}`]"
            :label="`${'วุฒิที่ใช้สมัครสอบ'}`"
            @update:model-value="(value) => checkInputName()"
          />
        </div>
        <div class="col-xs-12 col-sm-3" v-if="showEducationName">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultEducation.educationName"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อปริญญา'}`]"
            :label="`${'ชื่อปริญญา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultEducation.educationMajor"
            :rules="[(val:string) => !!val || `${'กรุณากรอก สาขาวิชา/วิชาเอก'}`]"
            :label="`${'สาขาวิชา/วิชาเอก'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            autogrow
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultEducation.educationLocation"
            :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อสถานศึกษา'}`]"
            :label="`${'ชื่อสถานศึกษา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationTypeOptions"
            v-model="defaultEducation.educationType"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภทสถานศึกษา'}`]"
            :label="`${'ประเภทสถานศึกษา'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <datepicker
            v-model="defaultEducation.educationEndDate"
            :locale="'th'"
            autoApply
            :enableTimePicker="false"
            week-start="0"
            :max-date="new Date()"
            :disabled="!(status == 'checkRegister' || status == 'payment')"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                :class="
                  getClass(status == 'checkRegister' || status == 'payment')
                "
                :outlined="status == 'checkRegister' || status == 'payment'"
                dense
                :readonly="!(status == 'checkRegister' || status == 'payment')"
                :borderless="
                  !(status == 'checkRegister' || status == 'payment')
                "
                :model-value="date2Thai(defaultEducation.educationEndDate)"
                :rules="[
                  (val) => !!val || `${'กรุณาเลือกวันที่สำเร็จการศึกษา'}`,
                ]"
                hide-bottom-space
                :label="`${'วันที่สำเร็จการศึกษา'}`"
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    :style="
                      status == 'checkRegister' || status == 'payment'
                        ? 'color: var(--q-primary)'
                        : 'color: var(--q-grey)'
                    "
                  >
                  </q-icon>
                </template>
              </q-input>
            </template>
          </datepicker>
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-input
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            type="number"
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            v-model="defaultEducation.educationScores"
            :rules="[(val:string) => !!val || `${'กรุณากรอก คะแนนเฉลี่ยสะสม'}`]"
            :label="`${'คะแนนเฉลี่ยสะสม'}`"
          />
        </div>
        <div class="col-xs-12 col-sm-3">
          <q-select
            :class="getClass(status == 'checkRegister' || status == 'payment')"
            :readonly="!(status == 'checkRegister' || status == 'payment')"
            :borderless="!(status == 'checkRegister' || status == 'payment')"
            :outlined="status == 'checkRegister' || status == 'payment'"
            dense
            lazy-rules
            emit-value
            map-options
            option-label="name"
            option-value="id"
            :options="educationLevelOptions"
            v-model="defaultEducation.educationLevelHighId"
            :rules="[(val:string) => !!val || `${'กรุณาเลือก วุฒิการศึกษาสูงสุด'}`]"
            :label="`${'วุฒิการศึกษาสูงสุด'}`"
          />
        </div>
      </div>
    </div>
  </q-form>
</template>