mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:fix error

This commit is contained in:
Anang Yusman 2025-06-04 11:42:23 +08:00
parent 88501ac84f
commit 150bdc339e
9 changed files with 1273 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

389
app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
View File

@ -8,7 +8,15 @@ import { Link, useRouter } from "@/i18n/routing";
import { Textarea } from "@/components/ui/textarea";
import { BarWave } from "react-cssfx-loading";
import { useToast } from "@/components/ui/use-toast";
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
import {
checkWishlistStatus,
createPublicSuggestion,
deletePublicSuggestion,
deleteWishlist,
getDetail,
getPublicSuggestionList,
saveWishlist,
} from "@/service/landing/landing";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, error, loading, warning } from "@/config/swal";
import { useTranslations } from "next-intl";
@ -18,7 +26,6 @@ import Swal from "sweetalert2";
import parse from "html-react-parser";
import { postActivityLog } from "@/service/content/content";
const DetailAudio = () => {
const [selectedSize, setSelectedSize] = useState<string>("L");
const [selectedTab, setSelectedTab] = useState("video");
@ -196,7 +203,8 @@ const DetailAudio = () => {
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}`;
@ -228,7 +236,7 @@ const DetailAudio = () => {
{ label: "S", value: "1066 x 599 px" },
{ label: "XS", value: "800 x 450 px" },
];
async function sendSuggestionParent() {
async function sendSuggestionParent() {
if (message?.length > 3) {
loading();
const data = {
@ -280,41 +288,45 @@ const DetailAudio = () => {
document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
};
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();
}
}
async function deleteDataSuggestion(dataId: any) {
async function sendSuggestionChild(parentId: any) {
const inputElement = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputElement && inputElement.value.length > 3) {
loading();
const response = await deletePublicSuggestion(dataId);
const data = {
mediaUploadId: slug?.split("-")?.[0],
message: inputElement.value,
parentId,
};
console.log(data);
const response = await createPublicSuggestion(data);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
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();
}
}
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",
@ -331,17 +343,17 @@ const DetailAudio = () => {
});
};
const postDataChild = (id: any) => {
const checkMessage = checkMaliciousText(message);
if (checkMessage == "") {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth");
} else {
sendSuggestionChild(id);
}
const checkMessage = checkMaliciousText(message);
if (checkMessage == "") {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth");
} else {
warning(checkMessage);
sendSuggestionChild(id);
}
};
} else {
warning(checkMessage);
}
};
return (
<>
<div className="min-h-screen px-4 md:px-24 py-4">
@ -351,13 +363,23 @@ const DetailAudio = () => {
<div className="md:w-3/4">
<div className="relative flex justify-center">
<img src="/assets/audio-btn.png" />
<BarWave color="#ffc831" width="60px" height="25px" duration="2s" />
<BarWave
color="#ffc831"
width="60px"
height="25px"
duration="2s"
/>
<div className="absolute top-4 left-4"></div>
</div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="flex flex-row items-center">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
oleh&nbsp;
<span className="font-semibold text-black">
{detailDataAudio?.uploadedBy?.userLevel?.name}
</span>
&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt}{" "}
WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;
{detailDataAudio?.clickCount}
@ -366,20 +388,33 @@ const DetailAudio = () => {
</div>
{/* Keterangan */}
<div className="md:w-3/4">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
<div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">
{detailDataAudio?.title}
</h1>
<div
className="font-light text-justify"
dangerouslySetInnerHTML={{
__html: detailDataAudio?.htmlDescription,
}}
/>
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
{isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => handleDeleteWishlist()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">Hapus</p>
</a>
) : (
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => doBookmark()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">Simpan</p>
</a>
@ -388,13 +423,20 @@ const DetailAudio = () => {
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
<Link
href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`}
className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
>
{detailDataAudio?.category?.name}
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
{detailDataAudio?.tags?.split(",").map((tag: string) => (
<a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
<a
onClick={() => router.push(`/all/filter?tag=${tag}`)}
key={tag}
className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
>
{tag}
</a>
))}
@ -403,15 +445,27 @@ const DetailAudio = () => {
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
<h4 className="flex text-lg justify-center items-center font-semibold my-3">
Opsi Ukuran Audio
</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size: any) => (
<div className="flex flex-row justify-between">
<div key={size.label} className="items-center flex flex-row gap-2 cursor-pointer">
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
<div
key={size.label}
className="items-center flex flex-row gap-2 cursor-pointer"
>
<input
type="radio"
name="size"
value={size.label}
checked={selectedSize === size.label}
onChange={() => setSelectedSize(size.label)}
className="text-red-600 focus:ring-red-600"
/>
<div className="text-sm">{size.label}</div>
</div>
<div className="">
@ -424,15 +478,30 @@ const DetailAudio = () => {
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
<input
type="checkbox"
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>Download Semua File?</span>
</label>
</div>
{/* Tombol Download */}
<button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
<button
onClick={handleDownload}
className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="white"
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
/>
</svg>
Download
</button>
@ -450,8 +519,15 @@ const DetailAudio = () => {
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
<Textarea
placeholder="Type your comments here."
className="flex w-full pb-12"
onChange={getInputValue}
/>
<button
onClick={() => postData()}
className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
>
{t("send")}
</button>
</div>
@ -462,13 +538,24 @@ const DetailAudio = () => {
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<img
src={data?.suggestionFrom?.profilePictureUrl}
className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{Number(data.suggestionFrom?.roleId) == 2 ||
Number(data.suggestionFrom?.roleId) == 3 ||
Number(data.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{data?.message}
</p>
<div>
<a
style={
@ -481,11 +568,16 @@ const DetailAudio = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
{Number(data.suggestionFrom?.id) == Number(userId) ||
Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
) : (
""
@ -494,14 +586,25 @@ const DetailAudio = () => {
</div>
</div>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
<div
id={`comment-id-${data.id}`}
className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
>
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -511,30 +614,51 @@ const DetailAudio = () => {
? data.children?.map((child1: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<img
src={child1.suggestionFrom?.profilePictureUrl}
onError={addDefaultProfile}
alt=""
className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
<b>
{Number(child1.suggestionFrom?.roleId) == 2 ||
Number(child1.suggestionFrom?.roleId) == 3 ||
Number(child1.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child1.createdAt)
)}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{parse(String(child1?.message))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child1.id}`)}
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -542,21 +666,39 @@ const DetailAudio = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
<div
id={`comment-id-${child1.id}`}
className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
>
<Textarea
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply")}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -566,30 +708,57 @@ const DetailAudio = () => {
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<img
src={
child2.suggestionFrom?.profilePictureUrl
}
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
<b>
{Number(
child2.suggestionFrom?.roleId
) == 2 ||
Number(child2.suggestionFrom?.roleId) ==
3 ||
Number(child2.suggestionFrom?.roleId) ==
4
? "HUMAS POLRI"
: child2.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child2.createdAt)
)}
</p>
<p className="text-slate-500 text-sm mb-4">
{parse(String(child2?.message))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
<div>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child2.id}`)}
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -597,20 +766,40 @@ const DetailAudio = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div
id={`comment-id-${child2.id}`}
className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
>
<Textarea
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder="Masukkan balasan anda"
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<a
onClick={() => postDataChild(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>

422
app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
View File

@ -6,15 +6,31 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import NewContent from "@/components/landing-page/new-content";
import { Textarea } from "@/components/ui/textarea";
import { getCookiesDecrypt } from "@/lib/utils";
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
import {
checkWishlistStatus,
createPublicSuggestion,
deletePublicSuggestion,
deleteWishlist,
getDetail,
getPublicSuggestionList,
saveWishlist,
} from "@/service/landing/landing";
import { close, error, loading, successCallback, warning } from "@/config/swal";
import { useToast } from "@/components/ui/use-toast";
import { Link, useRouter } from "@/i18n/routing";
import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
import {
checkMaliciousText,
formatDateToIndonesian,
getPublicLocaleTimestamp,
} from "@/utils/globals";
import { useTranslations } from "next-intl";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useSearchParams } from "next/navigation";
@ -216,7 +232,8 @@ const DetailDocument = () => {
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}`;
@ -293,7 +310,9 @@ const DetailDocument = () => {
setVisibleInput(visibleInput === e ? null : e);
};
async function sendSuggestionChild(parentId: any) {
const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
const inputElement = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputElement && inputElement.value.length > 3) {
loading();
@ -306,9 +325,11 @@ const DetailDocument = () => {
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);
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -323,8 +344,8 @@ const DetailDocument = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
const deleteData = (dataId: any) => {
@ -363,7 +384,11 @@ const DetailDocument = () => {
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");
window.open(
`https://web.whatsapp.com/send?${url}`,
"_blank",
"noreferrer"
);
} else {
window.open(url);
}
@ -522,7 +547,11 @@ const DetailDocument = () => {
{/* Bagian Kiri */}
<div className="md:w-3/4">
<div className="relative">
<img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
<img
src={detailDataDocument?.files[selectedDocument]?.url}
alt="Main"
className="rounded-lg w-auto h-fit"
/>
<div className="absolute top-4 left-4"></div>
</div>
{/* Footer Informasi */}
@ -536,14 +565,20 @@ const DetailDocument = () => {
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
{t("by")}&nbsp;
<span className="font-semibold text-black">
{detailDataDocument?.uploadedBy?.userLevel?.name}
</span>
</p>
{/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")}&nbsp;
{formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"}
{formatDateToIndonesian(
new Date(detailDataDocument?.updatedAt)
)}{" "}
{"WIB"}
</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
&nbsp;| &nbsp;
@ -561,20 +596,32 @@ const DetailDocument = () => {
{/* Keterangan */}
<div className="">
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">{detailDataDocument?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">
{detailDataDocument?.title}
</h1>
<div
dangerouslySetInnerHTML={{
__html: detailDataDocument?.htmlDescription,
}}
/>
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
{isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => handleDeleteWishlist()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete")}</p>
</a>
) : (
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => doBookmark()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">{t("save")}</p>
</a>
@ -583,13 +630,20 @@ const DetailDocument = () => {
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
<Link
href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`}
className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
>
{detailDataDocument?.category?.name}
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
{detailDataDocument?.tags?.split(",").map((tag: string) => (
<a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
<a
onClick={() => router.push(`/all/filter?tag=${tag}`)}
key={tag}
className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
>
{tag}
</a>
))}
@ -598,13 +652,25 @@ const DetailDocument = () => {
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
<h4 className="flex text-lg justify-center items-center font-semibold my-3">
{t("docSize")}
</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size: any) => (
<div className="flex flex-row justify-between">
<div key={size.label} className="items-center flex flex-row gap-2 cursor-pointer">
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
<div
key={size.label}
className="items-center flex flex-row gap-2 cursor-pointer"
>
<input
type="radio"
name="size"
value={size.label}
checked={selectedSize === size.label}
onChange={() => setSelectedSize(size.label)}
className="text-red-600 focus:ring-red-600"
/>
<div className="text-sm">{size.label}</div>
</div>
<div className="">
@ -617,15 +683,30 @@ const DetailDocument = () => {
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
<input
type="checkbox"
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll")}</span>
</label>
</div>
{/* Tombol Download */}
<button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
<button
onClick={handleDownload}
className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="white"
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
/>
</svg>
{t("download")}
</button>
@ -633,29 +714,90 @@ const DetailDocument = () => {
{/* Tombol Bagikan */}
<div className="flex flex-row py-3">
<p className="text-base font-semibold">{t("share")}</p>
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
<a
className="ml-8 cursor-pointer"
onClick={() =>
handleShare(
"fb",
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
)
}
>
<Icon
icon="brandico:facebook"
height="20"
className="px-auto text-red-600 text-center"
/>
</a>
<a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
<Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
<a
className="ml-5 cursor-pointer"
onClick={() =>
handleShare(
"tw",
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
)
}
>
<Icon
icon="mdi:twitter"
width="23"
className="text-red-600 text-center"
/>
</a>
<a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
<Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
<a
className="ml-5 cursor-pointer"
onClick={() =>
handleShare(
"wa",
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
)
}
>
<Icon
icon="ri:whatsapp-fill"
width="23"
className="text-red-600 text-center"
/>
</a>
<Popover>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
<Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
<PopoverTrigger
className="flex justify-end gap-1 cursor-pointer"
asChild
>
<a
className="ml-5 cursor-pointer"
data-toggle="dropdown"
href="#"
aria-expanded="false"
>
<Icon
icon="material-symbols-light:mail"
width="23"
className="text-red-600 text-center"
/>
</a>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>
@ -671,8 +813,15 @@ const DetailDocument = () => {
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
<Textarea
placeholder="Type your comments here."
className="flex w-full pb-12"
onChange={getInputValue}
/>
<button
onClick={() => postData()}
className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
>
{t("send")}
</button>
</div>
@ -683,13 +832,24 @@ const DetailDocument = () => {
{listSuggestion?.map((data: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<img
src={data?.suggestionFrom?.profilePictureUrl}
className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{Number(data.suggestionFrom?.roleId) == 2 ||
Number(data.suggestionFrom?.roleId) == 3 ||
Number(data.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{data?.message}
</p>
<div>
<a
style={
@ -702,11 +862,16 @@ const DetailDocument = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
{Number(data.suggestionFrom?.id) == Number(userId) ||
Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
) : (
""
@ -715,14 +880,25 @@ const DetailDocument = () => {
</div>
</div>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
<div
id={`comment-id-${data.id}`}
className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
>
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -732,30 +908,51 @@ const DetailDocument = () => {
? data.children?.map((child1: any) => (
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<img
src={child1.suggestionFrom?.profilePictureUrl}
onError={addDefaultProfile}
alt=""
className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
<b>
{Number(child1.suggestionFrom?.roleId) == 2 ||
Number(child1.suggestionFrom?.roleId) == 3 ||
Number(child1.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child1.createdAt)
)}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{parse(String(child1?.message))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child1.id}`)}
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -763,21 +960,39 @@ const DetailDocument = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
<div
id={`comment-id-${child1.id}`}
className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
>
<Textarea
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply")}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -787,30 +1002,57 @@ const DetailDocument = () => {
? child1.children?.map((child2: any) => (
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<img
src={
child2.suggestionFrom?.profilePictureUrl
}
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
<b>
{Number(
child2.suggestionFrom?.roleId
) == 2 ||
Number(child2.suggestionFrom?.roleId) ==
3 ||
Number(child2.suggestionFrom?.roleId) ==
4
? "HUMAS POLRI"
: child2.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child2.createdAt)
)}
</p>
<p className="text-slate-500 text-sm mb-4">
{parse(String(child2?.message))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
<div>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child2.id}`)}
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -818,20 +1060,40 @@ const DetailDocument = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
<div
id={`comment-id-${child2.id}`}
className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
>
<Textarea
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder={t("enterReply")}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<a
onClick={() => postDataChild(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>

338
app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
View File

@ -8,11 +8,23 @@ import NewContent from "@/components/landing-page/new-content";
import { useToast } from "@/components/ui/use-toast";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, error, loading, warning } from "@/config/swal";
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
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, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
import {
checkMaliciousText,
formatDateToIndonesian,
getPublicLocaleTimestamp,
} from "@/utils/globals";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import { useSearchParams } from "next/navigation";
@ -227,7 +239,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}`;
@ -287,7 +300,9 @@ const DetailInfo = () => {
}
async function sendSuggestionChild(parentId: any) {
const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
const inputElement = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputElement && inputElement.value.length > 3) {
loading();
@ -300,9 +315,11 @@ const DetailInfo = () => {
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);
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -344,8 +361,8 @@ const DetailInfo = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
@ -379,7 +396,10 @@ const DetailInfo = () => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<>
@ -389,7 +409,17 @@ const DetailInfo = () => {
<div className="md:w-3/4">
{/* Gambar Besar */}
<div className="relative">
<Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
<Image
width={1920}
height={1080}
src={
detailDataImage?.files?.length > 0
? detailDataImage.files[selectedImage]?.url
: detailDataImage?.thumbnailLink
}
alt="Main"
className="rounded-lg w-auto h-fit"
/>
<div className="absolute top-4 left-4"></div>
</div>
@ -397,7 +427,13 @@ const DetailInfo = () => {
<div className="py-4 flex flex-row gap-3">
{detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}>
<Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
<Image
alt="imgae-small"
width={1920}
height={1080}
src={file?.url}
className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
/>
</a>
))}
</div>
@ -406,7 +442,10 @@ const DetailInfo = () => {
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
{t("by")}&nbsp;
<span className="font-semibold text-black dark:text-white">
{detailDataImage?.uploadedBy?.userLevel?.name}
</span>
</p>
{/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")}
@ -414,7 +453,10 @@ const DetailInfo = () => {
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")}&nbsp;
{formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
{formatDateToIndonesian(
new Date(detailDataImage?.updatedAt)
)}{" "}
{"WIB"}
</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
&nbsp;|&nbsp;
@ -432,20 +474,33 @@ const DetailInfo = () => {
{/* Keterangan */}
<div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
<div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
<h1 className="flex flex-row font-bold text-2xl my-8">
{detailDataImage?.title}
</h1>
<div
className="font-light text-justify mb-4"
dangerouslySetInnerHTML={{
__html: detailDataImage?.htmlDescription,
}}
/>
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
{isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => handleDeleteWishlist()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">Hapus</p>
</a>
) : (
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => doBookmark()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">Simpan</p>
</a>
@ -454,13 +509,20 @@ const DetailInfo = () => {
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
<Link
href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
>
{detailDataImage?.category?.name}
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
{detailDataImage?.tags?.split(",").map((tag: string) => (
<a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
<a
onClick={() => router.push(`/all/filter?tag=${tag}`)}
key={tag}
className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
>
{tag}
</a>
))}
@ -469,14 +531,26 @@ const DetailInfo = () => {
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
<h4 className="flex text-lg justify-center items-center font-semibold my-3">
Opsi Ukuran Foto
</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size: any) => (
<div className="flex flex-row justify-between">
<div key={size.label} className="items-center flex flex-row gap-2 cursor-pointer">
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
<div
key={size.label}
className="items-center flex flex-row gap-2 cursor-pointer"
>
<input
type="radio"
name="size"
value={size.label}
checked={selectedSize === size.label}
onChange={() => setSelectedSize(size.label)}
className="text-red-600 focus:ring-red-600"
/>
<div className="text-sm">{size.label}</div>
</div>
<div className="">
@ -489,15 +563,30 @@ const DetailInfo = () => {
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
<input
type="checkbox"
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>Download Semua File?</span>
</label>
</div>
{/* Tombol Download */}
<button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
<button
onClick={handleDownload}
className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="white"
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
/>
</svg>
Download
</button>
@ -510,8 +599,15 @@ const DetailInfo = () => {
<div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
<Textarea
placeholder={t("leaveComment")}
className="flex w-full pb-12"
onChange={getInputValue}
/>
<button
onClick={() => postData()}
className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
>
{t("send")}
</button>
<div className="border-b-2 border-slate-300 mt-4 w-full self-center"></div>
@ -522,7 +618,9 @@ const DetailInfo = () => {
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={data?.suggestionFrom?.profilePictureUrl}
@ -532,10 +630,16 @@ const DetailInfo = () => {
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{Number(data.suggestionFrom?.roleId) == 2 ||
Number(data.suggestionFrom?.roleId) == 3 ||
Number(data.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{data?.message}
</p>
<div>
<a
style={
@ -548,11 +652,16 @@ const DetailInfo = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
{Number(data.suggestionFrom?.id) == Number(userId) ||
Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
) : (
""
@ -561,14 +670,25 @@ const DetailInfo = () => {
</div>
</div>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
<div
id={`comment-id-${data.id}`}
className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
>
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -579,7 +699,9 @@ const DetailInfo = () => {
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={child1.suggestionFrom?.profilePictureUrl}
@ -590,26 +712,42 @@ const DetailInfo = () => {
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
<b>
{Number(child1.suggestionFrom?.roleId) == 2 ||
Number(child1.suggestionFrom?.roleId) == 3 ||
Number(child1.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child1.createdAt)
)}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{parse(String(child1?.message))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child1.id}`)}
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -617,21 +755,39 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
<div
id={`comment-id-${child1.id}`}
className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
>
<Textarea
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply")}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -642,10 +798,14 @@ const DetailInfo = () => {
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={child2.suggestionFrom?.profilePictureUrl}
src={
child2.suggestionFrom?.profilePictureUrl
}
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
@ -653,26 +813,46 @@ const DetailInfo = () => {
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
<b>
{Number(
child2.suggestionFrom?.roleId
) == 2 ||
Number(child2.suggestionFrom?.roleId) ==
3 ||
Number(child2.suggestionFrom?.roleId) ==
4
? "HUMAS POLRI"
: child2.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child2.createdAt)
)}
</p>
<p className="text-slate-500 text-sm mb-4">
{parse(String(child2?.message))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
<div>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child2.id}`)}
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -680,20 +860,40 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div
id={`comment-id-${child2.id}`}
className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
>
<Textarea
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder="Masukkan balasan anda"
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<a
onClick={() => postDataChild(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>

437
app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
View File

@ -147,13 +147,29 @@ import NewContent from "@/components/landing-page/new-content";
import { useToast } from "@/components/ui/use-toast";
import { getCookiesDecrypt } from "@/lib/utils";
import { close, error, loading, successCallback, warning } from "@/config/swal";
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
import {
checkWishlistStatus,
createPublicSuggestion,
deletePublicSuggestion,
deleteWishlist,
getDetail,
getPublicSuggestionList,
saveWishlist,
} from "@/service/landing/landing";
import { Link, useRouter } from "@/i18n/routing";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
import {
checkMaliciousText,
formatDateToIndonesian,
getPublicLocaleTimestamp,
} from "@/utils/globals";
import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2";
import parse from "html-react-parser";
@ -203,7 +219,11 @@ const DetailInfo = () => {
const poldaName = params?.polda_name;
const satkerName = params?.satker_name;
let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
let prefixPath = poldaName
? `/polda/${poldaName}`
: satkerName
? `/satker/${satkerName}`
: "/";
useEffect(() => {
const timer = setTimeout(() => {
@ -227,7 +247,7 @@ const DetailInfo = () => {
setIsFromSPIT(response?.data?.data?.isFromSPIT);
setWidth(window.innerWidth);
setContent(response?.data.data);
setListSuggestion(responseGet.data?.data);
setListSuggestion(responseGet?.data?.data);
setMain({
id: response?.data?.data?.files[0]?.id,
type: response?.data?.data?.fileType.name,
@ -401,7 +421,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}`;
@ -435,7 +456,11 @@ const DetailInfo = () => {
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");
window.open(
`https://web.whatsapp.com/send?${url}`,
"_blank",
"noreferrer"
);
} else {
window.open(url);
}
@ -524,7 +549,9 @@ const DetailInfo = () => {
}
async function sendSuggestionChild(parentId: any) {
const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
const inputElement = document.querySelector(
`#input-comment-${parentId}`
) as HTMLInputElement;
if (inputElement && inputElement.value.length > 3) {
loading();
@ -537,9 +564,11 @@ const DetailInfo = () => {
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);
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -581,8 +610,8 @@ const DetailInfo = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
@ -616,7 +645,10 @@ const DetailInfo = () => {
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
return (
<>
@ -633,10 +665,16 @@ const DetailInfo = () => {
<div className="relative">
{/* <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={2560} height={1440} src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" /> */}
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={2560}
height={1440}
src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink}
src={
detailDataImage?.files?.length > 0
? detailDataImage.files[selectedImage]?.url
: detailDataImage?.thumbnailLink
}
alt="Main"
className="rounded-lg w-auto h-fit"
/>
@ -657,7 +695,9 @@ const DetailInfo = () => {
{detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}>
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1920}
height={1080}
alt="image-small"
@ -673,7 +713,10 @@ const DetailInfo = () => {
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
{t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
{t("by")}&nbsp;
<span className="font-semibold text-black dark:text-white">
{detailDataImage?.uploadedBy?.userLevel?.name}
</span>
</p>
{/* <p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")}
@ -681,7 +724,10 @@ const DetailInfo = () => {
</p> */}
<p className="text-xs lg:text-sm">
&nbsp;|&nbsp;{t("updatedOn")}&nbsp;
{formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
{formatDateToIndonesian(
new Date(detailDataImage?.updatedAt)
)}{" "}
{"WIB"}
</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
&nbsp;|&nbsp;
@ -699,20 +745,33 @@ const DetailInfo = () => {
{/* Keterangan */}
<div className="w-full">
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
<div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">
{detailDataImage?.title}
</h1>
<div
className="font-light text-justify mb-5 space-y-4 lg:mb-0"
dangerouslySetInnerHTML={{
__html: detailDataImage?.htmlDescription,
}}
/>
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
{isSaved ? (
<a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => handleDeleteWishlist()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark" width={40} />
<p className="text-base lg:text-lg">{t("delete")}</p>
</a>
) : (
<a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<a
onClick={() => doBookmark()}
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
>
<Icon icon="material-symbols:bookmark-outline" width={40} />
<p className="text-base lg:text-lg">{t("save")}</p>
</a>
@ -721,13 +780,20 @@ const DetailInfo = () => {
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
<Link
href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
>
{detailDataImage?.category?.name}
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
{detailDataImage?.tags?.split(",").map((tag: string) => (
<a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
<a
onClick={() => router.push(`/all/filter?tag=${tag}`)}
key={tag}
className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
>
{tag}
</a>
))}
@ -736,14 +802,26 @@ const DetailInfo = () => {
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("imageSize")}</h4>
<h4 className="flex text-lg justify-center items-center font-semibold my-3">
{t("imageSize")}
</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size: any) => (
<div className="flex flex-row justify-between">
<div key={size?.label} className="items-center flex flex-row gap-2 cursor-pointer">
<input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
<div
key={size?.label}
className="items-center flex flex-row gap-2 cursor-pointer"
>
<input
type="radio"
name="size"
value={size?.label}
checked={selectedSize === size?.label}
onChange={(e) => setImageSizeSelected(e.target.value)}
className="text-red-600 focus:ring-red-600"
/>
<div className="text-sm">{size?.label}</div>
</div>
<div className="text-sm">{size?.value}</div>
@ -754,15 +832,30 @@ const DetailInfo = () => {
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
<input
type="checkbox"
className="text-red-600 focus:ring-red-600"
onChange={() => setIsDownloadAll(!isDownloadAll)}
/>
<span>{t("downloadAll")}</span>
</label>
</div>
{/* Tombol Download */}
<button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
<button
onClick={handleDownload}
className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
>
<path
fill="white"
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
/>
</svg>
{t("download")}
</button>
@ -770,29 +863,90 @@ const DetailInfo = () => {
{/* Tombol Bagikan */}
<div className="flex flex-row mt-5 justify-center">
<p className="text-base font-semibold">{t("share")}</p>
<a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
<Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
<a
className="ml-8 cursor-pointer"
onClick={() =>
handleShare(
"fb",
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
)
}
>
<Icon
icon="brandico:facebook"
height="20"
className="px-auto text-red-600 text-center"
/>
</a>
<a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
<Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
<a
className="ml-5 cursor-pointer"
onClick={() =>
handleShare(
"tw",
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
)
}
>
<Icon
icon="mdi:twitter"
width="23"
className="text-red-600 text-center"
/>
</a>
<a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
<Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
<a
className="ml-5 cursor-pointer"
onClick={() =>
handleShare(
"wa",
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
)
}
>
<Icon
icon="ri:whatsapp-fill"
width="23"
className="text-red-600 text-center"
/>
</a>
<Popover>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
<Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
<PopoverTrigger
className="flex justify-end gap-1 cursor-pointer"
asChild
>
<a
className="ml-5 cursor-pointer"
data-toggle="dropdown"
href="#"
aria-expanded="false"
>
<Icon
icon="material-symbols-light:mail"
width="23"
className="text-red-600 text-center"
/>
</a>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">{t("shareTo")}</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
<p className="text-base font-semibold mb-1">
{t("destinationEmail")}
</p>
<Input
value={emailShareInput}
onChange={(event) =>
setEmailShareInput(event.target.value)
}
onKeyPress={handleEmailList}
type="email"
placeholder={t("pressEnter")}
/>
</div>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<Button
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
onClick={() => shareToEmail()}
>
{t("send")}
</Button>
</div>
@ -808,8 +962,15 @@ const DetailInfo = () => {
<div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
<div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">{t("comment")}</p>
<Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
<Textarea
placeholder={t("leaveComment")}
className="flex w-full pb-12"
onChange={getInputValue}
/>
<button
onClick={() => postData()}
className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
>
{t("send")}
</button>
<div className="border-b-2 border-slate-300 mt-4 w-full self-center"></div>
@ -820,7 +981,9 @@ const DetailInfo = () => {
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={data?.suggestionFrom?.profilePictureUrl}
@ -830,10 +993,16 @@ const DetailInfo = () => {
/>
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{Number(data.suggestionFrom?.roleId) == 2 ||
Number(data.suggestionFrom?.roleId) == 3 ||
Number(data.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{data?.message}
</p>
<div>
<a
style={
@ -846,11 +1015,16 @@ const DetailInfo = () => {
onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2"
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
{Number(data.suggestionFrom?.id) == Number(userId) ||
Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
) : (
""
@ -859,14 +1033,25 @@ const DetailInfo = () => {
</div>
</div>
{visibleInput === `comment-id-${data.id}` && (
<div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
<div
id={`comment-id-${data.id}`}
className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
>
<Textarea
id={`input-comment-${data.id}`}
className="p-4 focus:outline-none focus:border-sky-500"
placeholder={t("enterReply")}
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${data.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -877,7 +1062,9 @@ const DetailInfo = () => {
<div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={child1.suggestionFrom?.profilePictureUrl}
@ -888,26 +1075,42 @@ const DetailInfo = () => {
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))}
<b>
{Number(child1.suggestionFrom?.roleId) == 2 ||
Number(child1.suggestionFrom?.roleId) == 3 ||
Number(child1.suggestionFrom?.roleId) == 4
? "HUMAS POLRI"
: child1.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child1.createdAt)
)}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
{parse(String(child1?.message))}
</p>
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child1.id}`)}
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child1.suggestionFrom?.id) == Number(userId)
Number(child1.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -915,21 +1118,39 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child1.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child1.id}` && (
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
<div
id={`comment-id-${child1.id}`}
className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
>
<Textarea
name=""
className="mt-2 "
id={`input-comment-${child1.id}`}
placeholder={t("enterReply")}
/>
<div className="flex flex-row mt-2 gap-3">
<a onClick={() => postDataChild(child1.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child1.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>
@ -940,10 +1161,14 @@ const DetailInfo = () => {
<div className="">
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<Image
placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
width={1080}
height={1080}
src={child2.suggestionFrom?.profilePictureUrl}
src={
child2.suggestionFrom?.profilePictureUrl
}
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
onError={addDefaultProfile}
alt=""
@ -951,26 +1176,46 @@ const DetailInfo = () => {
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))}
<b>
{Number(
child2.suggestionFrom?.roleId
) == 2 ||
Number(child2.suggestionFrom?.roleId) ==
3 ||
Number(child2.suggestionFrom?.roleId) ==
4
? "HUMAS POLRI"
: child2.suggestionFrom?.fullname}
</b>{" "}
{getPublicLocaleTimestamp(
new Date(child2.createdAt)
)}
</p>
<p className="text-slate-500 text-sm mb-4">
{parse(String(child2?.message))}
</p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
<div>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {
display: "none",
}
: {}
}
onClick={() => showInput(`comment-id-${child2.id}`)}
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("reply")}
</small>
</a>
<a
style={
Number(child2.suggestionFrom?.id) == Number(userId)
Number(child2.suggestionFrom?.id) ==
Number(userId)
? {}
: {
display: "none",
@ -978,20 +1223,40 @@ const DetailInfo = () => {
}
onClick={() => deleteData(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("delete")}
</small>
</a>
</div>
</div>
</div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div
id={`comment-id-${child2.id}`}
className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
>
<Textarea
name=""
id={`input-comment-${child2.id}`}
className="my-2"
placeholder="Masukkan balasan anda"
/>
<div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
<a
onClick={() => postDataChild(child2.id)}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("send")}
</small>
</a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
<a
onClick={() =>
showInput(`comment-id-${child2.id}`)
}
>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
{t("cancel")}
</small>
</a>
</div>
</div>

4
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -99,7 +99,7 @@ const IndeksDetail = () => {
// const response = await postBlogComments(data);
// console.log(response);
// const responseGet = await getPublicSuggestionList(slug);
// console.log(responseGet.data?.data);
// console.log(responseGet?.data?.data);
// setMessageChild("");
// // $(":input").val("");
// close();
@ -123,7 +123,7 @@ const IndeksDetail = () => {
const response = await postBlogComments(data);
console.log(response);
const responseGet = await getPublicSuggestionList(slug);
console.log(responseGet.data?.data);
console.log(responseGet?.data?.data);
getDataComment();
inputMsg.value = "";
close();

10
components/main/audio-detail.tsx
View File

@ -102,7 +102,7 @@ const DetailAudio = () => {
setIsFromSPIT(response?.data?.data?.isFromSPIT);
setWidth(window.innerWidth);
setContent(response?.data?.data);
setListSuggestion(responseGet.data?.data);
setListSuggestion(responseGet?.data?.data);
setMain({
id: response?.data?.data?.files[0]?.id,
type: response?.data?.data?.fileType.name,
@ -477,8 +477,8 @@ const DetailAudio = () => {
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -493,8 +493,8 @@ const DetailAudio = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
const deleteData = (dataId: any) => {

10
components/main/document-detail.tsx
View File

@ -86,7 +86,7 @@ const DetailDocument = () => {
setIsFromSPIT(response?.data?.data?.isFromSPIT);
setWidth(window.innerWidth);
setContent(response?.data.data);
setListSuggestion(responseGet.data?.data);
setListSuggestion(responseGet?.data?.data);
setMain({
id: response?.data?.data?.files[0]?.id,
type: response?.data?.data?.fileType.name,
@ -344,8 +344,8 @@ const DetailDocument = () => {
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -360,8 +360,8 @@ const DetailDocument = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
const deleteData = (dataId: any) => {

10
components/main/image-detail.tsx
View File

@ -108,7 +108,7 @@ const DetailImage = (data: any) => {
setIsFromSPIT(response?.data?.data?.isFromSPIT);
setWidth(window.innerWidth);
setContent(response?.data.data);
setListSuggestion(responseGet.data?.data);
setListSuggestion(responseGet?.data?.data);
setMain({
id: response?.data?.data?.files[0]?.id,
type: response?.data?.data?.fileType.name,
@ -428,8 +428,8 @@ const DetailImage = (data: any) => {
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -471,8 +471,8 @@ const DetailImage = (data: any) => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}

10
components/main/video-detail.tsx
View File

@ -90,7 +90,7 @@ const DetailVideo = () => {
setIsFromSPIT(response?.data?.data?.isFromSPIT);
setWidth(window.innerWidth);
setContent(response?.data.data);
setListSuggestion(responseGet.data?.data);
setListSuggestion(responseGet?.data?.data);
setMain({
id: response?.data?.data?.files[0]?.id,
type: response?.data?.data?.fileType.name,
@ -342,8 +342,8 @@ const DetailVideo = () => {
const responseGet: any = await getPublicSuggestionList(
slug?.split("-")?.[0]
);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
// Reset input field
inputElement.value = "";
@ -358,8 +358,8 @@ const DetailVideo = () => {
const response = await deletePublicSuggestion(dataId);
console.log(response);
const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
console.log(responseGet.data?.data);
setListSuggestion(responseGet.data?.data);
console.log(responseGet?.data?.data);
setListSuggestion(responseGet?.data?.data);
close();
}
const deleteData = (dataId: any) => {