From 1cb2995b5715a3c4f153ee26fc001d5e96584443 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 12 Oct 2023 11:33:02 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=99=E0=B9=84?=
 =?UTF-8?q?=E0=B8=82=E0=B9=80=E0=B8=A5=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=81=E0=B9=89=20modalfix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/components/Career.vue       | 1116 ++++++++---------
 1 file changed, 508 insertions(+), 608 deletions(-)

diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index 1a458efd1..a00065564 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -1,109 +1,58 @@
 <!-- tab ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน) -->
 <template>
-  <q-form ref="myForm">
-    <Table
-      :rows="rows"
-      :columns="columns"
-      :filter="filter"
-      :visible-columns="visibleColumns"
-      v-model:inputfilter="filter"
-      v-model:inputvisible="visibleColumns"
-      v-model:editvisible="edit"
-      :add="clickAdd"
-      :edit="clickEdit"
-      :addData="false"
-      :bottom="true"
-      :editData="status == 'checkRegister' || status == 'payment'"
-      name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-      icon="mdi-briefcase"
-    >
-      <template #columns="props">
-        <q-tr :props="props">
-          <q-td
-            v-for="col in props.cols"
-            :key="col.name"
-            :props="props"
-            @click="selectData(props)"
-            class="cursor-pointer"
-          >
-            <div v-if="col.name == 'startDate' || col.name == 'endDate'">
-              {{ date2Thai(col.value) }}
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-          <q-td
-            style="width:5% !important;"
-            v-if="status == 'checkRegister' || status == 'payment'"
-          >
-            <q-btn
-              color="red"
-              flat
-              dense
-              round
-              size="14px"
-              icon="mdi-trash-can-outline"
-              @click="checkDelete(props.row)"
-            />
-          </q-td>
-        </q-tr>
-      </template>
-      <template #bottom="props">
-          <div style="width:75% !important;"/>
-          <div :props="props" style="width:25% !important;padding-left: 12px;">
-            <span class="text-weight-medium text-subtitle2 q-py-sm"
-              >รวมระยะเวลา : <span class="q-pl-sm">{{ total }}</span></span
-            >
-          </div>
-      </template>
-    </Table>
-  </q-form>
-  <!-- popup Edit window-->
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader
-          tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
-          :close="checkClose"
-        />
-        <q-separator />
-        <q-card-section class="q-p-sm">
-          <div
-            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
-          >
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-input
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="position"
-                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
-                :label="`${'ตำแหน่ง/ลักษณะงาน'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <q-select
-                :class="getClass(edit)"
-                :outlined="edit"
-                dense
-                lazy-rules
-                :readonly="!edit"
-                :borderless="!edit"
-                v-model="type"
-                :options="opType"
-                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
-                :label="`${'ประเภท'}`"
-                @update:modelValue="clickEditRow"
-                hide-bottom-space
-              />
-            </div>
-            <!-- <div class="col-xs-12 col-sm-6 col-md-6">
+    <q-form ref="myForm">
+        <Table :rows="rows" :columns="columns" :filter="filter" :visible-columns="visibleColumns"
+            v-model:inputfilter="filter" v-model:inputvisible="visibleColumns" v-model:editvisible="edit" :add="clickAdd"
+            :edit="clickEdit" :addData="false" :bottom="true" :editData="status == 'checkRegister' || status == 'payment'"
+            name="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)" icon="mdi-briefcase">
+            <template #columns="props">
+                <q-tr :props="props">
+                    <q-td v-for="col in props.cols" :key="col.name" :props="props" @click="selectData(props)"
+                        class="cursor-pointer">
+                        <div v-if="col.name == 'startDate' || col.name == 'endDate'">
+                            {{ date2Thai(col.value) }}
+                        </div>
+                        <div v-else>
+                            {{ col.value }}
+                        </div>
+                    </q-td>
+                    <q-td style="width:5% !important;" v-if="status == 'checkRegister' || status == 'payment'">
+                        <q-btn color="red" flat dense round size="14px" icon="mdi-trash-can-outline"
+                            @click="checkDelete(props.row)" />
+                    </q-td>
+                </q-tr>
+            </template>
+            <template #bottom="props">
+                <div style="width:75% !important;" />
+                <div :props="props" style="width:25% !important;padding-left: 12px;">
+                    <span class="text-weight-medium text-subtitle2 q-py-sm">รวมระยะเวลา : <span class="q-pl-sm">{{ total
+                    }}</span></span>
+                </div>
+            </template>
+        </Table>
+    </q-form>
+    <!-- popup Edit window-->
+    <q-dialog v-model="modal" persistent>
+        <q-card style="width: 600px">
+            <q-form ref="myForm">
+                <DialogHeader tittle="ประวัติการทำงาน (ตั้งแต่เริ่มปฏิบัติงานกับกรุงเทพมหานคร - ปัจจุบัน)"
+                    :close="checkClose" />
+                <q-separator />
+                <q-card-section class="q-p-sm">
+                    <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                            <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                                :borderless="!edit" v-model="position"
+                                :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/ลักษณะงาน'}`]"
+                                :label="`${'ตำแหน่ง/ลักษณะงาน'}`" @update:modelValue="clickEditRow" hide-bottom-space />
+                        </div>
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                            <q-select :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit"
+                                :borderless="!edit" v-model="type" :options="opType"
+                                :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]" :label="`${'ประเภท'}`"
+                                @update:modelValue="clickEditRow" hide-bottom-space />
+                        </div>
+                        <!-- <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 :class="getClass(edit)"
                 :outlined="edit"
