ปรับ ฝึกอบรม/ดูงาน

src/modules/04_registry/components/Train.vue

@@ -97,99 +97,223 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-12">
-              <datepicker
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
-                menu-class-name="modalfix"
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
-                :readonly="!edit"
+                  <q-radio
-                v-model="startDate"
+                    v-model="isDate"
-                :locale="'th'"
+                    checked-icon="task_alt"
-                autoApply
+                    unchecked-icon="panorama_fish_eye"
-                :enableTimePicker="false"
+                    val="false"
-                @update:modelValue="clickEditRow"
+                    label="ปี"
-                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)"
-                    hide-bottom-space
-                    :outlined="edit"
                     dense
-                    lazy-rules
+                    :disable="!edit"
-                    :borderless="!edit"
+                  />
-                    :model-value="date2Thai(startDate)"
+                  <q-radio
-                    :rules="[
+                    v-model="isDate"
-                      (val) =>
+                    checked-icon="task_alt"
-                        !!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                    unchecked-icon="panorama_fish_eye"
-                    ]"
+                    val="true"
-                    :label="`${'วันเริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                    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-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @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)"
-                    hide-bottom-space
-                    :outlined="edit"
                     dense
-                    lazy-rules
+                    :disable="!edit"
-                    :borderless="!edit"
+                  />
-                    :model-value="date2Thai(endDate)"
+                </div>
-                    :rules="[
+                <div class="col-12 row q-col-gutter-sm">
-                      (val) =>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
-                        !!val || `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
+                    <datepicker
-                    ]"
+                      v-if="isDate === 'false'"
-                    :label="`${'วันสิ้นสุดการฝึกอบรม/ดูงาน'}`"
+                      menu-class-name="modalfix"
-                  >
+                      :readonly="!edit"
-                    <template v-slot:prepend>
+                      v-model="startDate"
-                      <q-icon
+                      :locale="'th'"
-                        name="event"
+                      autoApply
-                        class="cursor-pointer"
+                      year-picker
-                        :style="
+                      :enableTimePicker="false"
-                          edit
+                      @update:modelValue="clickEditRow"
-                            ? 'color: var(--q-primary)'
+                      week-start="0"
-                            : 'color: var(--q-grey)'
+                    >
-                        "
+                      <template #year="{ year }">{{ year + 543 }}</template>
-                      >
+                      <template #year-overlay-value="{ value }">{{
-                      </q-icon>
+                        parseInt(value + 543)
-                    </template>
+                      }}</template>
-                  </q-input>
+                      <template #trigger>
-                </template>
+                        <q-input
-              </datepicker>
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="startDate + 543"
+                          :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>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :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)"
+                          hide-bottom-space
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(startDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม/ดูงาน'}`,
+                          ]"
+                          :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-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @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="endDate + 543"
+                          :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>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @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)"
+                          hide-bottom-space
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(endDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวันสิ้นสุดการฝึกอบรม/ดูงาน'}`,
+                          ]"
+                          :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>
+              </q-card>
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6"></div>
+            <div class="col-xs-6 col-sm-6 col-md-6"></div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -208,13 +332,11 @@
                 <template #trigger>
                   <q-input
                     :class="getClass(edit)"
-                    hide-bottom-space
                     :outlined="edit"
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="yearly + 543"
+                    :model-value="yearly == 0 ? null : Number(yearly + 543)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
                     :label="`${'ปีงบประมาณ'}`"
                   >
                     <template v-slot:prepend>
@@ -229,6 +351,13 @@
                       >
                       </q-icon>
                     </template>
+                    <template v-if="yearly && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="yearly = 0"
+                        class="cursor-pointer"
+                      />
+                    </template>
                   </q-input>
                 </template>
               </datepicker>
@@ -316,7 +445,7 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="date2Thai(dateOrder)"
+                    :model-value="date2Thai(dateOrder as Date)"
                     :label="`${'คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`"
                   >
                     <!-- :rules="[
@@ -336,6 +465,13 @@
                       >
                       </q-icon>
                     </template>
+                    <template v-if="dateOrder && edit" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="dateOrder = null"
+                        class="cursor-pointer"
+                      />
+                    </template>
                   </q-input>
                 </template>
               </datepicker>
