From 232c9f72b58e5b6c35d7bb91c3607c0ba16294c1 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Fri, 25 Jul 2025 16:17:35 +0800 Subject: [PATCH] add indeks filter, fix thumbnail video --- app/[locale]/(public)/all/filter/page.tsx | 8 + .../filter-all/indeks-filter-card.tsx | 241 ++++++++++++++++++ components/main/video-detail.tsx | 2 +- service/blog/blog.ts | 5 + service/landing/landing.ts | 21 ++ 5 files changed, 276 insertions(+), 1 deletion(-) create mode 100644 components/landing-page/filter-all/indeks-filter-card.tsx diff --git a/app/[locale]/(public)/all/filter/page.tsx b/app/[locale]/(public)/all/filter/page.tsx index 55f2d76d..550e29bb 100644 --- a/app/[locale]/(public)/all/filter/page.tsx +++ b/app/[locale]/(public)/all/filter/page.tsx @@ -30,6 +30,7 @@ import FilterVideoComponent from "@/components/landing-page/filter-all/video-fil import FilterDocumentComponent from "@/components/landing-page/filter-all/document-filter-card"; import FilterAudioComponent from "@/components/landing-page/filter-all/audio-filter-card"; import { useTranslations } from "next-intl"; +import FilterIndeksComponent from "@/components/landing-page/filter-all/indeks-filter-card"; export default function FilterPage() { const router = useRouter(); @@ -744,6 +745,13 @@ export default function FilterPage() { endDateString={endDateString} monthYearFilter={monthYearFilter} /> + diff --git a/components/landing-page/filter-all/indeks-filter-card.tsx b/components/landing-page/filter-all/indeks-filter-card.tsx new file mode 100644 index 00000000..0c2dd62b --- /dev/null +++ b/components/landing-page/filter-all/indeks-filter-card.tsx @@ -0,0 +1,241 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { useSearchParams, useParams } from "next/navigation"; +import Image from "next/image"; +import Link from "next/link"; // pastikan path-nya sesuai +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { getIndeksData, getIndeksDataFilter } from "@/service/landing/landing"; +import { usePathname, useRouter } from "@/i18n/routing"; +import { loading } from "@/lib/swal"; +import { getOnlyMonthAndYear } from "@/utils/globals"; + +export default function IndeksCarouselComponent(props: { + categoryFilter?: any; + sortByOpt?: string; + startDateString?: string; + endDateString?: string; + monthYearFilter?: any; +}) { + const { + categoryFilter, + sortByOpt, + startDateString, + endDateString, + monthYearFilter, + } = props; + const router = useRouter(); + const asPath = usePathname(); + const params = useParams(); + const searchParams = useSearchParams(); + const [indeksData, setIndeksData] = useState([]); // ✅ State untuk menyimpan konten data + const [newContent, setNewContent] = useState([]); // Optional, bisa jadi redundant + const [totalData, setTotalData] = useState(0); + const [totalPage, setTotalPage] = useState(0); + const [totalContent, setTotalContent] = useState(0); + const sortBy = searchParams?.get("sortBy"); + const title = searchParams?.get("title"); + const categorie = searchParams?.get("category"); + const group = searchParams?.get("group"); + + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; + + let prefixPath = poldaName + ? `/polda/${poldaName}` + : satkerName + ? `/satker/${satkerName}` + : "/"; + + // useEffect(() => { + // initFetch(); + // }, []); + + // const initFetch = async () => { + // try { + // const month = + // monthYearFilter?.split("/")?.[0]?.replace("0", "") || ""; + // const year = monthYearFilter?.split("/")?.[1] || ""; + // const name = title == undefined ? "" : title; + // const filterGroup = group == undefined ? asPath.split("/")[2] : group; + // const response = await getIndeksDataFilter( + + // name, + // filter, + // 12, + // 0, + // sortByOpt, + // "", + // "", + // filterGroup, + // startDateString, + // endDateString, + // monthYearFilter + // ? getOnlyMonthAndYear(monthYearFilter) + // ?.split("/")[0] + // ?.replace("", "") + // : "", + // monthYearFilter + // ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + // : "" + // ); + // const data = response?.data?.data; + // const contentData = data?.content; + + // setIndeksData(contentData || []); + // setNewContent(contentData || []); + // setTotalData(data?.totalElements || 0); + // setTotalPage(data?.totalPages || 0); + // setTotalContent(data?.totalElements || 0); + // } catch (error) { + // console.error("Error fetching indeks data:", error); + // } + // }; + useEffect(() => { + initFetch(); + }, [ + title, + categoryFilter, + categorie, + group, + startDateString, + endDateString, + monthYearFilter, + sortByOpt, + ]); + + async function initFetch() { + if (asPath?.includes("/polda/") == true) { + if (asPath?.split("/")[2] !== "[polda_name]") { + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; + + const name = title == undefined ? "" : title; + const filterGroup = group == undefined ? asPath.split("/")[2] : group; + loading(); + const response = await getIndeksDataFilter( + "4", + name, + filter, + 12, + 0, + sortByOpt, + "", + "", + filterGroup, + startDateString, + endDateString, + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter) + ?.split("/")[0] + ?.replace("", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" + ); + close(); + const data = response?.data?.data; + const contentData = data?.content; + setNewContent(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); + setTotalContent(response?.data?.data?.totalElements); + } + } else { + const filter = + categoryFilter?.length > 0 + ? categoryFilter?.sort().join(",") + : categorie || ""; + + const name = title == undefined ? "" : title; + loading(); + const response = await getIndeksDataFilter( + "4", + name, + filter, + 12, + 0, + sortByOpt, + "", + "", + "", + startDateString, + endDateString, + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") + : "", + monthYearFilter + ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] + : "" + ); + close(); + + const data = response?.data?.data; + const contentData = data?.content; + + setNewContent(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); + setTotalContent(response?.data?.data?.totalElements); + } + } + + return newContent?.length > 0 ? ( +
+

{`Indeks (${totalContent})`}

+ + + {newContent.map((image: any) => ( + +
router.push(`/indeks/detail/${image?.slug}`)} + className="cursor-pointer relative group overflow-hidden bg-white dark:bg-black dark:border dark:border-gray-500 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300" + > +
+ image +
+ +
+
+

+ {image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"} +

+

+ {image?.title} +

+
+
+
+ + ))} + + + + +
+ + Lihat Semua + +
+
+ ) : null; +} diff --git a/components/main/video-detail.tsx b/components/main/video-detail.tsx index ef1251d6..0b9e3286 100644 --- a/components/main/video-detail.tsx +++ b/components/main/video-detail.tsx @@ -480,7 +480,7 @@ const DetailVideo = () => { className="cursor-pointer flex flex-col items-center gap-1" > {file?.fileName} diff --git a/service/blog/blog.ts b/service/blog/blog.ts index 7422d84c..1bb2bf92 100644 --- a/service/blog/blog.ts +++ b/service/blog/blog.ts @@ -43,3 +43,8 @@ export async function getBlogCategory() { const url = "blog/categories/enable"; return httpGetInterceptor(url); } + +export async function publicListBlog(page: any, limit: any) { + const url = `blog/public/pagination?enablePage=1&page=${page}&size=${limit}`; + return httpGetInterceptor(url); +} diff --git a/service/landing/landing.ts b/service/landing/landing.ts index 593ef56b..ffb6bf17 100644 --- a/service/landing/landing.ts +++ b/service/landing/landing.ts @@ -91,6 +91,27 @@ export async function getIndeksData() { ); } +export async function getIndeksDataFilter( + type: string, + search: string, + category: string, + size = 10, + page = 0, + sortBy = "createdAt", + format = "", + tag = "", + group = "", + startDate = "", + endDate = "", + month = "", + year = "", + isInt = false +) { + return await httpGetInterceptor( + `blog/public/pagination?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}&isInt=${isInt}` + ); +} + export async function getDetail(slug: string) { return await httpGetInterceptor(`media/public?slug=${slug}&state=mabes`); }