From cffc411fa8308ad58fc914a73ea83d18bd52d4b4 Mon Sep 17 00:00:00 2001 From: amel Date: Wed, 28 Aug 2024 12:33:48 +0800 Subject: [PATCH] upd: indicator kelender Deskripsi: - indicator kalender sesuai data No Issues --- src/app/api/calender/indicator/route.ts | 42 +++++++++++- src/module/calender/lib/api_calender.ts | 6 ++ .../calender/ui/date_event_division.tsx | 65 +++++++++++++++---- 3 files changed, 98 insertions(+), 15 deletions(-) diff --git a/src/app/api/calender/indicator/route.ts b/src/app/api/calender/indicator/route.ts index 5ca5850..317ba45 100644 --- a/src/app/api/calender/indicator/route.ts +++ b/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 }); } } diff --git a/src/module/calender/lib/api_calender.ts b/src/module/calender/lib/api_calender.ts index 7ad2c94..063ac84 100644 --- a/src/module/calender/lib/api_calender.ts +++ b/src/module/calender/lib/api_calender.ts @@ -41,4 +41,10 @@ export const funEditCalenderById = async (path: string, data: IEditCalender) => body: JSON.stringify(data), }); 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); } \ No newline at end of file diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx index 56699eb..5a53bcd 100644 --- a/src/module/calender/ui/date_event_division.tsx +++ b/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([]) + const [isListTgl, setListTgl] = useState([]) const router = useRouter() const param = useParams<{ id: string, detail: string }>() const [isDate, setDate] = useSetState(moment().format('YYYY-MM-DD')) + const [isMonth, setMonth] = useState(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 ( - +
{day}
 ); }; + + + return ( - { change(val) }} + onDateChange={(val) => { changeMonth(val) }} /> Event - {loading ? + {loading ? Array(6) - .fill(null) - .map((_, i) => ( - - - - )) + .fill(null) + .map((_, i) => ( + + + + )) : _.isEmpty(isData) ?