From 23cb1649f5abc88b1d291a63fe65d8fba6346126 Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Thu, 4 Jan 2024 15:18:18 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=99=E0=B8=AB=E0=B8=A2=E0=B8=B8=E0=B8=94?=
 =?UTF-8?q?=E0=B9=83=E0=B8=99=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=97=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/leave/api.leave.ts                   |   3 +
 src/modules/05_leave/components/Calendar.vue | 649 +++++++++----------
 2 files changed, 312 insertions(+), 340 deletions(-)

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 7ef7858..29515f2 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -2,6 +2,7 @@ import env from "../index"
 
 const retirementResign = `${env.API_URI}/retirement`
 const leave = `${env.API_URI}/leave`
+const holiday = `${env.API_URI}/metadata/holiday/`
 
 export default {
 	listUser: () => `${retirementResign}/resign/user`,
@@ -24,4 +25,6 @@ export default {
 	leaveCheck: () => `${leave}/user/check`,
 	leaveReport: (id: string) => `${leave}/report/${id}`,
 	leaveSendReport: () => `${leave}/report-template/docx`,
+
+	listHolidayHistoryYearMonth: (year: number, month: number) => `${holiday}${year}/${month}`,
 }
diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index e5b8307..636acd1 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -1,153 +1,184 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, onMounted, watch } from "vue"
+import { useQuasar } from "quasar"
+import keycloak from "@/plugins/keycloak"
+import http from "@/plugins/http"
+import config from "@/app.config"
 
 /**import calendar*/
-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";
+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"
 
 /** import type*/
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
-import type {
-  DataCalendar,
-  LeaveType,
-} from "@/modules/05_leave/interface/response/leave";
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
+import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave"
 
 /** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
 
 /** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
+import { useCounterMixin } from "@/stores/mixin"
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin
 
-const $q = useQuasar();
+const $q = useQuasar()
 
-const emit = defineEmits(["update:dateYear"]);
+const emit = defineEmits(["update:dateYear"])
 
-const fullName = ref<string>("");
-const mainData = ref<DataCalendar[]>([]);
+const fullName = ref<string>("")
+const mainData = ref<DataCalendar[]>([])
 
-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "")
 
 /**
  * Option ของปฏิทิน
  */
-const fullCalendar = ref<any>(); //ref calendar
-const calendarOptions = ref<CalendarOptions>({
-  plugins: [
-    dayGridPlugin,
-    timeGridPlugin,
-    interactionPlugin, // needed for dateClick
-    listPlugin,
-  ],
-  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: "#4CAF4F",
-  eventTextColor: "#fff",
-  eventBorderColor: "#50a5fc",
-  displayEventTime: false,
-  editable: true,
-  events: [],
-});
+const fullCalendar = ref<any>() //ref calendar
+const calendarOptions = ref<any>({
+	plugins: [
+		dayGridPlugin,
+		timeGridPlugin,
+		interactionPlugin, // needed for dateClick
+		listPlugin,
+	],
+	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: "#4CAF4F",
+	eventTextColor: "#fff",
+	eventBorderColor: "#50a5fc",
+	displayEventTime: false,
+	editable: true,
+	events: [],
+})
 
 const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