@@ -424,7 +560,7 @@ const props = defineProps({
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
-
+const isDate = ref<string | null>("true");
 const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
@@ -437,9 +573,11 @@ const place = ref<string>();
 const duration = ref<string>();
 const department = ref<string>();
 const numberOrder = ref<string>();
-const dateOrder = ref<Date>(new Date());
+const dateOrder = ref<Date | null>(new Date());
-const startDate = ref<Date>(new Date());
+const startDate = ref<number>(new Date().getFullYear());
-const endDate = ref<Date>(new Date());
+const startDate2 = ref<Date>(new Date());
+const endDate = ref<number>(new Date().getFullYear());
+const endDate2 = ref<Date>(new Date());
 const minDate = ref<Date>();
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -767,8 +905,11 @@ const fetchData = async () => {
             department: e.department,
             numberOrder: e.numberOrder,
             dateOrder: e.dateOrder,
-            startDate: new Date(e.startDate),
+            isDate: e.isDate == null ? null : e.isDate.toString(),
-            endDate: new Date(e.endDate),
+            startDate: new Date(e.startDate).getFullYear(),
+            endDate: new Date(e.endDate).getFullYear(),
+            startDate2: new Date(e.startDate),
+            endDate2: new Date(e.endDate),
             createdFullName: e.createdFullName,
             createdAt: new Date(e.createdAt),
           });
@@ -819,6 +960,8 @@ const getData = () => {
   dateOrder.value = row.dateOrder;
   startDate.value = row.startDate;
   endDate.value = row.endDate;
+  startDate2.value = row.startDate2;
+  endDate2.value = row.endDate2;
   id.value = row.id;
 };
 
@@ -886,8 +1029,14 @@ const saveData = async () => {
         department: department.value,
         numberOrder: numberOrder.value,
         dateOrder: dateOrder.value,
-        startDate: dateToISO(startDate.value),
+        startDate:
-        endDate: dateToISO(endDate.value),
+          isDate.value == "true"
+            ? dateToISO(startDate2.value)
+            : new Date(`${startDate.value}-01-01`),
+        endDate:
+          isDate.value == "true"
+            ? dateToISO(endDate2.value)
+            : new Date(`${endDate.value}-01-01`),
       })
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
@@ -918,8 +1067,15 @@ const editData = async () => {
       department: department.value,
       numberOrder: numberOrder.value,
       dateOrder: dateOrder.value,
-      startDate: dateToISO(startDate.value),
+      isDate: isDate.value == "true" ? true : false,
-      endDate: dateToISO(endDate.value),
+      startDate:
+        isDate.value == "true"
+          ? dateToISO(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? dateToISO(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1020,14 +1176,17 @@ const addData = () => {
   edit.value = true;
   name.value = "";
   topic.value = "";
-  yearly.value = new Date().getFullYear();
+  yearly.value = 0;
   place.value = "";
   duration.value = "";
   department.value = "";
   numberOrder.value = "";
-  dateOrder.value = new Date();
+  dateOrder.value = null;
-  startDate.value = new Date();
+  isDate.value = "true";
-  endDate.value = new Date();
+  startDate.value = new Date().getFullYear();
+  endDate.value = new Date().getFullYear();
+  startDate2.value = new Date();
+  endDate2.value = new Date();
 };
 
 /**
@@ -1083,8 +1242,11 @@ const clickHistory = async (row: RequestItemsObject) => {
           department: e.department,
           numberOrder: e.numberOrder,
           dateOrder: e.dateOrder,
-          startDate: new Date(e.startDate),
+          isDate: e.isDate,
-          endDate: new Date(e.endDate),
+          startDate: new Date(e.startDate).getFullYear(),
+          endDate: new Date(e.endDate).getFullYear(),
+          startDate2: new Date(e.startDate2),
+          endDate2: new Date(e.endDate2),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });

src/modules/04_registry/interface/request/Train.ts

@@ -10,12 +10,15 @@ interface RequestItemsObject {
   topic: string;
   yearly: number;
   place: string;
+  isDate: string | null;
   duration: string;
   department: string;
   numberOrder: string;
   dateOrder: Date;
-  startDate: Date;
+  startDate: number;
-  endDate: Date;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
   createdFullName: string;
   createdAt: Date;
 }

src/modules/04_registry/interface/response/Train.ts

@@ -9,8 +9,11 @@ interface ResponseObject {
   department: string;
   numberOrder: string;
   dateOrder: Date;
-  startDate: Date;
+  isDate: string | null;
-  endDate: Date;
+  startDate: number;
+  endDate: number;
+  startDate2: Date;
+  endDate2: Date;
   createdFullName: string;
   createdAt: Date;
 }