diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index 1f21a324..038f8419 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -12,32 +12,22 @@ import { Calendar } from "@/components/ui/calendar"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Plus } from "lucide-react"; import { Checkbox } from "@/components/ui/checkbox"; -import { CalendarCategory } from "./data"; import { EventContentArg } from "@fullcalendar/core"; import EventModal from "./event-modal"; import { useTranslations } from "next-intl"; import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting"; import dayjs from "dayjs"; import { getCookiesDecrypt } from "@/lib/utils"; +import { CalendarCategory } from "./data"; + const wait = () => new Promise((resolve) => setTimeout(resolve, 1000)); interface CalendarViewProps { - events: CalendarEvent[]; + // events: CalendarEvent[]; categories: CalendarCategory[]; } const INITIAL_YEAR = dayjs().format("YYYY"); const INITIAL_MONTH = dayjs().format("M"); -export interface CalendarEvent { - id: string; - title: string; - start: Date; - end: Date; - allDay: boolean; - extendedProps: { - calendar: string; - description?: string; - }; -} export interface AgendaSettingsAPIResponse { id: number; @@ -59,14 +49,11 @@ interface APIResponse { data: AgendaSettingsAPIResponse[] | null; // `data` bisa berupa array atau null } -const CalendarView = ({ events, categories }: CalendarViewProps) => { +const CalendarView = ({ categories }: CalendarViewProps) => { const [selectedCategory, setSelectedCategory] = useState( null ); const [selectedEventDate, setSelectedEventDate] = useState(null); - // const [selectedEvent, setSelectedEvent] = useState( - // null - // ); const roleId = Number(getCookiesDecrypt("urie")) || 0; const [apiEvents, setApiEvents] = useState([]); const [loading, setLoading] = useState(false); @@ -84,36 +71,47 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { { title: "Create New theme", id: "104", tag: "etc" }, ]); + const [calendarEvents, setCalendarEvents] = useState([]); + useEffect(() => { getCalendarEvents(); - }); + }, []); + const getCalendarEvents = async () => { const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, ""); - console.log("ress", res); + console.log("API Response:", res); if (res.error) { - return false; + return; } + + // Map API data to the calendarEvents structure + const events = res?.data?.data.map((event: any) => ({ + id: event.id.toString(), + title: event.title, + start: new Date(event.startDate), + end: new Date(event.endDate), + allDay: true, // Assuming all events are all-day by default + extendedProps: { + calendar: event.agendaType, // Map agendaType to the calendar category + description: event.description, + }, + })); + + setCalendarEvents(events); + console.log("event", events); }; useEffect(() => { setSelectedCategory(categories?.map((c) => c.value)); - }, [events, categories]); + }, [categories]); - useEffect(() => { - console.log("Fetched events from API:", apiEvents); - }, [apiEvents]); - - const filteredEvents = apiEvents?.filter((event) => + const filteredEvents = calendarEvents?.filter((event) => selectedCategory?.includes(event.extendedProps.calendar) ); const displayedEvents = - filteredEvents?.length > 0 ? filteredEvents : apiEvents; - - useEffect(() => { - console.log("Filtered events based on category:", displayedEvents); - }, [filteredEvents, apiEvents]); + filteredEvents?.length > 1 ? filteredEvents : apiEvents; useEffect(() => { setSelectedCategory(categories?.map((c) => c.value)); @@ -151,6 +149,7 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { description: item.description, }, })); + setApiEvents(eventsFromAPI); } else { console.warn("No events found in API response."); @@ -167,6 +166,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { fetchAgendaEvents(); }, []); + useEffect(() => { + console.log("Fetched events from API 1:", apiEvents); + }, [apiEvents]); + + useEffect(() => { + console.log("Filtered events based on category 1:", calendarEvents); + }, [filteredEvents, apiEvents]); + useEffect(() => { const draggableEl = document.getElementById("external-events"); @@ -247,17 +254,16 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
- {roleId === 11 && ( - - - - )} + + + +
{ headerToolbar={{ left: "prev,next today", center: "title", - right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek", + right: "dayGridMonth,listWeek,", }} events={displayedEvents} editable={true} @@ -352,3 +358,15 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => { }; export default CalendarView; + +export type CalendarEvent = { + id: string; + title: string; + start: Date; + end: Date; + allDay: boolean; + extendedProps: { + calendar: string; + description: string; + }; +}; diff --git a/app/[locale]/(protected)/contributor/agenda-setting/data.ts b/app/[locale]/(protected)/contributor/agenda-setting/data.ts index 14af9c26..15c4967b 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/data.ts +++ b/app/[locale]/(protected)/contributor/agenda-setting/data.ts @@ -13,15 +13,6 @@ const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1 // prettier-ignore const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1) -export const getCalendarEvents = async () => { - const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, ""); - if (res.error) { - return false; - } - console.log("ress", res.data.data); - return res?.data?.data; -}; - export const calendarEvents = [ { id: faker.string.uuid(), @@ -94,7 +85,7 @@ export const calendarEvents = [ export const calendarCategories = [ { label: "Nasional", - value: "national", + value: "mabes", activeClass: "ring-primary-500 bg-primary-500", className: "group-hover:border-blue-500", }, @@ -127,7 +118,7 @@ export const calendarCategories = [ export const categories = [ { label: "Nasional", - value: "national", + value: "mabes", className: "data-[state=checked]:bg-primary data-[state=checked]:ring-primary", }, diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx index b4555b65..650c8a14 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx @@ -135,7 +135,7 @@ const EventModal = ({ const reqData = { title: data.title, - description: data.description || "", + description: data.description, agendaType: calendarProps, startDate: format(startDate, "yyyy-MM-dd"), endDate: format(endDate, "yyyy-MM-dd"), @@ -162,7 +162,7 @@ const EventModal = ({ confirmButtonColor: "#3085d6", confirmButtonText: "OK", }).then(() => { - router.push("/contributor/agenda-setting"); + router.push("en/contributor/agenda-setting"); }); }; @@ -272,11 +272,18 @@ const EventModal = ({
- ( + + )} /> {errors?.title?.message && (
@@ -475,10 +482,16 @@ const EventModal = ({ )}
-