From 7b8f8d705f402a83f22d82a98535f80d1c13f416 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 Dec 2023 10:08:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20code=20?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/componenst/Calendar.vue  | 137 ++++--------------
 .../05_leave/componenst/DialogDetail.vue      |  50 +++----
 .../05_leave/componenst/ListCalendar.vue      |  36 +++--
 src/modules/05_leave/componenst/Table.vue     |  64 ++------
 .../05_leave/interface/response/leave.ts      | 129 ++++++++++-------
 5 files changed, 168 insertions(+), 248 deletions(-)

diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index 951384e..b26e7e3 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref,  onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
@@ -14,22 +14,18 @@ import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
 
+/** import type*/
 import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
+import type {
+  DataCalendar,
+  LeaveType,
+  FilterList,
+} from "@/modules/05_leave/interface/response/leave";
 
+/** import componest*/
 import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
-// import FormMain from "@/modules/05_leave/componenst/formDetail/formMain.vue";
-import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
-import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
-import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
-import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
-import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
-import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
-import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
-import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
-import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
-import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
-import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
 
+/** import stort*/
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin();
@@ -40,16 +36,8 @@ const $q = useQuasar();
 
 const emit = defineEmits(["update:dateYear"]);
 
-/**
- * ตัวแปรทั้งหมด
- */
-
 const fullName = ref<string>("");
-const mainData = ref<any>([]);
-
-const modalCancel = ref<boolean>(false);
-const modeCancel = ref<boolean>(true);
-const title = ref<string>("");
+const mainData = ref<DataCalendar[]>([]);
 
 /**
  * Option ของปฏิทิน
@@ -78,40 +66,7 @@ const calendarOptions = ref<CalendarOptions>({
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
   editable: true,
-  events: [
-    {
-      groupId: "2",
-      title: "ลาป่วย",
-      start: "2023-11-24",
-      end: "2023-11-25",
-
-      color: "#4CAF4F",
-      textColor: "white",
-    },
-    {
-      groupId: "4",
-      title: "ลากิจ",
-      start: "2023-11-15",
-      allDay: true,
-      color: "#4CAF4F",
-      textColor: "white",
-    },
-    {
-      groupId: "4",
-      title: "นางสาวสมศรี ใจดี (ลากิจ)",
-      start: "2023-11-21",
-      end: "2023-11-23",
-      allDay: true,
-      color: "#ddd",
-    },
-    {
-      groupId: "4",
-      title: "นายสมชาย สุขใจ",
-      start: "2023-11-21",
-      allDay: true,
-      color: "#ddd",
-    },
-  ],
+  events: [],
 });
 
 const dateMonth = ref<DataDateMonthObject>({
@@ -119,18 +74,18 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 
+/** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-  showLoader;
+  showLoader();
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
     })
     .then((res) => {
-      console.log(res);
       mainData.value = res.data.result;
 
       const double_name = [
-        ...new Set(mainData.value.map((item: any) => item.fullName)),
+        ...new Set(mainData.value.map((item: DataCalendar) => item.fullName)),
       ];
 
       for (let i = 1; i <= double_name.length; i++) {
@@ -147,11 +102,10 @@ async function fetchDataCalendar() {
       const data = mainData.value.filter(
         (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
       );
-      console.log(data);
 
-      const event = data.map((e: any) => ({
+      const event = data.map((e: DataCalendar) => ({
         id: e.id,
-        title: e.leaveTypeName,
+        title: `${e.fullName} (${e.leaveTypeName})`,
         start: e.leaveStartDate,
         end: e.leaveEndDate,
         allDay: true,
@@ -167,7 +121,8 @@ async function fetchDataCalendar() {
     });
 }
 
-const leaveType = ref<any>();
+const leaveType = ref<LeaveType[]>([]);
+/** function เรียกประเภทการลา */
 async function fectOptionType() {
   await http
     .get(config.API.leaveType())
@@ -179,8 +134,6 @@ async function fectOptionType() {
     });
 }
 
-/**Status Form การลา*/
-
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @param val datepicker แบบเลือกปีและเดือน
@@ -190,6 +143,7 @@ function monthYearThai(val: DataDateMonthObject) {
   else return monthYear2Thai(val.month, val.year);
 }
 
