From 908e756c424c21178e92dec78f21cf241cddd59d Mon Sep 17 00:00:00 2001
From: AnandaTon <ananda@frappet.com>
Date: Mon, 4 Dec 2023 17:58:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=82=E0=B8=B5=E0=B8=A2=E0=B8=99fu?=
 =?UTF-8?q?nction=20=E0=B8=A3=E0=B8=AD=E0=B8=95=E0=B9=88=E0=B8=AD=20api=20?=
 =?UTF-8?q?=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/api/leave/api.leave.ts                    |   2 +
 src/modules/05_leave/componenst/Calendar.vue  | 741 ++++++++----------
 .../05_leave/componenst/Forms/Form.vue        |  24 +-
 src/modules/05_leave/views/AddPage.vue        |  90 +--
 4 files changed, 404 insertions(+), 453 deletions(-)

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index f678737..14d58cf 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -19,4 +19,6 @@ export default {
 	leaveCanceById: (id: string) => `${leave}/user/delete/${id}`,
 	leaveStats: () => `${leave}/user/summary`,
 	leaveUser: () => `${leave}/user`,
+	leaveUserId: (id: string) => `${leave}/user/${id}`,
+	leaveProfile: () => `${leave}/user/profile`,
 }
diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index ceb3b72..9a0df6c 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,153 +1,171 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { ref, onMounted } from "vue"
+import { useQuasar } from "quasar"
+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 { useCounterMixin } from "@/stores/mixin";
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
+import { useCounterMixin } from "@/stores/mixin"
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
-  mixin;
+const mixin = useCounterMixin()
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
 
-const $q = useQuasar();
+const $q = useQuasar()
 
 /**
  * ตัวแปรทั้งหมด
  */
-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 typeId = ref<string>("eefa2f4f-c507-4a42-8567-4fadb8dc1f50")
+const modalCancel = ref<boolean>(false)
+const title = ref<string>("")
+const location = ref<string>("บ้าน")
+const subject = ref<string>("ลาป่วย")
+const dateStart = ref<string>("20 ส.ค. 2566")
+const dateEnd = ref<string>("21 ส.ค. 2566")
+const numDate = ref<string>("20")
+const place = ref<string>("บ้าน")
+const phone = ref<string>("000-00000000")
+const reason = ref<string>("ยกเลิกการลา")
+const model = ref(null)
+const modeCancel = ref<boolean>(true)
 
-const dateYear = ref<number>(new Date().getFullYear());
+const dateYear = ref<number>(new Date().getFullYear())
 
 async function fetchDataCalendar() {
-  showLoader;
-  await http
-    .post(config.API.leaveCalendar(), { year: dateYear.value })
-    .then((res) => {
-      console.log(res);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+	showLoader
+	await http
+		.post(config.API.leaveCalendar(), { year: dateYear.value })
+		.then(res => {
+			console.log(res)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+}
+
+async function fetchDataDetail() {
+	showLoader
+	await http
+		.get(config.API.leaveUserId(typeId.value), {})
+		.then(res => {
+			let data = res.data.result
+			title.value = data.fullname
+			location.value = data.leaveWrote
+			console.log(res)
+		})
+		.catch(err => {
+			messageError($q, err)
+		})
+		.finally(() => {
+			hideLoader()
+		})
 }
 
 /**
  * Option ของปฏิทิน
  */
-const fullCalendar = ref<any>(); //ref calendar
+const fullCalendar = ref<any>() //ref calendar
 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: "2",
-      title: "ลาป่วย",
-      start: "2023-11-24",
-      end: "2023-11-25",
-      allDay: true,
-      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",
-    },
-  ],
-});
+	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: "2",
+			title: "ลาป่วย",
+			start: "2023-11-24",
+			end: "2023-11-25",
+			allDay: true,
+			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",
+		},
+	],
+})
 
 const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
+	month: new Date().getMonth(),
+	year: new Date().getFullYear(),
+})
 
