From cb4850ec2734421f05c5db78020e526828dee201 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Fri, 27 Oct 2023 10:54:49 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=9B=E0=B8=B1=E0=B8=88=E0=B8=88=E0=B8=B8=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=20=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B8=AD=E0=B8=A2=E0=B9=88=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=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 | 435 +++++++++----------
 src/modules/05_leave/views/Main.vue          |   6 +-
 2 files changed, 213 insertions(+), 228 deletions(-)

diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index ed7386d..b956b87 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,214 +1,194 @@
 <template>
-  <div class="q-mt-sm">
-    <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">
-              <div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
-                <!-- <b>{{ arg.timeText }}</b> -->
-                <div class="textHover col-10"  @click="view(arg.event.title)">{{ 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>
-        </div>
-      </div>
-      <div class="row q-col-gutter-lg justify-end">
-        <div class="items-center row">
-          <q-icon size="10px" color="light-green" 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="red-6" 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="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 class="q-mt-sm">
+		<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">
+						<div class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`">
+							<!-- <b>{{ arg.timeText }}</b> -->
+							<div class="textHover col-10" @click="view(arg.event.title)">{{ 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>
+			</div>
+		</div>
+		<div class="row q-col-gutter-lg justify-end">
+			<div class="items-center row">
+				<q-icon size="10px" color="light-green" 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="red-6" 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="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>
 
-    <!-- modal ขอยกเลิก/ดูรายละเอียด -->
-    <q-dialog v-model="modalCancel" persistent>
-      <q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
-        <q-card-section class="row items-center q-pa-sm">
-            <div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
-            <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</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 flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
-            <div class="col-12 q-col-gutter-sm row items-center">
-              <div class="col-6 text-grey-7">เขียนที่</div>
-              <div class="col-6 text-black">{{ location }}</div>
-              <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
-                <div class="col-6 text-black">{{ subject }}</div>
-                <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
-                <div class="col-6 text-black">{{ dateStart }}</div>
-                <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
-                <div class="col-6 text-black">{{ dateEnd }}</div>
-                <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
-                <div class="col-6 text-black">{{ numDate }}</div>
-                <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
-                <div class="col-6 text-black">{{ place }}</div>
-                <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
-                <div class="col-6 text-black">{{ phone }}</div>
-              </div>
-            </div>
-            <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
-              <q-input
-                v-model="reason"
-                type="textarea"
-                label="กรอกเหตุผล"
-                outlined
-                dense
-              />
-              <q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </q-card-section>
-          <q-separator />
-          <q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
-            <q-space />
-            <q-btn
-                label="ยืนยัน"
-                unelevated
-                color="secondary"
-                dense
-                class="q-px-md"
-                v-close-popup
-            />
-        </q-card-section>
-        </q-card>
-    </q-dialog>
+	<!-- modal ขอยกเลิก/ดูรายละเอียด -->
+	<q-dialog v-model="modalCancel" persistent>
+		<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
+			<q-card-section class="row items-center q-pa-sm">
+				<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
+				<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</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 flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
+					<div class="col-12 q-col-gutter-sm row items-center">
+						<div class="col-6 text-grey-7">เขียนที่</div>
+						<div class="col-6 text-black">{{ location }}</div>
+						<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
+						<div class="col-6 text-black">{{ subject }}</div>
+						<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
+						<div class="col-6 text-black">{{ dateStart }}</div>
+						<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
+						<div class="col-6 text-black">{{ dateEnd }}</div>
+						<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
+						<div class="col-6 text-black">{{ numDate }}</div>
+						<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
+						<div class="col-6 text-black">{{ place }}</div>
+						<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
+						<div class="col-6 text-black">{{ phone }}</div>
+					</div>
+				</div>
+				<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
+					<q-input v-model="reason" type="textarea" label="กรอกเหตุผล" outlined dense />
+					<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
+						<template v-slot:prepend>
+							<q-icon name="attach_file" />
+						</template>
+					</q-file>
+				</div>
+			</q-card-section>
+			<q-separator />
+			<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
+				<q-space />
+				<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" v-close-popup />
+			</q-card-section>
+		</q-card>
+	</q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
+import { ref } from "vue"
+import FullCalendar from "@fullcalendar/vue3"
+import dayGridPlugin from "@fullcalendar/daygrid"
+import type { CalendarOptions } from "@fullcalendar/core"
+import timeGridPlugin from "@fullcalendar/timegrid"
+import interactionPlugin from "@fullcalendar/interaction"
+import allLocales from "@fullcalendar/core/locales-all"
+import listPlugin from "@fullcalendar/list"
+const fullCalendar = ref<InstanceType<typeof FullCalendar>>()
+const calendarOptions = ref<CalendarOptions>({
+	plugins: [
+		dayGridPlugin,
+		timeGridPlugin,
+		interactionPlugin, // needed for dateClick
+		listPlugin,
+	],
+	buttonText: {
+		listYear: "รายการ",
+		dayGridMonth: "ปฏิทิน",
+		test: "เพิ่มวันหยุด",
+	},
+	headerToolbar: false,
+	initialView: "dayGridMonth",
+	initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+	selectable: true,
+	dayMaxEvents: true,
+	weekends: true,
+	locale: "th",
+	locales: allLocales,
+	expandRows: true,
+	nowIndicator: true,
+	height: "100%",
+	eventColor: "#fff",
+	eventTextColor: "#4A5568",
+	eventBorderColor: "#50a5fc",
+	displayEventTime: false,
+	editable: true,
+	events: [
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-10", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-11-10", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-11", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-12", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "3", title: "ลากิจส่วนตัว", start: "2023-10-13", allDay: true, status: "done", color: "#E3FDDA" },
+		{ groupId: "2", title: "ลาป่วย", start: "2023-10-19", allDay: true, status: "proceed", color: "#e4f3ff" },
+		{ groupId: "1", title: "ลาป่วย", start: "2023-10-20", allDay: true, status: "new", color: "#FFF1CC" },
+	],
+})
 
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import allLocales from "@fullcalendar/core/locales-all";
-import listPlugin from "@fullcalendar/list";
-const fullCalendar = ref<InstanceType<typeof FullCalendar>>();  
-const calendarOptions = ref({
-  plugins: [
-    dayGridPlugin,
-    timeGridPlugin,
-    interactionPlugin, // needed for dateClick
-    listPlugin,
-  ],
-  buttonText: {
-    listYear: "รายการ",
-    dayGridMonth: "ปฏิทิน",
-    test: "เพิ่มวันหยุด",
-  },
-  headerToolbar: null,
-  initialView: "dayGridMonth",
-  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
-  selectable: true,
-  dayMaxEvents: true,
-  weekends: true,
-  locale: "th",
-  locales: allLocales,
-  expandRows: true,
-  nowIndicator: true,
-  height: "100%",
-  eventColor: "#fff",
-  eventTextColor: "#4A5568",
-  eventBorderColor: "#50a5fc",
-  displayEventTime: false,
-  editable: true,
-  events: [
-      { groupId: "3", title: "ลากิจส่วนตัว", start: "2023-09-10", allDay: true, status: 'done', color: '#E3FDDA' },
-      { groupId: "2", title: "ลาป่วย", start: "2023-09-19", allDay: true, status: 'proceed', color: '#e4f3ff' },
-      { groupId: "1", title: "ลาป่วย", start: "2023-09-20", allDay: true, status: 'new', color: '#FFF1CC' }
-    ],
-  });
-
-const modalCancel = ref(false);
-const title = ref('');
-const location = ref('บ้าน');
-const subject = ref('ลาป่วย');
-const dateStart = ref('20 ส.ค. 2566');
-const dateEnd= ref('21 ส.ค. 2566');
-const numDate= ref('20');
-const place = ref('บ้าน');
-const phone = ref('000-00000000');
-const reason = ref('ยกเลิกการลา');
-const model = ref(null);
-const modeCancel = ref(true);
+const modalCancel = ref(false)
+const title = ref("")
+const location = ref("บ้าน")
+const subject = ref("ลาป่วย")
+const dateStart = ref("20 ส.ค. 2566")
+const dateEnd = ref("21 ส.ค. 2566")
+const numDate = ref("20")
+const place = ref("บ้าน")
+const phone = ref("000-00000000")
+const reason = ref("ยกเลิกการลา")
+const model = ref(null)
+const modeCancel = ref(true)
 
 const cancel = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-};
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = true
+}
 const view = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = false;
-};
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = false
+}
 </script>
 
 <style scope lang="scss">
 .main-content {
-  height: 65vh;
+	height: 65vh;
 }
 
 .color-main {
-  color: #18a259;
+	color: #18a259;
 }
 
 .padding-content {
-  padding: 10px;
+	padding: 10px;
 }
 
 .demo-app-main {
-  flex-grow: 1;
-  /* padding: 3em; */
+	flex-grow: 1;
+	/* padding: 3em; */
 }
 
 .fc {
-  /* the calendar root */
-  max-width: 1100px;
-  margin: 0 auto;
-  background-color: white;
-  border-radius: 10px;
+	/* the calendar root */
+	max-width: 1100px;
+	margin: 0 auto;
+	background-color: white;
+	border-radius: 10px;
 }
 
 .fc-day-today {
-  background-color: #F8F8F8 !important;
+	background-color: #f8f8f8 !important;
 }
 
 .fc-day-today .fc-daygrid-day-number {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* border: 2px solid #17a259; */
+	/* border-radius: 50%;
   height: 25px;
   width: 25px;
   font-weight: bold;
@@ -217,122 +197,123 @@ const view = async (text: string) => {
 }
 
 .fc-day-today .fc-daygrid-day-frame {
-  padding: 5%;
+	padding: 5%;
 }
 
 .fc .fc-button-group > .fc-button {
-  color: black;
-  background-color: #fafafa;
-  border: none;
+	color: black;
+	background-color: #fafafa;
+	border: none;
 }
 
 .fc .fc-button-group > .fc-button:active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
+	color: white;
+	background-color: #22a15e;
+	border: none;
 }
 
 .fc .fc-button-group > .fc-button.fc-button-active {
-  color: white;
-  background-color: #22a15e;
-  border: none;
+	color: white;
+	background-color: #22a15e;
+	border: none;
 }
 
 .fc-header-toolbar {
-  background-color: white;
-  padding: 0px 10px 0px 10px;
-  border-radius: 10px 10px 0px 0px;
+	background-color: white;
+	padding: 0px 10px 0px 10px;
+	border-radius: 10px 10px 0px 0px;
 }
 
 .fc .fc-scrollgrid-liquid > thead {
-  background-color: white;
+	background-color: white;
 }
 
 .dp-custom-cell {
-  border-radius: 50%;
+	border-radius: 50%;
 }
 
 .dp__today {
-  border: 1px solid var(--q-primary);
+	border: 1px solid var(--q-primary);
 }
 
 .dp__range_end,
 .dp__range_start,
 .dp__active_date {
-  background: var(--q-primary);
-  color: var(--dp-primary-text-color);
+	background: var(--q-primary);
+	color: var(--dp-primary-text-color);
 }
 
 .datepicker .q-field__label {
-  padding-left: 5px;
+	padding-left: 5px;
 }
 
 .datepicker .q-field__messages {
-  padding-left: 20px;
+	padding-left: 20px;
 }
 
 .datepicker .q-field__native {
-  padding-left: 5px;
-  color: var(--q-primary) !important;
+	padding-left: 5px;
+	color: var(--q-primary) !important;
 }
 
 .datepicker .q-field__prepend {
-  padding-left: 6px;
+	padding-left: 6px;
 }
 
 .datepicker .q-field__append {
-  padding-right: 6px;
+	padding-right: 6px;
 }
 
 .datepicker .q-field__after {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-weight: 500;
 }
 
 .fc .fc-popover {
-  z-index: 6000;
+	z-index: 6000;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .subName {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  font-weight: 500;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	font-weight: 500;
 }
 
 .subInput {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .fc-event {
-  overflow: hidden;
-  border-color: transparent !important;
-  font-weight: 500;
+	overflow: hidden;
+	border-color: transparent !important;
+	font-weight: 500;
 }
 
 .fc-event-main {
-  text-align: left;
-  padding:0px 5px;
+	text-align: left;
+	padding: 0px 5px;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  padding-left: 0px;
+	padding-left: 0px;
 }
 
-.fc-theme-standard td, .fc-theme-standard th{
-  border: 1px solid #EBE9F1;
+.fc-theme-standard td,
+.fc-theme-standard th {
+	border: 1px solid #ebe9f1;
 }
 
-.textHover:hover{
-  color: #18a259;
+.textHover:hover {
+	color: #18a259;
 }
 </style>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 3dbd1cf..14c67c8 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -4,6 +4,7 @@
 			<div class="toptitle text-white col-12 row items-center">
 				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
 				<div>รายการลา</div>
+				{{ dateMonth }}
 			</div>
 		</div>
 		<div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
@@ -153,7 +154,10 @@ import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/C
 
 const router = useRouter()
 const currentTab = ref<string>("calendar") //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
-const dateMonth = ref<number>(new Date().getFullYear())
+const dateMonth = ref<DataDateMonthObject>({
+	month: new Date().getMonth(), // Months are 0-based in JavaScript, so we add 1 to get the actual month.
+	year: new Date().getFullYear(),
+})
 const dateYear = ref<number>(new Date().getFullYear())
 
 const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง