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

View File

@ -12,8 +12,11 @@ import SidebarManagement from "@/components/landing-page/sidebar-management";
import withReactContent from "sweetalert2-react-content";
import { getCookiesDecrypt } from "@/lib/utils";
import Swal from "sweetalert2";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
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 [profile, setProfile] = useState<any>();
@ -21,7 +24,6 @@ const Galery = (props: any) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
const searchParams = useSearchParams();
// const { id } = router.query;
const page: any = searchParams?.get("page");
const title = searchParams?.get("title");
const category = searchParams?.get("category");
@ -29,7 +31,6 @@ const Galery = (props: any) => {
const { isInstitute, instituteId } = props;
const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie");
const [totalContent, setTotalContent] = useState();
const [categoryFilter] = useState([]);
const [formatFilter] = useState([]);
@ -43,6 +44,10 @@ const Galery = (props: any) => {
const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => {
getDataVideo();
@ -220,8 +225,44 @@ const Galery = (props: any) => {
// 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
useEffect(() => {
setHasMounted(true);
@ -278,35 +319,49 @@ const Galery = (props: any) => {
contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => (
<Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<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" />
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.title}</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<a>
<Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<div>
<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 " />
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{video?.mediaUpload?.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>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
<DropdownMenuItem>
<a onClick={() => handleDelete(video?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</Link>
</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(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>
</Card>
))}
@ -320,7 +375,7 @@ const Galery = (props: any) => {
contentAudio?.length > 0 ? (
<div className=" grid grid-cols-1 gap-6 ">
{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">
<svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
<path
@ -329,9 +384,9 @@ const Galery = (props: any) => {
/>
</svg>
</div>
<div className="flex flex-col flex-1">
<Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
{audio?.mediaUpload?.title}
<div className="flex flex-col object-cover flex-1">
<Link href={`/audio/detail/${audio?.mediaUpload?.slug}`}>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
</Link>
</div>
<div className="flex items-center justify-center gap-3">
@ -349,29 +404,41 @@ const Galery = (props: any) => {
</svg>
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
<DropdownMenuItem>
<a onClick={() => handleDelete(audio?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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(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>
@ -384,36 +451,48 @@ const Galery = (props: any) => {
contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{contentImage?.map((image: any) => (
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">
<Card key={image?.id}>
<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}`}>
<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>
</Link>
</CardContent>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<a>
<Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
<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>
</DropdownMenuItem>
<DropdownMenuItem>
<a onClick={() => handleDelete(image?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<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>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</PopoverContent>
</Popover>
</CardContent>
</Card>
))}
</div>
@ -446,29 +525,41 @@ const Galery = (props: any) => {
Download Dokumen
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
<DropdownMenuItem>
<a onClick={() => handleDelete(document?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="fa:trash" fontSize={20} />
<p className="text-base font-semibold">Hapus</p>
</a>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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(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>

View File

@ -13,9 +13,12 @@ import withReactContent from "sweetalert2-react-content";
import { getCookiesDecrypt } from "@/lib/utils";
import Swal from "sweetalert2";
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 { 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 Galery = (props: any) => {
const [profile, setProfile] = useState<any>();
@ -23,7 +26,6 @@ const Galery = (props: any) => {
const router = useRouter();
const MySwal = withReactContent(Swal);
const searchParams = useSearchParams();
// const { id } = router.query;
const page: any = searchParams?.get("page");
const title = searchParams?.get("title");
const category = searchParams?.get("category");
@ -45,6 +47,10 @@ const Galery = (props: any) => {
const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => {
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
useEffect(() => {
setHasMounted(true);
@ -244,8 +286,8 @@ const Galery = (props: any) => {
<div>
<h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
</div>
<div className="flex flex-col p-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="flex flex-col mt-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}>
<TabsList className="grid grid-cols-2 lg:flex lg:flex-row ">
<TabsTrigger
@ -278,7 +320,7 @@ const Galery = (props: any) => {
</TabsList>
</Tabs>
</div>
<div className="px-0 lg:px-10">
<div className="px-2">
{selectedTab == "video" ? (
contentVideo?.length > 0 ? (
<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}`}>
<img src={video?.mediaUpload?.thumbnailLink} 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">{video?.mediaUpload?.title}</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<button onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="material-symbols:bookmark-outline" fontSize={20} />
<p className="text-base font-semibold">Simpan</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href={`/content-management/rewrite/create/${video?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="jam:write" fontSize={20} />
<p className="text-base font-semibold">Content Rewrite</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(video.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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 items-center 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(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>
</CardContent>
</Card>
@ -361,35 +408,41 @@ const Galery = (props: any) => {
</svg>
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<button onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="material-symbols:bookmark-outline" fontSize={20} />
<p className="text-base font-semibold">Simpan</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="jam:write" fontSize={20} />
<p className="text-base font-semibold">Content Rewrite</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(audio?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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(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>
@ -402,41 +455,47 @@ const Galery = (props: any) => {
contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{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">
<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" />
<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>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<button onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="material-symbols:bookmark-outline" fontSize={20} />
<p className="text-base font-semibold">Simpan</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href={`/content-management/rewrite/create/${image?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="jam:write" fontSize={20} />
<p className="text-base font-semibold">Content Rewrite</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(image?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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>
</CardContent>
</Card>
))}
@ -470,35 +529,41 @@ const Galery = (props: any) => {
Download Dokumen
</div>
</div>
<DropdownMenu>
<DropdownMenuTrigger className="flex items-center gap-1">
<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" />
</a>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<button onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="material-symbols:bookmark-outline" fontSize={20} />
<p className="text-base font-semibold">Simpan</p>
</button>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href={`/content-management/rewrite/create/${document?.mediaUpload?.slug}`} className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<Icon icon="jam:write" fontSize={20} />
<p className="text-base font-semibold">Content Rewrite</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<div className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
<button onClick={() => copyToClip(document?.mediaUpload?.slug)} className="w-full flex items-center gap-2">
<Icon icon="oi:share" fontSize={20} />
<p className="text-base font-semibold">Bagikan</p>
</button>
</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</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(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>

View File

@ -11,6 +11,11 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { Card, CardContent } from "@/components/ui/card";
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 [, setProfile] = useState();
@ -21,23 +26,22 @@ const page = (props: any) => {
const title = searchParams?.get("title");
const category = searchParams?.get("category");
const pages = page ? page - 1 : 0;
const { isInstitute, instituteId } = props;
const userId = getCookiesDecrypt("uie");
const userRoleId = getCookiesDecrypt("urie");
const [, setGetTotalPage] = useState();
const [totalContent, setTotalContent] = useState<any>();
const [contentImage, setContentImage] = useState([]);
const [categoryFilter] = useState([]);
const [formatFilter] = useState([]);
const [sortBy] = useState();
const [refresh, setRefresh] = useState(false);
const [, setCopySuccess] = useState("");
const [, setWishlistId] = useState();
const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>();
const [emailMessageInput, setEmailMessageInput] = useState();
const id = searchParams?.get("id");
useEffect(() => {
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 (
<>
<HeaderManagement />
@ -166,12 +207,49 @@ const page = (props: any) => {
{contentImage?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{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">
<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" />
<div className="">
<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>
</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>
</Card>
))}

View File

@ -486,7 +486,7 @@ const FilterPage = () => {
<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">
<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">
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
{image?.clickCount}{" "}

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) {
const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
return httpGetInterceptor(url);
}
export async function sendMediaUploadToEmail(data: any) {
const url = "media/public/share-to-email";
return httpPostInterceptor(url, data);
}