upd: indicator kelender

Deskripsi:
- indicator kalender sesuai data

No Issues

src/app/api/calender/indicator/route.ts

@@ -1,4 +1,7 @@
+import { prisma } from "@/module/_global";
 import { funGetUserByCookies } from "@/module/auth";
+import _ from "lodash";
+import moment from "moment";
 import { NextResponse } from "next/server";
 
 
@@ -10,12 +13,45 @@ export async function GET(request: Request) {
         }
 
         const { searchParams } = new URL(request.url);
+        const idDivision = searchParams.get("division");
+        const date = searchParams.get("date");
 
-        const id = searchParams.get("id");
+        const awalDate = moment(date).format('YYYY-MM') + '-01'
+        const akhirDate = moment(awalDate).add(1, 'M').format('YYYY-MM-DD')
 
-        return NextResponse.json({ success: true, data: null }, { status: 200 });
+
+        const cekDivision = await prisma.division.count({
+            where: {
+                id: String(idDivision),
+                isActive: true
+            }
+        })
+
+        if (cekDivision == 0) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan divisi, data tidak ditemukan" }, { status: 404 });
+        }
+
+        const data = await prisma.divisionCalendar.findMany({
+            where: {
+                isActive: true,
+                idDivision: String(idDivision),
+                dateStart: {
+                    gte: new Date(awalDate),
+                    lte: new Date(akhirDate),
+                }
+            }
+        })
+
+        const dataGroup = _.map(_.groupBy(data, "dateStart"), (v: any) => ({
+            dateContent: v[0].dateStart
+        }))
+
+        const result = dataGroup.map(a => moment(a.dateContent).format('YYYY-MM-DD'));
+
+
+        return NextResponse.json({ success: true, message: "Berhasil mendapatkan list acara", data: result }, { status: 200 });
     } catch (error) {
-        return NextResponse.json({ success: false, message: "" }, { status: 401 });
+        return NextResponse.json({ success: false, message: "Gagal mendapatkan list acara" }, { status: 401 });
     }
 }
 

src/module/calender/lib/api_calender.ts

@@ -42,3 +42,9 @@ export const funEditCalenderById = async (path: string, data: IEditCalender) =>
     });
     return await response.json().catch(() => null);
 }
+
+
+export const funGetIndicatorCalender = async (path?: string) => {
+    const response = await fetch(`/api/calender/indicator${(path) ? path : ''}`, { next: { tags: ['hostory'] } });
+    return await response.json().catch(() => null);
+}

src/module/calender/ui/date_event_division.tsx

@@ -3,33 +3,64 @@ import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
-import { funGetAllCalender } from '../lib/api_calender';
+import { funGetAllCalender, funGetIndicatorCalender } from '../lib/api_calender';
 import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
 import _ from 'lodash';
+import toast from 'react-hot-toast';
 
 
 export default function DateEventDivision() {
   const [isData, setData] = useState<IDataCalender[]>([])
+  const [isListTgl, setListTgl] = useState<any[]>([])
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
+  const [isMonth, setMonth] = useState<any>(moment().month() + 1)
   const [loading, setLoading] = useState(true)
 
   const getData = async (tgl: any) => {
     try {
       setLoading(true)
       const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
-      setData(response.data)
+      if (response.success) {
+        setData(response.data)
+      } else {
+        toast.error(response.message)
+      }
       setLoading(false)
     } catch (error) {
       console.log(error)
+      toast.error("Gagal mendapatkan list acara")
     } finally {
       setLoading(false)
     }
   }
 
+  const getIndicator = async (tgl: any) => {
+    try {
+      const response = await funGetIndicatorCalender('?division=' + param.id + '&date=' + tgl)
+      if (response.success) {
+        setListTgl(response.data)
+      } else {
+        setListTgl([])
+        toast.error(response.message)
+      }
+    } catch (error) {
+      console.log(error)
+      toast.error("Gagal mendapatkan list acara")
+    }
+  }
+
+  async function changeMonth(value: any) {
+    const monthKlik = moment(value).format('MM')
+    if (monthKlik != isMonth) {
+      setMonth(monthKlik)
+      getIndicator(value)
+    }
+  }
+
   function change(val: Date) {
     const a: any = moment(new Date(val)).format('YYYY-MM-DD')
     setDate(a)
@@ -39,17 +70,24 @@ export default function DateEventDivision() {
 
   useShallowEffect(() => {
     getData(isDate)
+    getIndicator(isDate)
   }, [])
 
 
   const dayRenderer: DatePickerProps['renderDay'] = (date) => {
-    const day = date.getDate();
+    const coba = moment(date).format('YYYY-MM-DD')
+    const day = date.getDate()
+    const muncul = isListTgl.includes(coba)
+
     return (
-      <Indicator size={6} color="red" offset={-5} disabled={day !== 16}>
+      <Indicator size={6} color="red" offset={-5} disabled={!muncul}>
         <div>{day}</div>
       </Indicator>
     );
   };
+
+
+
   return (
     <Box>
       <Group
@@ -58,8 +96,11 @@ export default function DateEventDivision() {
         py={20}
         style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}
       >
-        <DatePicker size='md' defaultValue={new Date()} renderDay={dayRenderer}
+        <DatePicker size='md'
+          defaultValue={new Date()}
+          renderDay={dayRenderer}
           onChange={(val: any) => { change(val) }}
+          onDateChange={(val) => { changeMonth(val) }}
         />
       </Group>
       <Box>
@@ -68,12 +109,12 @@ export default function DateEventDivision() {
         </Text>
         {loading ?
           Array(6)
-          .fill(null)
+            .fill(null)
-          .map((_, i) => (
+            .map((_, i) => (
-            <Box key={i} mb={10}>
+              <Box key={i} mb={10}>
-              <Skeleton height={100} width={"100%"} radius={"md"} />
+                <Skeleton height={100} width={"100%"} radius={"md"} />
-            </Box>
+              </Box>
-          ))
+            ))
           :
           _.isEmpty(isData)
             ?