-const emit = defineEmits(["update:dateYear"]);
+const emit = defineEmits(["update:dateYear"])
 
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @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 updateMonth(e: DataDateMonthObject) {
-  // console.log(dateMonth.value);
-  if (e != null) {
-    dateYear.value = e.year;
-    emit("update:dateYear", e.year);
-    const calen = fullCalendar.value.getApi();
-    const date = new Date(dateMonth.value.year, dateMonth.value.month);
-    calen.gotoDate(date);
-  }
+	// console.log(dateMonth.value);
+	if (e != null) {
+		dateYear.value = e.year
+		emit("update:dateYear", e.year)
+		const calen = fullCalendar.value.getApi()
+		const date = new Date(dateMonth.value.year, dateMonth.value.month)
+		calen.gotoDate(date)
+	}
 }
 
 /**
@@ -155,173 +173,116 @@ function updateMonth(e: DataDateMonthObject) {
  * @param text
  */
 async function cancel(text: string) {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = true
 }
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
  */
 async function view(text: string) {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = false;
+	title.value = text
+	modalCancel.value = true
+	modeCancel.value = false
 }
 
 // filter calendar left
 const filterLists = ref<any[]>([
-  {
-    id: "x1",
-    name: "นางสาววารุณี แต้มคู",
-    color: "green",
-  },
-  {
-    id: "x2",
-    name: "นางสาวสมศรี ใจดี",
-    color: "grey",
-  },
-  {
-    id: "x3",
-    name: "นายสมชาย สุขใจ",
-    color: "grey",
-  },
-]);
-const filterVal = ref(["x1"]);
+	{
+		id: "x1",
+		name: "นางสาววารุณี แต้มคู",
+		color: "green",
+	},
+	{
+		id: "x2",
+		name: "นางสาวสมศรี ใจดี",
+		color: "grey",
+	},
+	{
+		id: "x3",
+		name: "นายสมชาย สุขใจ",
+		color: "grey",
+	},
+])
+const filterVal = ref(["x1"])
 
 onMounted(async () => {
-  // await fetchDataCalendar();
-});
+	// await fetchDataCalendar();
+	// await fetchDataDetail()
+})
 </script>
 
 <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"
-              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>
+	<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" 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>
 
-        <!-- show value filterVal -->
-        <!-- <div class="q-px-sm q-mt-sm">
+				<!-- show value filterVal -->
+				<!-- <div class="q-px-sm q-mt-sm">
                 Your selection is: <strong>{{ filterVal }}</strong>
               </div> -->
-      </q-card>
-    </div>
+			</q-card>
+		</div>
 
