From aea083c0eab1081e963b7b73b8c53af16984d99a Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 14 Jul 2025 23:34:52 +0700 Subject: [PATCH] fixing --- .../agenda-setting/calender-view.tsx | 11 - .../agenda-setting/event-modal.tsx | 30 +- .../agenda-setting/unit-mapping.tsx | 3 +- .../blog/components/blog-table.tsx | 26 +- .../image/detail/[slug]/page.tsx | 387 ++++++++- .../video/detail/[slug]/page.tsx | 815 +++++++++++++++++- .../form/communication/collaboration-form.tsx | 17 + .../form/communication/internal-form.tsx | 197 ++--- components/form/content/audio-form.tsx | 263 +++--- components/form/content/video-detail-form.tsx | 4 +- components/form/content/video-form.tsx | 48 +- .../form/contest/contest-detail-form.tsx | 48 +- components/form/schedule/live-report-form.tsx | 4 +- components/form/task/task-form.tsx | 203 +++-- .../landing-page/search-section-new.tsx | 1 - components/landing-page/search-section.tsx | 1 - components/main/audio-detail.tsx | 2 +- components/main/document-detail.tsx | 2 +- components/main/image-detail.tsx | 4 +- components/main/video-detail.tsx | 4 +- components/maps/MapHome.tsx | 7 +- components/maps/Maps.tsx | 10 +- components/maps/client-config.tsx | 2 +- package-lock.json | 345 ++------ 24 files changed, 1677 insertions(+), 757 deletions(-) diff --git a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx index bed2258b..dfb84851 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx @@ -119,8 +119,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { const [calendarEvents, setCalendarEvents] = useState([]); const [isLoading, setIsLoading] = useState(false); const t = useTranslations("CalendarApp"); - - // Modal states const [sheetOpen, setSheetOpen] = useState(false); const [date, setDate] = useState(new Date()); const [activeView, setActiveView] = useState("listYear"); @@ -132,7 +130,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { dayjs(new Date(Number(INITIAL_YEAR), Number(INITIAL_MONTH) - 1, 1)) ); - // Load events when view or month changes useEffect(() => { if (activeView === "listYear") { getYearlyEvents(); @@ -141,7 +138,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { } }, [activeView, selectedMonth]); - // Initialize selected categories useEffect(() => { if (categories?.length > 0) { setSelectedCategory(categories.map((c) => c.value)); @@ -162,11 +158,9 @@ const CalendarView = ({ categories }: CalendarViewProps) => { return; } - // For monthly view, we need to extract events from the specific month const monthData = res?.data?.data; if (monthData) { const allEvents: CalendarEvent[] = []; - // Map API data to the calendarEvents structure const events = monthData?.map((event: any) => ({ id: event.id.toString(), title: event.title, @@ -208,7 +202,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { return; } - // The API already returns data organized by months const yearlyData = res?.data?.data; if (yearlyData) { setYearlyData(yearlyData); @@ -221,7 +214,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { } }; - // Filter events based on selected categories const filteredEvents = calendarEvents.filter((event) => { if (!selectedCategory.length) return false; console.log("Event category : ", selectedCategory); @@ -231,7 +223,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { .map((val: string) => val.trim()); const allCategoryId = ["1", "2", "3", "4", "5"]; - // Cek apakah SEMUA validTypeIds ada di typeIdsInData const hasAllCategories = allCategoryId.every((categoryId) => selectedCategory.includes(categoryId) ); @@ -242,7 +233,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { ); }); - // Event handlers const handleEventClick = (arg: any) => { setSelectedEventDate(null); setSelectedEventData(arg); @@ -307,7 +297,6 @@ const CalendarView = ({ categories }: CalendarViewProps) => { wait().then(() => (document.body.style.pointerEvents = "auto")); }; - // Utility functions const getEventColor = (type: EventType): string => { const typeSplit = type.split(","); const firstType = typeSplit[0] as EventType; diff --git a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx index 83c0bdbe..db8ee9ef 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx @@ -234,7 +234,6 @@ const EventModal = ({ setWilayahPublish(wilayahState); - // Atur unit berdasarkan agendaType if (rawAgendaTypes.includes("2")) { setSelectedPolda(assignedToLevel); } @@ -272,8 +271,6 @@ const EventModal = ({ const toggleWilayah = (key: string) => { setWilayahPublish((prev: any) => { let newState = { ...prev }; - - // Jika key === semua dan sebelumnya belum aktif, aktifkan semua if (key === "semua") { const newChecked = !prev.semua; newState = { @@ -294,11 +291,9 @@ const EventModal = ({ return newState; } - // Jika key bukan "semua" newState[key] = !prev[key]; - newState.semua = false; // Uncheck "semua" jika yang dipilih adalah individu + newState.semua = false; - // Hitung ulang agendaType berdasarkan pilihan const selectedKeys = Object.entries(newState) .filter(([k, v]) => v && k !== "semua") .map(([k]) => wilayahValueMap[k]); @@ -348,8 +343,8 @@ const EventModal = ({ id: detailData?.id, title: data.title, description: data.description, - agendaType: agendaTypeList.join(","), // <-- ubah array jadi string - assignedToLevel: assignedToLevelList.join(","), // <-- ubah array jadi string + agendaType: agendaTypeList.join(","), + assignedToLevel: assignedToLevelList.join(","), startDate: format(startDate, "yyyy-MM-dd"), endDate: format(endDate, "yyyy-MM-dd"), }; @@ -393,9 +388,9 @@ const EventModal = ({ await uploadResumableFile( index, String(id), - item, // Use .file to access the actual File object + item, "4", - "0" // Optional: Replace with actual duration if available + "0" ); }); if (publish) { @@ -466,28 +461,26 @@ const EventModal = ({ const onRecordingStart = () => { setIsRecording(true); - // Start a timer that stops the recording after 2 minutes (120 seconds) const countdown = setInterval(() => { setTimer((prevTimer) => { if (prevTimer <= 1) { - clearInterval(countdown); // Stop the timer when it reaches 0 + clearInterval(countdown); return 0; } return prevTimer - 1; }); - }, 1000); // Update every second + }, 1000); - // Automatically stop recording after 2 minutes setTimeout(() => { if (isRecording) { handleStopRecording(); } - }, 120000); // Stop after 2 minutes (120,000 ms) + }, 120000); }; const handleStopRecording = () => { setIsRecording(false); - setTimer(120); // Reset the timer to 2 minutes for the next recording + setTimer(120); }; const addAudioElement = (blob: Blob) => { @@ -497,19 +490,16 @@ const EventModal = ({ audio.controls = true; document.body.appendChild(audio); - // Convert Blob to File and add preview const fileWithPreview: FileWithPreview = Object.assign( new File([blob], "voiceNote.webm", { type: "audio/webm" }), { preview: url } ); - // Add to state setAudioFile(fileWithPreview); setAudioFiles((prev) => [...prev, fileWithPreview]); }; const handleDeleteAudio = () => { - // Remove the audio file by setting state to null setAudioFile(null); const audioElements = document.querySelectorAll("audio"); audioElements.forEach((audio) => audio.remove()); @@ -842,7 +832,7 @@ const EventModal = ({ {wilayahPublish.polda && ( setSelectedPolda(data) diff --git a/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx b/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx index 64542b17..aea59fb3 100644 --- a/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx +++ b/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx @@ -123,7 +123,6 @@ export function UnitMapping(props: { ? isAllSatkerChecked : isAllPolresChecked } - disabled={isDetail} onCheckedChange={(checked) => { if (checked) { form.setValue( @@ -139,6 +138,7 @@ export function UnitMapping(props: { } }} /> + @@ -170,7 +170,6 @@ export function UnitMapping(props: { > { return checked diff --git a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx index 95fda0f9..fe75e2e4 100644 --- a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx +++ b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx @@ -62,11 +62,12 @@ const BlogTable = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); - const [showData, setShowData] = React.useState("50"); + const [showData, setShowData] = React.useState("10"); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: Number(showData), + pageSize: 10, }); + const [page, setPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1); const [limit, setLimit] = React.useState(10); @@ -143,14 +144,12 @@ const BlogTable = () => { } const handleCheckboxChange = (categoryId: number) => { - setSelectedCategories( - (prev: any) => - prev.includes(categoryId) - ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih - : [...prev, categoryId] // Tambahkan jika belum dipilih + setSelectedCategories((prev: any) => + prev.includes(categoryId) + ? prev.filter((id: any) => id !== categoryId) + : [...prev, categoryId] ); - // Perbarui filter kategori setCategoryFilter((prev) => { const updatedCategories = prev.split(",").filter(Boolean).map(Number); @@ -171,8 +170,8 @@ const BlogTable = () => { } const handleSearch = (e: React.ChangeEvent) => { - setSearch(e.target.value); // Perbarui state search - table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel + setSearch(e.target.value); + table.getColumn("judul")?.setFilterValue(e.target.value); }; return ( @@ -181,7 +180,8 @@ const BlogTable = () => {
- {t("table", { defaultValue: "Table" })} {t("blog", { defaultValue: "Blog" })} + {t("table", { defaultValue: "Table" })}{" "} + {t("blog", { defaultValue: "Blog" })}
@@ -254,7 +254,9 @@ const BlogTable = () => {

Filter

- + {categories.length > 0 ? ( categories.map((category) => (
{ const [selectedSize, setSelectedSize] = useState("L"); - const [selectedTab, setSelectedTab] = useState("video"); + const [emailShareList, setEmailShareList] = useState(); const router = useRouter(); const pathname = usePathname(); const params = useParams(); const slug = String(params?.slug); + const t = useTranslations("LandingPage"); const [detailDataImage, setDetailDataImage] = useState(); const [selectedImage, setSelectedImage] = useState(0); const [isSaved, setIsSaved] = useState(false); @@ -30,8 +46,14 @@ const DetailInfo = () => { const [main, setMain] = useState(); const [resolutionSelected, setResolutionSelected] = useState("720"); const [imageSizeSelected, setImageSizeSelected] = useState("l"); - + const [emailShareInput, setEmailShareInput] = useState(); + const [emailMessageInput, setEmailMessageInput] = useState(); + const [content, setContent] = useState([]); + const [listSuggestion, setListSuggestion] = useState(); + const [width, setWidth] = useState(); + const userRoleId = getCookiesDecrypt("urie"); const userId = getCookiesDecrypt("uie"); + let typeString = "image"; useEffect(() => { initFetch(); @@ -42,7 +64,12 @@ const DetailInfo = () => { const initFetch = async () => { const response = await getDetail(String(slug)); console.log("detailImage", response); + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); + setIsFromSPIT(response?.data?.data?.isFromSPIT); + setWidth(window.innerWidth); + setContent(response?.data.data); + setListSuggestion(responseGet?.data?.data); setMain({ id: response?.data?.data?.files[0]?.id, type: response?.data?.data?.fileType.name, @@ -63,6 +90,42 @@ const DetailInfo = () => { setDetailDataImage(response?.data?.data); }; + const handleEmailList = (e: any) => { + const arrayEmail: any = []; + for (let i = 0; i < emailShareList?.length; i += 1) { + arrayEmail.push(emailShareList[i]); + } + if (e.which == 13) { + if (e.target.value) { + arrayEmail.push(e.target.value); + setEmailShareList(arrayEmail); + setEmailShareInput(""); + } + e.preventDefault(); + } + return false; + }; + async function shareToEmail() { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + const data = { + mediaUploadId: slug?.split("-")?.[0], + email: emailShareList || [emailShareInput], + message: emailMessageInput, + url: window.location.href, + }; + loading(); + const res = await sendMediaUploadToEmail(data); + if (res?.error) { + error(res.message); + return false; + } + close(); + successCallback("Konten Telah Dikirim"); + } + } + const doBookmark = async () => { if (userId) { const data = { @@ -114,6 +177,26 @@ const DetailInfo = () => { } }; + const handleShare = (type: any, url: any) => { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth/login"); + } else { + sendActivityLog(2); + sendActivityLog(4); + if (type == "wa" && width <= 768) { + window.open(`whatsapp://send?${url}`, "_blank"); + } else if (type == "wa" && width > 768) { + window.open( + `https://web.whatsapp.com/send?${url}`, + "_blank", + "noreferrer" + ); + } else { + window.open(url); + } + } + }; + const sizes = [ { label: "XL", value: "3198 x 1798 px" }, { label: "L", value: "2399 x 1349 px" }, @@ -136,7 +219,7 @@ const DetailInfo = () => { const handleDownload = () => { if (downloadProgress === 0) { if (!userId) { - router.push("/auth/login"); + router.push("/auth"); } else { sendActivityLog(2); sendActivityLog(3); @@ -196,7 +279,8 @@ const DetailInfo = () => { xhr.addEventListener("readystatechange", () => { if (xhr.readyState === 4 && xhr.status === 200) { - const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream"; + const contentType = + xhr.getResponseHeader("content-type") || "application/octet-stream"; const extension = contentType.split("/")[1]; const filename = `${name}.${extension}`; @@ -229,7 +313,11 @@ const DetailInfo = () => {
{/* Gambar Besar */}
- Main + Main
@@ -237,7 +325,10 @@ const DetailInfo = () => {
{detailDataImage?.files?.map((file: any, index: number) => ( setSelectedImage(index)} key={file?.id}> - + ))}
@@ -245,65 +336,109 @@ const DetailInfo = () => { {/* Footer Informasi */}
- oleh {detailDataImage?.uploadedBy?.userLevel?.name}  |  Diupdate pada {detailDataImage?.updatedAt} WIB  |  + oleh  + + {detailDataImage?.uploadedBy?.userLevel?.name} + +   |  Diupdate pada {detailDataImage?.updatedAt} WIB +  |    {detailDataImage?.clickCount}   -

Kreator: {detailDataImage?.creatorName}

+

+ Kreator: {detailDataImage?.creatorName} +

{/* Keterangan */}
-

{detailDataImage?.title}

-
+

+ {detailDataImage?.title} +

+
{/* Bagian Kanan */} -
+
{isSaved ? ( - handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> + handleDeleteWishlist()} + className="flex flex-col mb-3 items-center justify-center cursor-pointer" + > -

Hapus

+

+ {t("delete", { defaultValue: "Delete" })} +

) : ( - doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> - -

Simpan

+ doBookmark()} + className="flex flex-col mb-3 items-center justify-center cursor-pointer" + > + +

+ {t("save", { defaultValue: "Save" })} +

)} {/* garis */}
+
+
+ + {detailDataImage?.category?.name} + +
- - {detailDataImage?.category?.name} - - -
{/* Opsi Ukuran Foto */} -

Opsi Ukuran Foto

+

+ {t("imageSize", { defaultValue: "Image Size" })} +

{sizes.map((size: any) => (
-
- setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" /> -
{size.label}
-
-
-
{size.value}
+
+ setImageSizeSelected(e.target.value)} + className="text-red-600 focus:ring-red-600" + /> +
{size?.label}
+
{size?.value}
))}
@@ -311,18 +446,177 @@ const DetailInfo = () => { {/* Download Semua */}
{/* Tombol Download */} - + + +
+

+ {t("shareTo", { defaultValue: "Share To" })} +

+
+

+ {t("destinationEmail", { + defaultValue: "Destination Email", + })} +

+ + setEmailShareInput(event.target.value) + } + onKeyPress={handleEmailList} + type="email" + placeholder={t("pressEnter", { + defaultValue: "Press Enter", + })} + /> +
+ +
+ + +
+ + handleShare( + "fb", + `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}` + ) + } + > + + + + handleShare( + "tw", + `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}` + ) + } + > + + + + handleShare( + "wa", + `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}` + ) + } + > + + + + + + + +
+

+ {t("shareTo", { defaultValue: "Share To" })} +

+
+

+ {t("destinationEmail", { + defaultValue: "Destination Email", + })} +

+ + setEmailShareInput(event.target.value) + } + onKeyPress={handleEmailList} + type="email" + placeholder={t("pressEnter", { + defaultValue: "Press Enter", + })} + /> +
+ +
+ + +
@@ -332,13 +626,18 @@ const DetailInfo = () => {

Berikan Komentar

-