calendar split REJECT status

src/modules/05_leave/components/Calendar.vue

@@ -106,15 +106,17 @@ async function fetchDataCalendar() {
         (e: any) => e.keycloakId === keycloakId.value
       );
 
-      const event = data.map((e: DataCalendar) => ({
+      const event = data
-        id: e.id,
+        .filter((x: any) => x.status != "REJECT")
-        title: `${e.fullName} (${e.leaveTypeName})`,
+        .map((e: DataCalendar) => ({
-        start: e.leaveStartDate,
+          id: e.id,
-        end: e.leaveEndDate,
+          title: `${e.fullName} (${e.leaveTypeName})`,
-        allDay: true,
+          start: e.leaveStartDate,
-        color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+          end: e.leaveEndDate,
-        textColor: "black",
+          allDay: true,
-      }));
+          color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
+          textColor: "black",
+        }));
       calendarOptions.value.events = event;
     })
 
@@ -214,7 +216,7 @@ onMounted(async () => {
 <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>
+      <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
@@ -242,7 +244,11 @@ onMounted(async () => {
       <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">
+            <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