+	month: new Date().getMonth(),
+	year: new Date().getFullYear(),
+})
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
-  showLoader();
-  await http
-    .post(config.API.leaveCalendar(), {
-      year: dateMonth.value.year,
-    })
-    .then((res) => {
-      mainData.value = res.data.result;
+	showLoader()
+	await http
+		.post(config.API.leaveCalendar(), {
+			year: dateMonth.value.year,
+		})
+		.then(res => {
+			mainData.value = res.data.result
 
-      const double_name = [
-        ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
-      ];
-      filterLists.value = [];
-      for (let i = 1; i <= double_name.length; i++) {
-        const name = double_name[i - 1];
-        const filterName = {
-          id: name,
-          name: convertKeycloakId(name),
-          color: name === keycloakId.value ? "green" : "grey",
-        };
+			const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))]
+			filterLists.value = []
+			for (let i = 1; i <= double_name.length; i++) {
+				const name = double_name[i - 1]
+				const filterName = {
+					id: name,
+					name: convertKeycloakId(name),
+					color: name === keycloakId.value ? "green" : "grey",
+				}
+				filterLists.value.push(filterName)
+			}
+			console.log(double_name)
 
-        filterLists.value.push(filterName);
-      }
+			if (filterVal.value.length !== 0) {
+				const data = mainData.value.filter((e: any) => e.keycloakId === keycloakId.value)
 
-      if (filterVal.value.length !== 0) {
-        const data = mainData.value.filter(
-          (e: any) => e.keycloakId === keycloakId.value
-        );
+				const event = data
+					.filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
+					.map((e: DataCalendar) => ({
+						id: e.id,
+						title: `${e.fullName} (${e.leaveTypeName})`,
+						start: e.leaveStartDate,
+						end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+						allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
+						color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+						textColor: "black",
+					}))
+				calendarOptions.value.events = event
+				console.log(calendarOptions.value.events)
+			}
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+	await fetchData()
+}
 
-        const event = data
-          .filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
-          .map((e: DataCalendar) => ({
-            id: e.id,
-            title: `${e.fullName} (${e.leaveTypeName})`,
-            start: e.leaveStartDate,
-            end: new Date(
-              new Date(e.leaveEndDate).setHours(23, 59, 59)
-            ).toISOString(),
-            allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
-            color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
-            textColor: "black",
-          }));
-        calendarOptions.value.events = event;
-      }
-    })
-
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+/**
+ * fetch วันหยุดในปฏิทิน
+ */
+const fetchData = async () => {
+	showLoader()
+	await http
+		.get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1))
+		.then(res => {
+			const dataNormal = res.data.result.normal
+			const dataSixDays = res.data.result.sixDays
+			const data = dataNormal
+			const event = data.map((e: any) => ({
+				id: e.id,
+				title: `${e.name} `,
+				start: e.holidayDate,
+				end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
+				allDay: e.holidayDate === e.holidayDate ? true : false,
+				color: " #CCE5FF",
+				textColor: "#0080FF",
+			}))
+			calendarOptions.value.events = [...calendarOptions.value.events, ...event]
+			// const dataSix = dataSixDays
+			// const eventSix = dataSix.map((e: any) => ({
+			// 	id: e.id,
+			// 	title: `${e.name} `,
+			// 	start: e.holidayDate,
+			// 	end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(),
+			// 	allDay: e.holidayDate === e.holidayDate ? true : false,
+			// 	color: "#FFE5CC",
+			// 	textColor: "#FF8000",
+			// }))
+			// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
+			console.log(calendarOptions.value.events)
+		})
+		.catch(e => {
+			messageError($q, e)
+		})
+		.finally(async () => {
+			hideLoader()
+		})
 }
 
 function convertKeycloakId(id: any) {
-  const filterName = mainData.value.find((e: any) => e.keycloakId === id);
-  return filterName?.fullName;
+	const filterName = mainData.value.find((e: any) => e.keycloakId === id)
+	return filterName?.fullName
 }
 
-const leaveType = ref<LeaveType[]>([]);
+const leaveType = ref<LeaveType[]>([])
 /** function เรียกประเภทการลา */
 async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      leaveType.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+	await http