+/** function อัปเดท Calendar */
 async function updateMonth() {
   await fetchDataCalendar();
   const calen = fullCalendar.value.getApi();
@@ -197,33 +151,25 @@ async function updateMonth() {
   calen.gotoDate(date);
 }
 
-/**
- * ฟังก์ชั่นยกเลิก model
- * @param text
- */
-async function cancel(text: string) {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-}
-
 const modal = ref<boolean>(false);
 const leaveId = ref<string>("");
+
 /**
- * ฟังก์ชั่นเปิด model
- * @param id
+ * function openPopupDateail
+ * @param id การลา
  */
 async function onCilckview(id: string) {
   modal.value = true;
   leaveId.value = id;
 }
 
+/** function closePopup*/
 async function onClickClose() {
   modal.value = false;
 }
 
-// filter calendar left
-const filterLists = ref<any[]>([]);
+/** filter calendar left */
+const filterLists = ref<FilterList[]>([]);
 const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
 
 watch(
@@ -231,10 +177,10 @@ watch(
   () => {
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
-        .filter((e: any) => e.fullName === item)
-        .map((e: any) => ({
+        .filter((e: DataCalendar) => e.fullName === item)
+        .map((e) => ({
           id: e.id,
-          title: e.leaveTypeName,
+          title: `${e.fullName} (${e.leaveTypeName})`,
           start: e.leaveStartDate,
           end: e.leaveEndDate,
           allDay: true,
@@ -248,8 +194,6 @@ onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     fullName.value = keycloak.tokenParsed.name;
   }
-  console.log(fullName.value);
-
   await fetchDataCalendar();
   await fectOptionType();
 });
@@ -257,12 +201,10 @@ onMounted(async () => {
 
 <template>
   <div class="row">
-    <!-- Filter ตามคนและประเภทการลา -->
     <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
       <q-card class="col-12">
         <div class="q-gutter-sm">
           <q-list bordered class="rounded-borders">
-            <!-- <q-item-label header>User</q-item-label> -->
             <q-item
               v-for="(item, i) in filterLists"
               :key="i"
@@ -281,11 +223,6 @@ onMounted(async () => {
             </q-item>
           </q-list>
         </div>
-
-        <!-- show value filterVal -->
-        <!-- <div class="q-px-sm q-mt-sm">
-                Your selection is: <strong>{{ filterVal }}</strong>
-              </div> -->
       </q-card>
     </div>
 
@@ -341,22 +278,12 @@ onMounted(async () => {
                     class="row col-12 items-center no-wrap"
                     :style="`background: + ${arg.event.color}`"
                   >
-                    <!-- <b>{{ arg.timeText }}</b> -->
                     <div
                       class="textHover col-10"
                       @click="onCilckview(arg.event.id)"
                     >
                       {{ arg.event.title }}
                     </div>
-                    <q-btn
-                      dense
-                      v-if="arg.event.groupId == 1"
-                      icon="mdi-close"
-                      flat
-                      round
-                      size="8px"
-                      @click="cancel(arg.event.title)"
-                    />
                   </div>
                 </template>
               </FullCalendar>
@@ -382,14 +309,6 @@ onMounted(async () => {
             />
             <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
           </div>
-          <!-- <div class="items-center row">
-				<q-icon size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
-				<span class="text-caption text-grey-8">สถานะอยู่ระหว่างดำเนินการ</span>
-			</div>
-			<div class="items-center row">
-				<q-icon size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
-				<span class="text-caption text-grey-8">สถานะใหม่</span>
-			</div> -->
         </div>
       </div>
     </div>
diff --git a/src/modules/05_leave/componenst/DialogDetail.vue b/src/modules/05_leave/componenst/DialogDetail.vue
index 1e262c8..74bd6bc 100644
--- a/src/modules/05_leave/componenst/DialogDetail.vue
+++ b/src/modules/05_leave/componenst/DialogDetail.vue
@@ -4,11 +4,14 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** import type*/
 import type {
+  FremDetail,
   FormDelete,
   FormDeleteRef,
 } from "@/modules/05_leave/interface/response/leave";
 
+/** import componest*/
 import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
 import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
 import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
@@ -21,6 +24,7 @@ import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDeta
 import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
 import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
 
+/** import stort*/
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const {
@@ -33,6 +37,7 @@ const {
 } = mixin;
 
 const $q = useQuasar();
+
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -66,13 +71,8 @@ const titleName = ref<string>("");
 const checkForm = ref<string>("");
 
 /** Form รายละเอียดข้อมูล*/
-const formData = reactive<any>({
+const formData = reactive<FremDetail>({
   id: "", //Id การยื่นขอลา
-  // reasonCommander: "", //เหตุผลผู้บังคับบัญชา
-  // reasonOligarch: "", //เหตุผลผู้มีอำนาจ
-  // positionName: "", //ตำแหน่งผู้ยื่นขอ
-  // positionLevelName: "", //ระดับผู้ยื่นขอ
-  // organizationName: "", //สังกัดผู้ยื่นขอ
   leaveTypeName: "", // Name ประเภทการลา
   leaveTypeId: "", //Id ประเภทการลา
   fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
@@ -81,12 +81,6 @@ const formData = reactive<any>({
   leaveDateStart: new Date(), //วันเริ่มการลา
   leaveDateEnd: new Date(), //วันสิ้นสุดการลา
   leaveCount: 0, //จำนวนวันลา
-
-  // leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
-  // leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
-  // leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
-  // leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
-  // leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
   leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
@@ -105,14 +99,14 @@ const formData = reactive<any>({
   wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
   restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
   restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-  ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
   ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
   ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
   ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
   ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
   ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
   ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-  hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
+  hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
   absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
   absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
@@ -137,6 +131,7 @@ const formData = reactive<any>({
   step: "",
 });
 
+/** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
   writeAt: "",
   reason: "",
@@ -146,13 +141,16 @@ const formDelete = reactive<FormDelete>({
 const writeAtRef = ref<Object | null>(null);
 const reasonRef = ref<Object | null>(null);
 const docRef = ref<Object | null>(null);
-
 const formDeleteRef: FormDeleteRef = {
   writeAt: writeAtRef,
   reason: reasonRef,
   doc: docRef,
 };
 
+/**
+ * function เรียกข้อมูลการลา
+ * @param id การลา
+ */
 async function fetchDataDetail(id: string) {
   showLoader();
   await http
@@ -161,11 +159,6 @@ async function fetchDataDetail(id: string) {
       const data = res.data.result;
       titleName.value = data.fullName;
       formData.id = data.id;
-      // formData.reasonCommander = data.reasonCommander;
-      // formData.reasonOligarch = data.reasonOligarch;
-      // formData.positionName = data.positionName;
-      // formData.positionLevelName = data.positionLevelName;
-      // formData.organizationName = data.organizationName;
       formData.leaveTypeName = data.leaveTypeName;
       formData.leaveTypeId = data.leaveTypeId;
       formData.fullname = data.fullname;
@@ -176,9 +169,6 @@ async function fetchDataDetail(id: string) {
         data.leaveStartDate && date2Thai(data.leaveStartDate);
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = data.leaveTotal;
-      // formData.leaveLimit = data.leaveLimit;
-      // formData.leaveSummary = data.leaveSummary;
-      // formData.leaveRemain = data.leaveRemain;
       formData.leaveWrote = data.leaveWrote;
       formData.leaveAddress = data.leaveAddress;
       formData.leaveNumber = data.leaveNumber;
@@ -196,8 +186,6 @@ async function fetchDataDetail(id: string) {
         data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
       formData.leaveSalary = data.leaveSalary;
       formData.leaveSalaryText = data.leaveSalaryText;
-      // formData.leaveTypeDay =
-      //   e.leaveTypeDay && stores.convertLeaveDaytype(e.leaveTypeDay);
       formData.wifeDayName = data.wifeDayName;
       formData.wifeDayDateBorn =
         data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
@@ -240,7 +228,6 @@ async function fetchDataDetail(id: string) {
         data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
       formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
       formData.step = data.step;
-      // checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
       checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
     })
     .catch((err) => {
@@ -252,6 +239,11 @@ async function fetchDataDetail(id: string) {
     });
 }
 
+/**
+ * function check ประเภทการลา
+ * @param leaveTypeId  ประเภทการลา
+ * @param leaveTypeName  ประเภทการลา
+ */
 function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
   if (props.leaveType) {
     const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
@@ -282,6 +274,10 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
   }
 }
 
+/**
+ * function เรียกข้อมูลยกเลิกการลา
+ * @param id ยกเลิกการลา
+ */
 async function fetchDataCancelDetail(id: string) {
   showLoader();
   await http
@@ -297,6 +293,7 @@ async function fetchDataCancelDetail(id: string) {
     });
 }
 
+/** function ยินยันการบันทึกข้อมูล*/
 async function onClickSave() {
   const hasError = [];
   for (const key in formDeleteRef) {
@@ -322,6 +319,7 @@ async function onClickSave() {
   }
 }
 
+/** function บันทึกข้อมูล*/
 async function onSubmit() {
   showLoader();
   const id = props.leaveId ? props.leaveId : "";
diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/componenst/ListCalendar.vue
index b63cfce..8126a2f 100644
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/componenst/ListCalendar.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref,  onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
+/** import type*/
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
 
-import type {
-  FormDelete,
-  FormDeleteRef,
-} from "@/modules/05_leave/interface/response/leave";
+/** import componest*/
+import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
 import Table from "@/modules/05_leave/componenst/Table.vue";
 
+/** import stort*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
@@ -22,6 +22,7 @@ const LeaveData = useLeaveStore();
 
 const $q = useQuasar();
 
+/** filter */
 const year = ref<number>(new Date().getFullYear());
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
@@ -32,6 +33,7 @@ const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
 
+/** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
   showLoader();
   const body = {
@@ -57,7 +59,8 @@ async function fetchDataTable() {
     });
 }
 
-const leaveType = ref<any>();
+const leaveType = ref<LeaveType[]>();
+/** function เรียกประเภทการลา */
 async function fectOptionType() {
   await http
     .get(config.API.leaveType())
@@ -75,18 +78,28 @@ const leaveId = ref<string>("");
 const leaveStatus = ref<string>("");
 
 /**
- * ฟังก์ชั่นเปิด model
- * @param text
+ * function openPopupDateail
+ * @param id การลา
+ * @param status การลา
  */
 const onClickView = async (id: string, status: string) => {
   modal.value = true;
   leaveId.value = id;
   leaveStatus.value = status;
 };
+
+/** function closePopup*/
 async function onClickClose() {
   modal.value = false;
 }
 
+/**
+ * function updateFilter
+ * @param y ปีงบประมาณ
+ * @param t ประเภทการลา
+ * @param s สภานะ
+ * @param k คำค้นหา
+ */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
     year.value = await y;
@@ -97,6 +110,11 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
   }
 }
 
+/**
+ * function updatePagination
+ * @param p หน้า
+ * @param ps แถวต่อหน้า
+ */
 async function updatePagination(p: number, ps: number) {
   (page.value = await p), (pageSize.value = await ps);
   await fetchDataTable();
diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue
index 753004d..9b15f56 100644
--- a/src/modules/05_leave/componenst/Table.vue
+++ b/src/modules/05_leave/componenst/Table.vue
@@ -1,23 +1,16 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted, watch } from "vue";
+import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
-const mixin = useCounterMixin();
+/** import stort*/
 const leaveStore = useLeaveStore();
-const { messageError } = mixin;
-const { fetchLeaveType, filterOption } = leaveStore;
+const { filterOption } = leaveStore;
+
 const attrs = ref<any>(useAttrs());
-
 const $q = useQuasar();
 
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -54,6 +47,8 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
+const table = ref<any>(null);
+
 /**
  * ตั้งค่า pagination
  */
@@ -65,9 +60,10 @@ const pagination = ref({
   rowsPerPage: Number(props.pageSize),
 });
 
-const updateVisible = (value: []) => {
+/** updateVisible*/
+function updateVisible(value: []) {
   emit("update:inputvisible", value);
-};
+}
 
 /** filter */
 const year = ref<number>(new Date().getFullYear());
@@ -75,38 +71,25 @@ const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
 
+/** function updateFilter*/
 function filterTable() {
   emit("update:filter", year.value, type.value, status.value, filter.value);
 }
 
+/** function updatePagination*/
 function updatePagination(p: number, ps: number) {
   emit("update:Pagination", p, ps);
 }
 
+/** function updatePageSize*/
 function updatePageSize(newPageSize: any) {
   currentPage.value = 1;
   pagination.value.rowsPerPage = newPageSize.rowsPerPage;
 }
 
-// async function fectOptionType() {
-//   await http
-//     .get(config.API.leaveType())
-//     .then(async (res) => {
-//       const data = res.data.result;
-//       await fetchLeaveType(data);
-//     })
-//     .catch((err) => {
-//       messageError($q, err);
-//     });
-// }
-
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   updatePagination(currentPage.value, pagination.value.rowsPerPage);
 });
-
-onMounted(async () => {
-  // await fectOptionType();
-});
 </script>
 <template>
   <div class="q-py-sm row">
@@ -198,28 +181,7 @@ onMounted(async () => {
           </template></q-select
         >
         <q-space />
-        <!-- <q-input
-          standout
-          dense
-          v-model="filter"
-          ref="filterRef"
-          @keydown.enter.prevent="filterTable"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-          class="gt-xs"
-          style="max-width: 150px"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="filter = ''"
-            />
-          </template>
-        </q-input> -->
+
         <!-- แสดงคอลัมน์ใน table -->
         <q-select
           :model-value="inputvisible"
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index d86d34b..1b6c58d 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -20,70 +20,60 @@ interface ListLeaveTable {
 
 interface FremDetail {
   id: string; //Id การยื่นขอลา
-  reasonCommander: string; //เหตุผลผู้บังคับบัญชา
-  reasonOligarch: string; //เหตุผลผู้มีอำนาจ
-  positionName: string; //ตำแหน่งผู้ยื่นขอ
-  positionLevelName: string; //ระดับผู้ยื่นขอ
-  organizationName: string; //สังกัดผู้ยื่นขอ
-  leaveTypeName: string | null; //Name ประเภทการลา
-  leaveTypeId: string | null; //Id ประเภทการลา
+  leaveTypeName: string; // Name ประเภทการลา
+  leaveTypeId: string; //Id ประเภทการลา
   fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
-  dateSendLeave: Date | null; //วันที่ยื่นใบลา
-  leaveDateStart: Date | null; //วันเริ่มการลา
-  leaveDateEnd: Date | null; //วันสิ้นสุดการลา
-  leaveCount: number;
+  dateSendLeave: Date; // วันที่ยืนใบลา
   status: string; //สถานะการของลา
-  leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
-  leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
-  leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
-  // leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
-  // leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา
+  leaveDateStart: Date; //วันเริ่มการลา
+  leaveDateEnd: Date; //วันสิ้นสุดการลา
+  leaveCount: number; //จำนวนวันลา
   leaveWrote: string; //เขียนที่
   leaveAddress: string; //สถานที่ติดต่อขณะลา
   leaveNumber: string; //หมายเลขที่ติดต่อขณะลา
   leaveDetail: string; //รายละเอียดการลา
   leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
   leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
-  leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
-  leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastStart: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
   leaveTotal: number; //จำนวนวันที่ลา(Auto)
-  leavebirthDate: Date | null; //วันเดือนปีเกิด(Auto)
-  leavegovernmentDate: Date | null; //วันที่เข้ารับราชการ(Auto)
-  leaveSalary: Number; //เงินเดือนปัจจุบัน(Auto)
-  leaveSalaryText: String; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  leavebirthDate: Date; //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: Date; //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: number; //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: string; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
   leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น
-  wifeDayName: String; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  wifeDayDateBorn: Date | null; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-  restDayOldTotal: Number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+  wifeDayName: string; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: Date; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  restDayOldTotal: number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
   restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-  ordainDayStatus: Boolean; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-  ordainDayLocationName: String; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-  ordainDayLocationAddress: String; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-  ordainDayLocationNumber: String; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-  ordainDayOrdination: Date | null; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-  ordainDayBuddhistLentName: String; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-  ordainDayBuddhistLentAddress: String; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-  hajjDayStatus: Boolean; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
-  absentDaySummon: String; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayLocation: String; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayRegistorDate: Date | null; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayGetIn: String; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  absentDayAt: String; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-  studyDaySubject: String; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayDegreeLevel: String; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayUniversityName: String; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingSubject: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayTrainingName: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayCountry: String; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  studyDayScholarship: String; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-  coupleDayName: String; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayPosition: String; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevel: String; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-  coupleDayLevelCountry: String; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayCountryHistory: String; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-  coupleDayTotalHistory: String; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-  coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-  coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  ordainDayStatus: string; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: string; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: string; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: string; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: Date; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: string; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: string; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: string; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
+  absentDaySummon: string; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayLocation: string; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: Date; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayGetIn: string; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayAt: string; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  studyDaySubject: string; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayDegreeLevel: string; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayUniversityName: string; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingSubject: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingName: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayCountry: string; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayScholarship: string; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  coupleDayName: string; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayPosition: string; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevel: string; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevelCountry: string; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayCountryHistory: string; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayTotalHistory: string; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: Date; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: Date; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
   step: string;
 }
@@ -100,10 +90,43 @@ interface FormDeleteRef {
   [key: string]: any;
 }
 
+interface DataCalendar {
+  dateSendLeave: Date;
+  fullName: string;
+  id: string;
+  leaveEndDate: Date;
+  leaveStartDate: Date;
+  leaveTypeId: string;
+  leaveTypeName: string;
+  status: string;
+}
+
+interface LeaveType {
+  code: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date | null;
+  limit: Number;
+  name: string;
+}
+
+interface FilterList {
+  id: string;
+  name: string;
+  color: string;
+}
+
 export type {
   ListLeave,
   ListLeaveTable,
   FremDetail,
   FormDelete,
   FormDeleteRef,
+  DataCalendar,
+  LeaveType,
+  FilterList,
 };