diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx new file mode 100644 index 00000000..14d5b7d0 --- /dev/null +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx @@ -0,0 +1,17 @@ +import NewsTickerKaltara from "@/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara"; +import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara"; +import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara"; + + +const layout = async ({ children }: { children: React.ReactNode }) => { + return ( + <> + + {children} + + + + ); +}; + +export default layout; diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx index 6488e37d..17e7e146 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx @@ -7,11 +7,19 @@ import { Icon } from "@iconify/react/dist/iconify.js"; import NewContent from "@/components/landing-page/new-content"; import { useToast } from "@/components/ui/use-toast"; import { getCookiesDecrypt } from "@/lib/utils"; -import { close, error, loading } from "@/config/swal"; -import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing"; +import { close, error, loading, warning } from "@/config/swal"; +import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; import { Link, useRouter } from "@/i18n/routing"; +import Image from "next/image"; +import { useTranslations } from "next-intl"; +import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals"; +import withReactContent from "sweetalert2-react-content"; +import Swal from "sweetalert2"; +import { useSearchParams } from "next/navigation"; +import parse from "html-react-parser"; const DetailInfo = () => { + const MySwal = withReactContent(Swal); const [selectedSize, setSelectedSize] = useState("L"); const [selectedTab, setSelectedTab] = useState("video"); const router = useRouter(); @@ -29,8 +37,22 @@ const DetailInfo = () => { const [main, setMain] = useState(); const [resolutionSelected, setResolutionSelected] = useState("720"); const [imageSizeSelected, setImageSizeSelected] = useState("l"); - const userId = getCookiesDecrypt("uie"); + const [content, setContent] = useState([]); + const [emailShareList, setEmailShareList] = useState(); + const [emailShareInput, setEmailShareInput] = useState(); + const [emailMessageInput, setEmailMessageInput] = useState(); + const searchParams = useSearchParams(); + const [width, setWidth] = useState(); + const userRoleId = getCookiesDecrypt("urie"); + const [message, setMessage] = useState(""); + const [listSuggestion, setListSuggestion] = useState(); + const [isLoading, setIsLoading] = useState(true); + const [visibleInput, setVisibleInput] = useState(null); + let typeString = "image"; + const t = useTranslations("LandingPage"); + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; useEffect(() => { initFetch(); @@ -112,6 +134,12 @@ const DetailInfo = () => { } }; + const getInputValue = (e: any) => { + const message = e.target.value; + console.log(message); + setMessage(message); + }; + const sizes = [ { label: "XL", value: "3198 x 1798 px" }, { label: "L", value: "2399 x 1349 px" }, @@ -131,6 +159,10 @@ const DetailInfo = () => { // console.log(response); } + function addDefaultProfile(ev: any) { + ev.target.src = "/assets/avatar-profile.png"; + } + const handleDownload = () => { if (downloadProgress === 0) { if (!userId) { @@ -219,6 +251,135 @@ const DetailInfo = () => { xhr.send(); }; + const showInput = (e: any) => { + console.log(document.querySelector(`#${e}`)?.classList); + document.querySelector(`#${e}`)?.classList.toggle("none"); + setVisibleInput(visibleInput === e ? null : e); + }; + + async function sendSuggestionParent() { + if (message?.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message, + parentId: null, + }; + + const response = await createPublicSuggestion(data); + + console.log(response); + setMessage(""); + + const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet?.data?.data); + setListSuggestion(responseGet?.data?.data); + + // Hapus nilai semua input secara manual jika perlu + const inputs = document.querySelectorAll("input"); + inputs.forEach((input) => { + input.value = ""; + }); + + close(); + } + } + + async function sendSuggestionChild(parentId: any) { + const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; + + if (inputElement && inputElement.value.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message: inputElement.value, + parentId, + }; + + console.log(data); + const response = await createPublicSuggestion(data); + console.log(response); + const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + + // Reset input field + inputElement.value = ""; + + // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; + + close(); + } + } + + const postData = () => { + const checkMessage = checkMaliciousText(message); + if (checkMessage == "") { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth"); + } else { + sendSuggestionParent(); + } + } else { + warning(checkMessage); + } + }; + + const postDataChild = (id: any) => { + const checkMessage = checkMaliciousText(message); + if (checkMessage == "") { + if (Number(userRoleId) < 1 || userRoleId == undefined) { + router.push("/auth"); + } else { + sendSuggestionChild(id); + } + } else { + warning(checkMessage); + } + }; + + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deletePublicSuggestion(dataId); + console.log(response); + const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + close(); + } + + const deleteData = (dataId: any) => { + MySwal.fire({ + title: "Delete Comment", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Delete", + }).then((result) => { + if (result.isConfirmed) { + deleteDataSuggestion(dataId); + console.log(dataId); + } + }); + }; + + const shimmer = (w: number, h: number) => ` + + + + + + + + + + + + `; + + const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); + return ( <>
@@ -227,7 +388,7 @@ const DetailInfo = () => {
{/* Gambar Besar */}
- Main + 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
@@ -235,7 +396,7 @@ const DetailInfo = () => {
{detailDataImage?.files?.map((file: any, index: number) => ( setSelectedImage(index)} key={file?.id}> - + imgae-small ))}
@@ -325,20 +486,215 @@ const DetailInfo = () => {
-
+
{/* Comment */} -
+
-

Berikan Komentar

-