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

fix: fixed button share in rewrite section

This commit is contained in:
sabdayagra 2025-01-10 22:14:49 +07:00
parent 7a264a8e25
commit defda27a80
5 changed files with 466 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
app/[locale]/(public)/content-management/download/page.tsx
View File

@ -12,8 +12,11 @@ import SidebarManagement from "@/components/landing-page/sidebar-management";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { getCookiesDecrypt } from "@/lib/utils"; import { getCookiesDecrypt } from "@/lib/utils";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Icon } from "@iconify/react/dist/iconify.js"; import { Icon } from "@iconify/react/dist/iconify.js";
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";
const Galery = (props: any) => { const Galery = (props: any) => {
const [profile, setProfile] = useState<any>(); const [profile, setProfile] = useState<any>();
@ -21,7 +24,6 @@ const Galery = (props: any) => {
const router = useRouter(); const router = useRouter();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const searchParams = useSearchParams(); const searchParams = useSearchParams();
// const { id } = router.query;
const page: any = searchParams?.get("page"); const page: any = searchParams?.get("page");
const title = searchParams?.get("title"); const title = searchParams?.get("title");
const category = searchParams?.get("category"); const category = searchParams?.get("category");
@ -29,7 +31,6 @@ const Galery = (props: any) => {
const { isInstitute, instituteId } = props; const { isInstitute, instituteId } = props;
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie"); const userRoleId = getCookiesDecrypt("urie");
const [totalContent, setTotalContent] = useState(); const [totalContent, setTotalContent] = useState();
const [categoryFilter] = useState([]); const [categoryFilter] = useState([]);
const [formatFilter] = useState([]); const [formatFilter] = useState([]);
@ -43,6 +44,10 @@ const Galery = (props: any) => {
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState(""); const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState(); const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => { useEffect(() => {
getDataVideo(); getDataVideo();
@ -220,8 +225,44 @@ const Galery = (props: any) => {
// toast.success("Link Berhasil Di Copy"); // toast.success("Link Berhasil Di Copy");
}; };
const [hasMounted, setHasMounted] = useState(false); async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
}
close();
successCallback("Konten Telah Dikirim");
}
}
const handleEmailList = (e: any) => {
const arrayEmail: any = [];
for (let i = 0; i < emailShareList?.length; i += 1) {
arrayEmail.push(emailShareList[i]);
}
if (e.which == 13) {
if (e.target.value) {
arrayEmail.push(e.target.value);
setEmailShareList(arrayEmail);
setEmailShareInput("");
}
e.preventDefault();
}
return false;
};
const [hasMounted, setHasMounted] = useState(false);
// Hooks // Hooks
useEffect(() => { useEffect(() => {
setHasMounted(true); setHasMounted(true);
@ -278,35 +319,49 @@ const Galery = (props: any) => {
contentVideo?.length > 0 ? ( contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => ( {contentVideo?.map((video: any) => (
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300"> <Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}> <div>
<img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div> <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg " />
<DropdownMenu> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
<DropdownMenuTrigger className="flex items-center gap-1"> </Link>
<a> <Popover>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2"> <PopoverTrigger asChild>
<Icon icon="oi:share" fontSize={20} /> <button className="w-full flex items-center gap-2">
<p className="text-base font-semibold">Bagikan</p> <Icon icon="oi:share" fontSize={20} />
</button> <p className="text-base font-semibold mb-3">Bagikan</p>
</div> </button>
</DropdownMenuItem> </PopoverTrigger>
<DropdownMenuItem> <PopoverContent>
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <div className="flex flex-col">
<Icon icon="fa:trash" fontSize={20} /> <h1 className="mb-2">Share Ke Email</h1>
<p className="text-base font-semibold">Hapus</p> <div className="flex flex-col mb-2">
</a> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
</DropdownMenuItem> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
</DropdownMenuContent> </div>
</DropdownMenu> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
</Link> Kirim
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -320,7 +375,7 @@ const Galery = (props: any) => {
contentAudio?.length > 0 ? ( contentAudio?.length > 0 ? (
<div className=" grid grid-cols-1 gap-6 "> <div className=" grid grid-cols-1 gap-6 ">
{contentAudio?.map((audio: any) => ( {contentAudio?.map((audio: any) => (
<div key={audio?.id} className="flex flex-col sm:flex-row items-center hover:scale-110 transition-transform duration-300 bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"> <div key={audio?.id} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16"> <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
<path <path
@ -329,9 +384,9 @@ const Galery = (props: any) => {
/> />
</svg> </svg>
</div> </div>
<div className="flex flex-col flex-1"> <div className="flex flex-col object-cover flex-1">
<Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm"> <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`}>
{audio?.mediaUpload?.title} <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
</Link> </Link>
</div> </div>
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
@ -349,29 +404,41 @@ const Galery = (props: any) => {
</svg> </svg>
</div> </div>
</div> </div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> <PopoverTrigger asChild>
<Icon icon="oi:share" fontSize={20} /> <button className="w-full flex items-center gap-2">
<p className="text-base font-semibold">Bagikan</p> <Icon icon="oi:share" fontSize={20} />
</button> <p className="text-base font-semibold mb-3">Bagikan</p>
</div> </button>
</DropdownMenuItem> </PopoverTrigger>
<DropdownMenuItem> <PopoverContent>
<a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <div className="flex flex-col">
<Icon icon="fa:trash" fontSize={20} /> <h1 className="mb-2">Share Ke Email</h1>
<p className="text-base font-semibold">Hapus</p> <div className="flex flex-col mb-2">
</a> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
</DropdownMenuItem> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
</DropdownMenuContent> </div>
</DropdownMenu> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
Kirim
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div> </div>
))} ))}
</div> </div>
@ -384,36 +451,48 @@ const Galery = (props: any) => {
contentImage?.length > 0 ? ( contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentImage?.map((image: any) => ( {contentImage?.map((image: any) => (
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300"> <Card key={image?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full h-full rounded-lg p-0">
<Link href={`/image/detail/${image?.mediaUpload?.slug}`}> <Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
<img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
</Link> </Link>
</CardContent> <Popover>
<DropdownMenu> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<DropdownMenuTrigger className="flex items-center gap-1"> <a className="flex justify-end items-end place-items-end">
<a> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> </a>
</a> </PopoverTrigger>
</DropdownMenuTrigger> <PopoverContent className="w-40">
<DropdownMenuContent> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<DropdownMenuItem> <Popover>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <PopoverTrigger asChild>
<button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> <button className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} /> <Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p> <p className="text-base font-semibold mb-3">Bagikan</p>
</button> </button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">Share Ke Email</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
</div>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
Kirim
</Button>
</div>
</PopoverContent>
</Popover>
</div> </div>
</DropdownMenuItem> <a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<DropdownMenuItem>
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} /> <Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p> <p className="text-base font-semibold">Hapus</p>
</a> </a>
</DropdownMenuItem> </PopoverContent>
</DropdownMenuContent> </Popover>
</DropdownMenu> </CardContent>
</Card> </Card>
))} ))}
</div> </div>
@ -446,29 +525,41 @@ const Galery = (props: any) => {
Download Dokumen Download Dokumen
</div> </div>
</div> </div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> <PopoverTrigger asChild>
<Icon icon="oi:share" fontSize={20} /> <button className="w-full flex items-center gap-2">
<p className="text-base font-semibold">Bagikan</p> <Icon icon="oi:share" fontSize={20} />
</button> <p className="text-base font-semibold mb-3">Bagikan</p>
</div> </button>
</DropdownMenuItem> </PopoverTrigger>
<DropdownMenuItem> <PopoverContent>
<a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <div className="flex flex-col">
<Icon icon="fa:trash" fontSize={20} /> <h1 className="mb-2">Share Ke Email</h1>
<p className="text-base font-semibold">Hapus</p> <div className="flex flex-col mb-2">
</a> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
</DropdownMenuItem> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
</DropdownMenuContent> </div>
</DropdownMenu> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
Kirim
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div> </div>
))} ))}
</div> </div>

299
app/[locale]/(public)/content-management/galery/page.tsx
View File

@ -13,9 +13,12 @@ import withReactContent from "sweetalert2-react-content";
import { getCookiesDecrypt } from "@/lib/utils"; import { getCookiesDecrypt } from "@/lib/utils";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { Icon } from "@iconify/react/dist/iconify.js";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
const Galery = (props: any) => { const Galery = (props: any) => {
const [profile, setProfile] = useState<any>(); const [profile, setProfile] = useState<any>();
@ -23,7 +26,6 @@ const Galery = (props: any) => {
const router = useRouter(); const router = useRouter();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const searchParams = useSearchParams(); const searchParams = useSearchParams();
// const { id } = router.query;
const page: any = searchParams?.get("page"); const page: any = searchParams?.get("page");
const title = searchParams?.get("title"); const title = searchParams?.get("title");
const category = searchParams?.get("category"); const category = searchParams?.get("category");
@ -45,6 +47,10 @@ const Galery = (props: any) => {
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState(""); const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState(); const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => { useEffect(() => {
getDataVideo(); getDataVideo();
@ -225,8 +231,44 @@ const Galery = (props: any) => {
}); });
}; };
const [hasMounted, setHasMounted] = useState(false); async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
}
close();
successCallback("Konten Telah Dikirim");
}
}
const handleEmailList = (e: any) => {
const arrayEmail: any = [];
for (let i = 0; i < emailShareList?.length; i += 1) {
arrayEmail.push(emailShareList[i]);
}
if (e.which == 13) {
if (e.target.value) {
arrayEmail.push(e.target.value);
setEmailShareList(arrayEmail);
setEmailShareInput("");
}
e.preventDefault();
}
return false;
};
const [hasMounted, setHasMounted] = useState(false);
// Hooks // Hooks
useEffect(() => { useEffect(() => {
setHasMounted(true); setHasMounted(true);
@ -244,8 +286,8 @@ const Galery = (props: any) => {
<div> <div>
<h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1> <h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
</div> </div>
<div className="flex flex-col p-4"> <div className="flex flex-col mt-4">
<div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4"> <div className="mx-auto w-full max-w-7xl justify-start flex flex-col lg:flex-row gap-5 mb-4">
<Tabs value={selectedTab} onValueChange={setSelectedTab}> <Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row "> <TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
<TabsTrigger <TabsTrigger
@ -278,7 +320,7 @@ const Galery = (props: any) => {
</TabsList> </TabsList>
</Tabs> </Tabs>
</div> </div>
<div className="px-0 lg:px-10"> <div className="px-2">
{selectedTab == "video" ? ( {selectedTab == "video" ? (
contentVideo?.length > 0 ? ( contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@ -289,37 +331,42 @@ const Galery = (props: any) => {
<Link href={`/video/detail/${video?.mediaUpload?.slug}`}> <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
<img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <img src={video?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
</Link> </Link>
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<button onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<Icon icon="material-symbols:bookmark-outline" fontSize={20} /> <PopoverTrigger asChild>
<p className="text-base font-semibold">Simpan</p> <button className="w-full flex items-center gap-2">
</button> <Icon icon="oi:share" fontSize={20} />
</DropdownMenuItem> <p className="text-base items-center font-semibold mb-3">Bagikan</p>
<DropdownMenuItem> </button>
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> </PopoverTrigger>
<Icon icon="jam:write" fontSize={20} /> <PopoverContent>
<p className="text-base font-semibold">Content Rewrite</p> <div className="flex flex-col">
</Link> <h1 className="mb-2">Share Ke Email</h1>
</DropdownMenuItem> <div className="flex flex-col mb-2">
<DropdownMenuItem> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
<button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2"> </div>
<Icon icon="oi:share" fontSize={20} /> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<p className="text-base font-semibold">Bagikan</p> Kirim
</button> </Button>
</div> </div>
</DropdownMenuItem> </PopoverContent>
</DropdownMenuContent> </Popover>
</DropdownMenu> </div>
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-2 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -361,35 +408,41 @@ const Galery = (props: any) => {
</svg> </svg>
</div> </div>
</div> </div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<button onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<Icon icon="material-symbols:bookmark-outline" fontSize={20} /> <PopoverTrigger asChild>
<p className="text-base font-semibold">Simpan</p> <button className="w-full flex items-center gap-2">
</button> <Icon icon="oi:share" fontSize={20} />
</DropdownMenuItem> <p className="text-base font-semibold mb-3">Bagikan</p>
<DropdownMenuItem> </button>
<Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> </PopoverTrigger>
<Icon icon="jam:write" fontSize={20} /> <PopoverContent>
<p className="text-base font-semibold">Content Rewrite</p> <div className="flex flex-col">
</Link> <h1 className="mb-2">Share Ke Email</h1>
</DropdownMenuItem> <div className="flex flex-col mb-2">
<DropdownMenuItem> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
<button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> </div>
<Icon icon="oi:share" fontSize={20} /> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<p className="text-base font-semibold">Bagikan</p> Kirim
</button> </Button>
</div> </div>
</DropdownMenuItem> </PopoverContent>
</DropdownMenuContent> </Popover>
</DropdownMenu> </div>
<a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div> </div>
))} ))}
</div> </div>
@ -402,41 +455,47 @@ const Galery = (props: any) => {
contentImage?.length > 0 ? ( contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentImage?.map((image: any) => ( {contentImage?.map((image: any) => (
<Card key={image?.id} className=""> <Card key={image?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<Link href={`/image/detail/${image?.mediaUpload?.slug}`}> <Link href={`/image/detail/${image?.mediaUpload?.slug}`}>
<img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <img src={image?.mediaUpload?.thumbnailLink} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.mediaUpload?.title}</div>
</Link> </Link>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<button onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<Icon icon="material-symbols:bookmark-outline" fontSize={20} /> <PopoverTrigger asChild>
<p className="text-base font-semibold">Simpan</p> <button className="w-full flex items-center gap-2">
</button> <Icon icon="oi:share" fontSize={20} />
</DropdownMenuItem> <p className="text-base font-semibold mb-3">Bagikan</p>
<DropdownMenuItem> </button>
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> </PopoverTrigger>
<Icon icon="jam:write" fontSize={20} /> <PopoverContent>
<p className="text-base font-semibold">Content Rewrite</p> <div className="flex flex-col">
</Link> <h1 className="mb-2">Share Ke Email</h1>
</DropdownMenuItem> <div className="flex flex-col mb-2">
<DropdownMenuItem> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
<button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> </div>
<Icon icon="oi:share" fontSize={20} /> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<p className="text-base font-semibold">Bagikan</p> Kirim
</button> </Button>
</div> </div>
</DropdownMenuItem> </PopoverContent>
</DropdownMenuContent> </Popover>
</DropdownMenu> </div>
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -470,35 +529,41 @@ const Galery = (props: any) => {
Download Dokumen Download Dokumen
</div> </div>
</div> </div>
<DropdownMenu> <Popover>
<DropdownMenuTrigger className="flex items-center gap-1"> <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a> <a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" /> <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a> </a>
</DropdownMenuTrigger> </PopoverTrigger>
<DropdownMenuContent> <PopoverContent className="w-40">
<DropdownMenuItem> <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<button onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Popover>
<Icon icon="material-symbols:bookmark-outline" fontSize={20} /> <PopoverTrigger asChild>
<p className="text-base font-semibold">Simpan</p> <button className="w-full flex items-center gap-2">
</button> <Icon icon="oi:share" fontSize={20} />
</DropdownMenuItem> <p className="text-base font-semibold mb-3">Bagikan</p>
<DropdownMenuItem> </button>
<Link href={`/content-management/rewrite/create/${document?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> </PopoverTrigger>
<Icon icon="jam:write" fontSize={20} /> <PopoverContent>
<p className="text-base font-semibold">Content Rewrite</p> <div className="flex flex-col">
</Link> <h1 className="mb-2">Share Ke Email</h1>
</DropdownMenuItem> <div className="flex flex-col mb-2">
<DropdownMenuItem> <p className="text-base font-semibold mb-1">Email Tujuan :</p>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg"> <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
<button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2"> </div>
<Icon icon="oi:share" fontSize={20} /> <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
<p className="text-base font-semibold">Bagikan</p> Kirim
</button> </Button>
</div> </div>
</DropdownMenuItem> </PopoverContent>
</DropdownMenuContent> </Popover>
</DropdownMenu> </div>
<a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div> </div>
))} ))}
</div> </div>

96
app/[locale]/(public)/content-management/rewrite/page.tsx
View File

@ -11,6 +11,11 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
const page = (props: any) => { const page = (props: any) => {
const [, setProfile] = useState(); const [, setProfile] = useState();
@ -21,23 +26,22 @@ const page = (props: any) => {
const title = searchParams?.get("title"); const title = searchParams?.get("title");
const category = searchParams?.get("category"); const category = searchParams?.get("category");
const pages = page ? page - 1 : 0; const pages = page ? page - 1 : 0;
const { isInstitute, instituteId } = props; const { isInstitute, instituteId } = props;
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie"); const userRoleId = getCookiesDecrypt("urie");
const [, setGetTotalPage] = useState(); const [, setGetTotalPage] = useState();
const [totalContent, setTotalContent] = useState<any>(); const [totalContent, setTotalContent] = useState<any>();
const [contentImage, setContentImage] = useState([]); const [contentImage, setContentImage] = useState([]);
const [categoryFilter] = useState([]); const [categoryFilter] = useState([]);
const [formatFilter] = useState([]); const [formatFilter] = useState([]);
const [sortBy] = useState(); const [sortBy] = useState();
const [refresh, setRefresh] = useState(false); const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState(""); const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState(); const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
@ -153,6 +157,43 @@ const page = (props: any) => {
} }
}; };
async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],
email: emailShareList || [emailShareInput],
message: emailMessageInput,
url: window.location.href,
};
loading();
const res = await sendMediaUploadToEmail(data);
if (res?.error) {
error(res.message);
return false;
}
close();
successCallback("Konten Telah Dikirim");
}
}
const handleEmailList = (e: any) => {
const arrayEmail: any = [];
for (let i = 0; i < emailShareList?.length; i += 1) {
arrayEmail.push(emailShareList[i]);
}
if (e.which == 13) {
if (e.target.value) {
arrayEmail.push(e.target.value);
setEmailShareList(arrayEmail);
setEmailShareInput("");
}
e.preventDefault();
}
return false;
};
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
@ -166,12 +207,49 @@ const page = (props: any) => {
{contentImage?.length > 0 ? ( {contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentImage?.map((image: any) => ( {contentImage?.map((image: any) => (
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300"> <Card key={image?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<Link href={`/content-management/rewrite/detail/${image.id}`}> <div className="">
<img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <Link href={`/content-management/rewrite/detail/${image.id}`}>
<img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
</Link>
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div>
</Link> <Popover>
<PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
<a className="flex justify-end items-end place-items-end">
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</PopoverTrigger>
<PopoverContent className="w-40">
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Popover>
<PopoverTrigger asChild>
<button className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold mb-3">Bagikan</p>
</button>
</PopoverTrigger>
<PopoverContent>
<div className="flex flex-col">
<h1 className="mb-2">Share Ke Email</h1>
<div className="flex flex-col mb-2">
<p className="text-base font-semibold mb-1">Email Tujuan :</p>
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder="Tekan Enter untuk input Email" />
</div>
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
Kirim
</Button>
</div>
</PopoverContent>
</Popover>
</div>
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</PopoverContent>
</Popover>
</div>
</CardContent> </CardContent>
</Card> </Card>
))} ))}

2
app/[locale]/(public)/image/filter/page.tsx
View File

@ -486,7 +486,7 @@ const FilterPage = () => {
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300"> <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0"> <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<Link href={`/image/detail/${image?.slug}`}> <Link href={`/image/detail/${image?.slug}`}>
<img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" />
<div className="flex flex-row items-center gap-2 text-[10px] mx-2"> <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" /> {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
{image?.clickCount}{" "} {image?.clickCount}{" "}

7
service/media-tracking/media-tracking.ts
View File

@ -1,6 +1,11 @@
import { httpGetInterceptor } from "../http-config/http-interceptor-service"; import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
export async function getMediaTrackingMonitoring(page: number, size: number) { export async function getMediaTrackingMonitoring(page: number, size: number) {
const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`; const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
return httpGetInterceptor(url); return httpGetInterceptor(url);
} }
export async function sendMediaUploadToEmail(data: any) {
const url = "media/public/share-to-email";
return httpPostInterceptor(url, data);
}