calendar รายการลา

src/api/09_leave/api.leave.ts

@@ -22,4 +22,5 @@ export default {
   leaveList: () => `${leave}/admin`,
   leaveListDelete: () => `${leave}/admin/delete`,
   leaveListById: (id: string) => `${leave}/admin/${id}`,
+  leaveCalendar: () => `${leave}/user/calendar`,
 };

src/modules/09_leave/components/2_Leave/Calendar.vue

@@ -7,14 +7,22 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
-
+import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
-
+import config from "@/app.config";
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+import { useRouter } from "vue-router";
-const { monthYear2Thai } = mixin;
 
 import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
+const leaveStore = useLeavelistDataStore();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
+
+const $q = useQuasar();
+const router = useRouter();
 /**
  * Option ของปฏิทิน
  */
@@ -47,97 +55,110 @@ const calendarOptions = ref<CalendarOptions>({
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
   editable: true,
-  events: [
+  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",
-    },
-  ],
 });
 
-/**
+const dateMonth = ref<DataDateMonthObject>({
- * ตัวแปรทั้งหมด
+  month: new Date().getMonth(),
- */
+  year: new Date().getFullYear(),
-const modalCancel = ref(false);
+});
-const title = ref("");
+const mainData = ref<any>([]);
-const location = ref("บ้าน");
+
-const subject = ref("ลาป่วย");
+async function fetchDataCalendar() {
-const dateStart = ref("20 ส.ค. 2566");
+  showLoader();
-const dateEnd = ref("21 ส.ค. 2566");
+  await http
-const numDate = ref("20");
+    .post(config.API.leaveCalendar(), {
-const place = ref("บ้าน");
+      year: dateMonth.value.year,
-const phone = ref("000-00000000");
+    })
-const reason = ref("ยกเลิกการลา");
+    .then((res) => {
-const model = ref(null);
+      mainData.value = res.data.result;
-const modeCancel = ref(true);
+
+      const double_name = [
+        ...new Set(mainData.value.map((item: any) => item.fullName)),
+      ];
+
+      for (let i = 1; i <= double_name.length; i++) {
+        filterLists.value = [];
+        const name = double_name[i - 1];
+        const filterName = {
+          id: name,
+          name: name,
+          color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey",
+        };
+        filterLists.value.push(filterName);
+      }
+
+      const data = mainData.value.filter(
+        (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
+      );
+
+      const event = data.map((e: any) => ({
+        id: e.id,
+        title: `${e.fullName} (${e.leaveTypeName}) `,
+        start: e.leaveStartDate,
+        end: e.leaveEndDate,
+        allDay: true,
+        color: leaveStore.colorType(e.leaveTypeId),
+        textColor: "black",
+      }));
+      console.log(event);
+
+      calendarOptions.value.events = event;
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      const calen = fullCalendar.value.getApi();
+      const date = new Date(dateMonth.value.year, dateMonth.value.month);
+      calen.gotoDate(date);
+      hideLoader();
+    });
+}
+
+// filter calendar left
+const filterLists = ref<any[]>([]);
+const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
+
+watch(
+  () => filterVal.value,
+  () => {
+    const eventData = filterVal.value.map((item: any) => {
+      return mainData.value
+        .filter((e: any) => e.fullName === item)
+        .map((e: any) => ({
+          id: e.id,
+          title: `${e.fullName} (${e.leaveTypeName}) `,
+          start: e.leaveStartDate,
+          end: e.leaveEndDate,
+          color: leaveStore.colorType(e.leaveTypeId),
+          textColor: "black",
+          allDay: true,
+        }));
+    });
+    calendarOptions.value.events = eventData[0];
+  }
+);
+
+function redirectToDetail(id: string) {
+  router.push(`leave/detail/${id}`);
+}
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  if (fullCalendar !== undefined) {
+  await fetchDataCalendar();
-    const calen = fullCalendar.value.getApi();
+  // if (fullCalendar !== undefined) {
-    const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  //   const calen = fullCalendar.value.getApi();
-    calen.gotoDate(date);
+  //   const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  }
+  //   calen.gotoDate(date);
+  // }
 });
 