@@ -148,125 +97,70 @@
                 hide-bottom-space
               />
             </div> -->
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <datepicker
-                :readonly="!edit"
-                v-model="startDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(startDate)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่ม'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-12 col-sm-6 col-md-6">
-              <datepicker
-                :readonly="!edit"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(endDate)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-12 col-sm-12 col-md-12">
-              <q-input
-                :class="getClass(false)"
-                :outlined="false"
-                dense
-                lazy-rules
-                :readonly="!false"
-                :borderless="!false"
-                v-model="rangeDate"
-                :label="`${'ระยะเวลา'}`"
-                hide-bottom-space
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <DialogFooter
-          :edit="clickEdit"
-          :save="clickSave"
-          :validate="validateData"
-          :clickNext="clickNext"
-          :clickPrevious="clickPrevious"
-          :editData="status == 'checkRegister' || status == 'payment'"
-          v-model:editvisible="edit"
-          v-model:next="next"
-          v-model:previous="previous"
-          v-model:modalEdit="modalEdit"
-        />
-      </q-form>
-    </q-card>
-  </q-dialog>
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                            <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="startDate" :locale="'th'"
+                                autoApply :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
+                                <template #year="{ year }">
+                                    {{ year + 543 }}
+                                </template>
+                                <template #year-overlay-value="{ value }">
+                                    {{ parseInt(value + 543) }}
+                                </template>
+                                <template #trigger>
+                                    <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                                        :model-value="date2Thai(startDate)"
+                                        :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่ม'}`]" hide-bottom-space
+                                        :label="`${'วันที่เริ่ม'}`">
+                                        <template v-slot:prepend>
+                                            <q-icon name="event" class="cursor-pointer" :style="edit
+                                                ? 'color: var(--q-primary)'
+                                                : 'color: var(--q-grey)'
+                                                ">
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </template>
+                            </datepicker>
+                        </div>
+                        <div class="col-xs-12 col-sm-6 col-md-6">
+                            <datepicker menu-class-name="modalfix" :readonly="!edit" v-model="endDate" :locale="'th'"
+                                autoApply :enableTimePicker="false" @update:modelValue="clickEditRow" week-start="0">
+                                <template #year="{ year }">
+                                    {{ year + 543 }}
+                                </template>
+                                <template #year-overlay-value="{ value }">
+                                    {{ parseInt(value + 543) }}
+                                </template>
+                                <template #trigger>
+                                    <q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit"
+                                        :model-value="date2Thai(endDate)"
+                                        :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`, endDateValidation]"
+                                        hide-bottom-space :label="`${'วันที่สิ้นสุด'}`">
+                                        <template v-slot:prepend>
+                                            <q-icon name="event" class="cursor-pointer" :style="edit
+                                                ? 'color: var(--q-primary)'
+                                                : 'color: var(--q-grey)'
+                                                ">
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </template>
+                            </datepicker>
+                        </div>
+                        <div class="col-xs-12 col-sm-12 col-md-12">
+                            <q-input :class="getClass(false)" :outlined="false" dense lazy-rules :readonly="!false"
+                                :borderless="!false" v-model="rangeDate" :label="`${'ระยะเวลา'}`" hide-bottom-space />
+                        </div>
+                    </div>
+                </q-card-section>
+                <q-separator />
+                <DialogFooter :edit="clickEdit" :save="clickSave" :validate="validateData" :clickNext="clickNext"
+                    :clickPrevious="clickPrevious" :editData="status == 'checkRegister' || status == 'payment'"
+                    v-model:editvisible="edit" v-model:next="next" v-model:previous="previous"
+                    v-model:modalEdit="modalEdit" />
+            </q-form>
+        </q-card>
+    </q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -277,8 +171,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useExamDataStore } from "@/modules/03_recruiting/store";
 import type {
-  RequestItemsObject,
-  DataProps,
+    RequestItemsObject,
+    DataProps,
 } from "@/modules/03_recruiting/interface/request/Career";
 import type { ResponseObject } from "@/modules/03_recruiting/interface/response/Career";
 import Table from "@/modules/03_recruiting/components/TableCan.vue";
@@ -287,10 +181,10 @@ import DialogFooter from "@/modules/03_recruiting/components/DialogFooter.vue";
 import { useRoute } from "vue-router";
 
 const props = defineProps({
-  status: {
-    type: String,
-    required: true,
-  },
+    status: {
+        type: String,
+        required: true,
+    },
 });
 
 const $q = useQuasar();
@@ -302,9 +196,9 @@ const id = ref<string>("");
 
 const type = ref<string | null>();
 const opType = ref([
-  "ลูกจ้างประจำ",
-  "ลูกจ้างชั่วคราว",
-  "ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร",
+    "ลูกจ้างประจำ",
+    "ลูกจ้างชั่วคราว",
+    "ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร",
 ]);
 
 const position = ref<string | null>();
@@ -334,438 +228,444 @@ const { messageError, showLoader, hideLoader } = mixin;
 const visibleColumns = ref<String[]>([]);
 
 examData.career.columns.length == 0
-  ? (visibleColumns.value = [
-      "position",
-      //   "group",
-      //   "pile",
-      //   "org",
-      "type",
-      "startDate",
-      "endDate",
-      "rangeDate",
+    ? (visibleColumns.value = [
+        "position",
+        //   "group",
+        //   "pile",
+        //   "org",
+        "type",
+        "startDate",
+        "endDate",
+        "rangeDate",
     ])
-  : (visibleColumns.value = examData.career.columns);
+    : (visibleColumns.value = examData.career.columns);
 
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "position",
-    align: "left",
-    label: "ชื่อตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:25%;",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภท",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:20%;",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  //   {
-  //     name: "group",
-  //     align: "left",
-  //     label: "กลุ่ม/ฝ่าย",
-  //     sortable: true,
-  //     field: "group",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "pile",
-  //     align: "left",
-  //     label: "กอง",
-  //     sortable: true,
-  //     field: "pile",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  //   {
-  //     name: "org",
-  //     align: "left",
-  //     label: "สังกัด",
-  //     sortable: true,
-  //     field: "org",
-  //     headerStyle: "font-size: 14px",
-  //     style: "font-size: 14px",
-  //     sort: (a: string, b: string) =>
-  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  //   },
-  {
-    name: "startDate",
-    align: "left",
-    label: "เริ่ม",
-    sortable: true,
-    field: "startDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "endDate",
-    align: "left",
-    label: "สิ้นสุด",
-    sortable: true,
-    field: "endDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:15%;",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "rangeDate",
-    align: "left",
-    label: "ระยะเวลา",
-    sortable: true,
-    field: "rangeDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px; width:20%;",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+    {
+        name: "position",
+        align: "left",
+        label: "ชื่อตำแหน่ง",
+        sortable: true,
+        field: "position",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px; width:25%;",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+        name: "type",
+        align: "left",
+        label: "ประเภท",
+        sortable: true,
+        field: "type",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px; width:20%;",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    //   {
+    //     name: "group",
+    //     align: "left",
+    //     label: "กลุ่ม/ฝ่าย",
+    //     sortable: true,
+    //     field: "group",
+    //     headerStyle: "font-size: 14px",
+    //     style: "font-size: 14px",
+    //     sort: (a: string, b: string) =>
+    //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    //   },
+    //   {
+    //     name: "pile",
+    //     align: "left",
+    //     label: "กอง",
+    //     sortable: true,
+    //     field: "pile",
+    //     headerStyle: "font-size: 14px",
+    //     style: "font-size: 14px",
+    //     sort: (a: string, b: string) =>
+    //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    //   },
+    //   {
+    //     name: "org",
+    //     align: "left",
+    //     label: "สังกัด",
+    //     sortable: true,
+    //     field: "org",
+    //     headerStyle: "font-size: 14px",
+    //     style: "font-size: 14px",
+    //     sort: (a: string, b: string) =>
+    //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    //   },
+    {
+        name: "startDate",
+        align: "left",
+        label: "เริ่ม",
+        sortable: true,
+        field: "startDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px; width:15%;",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+        name: "endDate",
+        align: "left",
+        label: "สิ้นสุด",
+        sortable: true,
+        field: "endDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px; width:15%;",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
+    {
+        name: "rangeDate",
+        align: "left",
+        label: "ระยะเวลา",
+        sortable: true,
+        field: "rangeDate",
+        headerStyle: "font-size: 14px",
+        style: "font-size: 14px; width:20%;",
+        sort: (a: string, b: string) =>
+            a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+    },
 ]);
 
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
-  await changeExamColumns("career", count);
+    await changeExamColumns("career", count);
 });
 
 watch(startDate, async (count: Date, prevCount: Date) => {
-  await calDate();
+    await calDate();
 });
 
 watch(endDate, async (count: Date, prevCount: Date) => {
-  await calDate();
+    await calDate();
 });
 
 onMounted(async () => {
-  await fetchData();
+    await fetchData();
 });
 
 const calDate = async () => {
-  let _startDate = new Date(startDate.value.toISOString().substr(0, 10));
-  let _endDate = new Date(endDate.value.toISOString().substr(0, 10));
-  _endDate.setDate(_endDate.getDate() + 1);
-  if (_startDate > _endDate) {
-    const swap = _startDate;
-    _startDate = _endDate;
-    _endDate = swap;
-  }
-  const startYear = _startDate.getFullYear();
-  const february =
-    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
-      ? 29
-      : 28;
-  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-
-  let yearDiff = _endDate.getFullYear() - startYear;
-  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
-  if (monthDiff < 0) {
-    yearDiff--;
-    monthDiff += 12;
-  }
-  let dayDiff = _endDate.getDate() - _startDate.getDate();
-  if (dayDiff < 0) {
-    if (monthDiff > 0) {
-      monthDiff--;
-    } else {
-      yearDiff--;
-      monthDiff = 11;
+    let _startDate = new Date(startDate.value.toISOString().substr(0, 10));
+    let _endDate = new Date(endDate.value.toISOString().substr(0, 10));
+    _endDate.setDate(_endDate.getDate() + 1);
+    if (_startDate > _endDate) {
+        const swap = _startDate;
+        _startDate = _endDate;
+        _endDate = swap;
     }
-    dayDiff += daysInMonth[_startDate.getMonth()];
-  }
-  rangeDate.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
-    monthDiff > 0 ? monthDiff + " เดือน " : ""
-  }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+    const startYear = _startDate.getFullYear();
+    const february =
+        (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+            ? 29
+            : 28;
+    const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+    let yearDiff = _endDate.getFullYear() - startYear;
+    let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+    if (monthDiff < 0) {
+        yearDiff--;
+        monthDiff += 12;
+    }
+    let dayDiff = _endDate.getDate() - _startDate.getDate();
+    if (dayDiff < 0) {
+        if (monthDiff > 0) {
+            monthDiff--;
+        } else {
+            yearDiff--;
+            monthDiff = 11;
+        }
+        dayDiff += daysInMonth[_startDate.getMonth()];
+    }
+    rangeDate.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${monthDiff > 0 ? monthDiff + " เดือน " : ""
+        }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
 };
 
 const calDateSplit = async (startDate: Date, endDate: Date) => {
-  let _startDate = new Date(startDate.toISOString().substr(0, 10));
-  let _endDate = new Date(endDate.toISOString().substr(0, 10));
-  _endDate.setDate(_endDate.getDate() + 1);
-  if (_startDate > _endDate) {
-    const swap = _startDate;
-    _startDate = _endDate;
-    _endDate = swap;
-  }
-  const startYear = _startDate.getFullYear();
-  const february =
-    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
-      ? 29
-      : 28;
-  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-
-  let yearDiff = _endDate.getFullYear() - startYear;
-  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
-  if (monthDiff < 0) {
-    yearDiff--;
-    monthDiff += 12;
-  }
-  let dayDiff = _endDate.getDate() - _startDate.getDate();
-  if (dayDiff < 0) {
-    if (monthDiff > 0) {
-      monthDiff--;
-    } else {
-      yearDiff--;
-      monthDiff = 11;
+    let _startDate = new Date(startDate.toISOString().substr(0, 10));
+    let _endDate = new Date(endDate.toISOString().substr(0, 10));
+    _endDate.setDate(_endDate.getDate() + 1);
+    if (_startDate > _endDate) {
+        const swap = _startDate;
+        _startDate = _endDate;
+        _endDate = swap;
     }
-    dayDiff += daysInMonth[_startDate.getMonth()];
-  }
-  var obj = {
-    yearDiff: yearDiff,
-    monthDiff: monthDiff,
-    dayDiff: dayDiff,
-  };
-  return obj;
+    const startYear = _startDate.getFullYear();
+    const february =
+        (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+            ? 29
+            : 28;
+    const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+    let yearDiff = _endDate.getFullYear() - startYear;
+    let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+    if (monthDiff < 0) {
+        yearDiff--;
+        monthDiff += 12;
+    }
+    let dayDiff = _endDate.getDate() - _startDate.getDate();
+    if (dayDiff < 0) {
+        if (monthDiff > 0) {
+            monthDiff--;
+        } else {
+            yearDiff--;
+            monthDiff = 11;
+        }
+        dayDiff += daysInMonth[_startDate.getMonth()];
+    }
+    var obj = {
+        yearDiff: yearDiff,
+        monthDiff: monthDiff,
+        dayDiff: dayDiff,
+    };
+    return obj;
 };
 
 const fetchData = async () => {
-  showLoader();
-  await http
-    .get(config.API.candidateCareer(candidateId.value))
-    .then((res) => {
-      const data = res.data.result;
-      var yearDiff = 0;
-      var monthDiff = 0;
-      var dayDiff = 0;
-      total.value = "-";
-      rows.value = [];
-      data.map((r: any) => {
-        rows.value.push({
-          ...r,
-          startDate: new Date(r.durationStart),
-          endDate: new Date(r.durationEnd),
+    showLoader();
+    await http
+        .get(config.API.candidateCareer(candidateId.value))
+        .then((res) => {
+            const data = res.data.result;
+            var yearDiff = 0;
+            var monthDiff = 0;
+            var dayDiff = 0;
+            total.value = "-";
+            rows.value = [];
+            data.map((r: any) => {
+                rows.value.push({
+                    ...r,
+                    startDate: new Date(r.durationStart),
+                    endDate: new Date(r.durationEnd),
+                });
+                calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
+                    (d) => {
+                        yearDiff = yearDiff + d.yearDiff;
+                        monthDiff = monthDiff + d.monthDiff;
+                        dayDiff = dayDiff + d.dayDiff;
+                        if (dayDiff >= 30) {
+                            monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
+                            dayDiff = dayDiff % 30;
+                        }
+                        if (monthDiff >= 12) {
+                            yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
+                            monthDiff = monthDiff % 12;
+                        }
+                        total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${monthDiff > 0 ? monthDiff + " เดือน " : ""
+                            }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+                    }
+                );
+            });
+        })
+        .catch((e) => {
+            messageError($q, e);
+        })
+        .finally(() => {
+            hideLoader();
         });
-        calDateSplit(new Date(r.durationStart), new Date(r.durationEnd)).then(
-          (d) => {
-            yearDiff = yearDiff + d.yearDiff;
-            monthDiff = monthDiff + d.monthDiff;
-            dayDiff = dayDiff + d.dayDiff;
-            if (dayDiff >= 30) {
-              monthDiff = monthDiff + parseInt((dayDiff / 30).toString());
-              dayDiff = dayDiff % 30;
-            }
-            if (monthDiff >= 12) {
-              yearDiff = yearDiff + parseInt((monthDiff / 12).toString());
-              monthDiff = monthDiff % 12;
-            }
-            total.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
-              monthDiff > 0 ? monthDiff + " เดือน " : ""
-            }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
-          }
-        );
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 };
 
 /**
  * กดดูข้อมูลก่อนหน้า
  */
 const clickPrevious = async () => {
-  rowIndex.value -= 1;
-  const row = rows.value[rowIndex.value];
-  position.value = row.position;
-  group.value = row.group;
-  pile.value = row.pile;
-  org.value = row.org;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
-  rangeDate.value = row.rangeDate;
-  type.value = row.type;
-  id.value = row.id;
-  await checkRowPage();
+    rowIndex.value -= 1;
+    const row = rows.value[rowIndex.value];
+    position.value = row.position;
+    group.value = row.group;
+    pile.value = row.pile;
+    org.value = row.org;
+    startDate.value = row.startDate;
+    endDate.value = row.endDate;
+    rangeDate.value = row.rangeDate;
+    type.value = row.type;
+    id.value = row.id;
+    await checkRowPage();
 };
 
 /**
  * กดดูข้อมูลต่อไป
  */
 const clickNext = () => {
-  rowIndex.value += 1;
-  const row = rows.value[rowIndex.value];
-  position.value = row.position;
-  group.value = row.group;
-  pile.value = row.pile;
-  org.value = row.org;
-  startDate.value = row.startDate;
-  endDate.value = row.endDate;
-  rangeDate.value = row.rangeDate;
-  type.value = row.type;
-  id.value = row.id;
-  checkRowPage();
+    rowIndex.value += 1;
+    const row = rows.value[rowIndex.value];
+    position.value = row.position;
+    group.value = row.group;
+    pile.value = row.pile;
+    org.value = row.org;
+    startDate.value = row.startDate;
+    endDate.value = row.endDate;
+    rangeDate.value = row.rangeDate;
+    type.value = row.type;
+    id.value = row.id;
+    checkRowPage();
 };
 
 /**
  * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
  */
 const checkRowPage = () => {
-  editRow.value = false;
-  next.value = true;
-  previous.value = true;
-  if (rowIndex.value + 1 >= rows.value.length) {
-    next.value = false;
-  }
-  if (rowIndex.value - 1 < 0) {
-    previous.value = false;
-  }
+    editRow.value = false;
+    next.value = true;
+    previous.value = true;
+    if (rowIndex.value + 1 >= rows.value.length) {
+        next.value = false;
+    }
+    if (rowIndex.value - 1 < 0) {
+        previous.value = false;
+    }
 };
 
 /**
  * กดปุ่มแก้ไขใน dialog
  */
 const clickEdit = () => {
-  next.value = false;
-  previous.value = false;
+    next.value = false;
+    previous.value = false;
 };
 
 /**
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = () => {
-  addRow();
+    addRow();
 };
 
 const checkDelete = (row: RequestItemsObject) => {
-  rawItem.value = row;
-  modalDelete(
-    $q,
-    "ยืนยันการลบข้อมูล",
-    "หากต้องการลบกดให้กดตกลง",
-    clickDeleteRow
-  );
+    rawItem.value = row;
+    modalDelete(
+        $q,
+        "ยืนยันการลบข้อมูล",
+        "หากต้องการลบกดให้กดตกลง",
+        clickDeleteRow
+    );
+};
+
+//validat enddate
+const endDateValidation = (value: Date) => {
+    if (startDate.value < endDate.value) {
+        return true;
+    }
+    return false;
 };
 
 /**
  * ลบข้อมูลใน table
  */
 const clickDeleteRow = async () => {
-  if (rawItem.value != null) {
-    showLoader();
-    await http
-      .delete(config.API.candidateAdminCareer(rawItem.value.id))
-      .then(() => {
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
+    if (rawItem.value != null) {
+        showLoader();
+        await http
+            .delete(config.API.candidateAdminCareer(rawItem.value.id))
+            .then(() => {
+                success($q, "ลบข้อมูลสำเร็จ");
+            })
+            .catch((e) => {
+                messageError($q, e);
+            })
+            .finally(async () => {
+                await fetchData();
+            });
+    } else {
         await fetchData();
-      });
-  } else {
-    await fetchData();
-  }
+    }
 };
 
 /**
  * กดบันทึกใน dialog
  */
 const clickSave = async () => {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      if (modalEdit.value) {
-        await editData();
-      } else {
-        await saveData();
-      }
-    }
-  });
+    myForm.value.validate().then(async (result: boolean) => {
+        if (result) {
+            if (modalEdit.value) {
+                await editData();
+            } else {
+                await saveData();
+            }
+        }
+    });
 };
 
 /**
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  showLoader();
-  await http
-    .post(config.API.candidateAdminCareer(candidateId.value), {
-      position: position.value,
-      group: group.value,
-      pile: pile.value,
-      org: org.value,
-      durationStart: dateToISO(new Date(startDate.value)),
-      durationEnd: dateToISO(new Date(endDate.value)),
-      rangeDate: rangeDate.value,
-      type: type.value,
-    })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      modal.value = false;
-      await fetchData();
-    });
+    showLoader();
+    await http
+        .post(config.API.candidateAdminCareer(candidateId.value), {
+            position: position.value,
+            group: group.value,
+            pile: pile.value,
+            org: org.value,
+            durationStart: dateToISO(new Date(startDate.value)),
+            durationEnd: dateToISO(new Date(endDate.value)),
+            rangeDate: rangeDate.value,
+            type: type.value,
+        })
+        .then(() => {
+            success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+            messageError($q, e);
+        })
+        .finally(async () => {
+            modal.value = false;
+            await fetchData();
+        });
 };
 
 /**
  * บันทึกแก้ไขข้อมูล
  */
 const editData = async () => {
-  showLoader();
-  await http
-    .put(config.API.candidateAdminCareer(id.value), {
-      position: position.value,
-      group: group.value,
-      pile: pile.value,
-      org: org.value,
-      durationStart: dateToISO(new Date(startDate.value)),
-      durationEnd: dateToISO(new Date(endDate.value)),
-      rangeDate: rangeDate.value,
-      type: type.value,
-    })
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      modal.value = false;
-      await fetchData();
-    });
+    showLoader();
+    await http
+        .put(config.API.candidateAdminCareer(id.value), {
+            position: position.value,
+            group: group.value,
+            pile: pile.value,
+            org: org.value,
+            durationStart: dateToISO(new Date(startDate.value)),
+            durationEnd: dateToISO(new Date(endDate.value)),
+            rangeDate: rangeDate.value,
+            type: type.value,
+        })
+        .then(() => {
+            success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+            messageError($q, e);
+        })
+        .finally(async () => {
+            modal.value = false;
+            await fetchData();
+        });
 };
 
 const checkClose = async () => {
-  if (editRow.value == true) {
-    modalConfirm(
-      $q,
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันการดำเนินต่อใช่หรือไม่",
-      clickClose
-    );
-  } else {
-    await clickClose();
-  }
-  await fetchData();
+    if (editRow.value == true) {
+        modalConfirm(
+            $q,
+            "ข้อมูลมีการแก้ไข",
+            "ยืนยันการดำเนินต่อใช่หรือไม่",
+            clickClose
+        );
+    } else {
+        await clickClose();
+    }
+    await fetchData();
 };
 
 /**
  * กดปิด dialog
  */
 const clickClose = async () => {
-  modal.value = false;
-  editRow.value = false;
-  next.value = false;
-  previous.value = false;
+    modal.value = false;
+    editRow.value = false;
+    next.value = false;
+    previous.value = false;
 };
 
 /**
@@ -773,57 +673,57 @@ const clickClose = async () => {
  * @param props ค่า props ใน row ที่เลือก
  */
 const selectData = (props: any) => {
-  modalEdit.value = true;
-  modal.value = true;
-  editRow.value = false;
-  rawItem.value = props.row;
-  rowIndex.value = props.rowIndex;
-  position.value = props.row.position;
-  group.value = props.row.group;
-  pile.value = props.row.pile;
-  org.value = props.row.org;
-  startDate.value = props.row.startDate;
-  endDate.value = props.row.endDate;
-  rangeDate.value = props.row.rangeDate;
-  type.value = props.row.type;
-  id.value = props.row.id;
-  next.value = false;
-  previous.value = false;
+    modalEdit.value = true;
+    modal.value = true;
+    editRow.value = false;
+    rawItem.value = props.row;
+    rowIndex.value = props.rowIndex;
+    position.value = props.row.position;
+    group.value = props.row.group;
+    pile.value = props.row.pile;
+    org.value = props.row.org;
+    startDate.value = props.row.startDate;
+    endDate.value = props.row.endDate;
+    rangeDate.value = props.row.rangeDate;
+    type.value = props.row.type;
+    id.value = props.row.id;
+    next.value = false;
+    previous.value = false;
 };
 
 /**
  * กดปุ่มเพิ่มบน table
  */
 const addRow = () => {
-  modalEdit.value = false;
-  modal.value = true;
-  position.value = null;
-  group.value = null;
-  pile.value = null;
-  org.value = null;
-  startDate.value = new Date();
-  endDate.value = new Date();
-  rangeDate.value = null;
-  type.value = null;
+    modalEdit.value = false;
+    modal.value = true;
+    position.value = null;
+    group.value = null;
+    pile.value = null;
+    org.value = null;
+    startDate.value = new Date();
+    endDate.value = new Date();
+    rangeDate.value = null;
+    type.value = null;
 };
 
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
 const clickEditRow = () => {
-  editRow.value = true;
+    editRow.value = true;
 };
 
 /**
  * validate input ใน dialog
  */
 const validateData = async () => {
-  checkValidate.value = true;
-  await myForm.value.validate().then((result: boolean) => {
-    if (result == false) {
-      checkValidate.value = false;
-    }
-  });
+    checkValidate.value = true;
+    await myForm.value.validate().then((result: boolean) => {
+        if (result == false) {
+            checkValidate.value = false;
+        }
+    });
 };
 
 /**
@@ -831,14 +731,14 @@ const validateData = async () => {
  * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
  */
 const getClass = (val: boolean) => {
-  return {
-    "full-width inputgreen cursor-pointer": val,
-    "full-width cursor-pointer": !val,
-  };
+    return {
+        "full-width inputgreen cursor-pointer": val,
+        "full-width cursor-pointer": !val,
+    };
 };
 </script>
 <style lang="scss">
 .modalfix {
-  position: fixed !important;
+    position: fixed !important;
 }
 </style>