From cb1a5251a169e7d4741c2322be307f70ff4213a0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 9 Sep 2024 09:58:06 +0700
Subject: [PATCH] Refactoring code module 01_metadata =>  04_calendar

---
 .../components/calendar/Calendar.vue          | 796 +++++++++---------
 .../components/calendar/CalendarList.vue      | 193 ++---
 .../components/calendar/calendarMain.vue      | 471 ++++++-----
 .../01_metadata/interface/index/Calendar.ts   |   6 +
 src/modules/01_metadata/views/04_calendar.vue |  47 +-
 5 files changed, 742 insertions(+), 771 deletions(-)

diff --git a/src/modules/01_metadata/components/calendar/Calendar.vue b/src/modules/01_metadata/components/calendar/Calendar.vue
index d5da10d4..e9562e68 100644
--- a/src/modules/01_metadata/components/calendar/Calendar.vue
+++ b/src/modules/01_metadata/components/calendar/Calendar.vue
@@ -1,203 +1,3 @@
-<!-- tab ปฏิทิน หน้าปฏิทินวันหยุด -->
-<template>
-  <div class="q-mt-md">
-    <div class="row q-gutter-sm q-pb-sm main-content">
-      <div class="demo-app-main">
-        <!-- แสดงปฏิทิน -->
-        <FullCalendar
-          ref="fullCalendar"
-          class="demo-app-calendar"
-          :options="calendarOptions"
-        >
-          <template v-slot:eventContent="arg">
-            <b>{{ arg.timeText }}</b>
-            <i>{{ arg.event.title }}</i>
-            <q-tooltip style="font-size: 15px">{{ arg.event.title }}</q-tooltip>
-          </template>
-        </FullCalendar>
-      </div>
-    </div>
-    <div class="row q-col-gutter-md">
-      <div class="items-center row">
-        <q-icon color="blue" name="mdi-circle" class="q-mr-sm" />
-        วันทำงาน 5 วัน
-      </div>
-      <div class="items-center row">
-        <q-icon color="orange" name="mdi-circle" class="q-mr-sm" />
-        วันทำงาน 6 วัน
-      </div>
-    </div>
-  </div>
-
-  <!-- modal เพิ่มวันหยุด -->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="min-width: 550px">
-      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
-        <q-card-section class="row items-center q-pa-sm">
-          <div class="text-bold" v-if="showEdit">แก้ไขวันหยุด</div>
-          <div class="text-bold" v-else>เพิ่มวันหยุด</div>
-          <q-space />
-          <q-btn
-            icon="close"
-            unelevated
-            round
-            dense
-            v-close-popup
-            style="color: #ff8080; background-color: #ffdede"
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-section class="q-p-md row q-gutter-y-md">
-          <div class="row col-12">
-            <div class="col-12" v-if="!showEdit">
-              {{ dateThaiRange(dateRange) }}
-            </div>
-            <datepicker
-              v-else
-              :readonly="!edit"
-              v-model="dateRange"
-              :locale="'th'"
-              autoApply
-              range
-              :enableTimePicker="false"
-              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
-                  label="วันที่"
-                  :borderless="!edit"
-                  :model-value="dateThaiRange(dateRange)"
-                >
-                  <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-input
-            :class="getClass(edit)"
-            hide-bottom-space
-            :outlined="edit"
-            label="คำอธิบาย"
-            dense
-            lazy-rules
-            :readonly="!edit"
-            :borderless="!edit"
-            v-model="name"
-            autogrow
-            :rules="[(val) => (val && val.length > 0) || '']"
-          />
-          <q-option-group
-            v-if="showEdit == false"
-            v-model="category"
-            :options="categoryOptions"
-            color="primary"
-            inline
-          />
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right" class="text-primary">
-          <q-btn
-            v-if="showEdit && edit"
-            flat
-            color="red"
-            @click="cancelClick()"
-            label="ยกเลิกแก้ไข"
-          >
-            <!-- icon="mdi-undo"
-            <q-tooltip>ยกเลิก</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="showEdit && edit"
-            unelevated
-            color="red"
-            @click="deleteClick()"
-            label="ลบวันหยุด"
-          >
-            <!-- icon="mdi-delete"
-            <q-tooltip>ลบ</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="edit"
-            unelevated
-            color="public"
-            label="บันทึก"
-            type="submit"
-          >
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-          <q-btn
-            v-if="!edit"
-            outline
-            color="edit"
-            @click="editClick"
-            label="แก้ไขข้อมูล"
-          >
-            <!-- icon="mdi-pencil-outline"
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-
-  <!-- modal ลบวันหยุด -->
-  <q-dialog v-model="modalDelete" persistent>
-    <q-card style="min-width: 550px">
-      <q-card-section class="row items-center q-pb-xs">
-        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="row items-center">
-        <div class="q-pr-md">
-          <q-avatar
-            icon="mdi-trash-can-outline"
-            font-size="25px"
-            size="lg"
-            color="red-1"
-            text-color="red"
-          />
-        </div>
-        <div class="col text-dark">
-          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="ยกเลิก" flat color="grey-8" @click="cancelClick" />
-        <q-btn label="ตกลง" color="primary" @click="deleteData" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -207,6 +7,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -214,6 +15,7 @@ import type {
   RequestItemsObject,
   DataDateRowObject,
   DataDateAddObject,
+  Optionscategory,
 } from "@/modules/01_metadata/interface/index/Calendar";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -255,10 +57,9 @@ const isSpecial = ref<boolean>(true); //เช็ควันหยุด
 const id = ref<string>(""); //id ที่แก้ไขวันหยุด
 const fullCalendar = ref<any>(); //ref calendar
 const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
 
 const category = ref<string>("all");
