humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:ads table, ads landing

This commit is contained in:
Rama Priyanto 2025-03-11 17:19:37 +07:00
parent 5c2a544a9f
commit 7d6c7ff927
19 changed files with 280 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/(admin)/admin/advertise/page.tsx
View File

@ -30,12 +30,13 @@ import withReactContent from "sweetalert2-react-content";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import { close, error, loading } from "@/config/swal"; import { close, error, loading } from "@/config/swal";
import Image from "next/image"; import Image from "next/image";
import { createAdvertise } from "@/service/advertisement";
const createArticleSchema = z.object({ const createArticleSchema = z.object({
title: z.string().min(2, { title: z.string().min(2, {
message: "Judul harus diisi", message: "Judul harus diisi",
}), }),
url: z.string().min(2, { url: z.string().min(1, {
message: "Link harus diisi", message: "Link harus diisi",
}), }),
description: z.string().min(2, { description: z.string().min(2, {
@ -79,19 +80,24 @@ export default function AdvertisePage() {
title: values.title, title: values.title,
description: values.description, description: values.description,
placement: placement, placement: placement,
url: values.url, redirectLink: values.url,
}; };
const res = await createAdvertise(formData);
if (res?.error) {
error(res?.message);
return false;
}
close(); close();
// setRefresh(!refresh); setRefresh(!refresh);
// MySwal.fire({ MySwal.fire({
// title: "Sukses", title: "Sukses",
// icon: "success", icon: "success",
// confirmButtonColor: "#3085d6", confirmButtonColor: "#3085d6",
// confirmButtonText: "OK", confirmButtonText: "OK",
// }).then((result) => { }).then((result) => {
// if (result.isConfirmed) { if (result.isConfirmed) {
// } }
// }); });
}; };
const handleRemoveFile = (file: File) => { const handleRemoveFile = (file: File) => {
@ -275,7 +281,7 @@ export default function AdvertisePage() {
<Button <Button
color="primary" color="primary"
type="submit" type="submit"
isDisabled={files.length < 1} // isDisabled={files.length < 1}
> >
Simpan Simpan
</Button> </Button>

14
app/auth/page.tsx
View File

@ -1,19 +1,5 @@
import Login from "@/components/form/login"; import Login from "@/components/form/login";
export default function AuthPage() { export default function AuthPage() {
// const isAuthenticated = Cookies.get("is_authenticated") || "false";
// console.log("isAuthenticated : ", isAuthenticated);
// const [hasMounted, setHasMounted] = useState(false);
// useEffect(() => {
// setHasMounted(true);
// }, []);
// // Render
// if (!hasMounted) return null;
// return isAuthenticated == "true" ? <Login /> : <QudoLogin />;
return <Login />; return <Login />;
} }

5
app/layout.tsx
View File

@ -53,6 +53,9 @@ export default function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" suppressHydrationWarning className="scroll-smooth"> <html lang="en" suppressHydrationWarning className="scroll-smooth">
<head> <head>
<title>
DIVISI HUMAS POLRI - Pengelolaan Informasi & Dokumentasi Polri
</title>
<meta <meta
name="theme-color" name="theme-color"
content="white" content="white"
@ -64,6 +67,8 @@ export default function RootLayout({ children }: { children: ReactNode }) {
content="black" content="black"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
/> />
<meta property="og:image" content="/logohumas.png" />
<LoadScript /> <LoadScript />
</head> </head>
<body <body

15
components/form/article/create-article-form.tsx
View File

@ -48,7 +48,7 @@ import {
} from "@heroui/react"; } from "@heroui/react";
import GenerateSingleArticleForm from "./generate-ai-single-form"; import GenerateSingleArticleForm from "./generate-ai-single-form";
import { convertDateFormatNoTime, htmlToString } from "@/utils/global"; import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
import { close, error, loading } from "@/config/swal"; import { close, error, loading, successToast } from "@/config/swal";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { getCategoryById } from "@/service/master-categories"; import { getCategoryById } from "@/service/master-categories";
@ -289,7 +289,6 @@ export default function CreateArticleForm() {
const getUserLevelApprovalStatus = async () => { const getUserLevelApprovalStatus = async () => {
const res = await getUserLevels(String(userLevel)); const res = await getUserLevels(String(userLevel));
console.log("res", res?.data?.data?.isApprovalActive);
return res?.data?.data?.isApprovalActive; return res?.data?.data?.isApprovalActive;
}; };
@ -354,10 +353,14 @@ export default function CreateArticleForm() {
} }
close(); close();
successSubmit("/admin/article"); successSubmit("/admin/article", articleId, values.slug);
}; };
function successSubmit(redirect: string) { function successSubmit(redirect: string, id: number, slug: string) {
const url =
`${window.location.protocol}//${window.location.host}` +
"/news/detail/" +
`${id}-${slug}`;
MySwal.fire({ MySwal.fire({
title: "Sukses", title: "Sukses",
icon: "success", icon: "success",
@ -366,6 +369,10 @@ export default function CreateArticleForm() {
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
router.push(redirect); router.push(redirect);
successToast("Article Url", url);
} else {
router.push(redirect);
successToast("Article Url", url);
} }
}); });
} }

2
components/form/login.tsx
View File

@ -236,6 +236,7 @@ export default function Login() {
label="" label=""
placeholder="" placeholder=""
className="my-2" className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
value={username} value={username}
onChange={(e: any) => { onChange={(e: any) => {
setValUsername(e.target.value.trim()); setValUsername(e.target.value.trim());
@ -251,6 +252,7 @@ export default function Login() {
<Input <Input
isRequired isRequired
className="my-2" className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
endContent={ endContent={
<button <button
className="focus:outline-none" className="focus:outline-none"

32
components/icons.tsx
View File

@ -2622,3 +2622,35 @@ export const LandingAnalyticIcon = ({
/> />
</svg> </svg>
); );
export const CopyIcon = ({
size,
height = 24,
width = 24,
fill = "currentColor",
...props
}: IconSvgProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={size || width}
height={size || height}
{...props}
viewBox="0 0 36 36"
>
<path
fill="currentColor"
d="M27 3.56A1.56 1.56 0 0 0 25.43 2H5.57A1.56 1.56 0 0 0 4 3.56v24.88A1.56 1.56 0 0 0 5.57 30h.52V4.07H27Z"
className="clr-i-solid clr-i-solid-path-1"
/>
<rect
width="23"
height="28"
x="8"
y="6"
fill="currentColor"
className="clr-i-solid clr-i-solid-path-2"
rx="1.5"
ry="1.5"
/>
<path fill="none" d="M0 0h36v36H0z" />
</svg>
);

12
components/landing/HeaderNews.tsx
View File

@ -66,7 +66,7 @@ export default function HeaderNews() {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto"> <div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[300px] mx-auto"> <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
{article ? ( {article ? (
<Swiper <Swiper
centeredSlides={true} centeredSlides={true}
@ -82,15 +82,15 @@ export default function HeaderNews() {
"bg-white/70", "bg-white/70",
"!text-black", "!text-black",
"rounded-full", "rounded-full",
"!w-[24px]", "!w-[32px]",
"!h-[24px]" "!h-[32px]"
); );
swiper.navigation.prevEl?.classList.add( swiper.navigation.prevEl?.classList.add(
"bg-white/70", "bg-white/70",
"!text-black", "!text-black",
"rounded-full", "rounded-full",
"!w-[24px]", "!w-[32px]",
"!h-[24px]" "!h-[32px]"
); );
}} }}
> >
@ -107,7 +107,7 @@ export default function HeaderNews() {
? "/no-image.jpg" ? "/no-image.jpg"
: newsItem?.thumbnailUrl : newsItem?.thumbnailUrl
} }
className="w-[90%] !h-[200px] object-cover" className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover"
/> />
<CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full"> <CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">

36
components/landing/adds-carousel.tsx
View File

@ -13,17 +13,38 @@ import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import Link from "next/link"; import Link from "next/link";
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules"; import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
import { useEffect, useState } from "react";
import { getAdvertise } from "@/service/advertisement";
const datas = [ const datas = [
{ id: 1, src: "/props-1.png" }, { id: 1, src: "/sample-banner.png" },
{ id: 2, src: "/props-2.png" }, { id: 2, src: "/sample-banner-2.png" },
{ id: 2, src: "/props-3.png" }, { id: 2, src: "/sample-banner-3.jpg" },
]; ];
interface Jumbotron {
id: number;
title: string;
description: string;
redirectLink: string;
}
export default function AddsCarousel() { export default function AddsCarousel() {
const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const req = { page: 1, limit: 5, placement: "banner" };
const res = await getAdvertise(req);
setJumbotronList(res?.data?.data);
};
return ( return (
<div className="w-[90%] lg:w-[75%] mx-auto"> <div className="w-[90%] lg:w-[75%] mx-auto">
{datas ? ( {jumbotronList ? (
<Swiper <Swiper
centeredSlides={true} centeredSlides={true}
autoplay={{ autoplay={{
@ -50,7 +71,7 @@ export default function AddsCarousel() {
); );
}} }}
> >
{datas?.map((newsItem: any, index: number) => ( {jumbotronList?.map((newsItem, index) => (
<SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]"> <SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
<Card <Card
isFooterBlurred isFooterBlurred
@ -61,8 +82,9 @@ export default function AddsCarousel() {
alt="headernews" alt="headernews"
width={1440} width={1440}
height={1080} height={1080}
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg" className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
// src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
src={datas[index % 3].src}
/> />
</Card> </Card>
</SwiperSlide> </SwiperSlide>

38
components/landing/banner-new.tsx
View File

@ -39,6 +39,7 @@ import {
import storedLanguage from "@/store/language-store"; import storedLanguage from "@/store/language-store";
import { ThemeSwitch } from "../theme-switch"; import { ThemeSwitch } from "../theme-switch";
import { siteConfig, SiteConfig } from "@/config/site"; import { siteConfig, SiteConfig } from "@/config/site";
import { getAdvertise } from "@/service/advertisement";
const images = [ const images = [
"/landing-1.jpg", "/landing-1.jpg",
@ -47,6 +48,13 @@ const images = [
"/landing-4.jpg", "/landing-4.jpg",
]; ];
interface Jumbotron {
id: number;
title: string;
description: string;
redirectLink: string;
}
export default function BannerHumasNew() { export default function BannerHumasNew() {
const t = useTranslations("Banner"); const t = useTranslations("Banner");
const { isOpen, onOpen, onOpenChange } = useDisclosure(); const { isOpen, onOpen, onOpenChange } = useDisclosure();
@ -55,28 +63,40 @@ export default function BannerHumasNew() {
const [resetTimer, setResetTimer] = useState(0); const [resetTimer, setResetTimer] = useState(0);
const [onOpenDropdown, setOnOpenDropdown] = useState(false); const [onOpenDropdown, setOnOpenDropdown] = useState(false);
const [searchValue, setSearchValue] = useState(""); const [searchValue, setSearchValue] = useState("");
const [jumbotronList, setJumbotronList] = useState<Jumbotron[]>([]);
const language = storedLanguage((state) => state.locale); const language = storedLanguage((state) => state.locale);
const setLanguage = storedLanguage((state) => state.setLocale); const setLanguage = storedLanguage((state) => state.setLocale);
useEffect(() => { useEffect(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); setCurrentIndex((prevIndex) => (prevIndex + 1) % jumbotronList?.length);
}, 25000); }, 25000);
return () => clearInterval(interval); return () => clearInterval(interval);
}, [resetTimer]); }, [resetTimer]);
const nextImage = () => { const nextImage = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); setCurrentIndex((prevIndex) => (prevIndex + 1) % jumbotronList?.length);
setResetTimer((prev) => prev + 1); setResetTimer((prev) => prev + 1);
}; };
const prevImage = () => { const prevImage = () => {
setCurrentIndex( setCurrentIndex(
(prevIndex) => (prevIndex - 1 + images.length) % images.length (prevIndex) =>
(prevIndex - 1 + jumbotronList?.length) % jumbotronList?.length
); );
setResetTimer((prev) => prev + 1); setResetTimer((prev) => prev + 1);
}; };
useEffect(() => {
initFetch();
}, []);
const initFetch = async () => {
const req = { page: 1, limit: 5, placement: "jumbotron" };
const res = await getAdvertise(req);
setJumbotronList(res?.data?.data);
};
const MenuPopover = (props: { const MenuPopover = (props: {
title: string; title: string;
menus: any; menus: any;
@ -193,12 +213,16 @@ export default function BannerHumasNew() {
className="flex w-full h-[45vh] lg:h-[93vh] transition-transform duration-700 ease-in-out" className="flex w-full h-[45vh] lg:h-[93vh] transition-transform duration-700 ease-in-out"
style={{ transform: `translateX(-${currentIndex * 100}%)` }} style={{ transform: `translateX(-${currentIndex * 100}%)` }}
> >
{images.map((img, index) => ( {jumbotronList.map((img, index) => (
<Link href="" key={index} className="w-full shrink-0"> <Link
href={img?.redirectLink}
key={img?.id}
className="w-full shrink-0"
>
<Image <Image
src={img} src={images[index % 4]}
alt={`humasbanner-${index}`} alt={`humasbanner-${index}`}
className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70 rounded-none" className="w-screen h-[45vh] lg:h-[93vh] object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
/> />
</Link> </Link>
))} ))}

12
components/landing/drawer.tsx
View File

@ -17,7 +17,17 @@ export default function AnalyticDrawer() {
<> <>
<div className="fixed bottom-1/3 -translate-y-1/2 right-4 lg:right-9 z-50"> <div className="fixed bottom-1/3 -translate-y-1/2 right-4 lg:right-9 z-50">
<Button <Button
className="rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold" className="lg:hidden rotate-90 origin-right rounded-b-md rounded-t-none flex flex-row items-center gap-2 text-white bg-red-600 font-semibold"
onPress={onOpen}
size="sm"
>
<div className="bg-red-950 p-1 rounded-full">
<ChevronDownIcon size={12} />
</div>{" "}
Statistik Kunjungan
</Button>
<Button
className="hidden lg:flex rotate-90 origin-right rounded-b-md rounded-t-none flex-row items-center gap-2 text-white bg-red-600 font-semibold"
onPress={onOpen} onPress={onOpen}
> >
<div className="bg-red-950 p-1 rounded-full"> <div className="bg-red-950 p-1 rounded-full">

138
components/table/advertise/advertise-table.tsx
View File

@ -32,6 +32,8 @@ import {
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
Pagination, Pagination,
Radio,
RadioGroup,
Select, Select,
SelectItem, SelectItem,
Spinner, Spinner,
@ -55,12 +57,18 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import Image from "next/image"; import Image from "next/image";
import {
createAdvertiseById,
editAdvertise,
getAdvertise,
} from "@/service/advertisement";
const columns = [ const columns = [
{ name: "No", uid: "no" }, { name: "No", uid: "no" },
{ name: "Judul", uid: "title" }, { name: "Judul", uid: "title" },
{ name: "Deskripsi", uid: "descriptions" }, { name: "Deskripsi", uid: "description" },
{ name: "Link", uid: "url" }, { name: "Penempatan", uid: "placement" },
{ name: "Link", uid: "redirectLink" },
{ name: "Aksi", uid: "actions" }, { name: "Aksi", uid: "actions" },
]; ];
@ -74,8 +82,8 @@ const createArticleSchema = z.object({
title: z.string().min(2, { title: z.string().min(2, {
message: "Judul harus diisi", message: "Judul harus diisi",
}), }),
url: z.string().min(2, { url: z.string().min(1, {
message: "Link harus diisi", message: "Url harus diisi",
}), }),
description: z.string().min(2, { description: z.string().min(2, {
message: "Deskripsi harus diisi", message: "Deskripsi harus diisi",
@ -92,14 +100,9 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const [article, setArticle] = useState<any[]>([]); const [article, setArticle] = useState<any[]>([]);
const [showData, setShowData] = useState("10"); const [showData, setShowData] = useState("10");
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [categories, setCategoies] = useState<any>([]);
const [selectedCategories, setSelectedCategories] = useState<any>([]);
const [startDateValue, setStartDateValue] = useState({
startDate: null,
endDate: null,
});
const [isHeader, setIsHeader] = useState(false); const [placement, setPlacement] = useState("banner");
const [refresh, setRefresh] = useState(false);
const [files, setFiles] = useState<File[]>([]); const [files, setFiles] = useState<File[]>([]);
@ -127,23 +130,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
useEffect(() => { useEffect(() => {
initState(); initState();
}, [ }, [page, showData, props.triggerRefresh, refresh]);
page,
showData,
startDateValue,
selectedCategories,
props.triggerRefresh,
]);
useEffect(() => {
getCategories();
}, []);
async function getCategories() {
const res = await getArticleByCategory();
const data = res?.data?.data;
setCategoies(data);
}
const handleRemoveFile = (file: File) => { const handleRemoveFile = (file: File) => {
const uploadedFiles = files; const uploadedFiles = files;
@ -156,14 +143,11 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
limit: showData, limit: showData,
page: page, page: page,
search: search, search: search,
startDate:
startDateValue.startDate === null ? "" : startDateValue.startDate,
endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
category: Array.from(selectedCategories).join(","),
sort: "desc", sort: "desc",
sortBy: "created_at", sortBy: "created_at",
}; };
const res = await getListArticle(req); const res = await getAdvertise(req);
getTableNumber(parseInt(showData), res.data?.data); getTableNumber(parseInt(showData), res.data?.data);
setTotalPage(res?.data?.meta?.totalPage); setTotalPage(res?.data?.meta?.totalPage);
} }
@ -183,12 +167,12 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
async function doDelete(id: any) { async function doDelete(id: any) {
// loading(); // loading();
const resDelete = await deleteArticle(id); // const resDelete = await deleteArticle(id);
if (resDelete?.error) { // if (resDelete?.error) {
error(resDelete.message); // error(resDelete.message);
return false; // return false;
} // }
close(); close();
success("Berhasil Hapus"); success("Berhasil Hapus");
initState(); initState();
@ -212,32 +196,38 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const onSubmit = async (values: z.infer<typeof createArticleSchema>) => { const onSubmit = async (values: z.infer<typeof createArticleSchema>) => {
loading(); loading();
const formData = { const formData = {
id: Number(values.id),
title: values.title, title: values.title,
description: values.description, description: values.description,
isHeader: isHeader, placement: placement,
url: values.url, redirectLink: values.url,
}; };
console.log("dataas", formData); const res = await editAdvertise(formData);
if (res?.error) {
error(res?.message);
return false;
}
close(); close();
// setRefresh(!refresh); MySwal.fire({
// MySwal.fire({ title: "Sukses",
// title: "Sukses", icon: "success",
// icon: "success", confirmButtonColor: "#3085d6",
// confirmButtonColor: "#3085d6", confirmButtonText: "OK",
// confirmButtonText: "OK", }).then((result) => {
// }).then((result) => { if (result.isConfirmed) {
// if (result.isConfirmed) { setRefresh(!refresh);
// } }
// }); });
}; };
const openModal = async (id: number) => { const openModal = async (id: number) => {
// const res = await getCategoryById(Number(id)); const res = await createAdvertiseById(Number(id));
// const data = res?.data?.data; const data = res?.data?.data;
// setValue("id", String(data?.id)); setValue("id", String(data?.id));
// setValue("title", data?.title); setValue("title", data?.title);
// setValue("description", data?.description); setValue("description", data?.description);
// setValue("url", data?.url); setValue("url", data?.redirectLink);
setPlacement(data?.placement);
// setValue("file", data?.thumbnailUrl); // setValue("file", data?.thumbnailUrl);
onOpen(); onOpen();
@ -248,17 +238,20 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
const cellValue = advertise[columnKey as keyof any]; const cellValue = advertise[columnKey as keyof any];
switch (columnKey) { switch (columnKey) {
case "url": case "redirectLink":
return ( return cellValue.includes("https") ? (
<Link <Link
href={`https://www.google.com/`} href={cellValue}
target="_blank" target="_blank"
className="text-primary hover:underline" className="text-primary hover:underline cursor-pointer"
> >
https://www.google.com/ {cellValue}
</Link> </Link>
) : (
<p> {cellValue}</p>
); );
case "placement":
return <p className="capitalize">{cellValue}</p>;
case "actions": case "actions":
return ( return (
<div className="relative flex justify-star items-center gap-2"> <div className="relative flex justify-star items-center gap-2">
@ -303,7 +296,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
return cellValue; return cellValue;
} }
}, },
[article] [article, props.triggerRefresh, refresh]
); );
let typingTimer: NodeJS.Timeout; let typingTimer: NodeJS.Timeout;
@ -520,14 +513,17 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
)} )}
</div> </div>
<p className="text-sm mt-3">Header</p> <p className="text-sm mt-3">Penempatan</p>
<Switch <RadioGroup
label=""
orientation="horizontal"
size="sm" size="sm"
isSelected={isHeader} value={placement}
onValueChange={setIsHeader} onValueChange={setPlacement}
> >
<p className="text-sm"> {isHeader ? "Ya" : "Tidak"}</p> <Radio value="banner">Banner</Radio>
</Switch> <Radio value="jumbotron">Jumbotron</Radio>
</RadioGroup>
<Controller <Controller
control={control} control={control}
name="file" name="file"
@ -594,7 +590,7 @@ export default function AdvertiseTable(props: { triggerRefresh: boolean }) {
<Button <Button
color="primary" color="primary"
type="submit" type="submit"
isDisabled={files.length < 1} // isDisabled={files.length < 1}
> >
Simpan Simpan
</Button> </Button>

24
components/table/article-table.tsx
View File

@ -1,13 +1,14 @@
"use client"; "use client";
import { import {
BannerIcon, BannerIcon,
CopyIcon,
CreateIconIon, CreateIconIon,
DeleteIcon, DeleteIcon,
DotsYIcon, DotsYIcon,
EyeIconMdi, EyeIconMdi,
SearchIcon, SearchIcon,
} from "@/components/icons"; } from "@/components/icons";
import { error, success } from "@/config/swal"; import { error, success, successToast } from "@/config/swal";
import { import {
deleteArticle, deleteArticle,
getArticleByCategory, getArticleByCategory,
@ -158,6 +159,20 @@ export default function ArticleTable() {
console.log("vbanner", id, status); console.log("vbanner", id, status);
}; };
const copyUrlArticle = async (id: number, slug: string) => {
const url =
`${window.location.protocol}//${window.location.host}` +
"/news/detail/" +
`${id}-${slug}`;
try {
await navigator.clipboard.writeText(url);
successToast("Success", "Article Copy to Clipboard");
setTimeout(() => {}, 1500);
} catch (err) {
("Failed to copy!");
}
};
const renderCell = useCallback( const renderCell = useCallback(
(article: any, columnKey: Key) => { (article: any, columnKey: Key) => {
const cellValue = article[columnKey as keyof any]; const cellValue = article[columnKey as keyof any];
@ -199,6 +214,13 @@ export default function ArticleTable() {
</Button> </Button>
</DropdownTrigger> </DropdownTrigger>
<DropdownMenu> <DropdownMenu>
<DropdownItem
key="copy-article"
onPress={() => copyUrlArticle(article.id, article.slug)}
>
<CopyIcon className="inline mr-2 mb-1" />
Copy Url Article
</DropdownItem>
<DropdownItem key="detail"> <DropdownItem key="detail">
<Link href={`/admin/article/detail/${article.id}`}> <Link href={`/admin/article/detail/${article.id}`}>
<EyeIconMdi className="inline mr-2 mb-1" /> <EyeIconMdi className="inline mr-2 mb-1" />

BIN
public/props-1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 691 KiB

BIN
public/props-2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 761 KiB

BIN
public/props-3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 321 KiB

BIN
public/sample-banner-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 KiB

BIN
public/sample-banner-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

BIN
public/sample-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 876 KiB

44
service/advertisement.ts Normal file
View File

@ -0,0 +1,44 @@
import {
httpDeleteInterceptor,
httpGet,
httpPost,
httpPut,
} from "./http-config/axios-base-service";
import Cookies from "js-cookie";
const token = Cookies.get("access_token");
export async function createAdvertise(data: any) {
const headers = {
"content-type": "application/json",
Authorization: `Bearer ${token}`,
};
const pathUrl = `/advertisement`;
return await httpPost(pathUrl, headers, data);
}
export async function getAdvertise(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement?page=${data?.page || 1}&limit=${
data?.limit || ""
}&placement=${data?.placement || ""}`;
return await httpGet(pathUrl, headers);
}
export async function createAdvertiseById(id: number) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement/${id}`;
return await httpGet(pathUrl, headers);
}
export async function editAdvertise(data: any) {
const headers = {
"content-type": "application/json",
};
const pathUrl = `/advertisement/${data?.id}`;
return await httpPut(pathUrl, headers, data);
}