-function changCalendar() {
+async function changCalendar() {
-  const calen = fullCalendar.value.getApi();
+  await fetchDataCalendar();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
 }
 
 /**
@@ -153,54 +174,11 @@ function changCalendar() {
  * ฟังก์ชั่นยกเลิก model
  * @param text
  */
-const cancel = async (text: string) => {
+
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-};
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
  */
-const view = async (text: string) => {
-  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"]);
-
-const dateMonth = ref<DataDateMonthObject>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-
-const dateYear = ref<number>(new Date().getFullYear());
-const updateMonth = async (e: DataDateMonthObject) => {
-  if (e != null) {
-    dateYear.value = e.year;
-
-    changCalendar();
-  }
-};
 
 const monthYearThai = (val: DataDateMonthObject) => {
   if (val == null) return "";
@@ -242,7 +220,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   autoApply
                   month-picker
                   :enableTimePicker="false"
-                  @update:modelValue="updateMonth"
+                  @update:modelValue="changCalendar"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -278,60 +256,29 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="row col-12 items-center no-wrap"
                   :style="`background: + ${arg.event.color}`"
                 >
-                  <!-- <b>{{ arg.timeText }}</b> -->
+                  <div
-                  <div class="textHover col-10" @click="view(arg.event.title)">
+                    class="textHover col-10"
+                    @click="redirectToDetail(arg.event.id)"
+                  >
                     {{ arg.event.title }}
                   </div>
-                  <q-btn
+                  <q-tooltip>{{ arg.event.title }} </q-tooltip>
-                    dense
-                    v-if="arg.event.groupId == 1"
-                    icon="mdi-close"
-                    flat
-                    round
-                    size="8px"
-                    @click="cancel(arg.event.title)"
-                  />
                 </div>
               </template>
             </FullCalendar>
-            <div class="row q-col-gutter-lg justify-end">
+            <div class="row q-col-gutter-sm">
-              <div class="items-center row">
+              <div
-                <q-icon
+                v-for="(item, index) in leaveStore.leaveType"
-                  size="10px"
+                :key="index"
-                  color="light-green"
+                class="items-center col-3"
-                  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"
+                  class="q-mr-xs"
+                  :style="`color: ${leaveStore.colorType(item.id)}`"
                 />
-                <span class="text-caption text-grey-8">สถานะใหม่</span>
+                <span class="text-caption">{{ item.name }}</span>
               </div>
             </div>
           </div>
@@ -339,84 +286,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
       </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>
 </template>
 
 <style scope lang="scss">
@@ -580,6 +449,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
 }
 
 .textHover:hover {
-  color: #18a259;
+  color: #f3faf6;
 }
 </style>

src/modules/09_leave/components/2_Leave/ToolBarLeave.vue

@@ -103,6 +103,7 @@ async function fetchOption() {
     .get(config.API.leaveType())
     .then((res) => {
       const data = res.data.result;
+      leaveStore.leaveType = data;
       optionTypeMain.value = [
         { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
       ];

src/modules/09_leave/stores/LeaveStore.ts

@@ -23,6 +23,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
 
+  const leaveType = ref<any>([]);
+
   /**
    * ฟังก์ชั่น fetchListLeave
    * @param data รับข้อมูลจาก Page
@@ -141,6 +143,34 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     }
   }
 
+  function colorType(val: string) {
+    const dataType = leaveType.value.find((item: any) => item.id === val);
+    switch (dataType.code) {
+      case "LV-001":
+        return "#FFD1D1"; // Light Red
+      case "LV-002":
+        return "#C8E6C9"; // Light Green
+      case "LV-003":
+        return "#BBDEFB"; // Light Blue
+      case "LV-004":
+        return "#E1BEE7"; // Light Purple
+      case "LV-005":
+        return "#DCEDC8"; // Light Lime
+      case "LV-006":
+        return "#FFE0B2"; // Light Orange
+      case "LV-007":
+        return "#FFECB3"; // Light Amber
+      case "LV-008":
+        return "#CFD8DC"; // Light Blue Grey
+      case "LV-009":
+        return "#FFCCBC"; // Light Deep Orange
+      case "LV-010":
+        return "#FFF9C4"; // Light Amber Lighten
+      case "LV-011":
+        return "#B2DFDB"; // Light Teal
+    }
+  }
+
   return {
     /** ข้อมูล Main*/
     tabMenu,
@@ -157,5 +187,8 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     /** Function แปลงค่า */
     convertLeave,
     convertLeaveDaytype,
+
+    leaveType,
+    colorType,
   };
 });