-const categoryOptions = ref<any>([
+const categoryOptions = ref<Optionscategory[]>([
   {
     label: "ทั้งหมด",
     value: "all",
@@ -275,111 +76,6 @@ const categoryOptions = ref<any>([
 const dataHistory = ref<RequestItemsObject[]>([]);
 const dataNormalRaw = ref<RequestItemsObject[]>([]);
 const dataSixDaysRaw = ref<RequestItemsObject[]>([]);
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  hideLoader();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(props.dateYear, props.dateMonth);
-  calen.gotoDate(date);
-  await fetchData();
-});
-
-/**
- * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(props.dateYear, props.dateMonth);
-  calen.gotoDate(date);
-  await fetchData();
-});
-
-/**
- * เลือกค่าปฏิทินในช่องว่าง
- * @param selectInfo ค่าที่เลือกในฏิทิน
- */
-const handleDateSelect = async (selectInfo: any) => {
-  edit.value = true;
-  category.value = "all";
-  selectInfo.start;
-  const checkNormalDate = dataNormalRaw.value.filter(
-    (r: RequestItemsObject) =>
-      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
-  );
-  const checkSixDaysDate = dataSixDaysRaw.value.filter(
-    (r: RequestItemsObject) =>
-      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
-  );
-  if (checkNormalDate.length == 0 || checkSixDaysDate.length == 0) {
-    name.value = "";
-    isSpecial.value = true;
-    dateRange.value = [
-      selectInfo.startStr,
-      new Date(
-        new Date(selectInfo.endStr).setDate(
-          new Date(selectInfo.endStr).getDate() - 1
-        )
-      ),
-    ];
-    showEdit.value = false;
-    modalAdd.value = true;
-  }
-};
-
-/**
- * เลือกค่า event ในปฏิทิน
- * @param selectInfo ค่าที่เลือกในฏิทิน
- */
-const handleEventClick = async (selectInfo: any) => {
-  modalAdd.value = true;
-  edit.value = false;
-  showEdit.value = true;
-  name.value = selectInfo.event.title;
-  type.value = selectInfo.event.id;
-  isSpecial.value = true;
-  id.value = selectInfo.event.groupId;
-  dataHistory.value = selectInfo.event.extendedProps.dataRangeRow;
-  dateRange.value = [
-    selectInfo.event.startStr,
-    selectInfo.event.endStr == ""
-      ? selectInfo.event.startStr
-      : dateToISO(
-          new Date(
-            new Date(selectInfo.event.endStr).setDate(
-              new Date(selectInfo.event.endStr).getDate() - 1
-            )
-          )
-        ),
-  ];
-};
-
-/**
- * กดปุ่มแก้ไขให้แสดง modal แก้ไข
- */
-const editClick = async () => {
-  showEdit.value = true;
-  edit.value = true;
-};
-
-/**
- * กดปุ่มลบให้แสดง modal ลบ
- */
-const deleteClick = async () => {
-  modalDelete.value = true;
-};
-
-/**
- * ปุ่มยกเลิกให้ย้อนกลับไป modal เลือกแก้ไขหรือลบ
- */
-const cancelClick = async () => {
-  modalDelete.value = false;
-  modalAdd.value = true;
-  edit.value = false;
-};
-
 /**
  * option calendar
  */
@@ -404,21 +100,104 @@ const calendarOptions = ref<any>({
   firstDay: 0,
 });
 
+/**
+ * เลือกค่าปฏิทินในช่องว่าง
+ * @param selectInfo ค่าที่เลือกในฏิทิน
+ */
+async function handleDateSelect(selectInfo: any) {
+  edit.value = true;
+  category.value = "all";
+  selectInfo.start;
+  const checkNormalDate = dataNormalRaw.value.filter(
+    (r: RequestItemsObject) =>
+      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
+  );
+  const checkSixDaysDate = dataSixDaysRaw.value.filter(
+    (r: RequestItemsObject) =>
+      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
+  );
+  if (checkNormalDate.length == 0 || checkSixDaysDate.length == 0) {
+    name.value = "";
+    isSpecial.value = true;
+    dateRange.value = [
+      selectInfo.startStr,
+      new Date(
+        new Date(selectInfo.endStr).setDate(
+          new Date(selectInfo.endStr).getDate() - 1
+        )
+      ),
+    ];
+    showEdit.value = false;
+    modalAdd.value = true;
+  }
+}
+
+/**
+ * เลือกค่า event ในปฏิทิน
+ * @param selectInfo ค่าที่เลือกในฏิทิน
+ */
+async function handleEventClick(selectInfo: any) {
+  modalAdd.value = true;
+  edit.value = false;
+  showEdit.value = true;
+  name.value = selectInfo.event.title;
+  type.value = selectInfo.event.id;
+  isSpecial.value = true;
+  id.value = selectInfo.event.groupId;
+  dataHistory.value = selectInfo.event.extendedProps.dataRangeRow;
+  dateRange.value = [
+    selectInfo.event.startStr,
+    selectInfo.event.endStr == ""
+      ? selectInfo.event.startStr
+      : dateToISO(
+          new Date(
+            new Date(selectInfo.event.endStr).setDate(
+              new Date(selectInfo.event.endStr).getDate() - 1
+            )
+          )
+        ),
+  ];
+}
+
+/**
+ * กดปุ่มแก้ไขให้แสดง modal แก้ไข
+ */
+async function editClick() {
+  showEdit.value = true;
+  edit.value = true;
+}
+
+/**
+ * กดปุ่มลบให้แสดง modal ลบ
+ */
+async function deleteClick() {
+  modalDelete.value = true;
+}
+
+/**
+ * ปุ่มยกเลิกให้ย้อนกลับไป modal เลือกแก้ไขหรือลบ
+ */
+async function cancelClick() {
+  modalDelete.value = false;
+  modalAdd.value = true;
+  edit.value = false;
+}
+
 /**
  * ปุ่มบันทึกข้อมูลวันหยุด
  */
-const onSubmit = async () => {
+async function onSubmit() {
   if (showEdit.value === true) {
     await editData();
   } else {
     await addDate();
   }
-};
+}
 
 /**
  * fetch วันหยุดในปฏิทิน
  */
-const fetchData = async () => {
+async function fetchData() {
   calendarOptions.value.events = [];
   showLoader();
   await http
@@ -539,104 +318,92 @@ const fetchData = async () => {
     .finally(async () => {
       await props.fetchDataSummaryCalendar();
     });
-};
+}
 
 /**
  * บันทึกแก้ไขวันหยุด
  */
-const editData = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataEdit = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateRange.value[0]);
-      do {
-        i = i + 1;
-        dataEdit.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
+async function editData() {
+  const dataEdit = ref<DataDateAddObject[]>([]);
+  let i = 0;
+  const dateStart = ref<Date>(dateRange.value[0]);
+  do {
+    i = i + 1;
+    dataEdit.value.push({
+      year: new Date(dateStart.value).getFullYear(),
+      holidayDate: dateToISO(new Date(dateStart.value)),
+      name: name.value,
+      isSpecial: true,
+    });
+    dateStart.value = new Date(
+      new Date(dateStart.value).setDate(new Date(dateStart.value).getDate() + 1)
+    );
+  } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
 
-      const _dataHistory = ref<RequestItemsObject[]>([]);
-      dataHistory.value.map((e: RequestItemsObject, index: number) => {
-        _dataHistory.value.push({
-          ...e,
-          holidayDate: dateToISO(new Date(e.holidayDate)),
-        });
-      });
-
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryEdit(type.value), {
-          history: _dataHistory.value,
-          updated: dataEdit.value,
-        })
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "แก้ไขข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    }
+  const _dataHistory = ref<RequestItemsObject[]>([]);
+  dataHistory.value.map((e: RequestItemsObject, index: number) => {
+    _dataHistory.value.push({
+      ...e,
+      holidayDate: dateToISO(new Date(e.holidayDate)),
+    });
   });
-};
+
+  showLoader();
+  await http
+    .post(config.API.listHolidayHistoryEdit(type.value), {
+      history: _dataHistory.value,
+      updated: dataEdit.value,
+    })
+    .then(() => {
+      modalAdd.value = false;
+      success($q, "แก้ไขข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+}
 
 /**
  * บันทึกเพิ่มวันหยุด
  */
-const addDate = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataAdd = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateRange.value[0]);
-      do {
-        i = i + 1;
-        dataAdd.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "เพิ่มข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    }
-  });
-};
+async function addDate() {
+  const dataAdd = ref<DataDateAddObject[]>([]);
+  let i = 0;
+  const dateStart = ref<Date>(dateRange.value[0]);
+  do {
+    i = i + 1;
+    dataAdd.value.push({
+      year: new Date(dateStart.value).getFullYear(),
+      holidayDate: dateToISO(new Date(dateStart.value)),
+      name: name.value,
+      isSpecial: true,
+    });
+    dateStart.value = new Date(
+      new Date(dateStart.value).setDate(new Date(dateStart.value).getDate() + 1)
+    );
+  } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
+  showLoader();
+  await http
+    .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
+    .then(() => {
+      modalAdd.value = false;
+      success($q, "เพิ่มข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+}
 
 /**
  * ลบข้อมูลวันหยุด
  */
-const deleteData = async () => {
+async function deleteData() {
   modalDelete.value = false;
   const dataDelete = ref<DataDateAddObject[]>([]);
   let i = 0;
@@ -656,7 +423,7 @@ const deleteData = async () => {
   showLoader();
   await http
     .post(config.API.listHolidayHistoryDelete(type.value), dataDelete.value)
-    .then((res) => {
+    .then(() => {
       success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -666,29 +433,248 @@ const deleteData = async () => {
       modalAdd.value = false;
       await fetchData();
     });
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
     return `${date2Thai(val[0])}`;
   } else {
     return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
   }
-};
+}
 
-const getClass = (val: boolean) => {
+function getClass(val: boolean) {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
-};
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(props.dateYear, props.dateMonth);
+  calen.gotoDate(date);
+  await fetchData();
+});
+
+/**
+ * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(props.dateYear, props.dateMonth);
+  calen.gotoDate(date);
+  await fetchData();
+});
 </script>
 
+<template>
+  <div class="q-mt-md">
+    <div class="row q-gutter-sm q-pb-sm main-content">
+      <div class="demo-app-main">
+        <!-- แสดงปฏิทิน -->
+        <FullCalendar
+          ref="fullCalendar"
+          class="demo-app-calendar"
+          :options="calendarOptions"
+        >
+          <template v-slot:eventContent="arg">
+            <b>{{ arg.timeText }}</b>
+            <i>{{ arg.event.title }}</i>
+            <q-tooltip style="font-size: 15px">{{ arg.event.title }}</q-tooltip>
+          </template>
+        </FullCalendar>
+      </div>
+    </div>
+    <div class="row q-col-gutter-md">
+      <div class="items-center row">
+        <q-icon color="blue" name="mdi-circle" class="q-mr-sm" />
+        วันทำงาน 5 วัน
+      </div>
+      <div class="items-center row">
+        <q-icon color="orange" name="mdi-circle" class="q-mr-sm" />
+        วันทำงาน 6 วัน
+      </div>
+    </div>
+  </div>
+
+  <!-- modal เพิ่มวันหยุด -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 550px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit()">
+        <q-card-section class="row items-center q-pa-sm">
+          <div class="text-bold" v-if="showEdit">แก้ไขวันหยุด</div>
+          <div class="text-bold" v-else>เพิ่มวันหยุด</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-md row q-gutter-y-md">
+          <div class="row col-12">
+            <div class="col-12" v-if="!showEdit">
+              {{ dateThaiRange(dateRange) }}
+            </div>
+            <datepicker
+              v-else
+              :readonly="!edit"
+              v-model="dateRange"
+              :locale="'th'"
+              autoApply
+              range
+              :enableTimePicker="false"
+              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
+                  label="วันที่"
+                  :borderless="!edit"
+                  :model-value="dateThaiRange(dateRange)"
+                >
+                  <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-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            label="คำอธิบาย"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="name"
+            autogrow
+            :rules="[(val:string) => (val && val.length > 0) || '']"
+          />
+          <q-option-group
+            v-if="showEdit == false"
+            v-model="category"
+            :options="categoryOptions"
+            color="primary"
+            inline
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn
+            v-if="showEdit && edit"
+            flat
+            color="red"
+            @click="cancelClick()"
+            label="ยกเลิกแก้ไข"
+          >
+            <!-- icon="mdi-undo"
+            <q-tooltip>ยกเลิก</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="showEdit && edit"
+            unelevated
+            color="red"
+            @click="deleteClick()"
+            label="ลบวันหยุด"
+          >
+            <!-- icon="mdi-delete"
+            <q-tooltip>ลบ</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="edit"
+            unelevated
+            color="public"
+            label="บันทึก"
+            type="submit"
+          >
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="!edit"
+            outline
+            color="edit"
+            @click="editClick"
+            label="แก้ไขข้อมูล"
+          >
+            <!-- icon="mdi-pencil-outline"
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal ลบวันหยุด -->
+  <q-dialog v-model="modalDelete" persistent>
+    <q-card style="min-width: 550px">
+      <q-card-section class="row items-center q-pb-xs">
+        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="row items-center">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-trash-can-outline"
+            font-size="25px"
+            size="lg"
+            color="red-1"
+            text-color="red"
+          />
+        </div>
+        <div class="col text-dark">
+          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" @click="cancelClick" />
+        <q-btn label="ตกลง" color="primary" @click="deleteData" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
 <style scope lang="scss">
 .main-content {
   height: 70vh;
@@ -719,16 +705,6 @@ const getClass = (val: boolean) => {
   background-color: rgb(255, 255, 255) !important;
 }
 
-// .fc-day-sun {
-//   background-color: rgba(207, 205, 205, 0.177) !important;
-//   width: 80px;
-// }
-
-// .fc-day-sat {
-//   background-color: rgba(207, 205, 205, 0.177) !important;
-//   width: 80px;
-// }
-
 .fc-day-today .fc-daygrid-day-number {
   display: flex;
   justify-content: center;
diff --git a/src/modules/01_metadata/components/calendar/CalendarList.vue b/src/modules/01_metadata/components/calendar/CalendarList.vue
index 4f9ee8ae..7ef7b9a7 100644
--- a/src/modules/01_metadata/components/calendar/CalendarList.vue
+++ b/src/modules/01_metadata/components/calendar/CalendarList.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type {
   RequestItemsObject,
@@ -12,7 +14,16 @@ import type {
   TabsObject,
 } from "@/modules/01_metadata/interface/index/Calendar";
 
-import { useCounterMixin } from "@/stores/mixin";
+const $q = useQuasar(); //ใช้ noti quasar
+const {
+  success,
+  dateToISO,
+  dateMonth2Thai,
+  weekThai,
+  messageError,
+  showLoader,
+  dialogRemove,
+} = useCounterMixin();
 
 const props = defineProps({
   dateYear: {
@@ -32,25 +43,12 @@ const props = defineProps({
   },
 });
 
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  dateMonth2Thai,
-  weekThai,
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogRemove,
-} = mixin;
-const $q = useQuasar(); //ใช้ noti quasar
 const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
 const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
 const name = ref<string>(""); //ชื่อวันหยุด
 const isSpecial = ref<boolean>(true); //เช็ควันหยุด
 const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
 const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
-const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
 
 const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
 const tabs = ref<TabsObject[]>([
@@ -59,7 +57,7 @@ const tabs = ref<TabsObject[]>([
 ]); //tab ประเภทวันหยุดทั้งหมด
 
 //columns รายการวันหยุด
-const columns = ref<any>([
+const columns = ref<QTableProps["columns"]>([
   {
     name: "week",
     align: "left",
@@ -86,45 +84,31 @@ const columns = ref<any>([
   },
 ]);
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fetchData();
-});
-
-/**
- * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
- */
-watch(props, async (count, prevCount) => {
-  await fetchData();
-});
-
 /**
  * กดปุ่มแก้ไขวันหยุด
  * @param val data วันหยุดทั้ง row
  */
-const editCalendar = async (val: DataDateListsObject) => {
+async function editCalendar(val: DataDateListsObject) {
   rowData.value = val;
   dateAdd.value = [val.dateRange[0], val.dateRange[1]];
   name.value = val.detail;
   isSpecial.value = true;
   modalAdd.value = true;
-};
+}
 
 /**
  * กดปุ่มลบวันหยุด
  * @param val data วันหยุดทั้ง row
  */
-const deleteClick = async (val: DataDateListsObject) => {
+async function deleteClick(val: DataDateListsObject) {
   rowData.value = val;
   dialogRemove($q, async () => deleteConfirm());
-};
+}
 
 /**
  * fetch วันหยุดในรายการ
  */
-const fetchData = async () => {
+async function fetchData() {
   calendarData.value = [];
   showLoader();
   await http
@@ -186,15 +170,15 @@ const fetchData = async () => {
     .finally(async () => {
       await props.fetchDataSummaryCalendar();
     });
-};
+}
 
 /**
  * ลบข้อมูลวันหยุด
  */
-const deleteConfirm = async () => {
+async function deleteConfirm() {
   const dataDelete = ref<DataDateAddObject[]>([]);
   if (rowData.value != null) {
-    await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
+    rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
       dataDelete.value.push({
         year: new Date(e.holidayDate).getFullYear(),
         holidayDate: dateToISO(e.holidayDate),
@@ -211,7 +195,7 @@ const deleteConfirm = async () => {
       config.API.listHolidayHistoryDelete(currentTab.value),
       dataDelete.value
     )
-    .then((res) => {
+    .then(() => {
       success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((e) => {
@@ -220,79 +204,70 @@ const deleteConfirm = async () => {
     .finally(async () => {
       await fetchData();
     });
-};
+}
 
 /**
  * บันทึกแก้ไขวันหยุด
  */
-const editData = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataEdit = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateAdd.value[0]);
-      do {
-        i = i + 1;
-        dataEdit.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
-      const _dataHistory = ref<DataDateAddObject[]>([]);
-      if (rowData.value != null) {
-        rowData.value.dataRangeRow.map(
-          (e: DataDateRowObject, index: number) => {
-            _dataHistory.value.push({
-              year: new Date(e.holidayDate).getFullYear(),
-              holidayDate: dateToISO(e.holidayDate),
-              name: e.name,
-              isSpecial: true,
-            });
-          }
-        );
-      }
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryEdit(currentTab.value), {
-          history: _dataHistory.value,
-          updated: dataEdit.value,
-        })
-        .then((res) => {
-          modalAdd.value = false;
-          success($q, "แก้ไขข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await fetchData();
-        });
-    } else {
-    }
-  });
-};
+async function onSubmit() {
+  const dataEdit = ref<DataDateAddObject[]>([]);
+  let i = 0;
+  const dateStart = ref<Date>(dateAdd.value[0]);
+  do {
+    i = i + 1;
+    dataEdit.value.push({
+      year: new Date(dateStart.value).getFullYear(),
+      holidayDate: dateToISO(new Date(dateStart.value)),
+      name: name.value,
+      isSpecial: true,
+    });
+    dateStart.value = new Date(
+      new Date(dateStart.value).setDate(new Date(dateStart.value).getDate() + 1)
+    );
+  } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+  const _dataHistory = ref<DataDateAddObject[]>([]);
+  if (rowData.value != null) {
+    rowData.value.dataRangeRow.map((e: DataDateRowObject, index: number) => {
+      _dataHistory.value.push({
+        year: new Date(e.holidayDate).getFullYear(),
+        holidayDate: dateToISO(e.holidayDate),
+        name: e.name,
+        isSpecial: true,
+      });
+    });
+  }
+  showLoader();
+  await http
+    .post(config.API.listHolidayHistoryEdit(currentTab.value), {
+      history: _dataHistory.value,
+      updated: dataEdit.value,
+    })
+    .then(() => {
+      modalAdd.value = false;
+      success($q, "แก้ไขข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+}
 
 /**
  * เปลี่ยน tab ดูวันหยุดตามประเภท
  * @param tab tab ประเภทวันหยุดที่เลือก
  */
-const changeTab = async (tab: string) => {
+async function changeTab(tab: string) {
   currentTab.value = tab;
   await fetchData();
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
  * @param val ช่วงวันที่
  */
-const dateThaiRange = (val: [Date, Date]) => {
+function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
     return "";
   } else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
@@ -300,13 +275,13 @@ const dateThaiRange = (val: [Date, Date]) => {
   } else {
     return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
   }
-};
+}
 
 /**
  * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
  * @param val ช่วงวันที่
  */
-const dayThaiRange = (val: [Date, Date]) => {
+function dayThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (dateToISO(val[0]) == dateToISO(val[1])) {
     return `${weekThai(new Date(val[0]).getDay())}`;
@@ -315,7 +290,21 @@ const dayThaiRange = (val: [Date, Date]) => {
       new Date(val[1]).getDay()
     )}`;
   }
-};
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fetchData();
+});
+
+/**
+ * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+  await fetchData();
+});
 </script>
 
 <!-- tab รายการ หน้าปฏิทินวันหยุด -->
@@ -473,7 +462,7 @@ const dayThaiRange = (val: [Date, Date]) => {
   <!-- modal เพิ่มวันหยุด -->
   <q-dialog v-model="modalAdd" persistent>
     <q-card style="min-width: 550px">
-      <q-form ref="formDate" @submit.prevent.stop="editData">
+      <q-form greedy @submit.prevent @validation-success="onSubmit()">
         <q-card-section class="row items-center q-pb-xs">
           <div class="text-bold">แก้ไขวันหยุด</div>
           <q-space />
@@ -537,7 +526,7 @@ const dayThaiRange = (val: [Date, Date]) => {
                 class="full-width datepicker q-pb-none"
                 v-model="name"
                 type="textarea"
-                :rules="[(val) => (val && val.length > 0) || '']"
+                :rules="[(val:string) => (val && val.length > 0) || '']"
               />
             </div>
           </div>
@@ -545,8 +534,6 @@ const dayThaiRange = (val: [Date, Date]) => {
         <q-separator />
         <q-card-actions align="right" class="text-primary">
           <q-btn unelevated label="บันทึก" color="public" type="submit">
-            <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/modules/01_metadata/components/calendar/calendarMain.vue b/src/modules/01_metadata/components/calendar/calendarMain.vue
index c545331f..b144fc5c 100644
--- a/src/modules/01_metadata/components/calendar/calendarMain.vue
+++ b/src/modules/01_metadata/components/calendar/calendarMain.vue
@@ -1,4 +1,238 @@
-<!-- page:จัดการข้อมูลหลัก tab วันหยุด -->
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  DataDateMonthObject,
+  DataDateAddObject,
+} from "@/modules/01_metadata/interface/index/Calendar";
+
+import subCalendarComponent from "@/modules/01_metadata/components/calendar/Calendar.vue"; // ปฏิทินวันหยุด
+import subCalendarListComponent from "@/modules/01_metadata/components/calendar/CalendarList.vue"; // รายการวันหยุด
+
+const $q = useQuasar(); //ใช้ noti quasar
+//เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  monthYear2Thai,
+  date2Thai,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const props = defineProps({
+  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+const emit = defineEmits(["update:dateYear"]);
+
+const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
+const modalAdd = ref<boolean>(false); //แสดง modal add calendar
+const modalCopy = ref<boolean>(false); //แสดง modal copy calendar
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+}); //ค่าเดือนที่เลือก tab ปฏิทิน
+const dateYear = ref<number>(new Date().getFullYear()); //ค่าปีที่เลือก tab รายการ
+const dateYearStart = ref<number>(new Date().getFullYear()); //ค่าปีที่ copy วันหยุด
+const dateYearEnd = ref<number>(new Date().getFullYear()); //ค่าปีที่จะลงวันหยุด copy
+const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const formDate = ref<any>(); //ref เช็ค validate เพิ่มวันหยุด
+const name = ref<string>(""); //ชื่อวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุดพิเศษ
+
+const category = ref<string>("all");
+const categoryOptions = ref<any>([
+  {
+    label: "ทั้งหมด",
+    value: "all",
+  },
+  {
+    label: "ทำงาน 5 วัน",
+    value: "normal",
+  },
+  {
+    label: "ทำงาน 6 วัน",
+    value: "6days",
+  },
+]);
+const minDate = ref<Date>();
+const refreshData = ref<boolean>(false); //ส่งค่าให้ component refresh data วันหยุด
+
+/**
+ * ค่าเดือนปีที่ถูกเลือกใน component ปฏิทินจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกเดือนปี tab ปฏิทิน
+ */
+const updateMonth = async (e: DataDateMonthObject) => {
+  if (e != null) {
+    dateYear.value = e.year;
+    emit("update:dateYear", e.year);
+    await props.fetchDataSummaryCalendar();
+  }
+};
+
+/**
+ * ค่าปีที่ถูกเลือกใน component รายการจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกปี tab รายการ
+ */
+const updateYear = async (e: number) => {
+  dateMonth.value = { month: 0, year: e };
+  emit("update:dateYear", dateYear.value);
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันปุ่มเพิ่มวันหยุดแบบเลือกวันได้
+ */
+const addCalendar = () => {
+  dateAdd.value = [new Date(), new Date()];
+  name.value = "";
+  category.value = "all";
+  isSpecial.value = true;
+  modalAdd.value = true;
+};
+
+/**
+ * ฟังก์ชัน copy วันหยุดจากปีนิงไปอีกปี
+ */
+const copyCalendar = () => {
+  modalCopy.value = true;
+  dateYearStart.value = new Date().getFullYear();
+  dateYearEnd.value = new Date().getFullYear() + 1;
+};
+
+/**
+ * ฟังก์ชันปุ่มบันทึกเพิ่มวันหยุด
+ */
+const onSubmit = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataAdd = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateAdd.value[0]);
+      do {
+        i = i + 1;
+        dataAdd.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
+        .then(() => {
+          modalAdd.value = false;
+          success($q, "เพิ่มวันหยุดสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          refreshData.value = !refreshData.value;
+          hideLoader();
+        });
+    }
+  });
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันคัดลอกวันหยุด
+ */
+const onSubmitCopy = async () => {
+  if (dateYearStart.value >= dateYearEnd.value) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถคัดลอกวันหยุดได้",
+      "ปีที่เริ่มต้นคัดลอกต้องมากกว่าปีที่จะลงวันคัดลอก",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  showLoader();
+  await http
+    .post(config.API.listHolidayCopy, {
+      fromYear: dateYearStart.value,
+      toYear: dateYearEnd.value,
+    })
+    .then(() => {
+      modalCopy.value = false;
+      success($q, "คัดลอกวันหยุดสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      refreshData.value = !refreshData.value;
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * แปลง ปีและเดือนเป็นภาษาไทย
+ * @param val datepicker แบบเลือกปีและเดือน
+ */
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date] | []) => {
+  if (val.length === 0) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+
+/**
+ * มีการเลือก datepicker ให้แปลงค่าเป็น text ที่แสดง
+ */
+watch(dateYearStart, () => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+</script>
+
 <template>
   <div>
     <div class="row col-12 q-col-gutter-sm">
@@ -147,6 +381,7 @@
       />
     </div>
   </div>
+
   <!-- modal เพิ่มวันหยุด -->
   <q-dialog v-model="modalAdd" persistent>
     <q-card style="min-width: 550px">
@@ -205,7 +440,7 @@
             class="full-width datepicker q-pb-none"
             v-model="name"
             type="textarea"
-            :rules="[(val) => (val && val.length > 0) || '']"
+            :rules="[(val:string) => (val && val.length > 0) || '']"
           />
           <q-option-group
             dense
@@ -320,238 +555,6 @@
   </q-dialog>
 </template>
 
-<script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-import type {
-  DataDateMonthObject,
-  DataDateAddObject,
-} from "@/modules/01_metadata/interface/index/Calendar";
-
-import subCalendarComponent from "@/modules/01_metadata/components/calendar/Calendar.vue";
-import subCalendarListComponent from "@/modules/01_metadata/components/calendar/CalendarList.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const props = defineProps({
-  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
-  fetchDataSummaryCalendar: {
-    //ฟังก์ชันอัพเดทสรุปวันหยุด
-    type: Function,
-    default: () => console.log("not function"),
-  },
-});
-
-const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const {
-  success,
-  dateToISO,
-  monthYear2Thai,
-  date2Thai,
-  messageError,
-  dialogMessage,
-  showLoader,
-  hideLoader,
-} = mixin;
-
-const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
-const modalAdd = ref<boolean>(false); //แสดง modal add calendar
-const modalCopy = ref<boolean>(false); //แสดง modal copy calendar
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-}); //ค่าเดือนที่เลือก tab ปฏิทิน
-const dateYear = ref<number>(new Date().getFullYear()); //ค่าปีที่เลือก tab รายการ
-const dateYearStart = ref<number>(new Date().getFullYear()); //ค่าปีที่ copy วันหยุด
-const dateYearEnd = ref<number>(new Date().getFullYear()); //ค่าปีที่จะลงวันหยุด copy
-const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
-const formDate = ref<any>(); //ref เช็ค validate เพิ่มวันหยุด
-const name = ref<string>(""); //ชื่อวันหยุด
-const isSpecial = ref<boolean>(true); //เช็ควันหยุดพิเศษ
-
-const category = ref<string>("all");
-const categoryOptions = ref<any>([
-  {
-    label: "ทั้งหมด",
-    value: "all",
-  },
-  {
-    label: "ทำงาน 5 วัน",
-    value: "normal",
-  },
-  {
-    label: "ทำงาน 6 วัน",
-    value: "6days",
-  },
-]);
-const minDate = ref<Date>();
-const refreshData = ref<boolean>(false); //ส่งค่าให้ component refresh data วันหยุด
-const emit = defineEmits(["update:dateYear"]);
-
-/**
- * มีการเลือก datepicker ให้แปลงค่าเป็น text ที่แสดง
- */
-watch(dateYearStart, () => {
-  dateYearEnd.value = dateYearStart.value + 1;
-  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
-});
-
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  dateYearEnd.value = dateYearStart.value + 1;
-  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
-});
-
-/**
- * ค่าเดือนปีที่ถูกเลือกใน component ปฏิทินจะให้อัพเดทค่าสรุปวันหยุดรวม
- * @param e เลือกเดือนปี tab ปฏิทิน
- */
-const updateMonth = async (e: DataDateMonthObject) => {
-  if (e != null) {
-    dateYear.value = e.year;
-    emit("update:dateYear", e.year);
-    await props.fetchDataSummaryCalendar();
-  }
-};
-
-/**
- * ค่าปีที่ถูกเลือกใน component รายการจะให้อัพเดทค่าสรุปวันหยุดรวม
- * @param e เลือกปี tab รายการ
- */
-const updateYear = async (e: number) => {
-  dateMonth.value = { month: 0, year: e };
-  emit("update:dateYear", dateYear.value);
-  await props.fetchDataSummaryCalendar();
-};
-
-/**
- * ฟังก์ชันปุ่มเพิ่มวันหยุดแบบเลือกวันได้
- */
-const addCalendar = () => {
-  dateAdd.value = [new Date(), new Date()];
-  name.value = "";
-  category.value = "all";
-  isSpecial.value = true;
-  modalAdd.value = true;
-};
-
-/**
- * ฟังก์ชัน copy วันหยุดจากปีนิงไปอีกปี
- */
-const copyCalendar = () => {
-  modalCopy.value = true;
-  dateYearStart.value = new Date().getFullYear();
-  dateYearEnd.value = new Date().getFullYear() + 1;
-};
-
-/**
- * ฟังก์ชันปุ่มบันทึกเพิ่มวันหยุด
- */
-const onSubmit = async () => {
-  await formDate.value.validate().then(async (result: boolean) => {
-    if (result) {
-      const dataAdd = ref<DataDateAddObject[]>([]);
-      let i = 0;
-      const dateStart = ref<Date>(dateAdd.value[0]);
-      do {
-        i = i + 1;
-        dataAdd.value.push({
-          year: new Date(dateStart.value).getFullYear(),
-          holidayDate: dateToISO(new Date(dateStart.value)),
-          name: name.value,
-          isSpecial: true,
-        });
-        dateStart.value = new Date(
-          new Date(dateStart.value).setDate(
-            new Date(dateStart.value).getDate() + 1
-          )
-        );
-      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
-      showLoader();
-      await http
-        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
-        .then(() => {
-          modalAdd.value = false;
-          success($q, "เพิ่มวันหยุดสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          refreshData.value = !refreshData.value;
-          hideLoader();
-        });
-    }
-  });
-  await props.fetchDataSummaryCalendar();
-};
-
-/**
- * ฟังก์ชันคัดลอกวันหยุด
- */
-const onSubmitCopy = async () => {
-  if (dateYearStart.value >= dateYearEnd.value) {
-    dialogMessage(
-      $q,
-      "ไม่สามารถคัดลอกวันหยุดได้",
-      "ปีที่เริ่มต้นคัดลอกต้องมากกว่าปีที่จะลงวันคัดลอก",
-      "warning",
-      undefined,
-      "orange",
-      undefined,
-      undefined,
-      true
-    );
-    return;
-  }
-  showLoader();
-  await http
-    .post(config.API.listHolidayCopy, {
-      fromYear: dateYearStart.value,
-      toYear: dateYearEnd.value,
-    })
-    .then(() => {
-      modalCopy.value = false;
-      success($q, "คัดลอกวันหยุดสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      refreshData.value = !refreshData.value;
-      await props.fetchDataSummaryCalendar();
-    });
-};
-
-/**
- * แปลง ปีและเดือนเป็นภาษาไทย
- * @param val datepicker แบบเลือกปีและเดือน
- */
-const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
-
-/**
- * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
- * @param val ช่วงวันที่
- */
-const dateThaiRange = (val: [Date, Date] | []) => {
-  if (val.length === 0) {
-  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
-    return `${date2Thai(val[0])}`;
-  } else {
-    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
-  }
-};
-</script>
-
 <style scoped>
 .my-menu-link {
   color: black;
diff --git a/src/modules/01_metadata/interface/index/Calendar.ts b/src/modules/01_metadata/interface/index/Calendar.ts
index 1435a903..e6842e04 100644
--- a/src/modules/01_metadata/interface/index/Calendar.ts
+++ b/src/modules/01_metadata/interface/index/Calendar.ts
@@ -57,6 +57,11 @@ interface TabsObject {
   value: string;
 }
 
+interface Optionscategory {
+  label: string;
+  value: string;
+}
+
 export type {
   DataSumCalendarObject,
   DataDateMonthObject,
@@ -65,4 +70,5 @@ export type {
   DataDateRowObject,
   DataDateListsObject,
   TabsObject,
+  Optionscategory,
 };
diff --git a/src/modules/01_metadata/views/04_calendar.vue b/src/modules/01_metadata/views/04_calendar.vue
index bb7f05b6..7233d578 100644
--- a/src/modules/01_metadata/views/04_calendar.vue
+++ b/src/modules/01_metadata/views/04_calendar.vue
@@ -1,49 +1,48 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataSumCalendarObject } from "@/modules/01_metadata/interface/index/Calendar";
 
 import calendarComponent from "@/modules/01_metadata/components/calendar/calendarMain.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
 const $q = useQuasar();
+const { showLoader, hideLoader, messageError, genColor15 } = useCounterMixin();
 
-const { showLoader, hideLoader, messageError, genColor15 } = mixin;
+const listsSumCalendar = ref<DataSumCalendarObject[]>([]); //รายการสรุปวันหยุดในแต่ละเดือนประจำปี
+const year = ref<number>(new Date().getFullYear()); //ป๊
 
-const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
-const year = ref<number>(new Date().getFullYear());
-
-/** function เรียกข้อมูลสรุปวันหยุด */
+/**
+ *  ดึงข้อมูลรายการสรุปวันหยุดในแต่ละเดือนประจำปี
+ */
 async function fetchDataSummaryCalendar() {
   showLoader();
   await http
     .get(config.API.summaryHolidayHistoryYear(year.value))
-    .then((res) => {
-      let data = res.data.result;
-      listsSumCalendar.value = [];
-      data.map((e: DataSumCalendarObject) => {
-        listsSumCalendar.value.push({
-          id: e.id,
-          monthFull: e.monthFull,
-          count: e.count,
-          color: genColor15(e.id),
-        });
-      });
+    .then(async (res) => {
+      let data = await res.data.result;
+      listsSumCalendar.value = data.map((e: DataSumCalendarObject) => ({
+        ...e,
+        color: genColor15(e.id),
+      }));
     })
-    .catch(async (e) => {
-      // await defaultListsSumCalendar;
-      messageError($q, e);
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
     });
 }
 
+/**
+ * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ *
+ * จะทำการดึงข้อมูลสรุปวันหยุดในแต่ละเดือนประจำปี
+ */
 onMounted(async () => {
   await fetchDataSummaryCalendar();
 });
@@ -97,8 +96,8 @@ onMounted(async () => {
     <div class="col-9">
       <q-card bordered class="q-pa-md">
         <calendarComponent
-          v-model:dateYear="year"
-          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+          v-model:date-year="year"
+          :fetch-dataSummaryCalendar="fetchDataSummaryCalendar"
         />
       </q-card>
     </div>