270 lines
12 KiB
TypeScript
270 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { MailIcon, UserIcon } from "lucide-react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTrigger,
|
|
} from "../ui/dialog";
|
|
import { Button } from "../ui/button";
|
|
import { useEffect, useState } from "react";
|
|
import { useTranslations } from "next-intl";
|
|
import { Input } from "../ui/input";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { close, error, loading } from "@/config/swal";
|
|
import {
|
|
createSuggestion,
|
|
deleteSuggestion,
|
|
getSuggestionList,
|
|
} from "@/service/curated-content/curated-content";
|
|
import { formatDateToIndonesian } from "@/utils/globals";
|
|
|
|
export default function SuggestionModal(props: {
|
|
id: number;
|
|
numberOfSuggestion: number;
|
|
}) {
|
|
const { id, numberOfSuggestion } = props;
|
|
const t = useTranslations("Form");
|
|
|
|
const [suggestionValue, setSuggestionValue] = useState("");
|
|
const userId = getCookiesDecrypt("uie");
|
|
|
|
const [listData, setListData] = useState([]);
|
|
const [replyId, setReplyId] = useState(0);
|
|
const [replyValue, setReplyValue] = useState("");
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, [id]);
|
|
|
|
async function initState() {
|
|
loading();
|
|
const response = await getSuggestionList(id);
|
|
setListData(response?.data?.data);
|
|
close();
|
|
}
|
|
|
|
const saveSuggestion = async (parentId?: number) => {
|
|
console.log("suggestion vval", suggestionValue);
|
|
const data = {
|
|
mediaUploadId: Number(id),
|
|
message: parentId ? replyValue : suggestionValue,
|
|
parentId: parentId ? parentId : null,
|
|
};
|
|
loading();
|
|
const response = await createSuggestion(data);
|
|
if (response?.error) {
|
|
error(response?.message);
|
|
return false;
|
|
}
|
|
close();
|
|
setSuggestionValue("");
|
|
setReplyValue("");
|
|
initState();
|
|
};
|
|
|
|
const handleDeleteSuggestion = async (id: number) => {
|
|
loading();
|
|
const response = await deleteSuggestion(id);
|
|
if (response?.error) {
|
|
error(response?.message);
|
|
return false;
|
|
}
|
|
close();
|
|
initState();
|
|
};
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger>
|
|
<a className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm cursor-pointer">
|
|
<MailIcon />
|
|
<p className="">
|
|
{t("suggestion-box", { defaultValue: "Suggestion Box" })} ({numberOfSuggestion || 0})
|
|
</p>
|
|
</a>
|
|
</DialogTrigger>
|
|
<DialogContent size="md" className="px-1 lg:px-4">
|
|
<DialogHeader>Suggestions</DialogHeader>
|
|
|
|
<div className="flex flex-row items-center justify-center">
|
|
<Input
|
|
value={suggestionValue}
|
|
onChange={(e) => setSuggestionValue(e.target.value)}
|
|
/>
|
|
<Button size="sm" onClick={() => saveSuggestion()}>
|
|
{t("submit", { defaultValue: "Submit" })}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{listData?.length > 0 &&
|
|
listData?.map((data: any) => (
|
|
<div key={data?.id} className="flex flex-col gap-1 w-full">
|
|
<div className="flex flex-row gap-2">
|
|
<div className="mt-2 w-[24px] h-[24px] md:w-[50px] md:h-[50px] border-2 flex items-center justify-center rounded-full bg-stone-200 border-stone-300">
|
|
<UserIcon size={36} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<div className="flex justify-between bg-stone-200 px-2 lg:px-4 py-2 w-full rounded-lg">
|
|
<div className="flex flex-col gap-1">
|
|
<b className="text-sm md:text-base">
|
|
{data.suggestionFrom?.fullname}
|
|
</b>
|
|
<p className="text-xs md:text-sm">{data.message}</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs md:text-sm text-right">
|
|
{formatDateToIndonesian(data.createdAt)}
|
|
</p>
|
|
<div className="flex flex-col items-end md:flex-row gap-2 text-xs md:text-sm justify-end">
|
|
<a
|
|
className="text-primary cursor-pointer"
|
|
onClick={() => {
|
|
setReplyId(replyId === data?.id ? 0 : data?.id);
|
|
setReplyValue("");
|
|
}}
|
|
>
|
|
Balas
|
|
</a>
|
|
<a
|
|
onClick={() => handleDeleteSuggestion(data?.id)}
|
|
className="text-destructive cursor-pointer"
|
|
>
|
|
Hapus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{replyId === data?.id && (
|
|
<div className="flex flex-row items-center justify-center">
|
|
<Input
|
|
value={replyValue}
|
|
onChange={(e) => setReplyValue(e.target.value)}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => saveSuggestion(data?.id)}
|
|
>
|
|
{t("submit", { defaultValue: "Submit" })}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{data?.children.length > 0 &&
|
|
data?.children.map((child: any) => (
|
|
<div key={child.id} className="flex flex-row gap-2">
|
|
<div className="w-[50px]"></div>
|
|
<div className="flex flex-col w-full gap-2">
|
|
<div className="flex flex-row gap-2 w-full">
|
|
<div className="mt-2 w-[24px] h-[24px] md:w-[50px] md:h-[50px] border-2 flex items-center justify-center rounded-full bg-stone-200 border-stone-300">
|
|
<UserIcon size={36} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<div className="flex justify-between bg-stone-100 px-2 lg:px-4 py-2 w-full rounded-lg">
|
|
<div className="flex flex-col gap-1">
|
|
<b className="text-xs md:text-base">
|
|
{child.suggestionFrom?.fullname}
|
|
</b>
|
|
<p className="text-xs md:text-sm">
|
|
{child.message}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs md:text-sm text-right">
|
|
{formatDateToIndonesian(child.createdAt)}
|
|
</p>
|
|
<div className="flex flex-col items-end md:flex-row gap-2 text-xs md:text-sm justify-end">
|
|
<a
|
|
className="text-primary cursor-pointer"
|
|
onClick={() => {
|
|
setReplyId(
|
|
replyId === child?.id ? 0 : child?.id
|
|
);
|
|
setReplyValue("");
|
|
}}
|
|
>
|
|
Balas
|
|
</a>
|
|
<a
|
|
onClick={() =>
|
|
handleDeleteSuggestion(child?.id)
|
|
}
|
|
className="text-destructive cursor-pointer"
|
|
>
|
|
Hapus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{replyId === child?.id && (
|
|
<div className="flex flex-row items-center justify-center">
|
|
<Input
|
|
value={replyValue}
|
|
onChange={(e) =>
|
|
setReplyValue(e.target.value)
|
|
}
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
onClick={() => saveSuggestion(child?.id)}
|
|
>
|
|
{t("submit", { defaultValue: "Submit" })}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{child?.children.length > 0 &&
|
|
child?.children.map((items: any) => (
|
|
<div key={items.id} className="flex flex-row gap-2">
|
|
<div className="w-[50px]"></div>
|
|
<div className="flex flex-row gap-2 w-full">
|
|
<div className="mt-2 w-[24px] h-[24px] md:w-[50px] md:h-[50px] border-2 flex items-center justify-center rounded-full bg-stone-200 border-stone-300">
|
|
<UserIcon size={36} />
|
|
</div>
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<div className="flex justify-between bg-stone-50 px-2 lg:px-4 py-2 w-full rounded-lg">
|
|
<div className="flex flex-col gap-1">
|
|
<b className="text-xs md:text-base">
|
|
{items.suggestionFrom?.fullname}
|
|
</b>
|
|
<p className="text-xs md:text-sm">
|
|
{items.message}
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<p className="text-xs md:text-sm text-right">
|
|
{formatDateToIndonesian(
|
|
items.createdAt
|
|
)}
|
|
</p>
|
|
<div className="flex flex-col items-end md:flex-row gap-2 text-xs md:text-sm justify-end">
|
|
<a
|
|
onClick={() =>
|
|
handleDeleteSuggestion(items?.id)
|
|
}
|
|
className="text-destructive cursor-pointer"
|
|
>
|
|
Hapus
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|