diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index e3312a26..c3747ff5 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -1,5 +1,5 @@ "use client"; -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, act } from "react"; import FullCalendar from "@fullcalendar/react"; // must go before plugins import dayGridPlugin from "@fullcalendar/daygrid"; import timeGridPlugin from "@fullcalendar/timegrid"; @@ -111,9 +111,18 @@ const CalendarView = ({ categories }: CalendarViewProps) => { // event canvas state const [sheetOpen, setSheetOpen] = useState(false); const [date, setDate] = React.useState(new Date()); - const [activeView, setActiveView] = useState("dayGridMonth"); + const [activeView, setActiveView] = useState("listYear"); const [yearlyData, setYearlyData] = useState(); + const TODAY = dayjs().format("yyyy-MM-dd"); + const INITIAL_YEAR = dayjs().format("YYYY"); + const INITIAL_MONTH = dayjs().format("M"); + + const [selectedYear, setSelectedYear] = useState(new Date()); + const [selectedMonth, setSelectedMonth] = useState( + dayjs(new Date(Number(INITIAL_YEAR), Number(INITIAL_MONTH) - 1, 1)), + ); + const [dragEvents] = useState([ { title: "New Event Planning", id: "101", tag: "business" }, { title: "Meeting", id: "102", tag: "meeting" }, @@ -124,41 +133,49 @@ const CalendarView = ({ categories }: CalendarViewProps) => { const [calendarEvents, setCalendarEvents] = useState([]); useEffect(() => { - getCalendarEvents(); - getYearlyEvents(); - }, []); + if (activeView == "listYear") { + getYearlyEvents(); + } else { + getCalendarEvents(); + } + }, [activeView, selectedMonth]); const getCalendarEvents = async () => { - const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, ""); - console.log("API Response:", res); + console.log("View : ", activeView); + const res = await getAgendaSettingsList(selectedMonth?.format("YYYY") || INITIAL_YEAR, selectedMonth.format("M") || INITIAL_MONTH, ""); + console.log("View : API Response:", res); if (res?.error) { error(res?.message); return; } - // Map API data to the calendarEvents structure - const events = res?.data?.data.map((event: any) => ({ - id: event.id.toString(), - title: event.title, - createBy: "Mabes Polri - Approver", - createdByName: event.createdByName, - start: new Date(event.startDate), - end: new Date(event.endDate), - allDay: true, - extendedProps: { - calendar: event.agendaType, - description: event.description, - createdByName: event.createdByName, - }, - })); + const data = res?.data?.data; - setCalendarEvents(events); - console.log("event", events); + if (data) { + console.log("Dataaa : ", data); + // Map API data to the calendarEvents structure + const events = res?.data?.data?.map((event: any) => ({ + id: event.id.toString(), + title: event.title, + createBy: event.createdById, + createdByName: event.createdByName, + start: new Date(event.startDate), + end: new Date(event.endDate), + allDay: true, + extendedProps: { + calendar: event.agendaType, + description: event.description, + createdByName: event.createdByName, + }, + })); + + setCalendarEvents(events); + } }; const getYearlyEvents = async () => { - const res = await getAgendaSettingsList(INITIAL_YEAR, '', ''); + const res = await getAgendaSettingsList(selectedMonth?.format("YYYY") || INITIAL_YEAR, '', ''); if (res?.error) { error(res.message); return false; @@ -186,50 +203,50 @@ const CalendarView = ({ categories }: CalendarViewProps) => { }, [selectedCategory]); useEffect(() => { - const fetchAgendaEvents = async () => { - setLoading(true); - try { - const selectedMonth = new Date(); // Replace with your logic for selected month - const year = selectedMonth.getFullYear().toString(); - const month = (selectedMonth.getMonth() + 1).toString(); - const typeFilter = ""; // Replace with your type filter logic if needed - - const response = await getAgendaSettingsList(year, month, typeFilter); - - if (response?.data && Array.isArray(response?.data)) { - // Transform API data to match CalendarEvent type - const eventsFromAPI: CalendarEvent[] = response?.data?.map( - (item) => ({ - id: item.id.toString(), - title: item.title, - createBy: "Mabes Polri - Approver", - createdByName: item.createdByName, - start: new Date(item.startDate), - end: new Date(item.endDate), - allDay: true, // Sesuaikan jika memang ada event sepanjang hari - extendedProps: { - calendar: item.agendaType, - description: item.description, - }, - }) - ); - - setApiEvents(eventsFromAPI); - } else { - console.warn("No events found in API response."); - setApiEvents([]); - } - } catch (error) { - console.error("Failed to fetch agenda settings:", error); - setApiEvents([]); - } finally { - setLoading(false); - } - }; - fetchAgendaEvents(); }, []); + const fetchAgendaEvents = async (year?: string, month?: string) => { + setLoading(true); + try { + const selectedMonth = new Date(); // Replace with your logic for selected month + const year = selectedMonth.getFullYear().toString(); + const month = (selectedMonth.getMonth() + 1).toString(); + const typeFilter = ""; // Replace with your type filter logic if needed + + const response = await getAgendaSettingsList(year, month, typeFilter); + + if (response?.data && Array.isArray(response?.data)) { + // Transform API data to match CalendarEvent type + const eventsFromAPI: CalendarEvent[] = response?.data?.map( + (item) => ({ + id: item.id.toString(), + title: item.title, + createBy: "Mabes Polri - Approver", + createdByName: item.createdByName, + start: new Date(item.startDate), + end: new Date(item.endDate), + allDay: true, // Sesuaikan jika memang ada event sepanjang hari + extendedProps: { + calendar: item.agendaType, + description: item.description, + }, + }) + ); + + setApiEvents(eventsFromAPI); + } else { + console.warn("No events found in API response."); + setApiEvents([]); + } + } catch (error) { + console.error("Failed to fetch agenda settings:", error); + setApiEvents([]); + } finally { + setLoading(false); + } + }; + useEffect(() => { console.log("Fetched events from API 1:", apiEvents); }, [apiEvents]); @@ -310,7 +327,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => { <>