-    <div class="col-sm-12 col-md-9">
-      <div class="q-mt-sm">
-        <div class="row col-12 q-gutter-sm">
-          <div class="demo-app-main">
-            <q-card bordered flat class="q-pa-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">
+			<div class="q-mt-sm">
+				<div class="row col-12 q-gutter-sm">
+					<div class="demo-app-main">
+						<q-card bordered flat class="q-pa-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}`"
-                  >
-                    <!-- <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>
-        <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 class="items-center row">
+						<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}`">
+										<!-- <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>
+				<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 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>
@@ -329,122 +290,90 @@ onMounted(async () => {
 				<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>
-  </div>
+				</div>
+			</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>
 
 <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;
@@ -453,123 +382,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>
diff --git a/src/modules/05_leave/componenst/Forms/Form.vue b/src/modules/05_leave/componenst/Forms/Form.vue
index d65003c..8a31a43 100644
--- a/src/modules/05_leave/componenst/Forms/Form.vue
+++ b/src/modules/05_leave/componenst/Forms/Form.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, onMounted } from "vue"
 import { useCounterMixin } from "@/stores/mixin"
+import { useQuasar } from "quasar"
 import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
 import { useLeaveStore } from "@/modules/05_leave/store"
+import http from "@/plugins/http"
+import config from "@/app.config"
+
+const $q = useQuasar()
 const mixin = useCounterMixin()
 const dataStore = useLeaveStore()
-const { date2Thai } = mixin
+const { date2Thai, success, messageError } = mixin
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -32,6 +37,21 @@ const formData = reactive<FormData>({
 	leaveUse: "1",
 	leaveRemaining: "1",
 })
+
+onMounted(async () => {
+	await FetchProfile()
+})
+
+async function FetchProfile() {
+	await http
+		.post(config.API.leaveProfile(), { type: "08db80fe-919b-4439-856f-3fdb86ff99f9" })
+		.then((res: any) => {
+			success($q, "บันทึกสำเร็จ")
+		})
+		.catch((e: any) => {
+			messageError($q, e)
+		})
+}
 </script>
 <template>
 	<q-card bordered class="q-pa-md bg-grey-1">
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index 37e5c6f..fb234ab 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -37,8 +37,8 @@ const modelSpecific = ref<string>("")
 
 const saveAbsence = () => {
 	$q.dialog({
-		title: "ยืนยันการยื่นข้อมูลลาออก",
-		message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
+		title: "ยืนยันการยื่นข้อมูลลา",
+		message: "ต้องการยื่นข้อมูลลานี้ใช่หรือไม่?",
 		cancel: {
 			flat: true,
 			color: "negative",
@@ -77,49 +77,49 @@ const onSubmit = async (formData: any) => {
 async function saveformdata(formData: any) {
 	await http
 		.post(config.API.leaveUser(), {
-			type: formData.id ?? "",
-			leaveStartDate: formData.leaveStartDate ?? "",
-			leaveEndDate: formData.leaveEndDate ?? "",
-			leaveWrote: formData.leaveWrote ?? "" ?? "", //เขียนที่
-			leaveAddress: formData.leaveAddress ?? "", //สถานที่ติดต่อขณะลา
-			leaveNumber: formData.leaveNumber ?? "", //หมายเลขที่ติดต่อขณะลา
-			leaveDetail: formData.leaveDetail ?? "", //รายละเอียดการลา
-			leaveDocument: formData.leaveDocument ?? "", //อัปโหลดเอกสารประกอบรายละเอียด
-			leaveDraftDocument: formData.leaveDraftDocument ?? "", //อัปโหลดแบบฟอร์มการลา
-			leaveSalaryText: formData.leaveSalaryText ?? "", //เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน)
-			wifeDayName: formData.wifeDayName ?? "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-			wifeDayDateBorn: formData.wifeDayDateBorn ?? "", //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
-			restDayOldTotal: formData.restDayOldTotal ?? "", //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
-			restDayCurrentTotal: formData.restDayCurrentTotal ?? "", //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
-			ordainDayStatus: formData.ordainDayStatus ?? "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
-			ordainDayLocationName: formData.ordainDayLocationName ?? "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
-			ordainDayLocationAddress: formData.ordainDayLocationAddress ?? "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
-			ordainDayLocationNumber: formData.ordainDayLocationNumber ?? "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
-			ordainDayOrdination: formData.ordainDayOrdination ?? "", //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
-			ordainDayBuddhistLentName: formData.ordainDayBuddhistLentName ?? "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
-			ordainDayBuddhistLentAddress: formData.ordainDayBuddhistLentAddress ?? "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
-			hajjDayStatus: formData.hajjDayStatus ?? "", //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
-			absentDaySummon: formData.absentDaySummon ?? "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayLocation: formData.absentDayLocation ?? "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayRegistorDate: formData.absentDayRegistorDate ?? "", //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayGetIn: formData.absentDayGetIn ?? "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			absentDayAt: formData.absentDayAt ?? "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
-			studyDaySubject: formData.studyDaySubject ?? "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayDegreeLevel: formData.studyDayDegreeLevel ?? "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayUniversityName: formData.studyDayUniversityName ?? "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayTrainingSubject: formData.studyDayTrainingSubject ?? "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayTrainingName: formData.studyDayTrainingName ?? "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayCountry: formData.studyDayCountry ?? "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			studyDayScholarship: formData.studyDayScholarship ?? "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
-			coupleDayName: formData.coupleDayName ?? "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayPosition: formData.coupleDayPosition ?? "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayLevel: formData.coupleDayLevel ?? "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
-			coupleDayLevelCountry: formData.coupleDayLevelCountry ?? "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
-			coupleDayCountryHistory: formData.coupleDayCountryHistory ?? "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
-			coupleDayTotalHistory: formData.coupleDayTotalHistory ?? "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
-			coupleDayStartDateHistory: formData.coupleDayStartDateHistory ?? "", //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
-			coupleDayEndDateHistory: formData.coupleDayEndDateHistory ?? "", //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
-			coupleDaySumTotalHistory: formData.coupleDaySumTotalHistory ?? "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+			type: formData.id ?? null,
+			leaveStartDate: formData.leaveStartDate ?? null,
+			leaveEndDate: formData.leaveEndDate ?? null,
+			leaveWrote: formData.leaveWrote ?? null ?? null, //เขียนที่
+			leaveAddress: formData.leaveAddress ?? null, //สถานที่ติดต่อขณะลา
+			leaveNumber: formData.leaveNumber ?? null, //หมายเลขที่ติดต่อขณะลา
+			leaveDetail: formData.leaveDetail ?? null, //รายละเอียดการลา
+			leaveDocument: formData.leaveDocument ?? null, //อัปโหลดเอกสารประกอบรายละเอียด
+			leaveDraftDocument: formData.leaveDraftDocument ?? null, //อัปโหลดแบบฟอร์มการลา
+			leaveSalaryText: formData.leaveSalaryText ?? null, //เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน)
+			wifeDayName: formData.wifeDayName ?? null, //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+			wifeDayDateBorn: formData.wifeDayDateBorn ?? null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+			restDayOldTotal: formData.restDayOldTotal ?? null, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+			restDayCurrentTotal: formData.restDayCurrentTotal ?? null, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+			ordainDayStatus: formData.ordainDayStatus ?? null, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+			ordainDayLocationName: formData.ordainDayLocationName ?? null, //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+			ordainDayLocationAddress: formData.ordainDayLocationAddress ?? null, //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+			ordainDayLocationNumber: formData.ordainDayLocationNumber ?? null, //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+			ordainDayOrdination: formData.ordainDayOrdination ?? null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+			ordainDayBuddhistLentName: formData.ordainDayBuddhistLentName ?? null, //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+			ordainDayBuddhistLentAddress: formData.ordainDayBuddhistLentAddress ?? null, //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+			hajjDayStatus: formData.hajjDayStatus ?? null, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
+			absentDaySummon: formData.absentDaySummon ?? null, //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+			absentDayLocation: formData.absentDayLocation ?? null, //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+			absentDayRegistorDate: formData.absentDayRegistorDate ?? null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+			absentDayGetIn: formData.absentDayGetIn ?? null, //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+			absentDayAt: formData.absentDayAt ?? null, //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+			studyDaySubject: formData.studyDaySubject ?? null, //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayDegreeLevel: formData.studyDayDegreeLevel ?? null, //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayUniversityName: formData.studyDayUniversityName ?? null, //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayTrainingSubject: formData.studyDayTrainingSubject ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayTrainingName: formData.studyDayTrainingName ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayCountry: formData.studyDayCountry ?? null, //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			studyDayScholarship: formData.studyDayScholarship ?? null, //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+			coupleDayName: formData.coupleDayName ?? null, //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+			coupleDayPosition: formData.coupleDayPosition ?? null, //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+			coupleDayLevel: formData.coupleDayLevel ?? null, //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+			coupleDayLevelCountry: formData.coupleDayLevelCountry ?? null, //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+			coupleDayCountryHistory: formData.coupleDayCountryHistory ?? null, //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+			coupleDayTotalHistory: formData.coupleDayTotalHistory ?? null, //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+			coupleDayStartDateHistory: formData.coupleDayStartDateHistory ?? null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+			coupleDayEndDateHistory: formData.coupleDayEndDateHistory ?? null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+			coupleDaySumTotalHistory: formData.coupleDaySumTotalHistory ?? null, //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
 			leaveSalary: formData.leaveSalary,
 		})
 		.then((res: any) => {