+		.get(config.API.leaveType())
+		.then(async res => {
+			leaveType.value = res.data.result
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
 }
 
 /**
@@ -155,234 +186,172 @@ async function fectOptionType() {
  * @param val datepicker แบบเลือกปีและเดือน
  */
 function monthYearThai(val: DataDateMonthObject) {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
+	if (val == null) return ""
+	else return monthYear2Thai(val.month, val.year)
 }
 
 /** function อัปเดท Calendar */
 async function updateMonth() {
-  await fetchDataCalendar();
-  const calen = fullCalendar.value.getApi();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
+	await fetchDataCalendar()
+	await fetchData()
+	const calen = fullCalendar.value.getApi()
+	const date = new Date(dateMonth.value.year, dateMonth.value.month)
+	calen.gotoDate(date)
 }
 
-const modal = ref<boolean>(false);
-const leaveId = ref<string>("");
+const modal = ref<boolean>(false)
+const leaveId = ref<string>("")
 
 /**
  * function openPopupDateail
  * @param id การลา
  */
 async function onCilckview(id: string) {
-  modal.value = true;
-  leaveId.value = id;
+	modal.value = true
+	leaveId.value = id
 }
 
 /** function closePopup*/
 async function onClickClose() {
-  modal.value = false;
+	modal.value = false
 }
 
 /** filter calendar left */
-const filterLists = ref<any>([]);
-const filterVal = ref<any>([]);
+const filterLists = ref<any>([])
+const filterVal = ref<any>([])
 
 watch(
-  () => filterVal.value,
-  () => {
-    const eventData = filterVal.value.map((item: any) => {
-      return mainData.value
-        .filter(
-          (e: DataCalendar) =>
-            e.keycloakId === item &&
-            e.status != "REJECT" &&
-            e.status != "DELETE"
-        )
-        .map((e) => ({
-          id: e.id,
-          title: `${e.fullName} (${e.leaveTypeName})`,
-          start: e.leaveStartDate,
-          end: new Date(
-            new Date(e.leaveEndDate).setHours(23, 59, 59)
-          ).toISOString(),
-          allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
-          color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
-          textColor: "black",
-        }));
-    });
-    const allEventData = [].concat(...eventData);
-    calendarOptions.value.events = allEventData;
-  }
-);
+	() => filterVal.value,
+	() => {
+		const eventData = filterVal.value.map((item: any) => {
+			return mainData.value
+				.filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE")
+				.map(e => ({
+					id: e.id,
+					title: `${e.fullName} (${e.leaveTypeName})`,
+					start: e.leaveStartDate,
+					end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(),
+					allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
+					color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+					textColor: "black",
+				}))
+		})
+		const allEventData = [].concat(...eventData)
+		calendarOptions.value.events = allEventData
+	}
+)
 
 onMounted(async () => {
-  filterVal.value.push(keycloakId.value);
-
-  await fetchDataCalendar();
-  await fectOptionType();
-});
+	filterVal.value.push(keycloakId.value)
+	await fetchDataCalendar()
+	await fectOptionType()
+})
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
-      <q-card class="col-12" flat bordered>
-        <div class="q-gutter-sm col-12">
-          <q-list class="rounded-borders q-pt-sm" dense>
-            <q-item
-              v-for="(item, i) in filterLists"
-              :key="i"
-              tag="label"
-              v-ripple
-            >
-              <q-checkbox
-                size="sm"
-                v-model="filterVal"
-                :val="item.id"
-                :color="item.color"
-              />
-              <q-item-section>
-                <q-item-label>{{ item.name }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </div>
-      </q-card>
-    </div>
+	<div class="row">
+		<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
+			<q-card class="col-12" flat bordered>
+				<div class="q-gutter-sm col-12">
+					<q-list class="rounded-borders q-pt-sm" dense>
+						<q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple>
+							<q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" />
+							<q-item-section>
+								<q-item-label>{{ item.name }}</q-item-label>
+							</q-item-section>
+						</q-item>
+					</q-list>
+				</div>
+			</q-card>
+		</div>
 
-    <div class="col-sm-12 col-md-9 row">
-      <div class="q-mt-sm col-12">
-        <div class="row col-12 q-gutter-sm">
-          <div class="demo-app-main">
-            <q-card
-              bordered
-              flat
-              class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0"
-            >
-              <div class="items-center col-12 row q-col-gutter-sm">
-                <!-- filter เลือกเดือนปี -->
-                <datepicker
-                  v-model="dateMonth"
-                  :locale="'th'"
-                  autoApply
-                  month-picker
-                  :enableTimePicker="false"
-                  @update:modelValue="updateMonth"
-                >
-                  <template #year="{ year }">{{ year + 543 }}</template>
-                  <template #year-overlay-value="{ value }">{{
-                    parseInt(value + 543)
-                  }}</template>
-                  <template #trigger>
-                    <q-input
-                      :model-value="monthYearThai(dateMonth)"
-                      dense
-                      outlined
-                      bg-color="white"
-                      style="width: 130px"
-                    >
-                      <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-card>
+		<div class="col-sm-12 col-md-9 row">
+			<div class="q-mt-sm col-12">
+				<div class="row col-12 q-gutter-sm">
+					<div class="demo-app-main">
+						<q-card bordered flat class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0">
+							<div class="items-center col-12 row q-col-gutter-sm">
+								<!-- filter เลือกเดือนปี -->
+								<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" @update:modelValue="updateMonth">
+									<template #year="{ year }">{{ year + 543 }}</template>
+									<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
+									<template #trigger>
+										<q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px">
+											<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-card>
 
-            <div class="main-content">
-              <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}`"
-                  >
-                    <div
-                      class="textHover col-10"
-                      @click="onCilckview(arg.event.id)"
-                    >
-                      {{ arg.event.title }}
-                    </div>
-                  </div>
-                </template>
-              </FullCalendar>
-            </div>
-          </div>
-        </div>
-        <div class="row q-col-gutter-lg justify-end">
-          <div class="items-center row">
-            <q-icon
-              size="10px"
-              color="green-7"
-              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="grey-6"
-              name="mdi-circle"
-              class="q-mr-sm"
-            />
-            <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+						<div class="main-content">
+							<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}`">
+										<div class="textHover col-10" @click="onCilckview(arg.event.id)">
+											{{ arg.event.title }}
+										</div>
+									</div>
+								</template>
+							</FullCalendar>
+						</div>
+					</div>
+				</div>
+				<div class="row q-col-gutter-lg justify-end">
+					<div class="items-center row">
+						<q-icon size="10px" color="blue" 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="green-7" 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="grey-6" name="mdi-circle" class="q-mr-sm" />
+						<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <DialogDetail
-    :modal="modal"
-    :leaveId="leaveId"
-    :onClickClose="onClickClose"
-    :leaveType="leaveType"
-  />
+	<DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" />
 </template>
 
 <style scope lang="scss">
 .main-content {
-  height: 70vh;
+	height: 70vh;
 }
 
 .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;
@@ -391,123 +360,123 @@ onMounted(async () => {
 }
 
 .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;
+	border: 1px solid #ebe9f1;
 }
 
 .textHover:hover {
-  color: var(--q-primary);
+	color: var(--q-primary);
 }
 </style>