{title}

- Create By: {createdByName} + Created By : {createdByName}

); @@ -331,11 +348,16 @@ const CalendarView = ({ categories }: CalendarViewProps) => { }; const handleDateChange = (startDate: string, endDate: string) => { - console.log(startDate + " - " + endDate); - }; + const startDateOfDate = new Date(startDate); + const endDateOfDate = new Date(endDate); + + console.log("Change Date : ", startDateOfDate); + + setSelectedMonth(dayjs(startDateOfDate)); + }; const handleViewChange = (viewType: string) => { - console.log(viewType); + console.log("Change view : ", viewType); setActiveView(viewType); }; @@ -394,7 +416,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
handleClickListItem(item)}>

{text}

- Create By: {createdBy} + Created By: {createdBy}

); @@ -472,13 +494,16 @@ const CalendarView = ({ categories }: CalendarViewProps) => { - + {roleId == 10 || roleId == 11 ? + : + "" + }
diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx index 3b7a5036..2ecd4174 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx @@ -38,13 +38,15 @@ import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import { useRouter } from "next/navigation"; import { postSchedule } from "@/service/schedule/schedule"; -import { saveAgendaSettings } from "@/service/agenda-setting/agenda-setting"; +import { getAgendaSettingsById, saveAgendaSettings } from "@/service/agenda-setting/agenda-setting"; import { Checkbox } from "@/components/ui/checkbox"; import { getUserLevelForAssignments } from "@/service/task"; import { AudioRecorder } from "react-audio-voice-recorder"; import FileUploader from "@/components/form/shared/file-uploader"; import { Upload } from "tus-js-client"; import { getCsrfToken } from "@/service/auth"; +import { Icon } from "@iconify/react"; +import Image from "next/image"; const schema = z.object({ title: z.string().min(3, { message: "Required" }), @@ -55,6 +57,11 @@ interface FileWithPreview extends File { preview: string; } +interface FileUploaded { + id: number; + url: string; +} + const EventModal = ({ open, onClose, @@ -83,10 +90,15 @@ const EventModal = ({ const [audioFile, setAudioFile] = useState(null); const [isRecording, setIsRecording] = useState(false); const [timer, setTimer] = useState(120); + const [detailData, setDetailData] = useState(); const [imageFiles, setImageFiles] = useState([]); const [videoFiles, setVideoFiles] = useState([]); const [textFiles, setTextFiles] = useState([]); const [audioFiles, setAudioFiles] = useState([]); + const [imageUploadedFiles, setImageUploadedFiles] = useState([]); + const [videoUploadedFiles, setVideoUploadedFiles] = useState([]); + const [textUploadedFiles, setTextUploadedFiles] = useState([]); + const [audioUploadedFiles, setAudioUploadedFiles] = useState([]); const [isImageUploadFinish, setIsImageUploadFinish] = useState(false); const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false); const [isTextUploadFinish, setIsTextUploadFinish] = useState(false); @@ -110,6 +122,22 @@ const EventModal = ({ mode: "all", }); + useEffect(() => { + async function fetchDetailData(){ + const res = await getAgendaSettingsById(event?.event?.id); + const detail = res?.data?.data; + setDetailData(detail); + + const attachments = detail?.attachments; + setImageUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 1)); + setVideoUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 2)); + setTextUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 3)); + setAudioUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 4)); + } + + fetchDetailData(); + }, [event]); + useEffect(() => { async function fetchPoldaPolres() { setIsLoading(true); @@ -145,10 +173,8 @@ const EventModal = ({ setIsLoading(false); } } + fetchPoldaPolres(); - console.log("Event", event); - - console.log("Event click modal : ", event); }, [agendaType]); const handleCheckboxChange = (levelId: number) => { @@ -184,7 +210,8 @@ const EventModal = ({ } const id = response?.data?.data.id; - + + loading(); if (imageFiles?.length == 0) { setIsImageUploadFinish(true); } @@ -333,10 +360,9 @@ const EventModal = ({ metadata: { agendaSettingId: id, filename: file.name, - filetype: file.type, + contentType: file.type, fileTypeId: fileTypeId, duration, - isWatermark: "false", // hardcode }, onBeforeRequest: function (req) { var xhr = req.getUnderlyingObject(); @@ -351,19 +377,30 @@ const EventModal = ({ bytesAccepted: any, bytesTotal: any ) => { - const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); - progressInfo[idx].percentage = uploadPersen; - counterUpdateProgress++; - console.log(counterUpdateProgress); - setProgressList(progressInfo); - setCounterProgress(counterUpdateProgress); + // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100); + // progressInfo[idx].percentage = uploadPersen; + // counterUpdateProgress++; + // console.log(counterUpdateProgress); + // setProgressList(progressInfo); + // setCounterProgress(counterUpdateProgress); }, onSuccess: async () => { - uploadPersen = 100; - progressInfo[idx].percentage = 100; - counterUpdateProgress++; - setCounterProgress(counterUpdateProgress); + // uploadPersen = 100; + // progressInfo[idx].percentage = 100; + // counterUpdateProgress++; + // setCounterProgress(counterUpdateProgress); successTodo(); + if (fileTypeId == "1") { + setIsImageUploadFinish(true); + } else if (fileTypeId == "2") { + setIsVideoUploadFinish(true); + } + if (fileTypeId == "3") { + setIsTextUploadFinish(true); + } + if (fileTypeId == "4") { + setIsAudioUploadFinish(true); + } }, }); @@ -402,6 +439,22 @@ const EventModal = ({ }); }; + const renderFilePreview = (url: string) => { + return ( + {"file + ); + }; + + const handleRemoveFile = (id: number) => { + + }; + return ( <>
+ {videoUploadedFiles?.map((file: any, index: number) => ( +
+
+
{renderFilePreview(file.url)}
+
+
{file.fileName}
+
+
+ + +
+ ))}
+ {imageUploadedFiles?.map((file: any, index: number) => ( +
+
+
{renderFilePreview(file.url)}
+
+
{file.fileName}
+
+
+ + +
+ ))}
+ {textUploadedFiles?.map((file: any, index: number) => ( +
+
+
{renderFilePreview(file.url)}
+
+
{file.fileName}
+
+
+ + +
+ ))}
+ {audioUploadedFiles?.map((file: any, index: number) => ( +
+
+
{renderFilePreview(file.url)}
+
+
{file.fileName}
+
+
+ + +
+ ))}