add indeks filter, fix thumbnail video
This commit is contained in:
parent
4def21dcb1
commit
232c9f72b5
|
|
@ -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}
|
||||
/>
|
||||
<FilterIndeksComponent
|
||||
categoryFilter={categoryFilter}
|
||||
sortByOpt={sortByOpt}
|
||||
startDateString={startDateString}
|
||||
endDateString={endDateString}
|
||||
monthYearFilter={monthYearFilter}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<any[]>([]); // ✅ State untuk menyimpan konten data
|
||||
const [newContent, setNewContent] = useState<any[]>([]); // Optional, bisa jadi redundant
|
||||
const [totalData, setTotalData] = useState<number>(0);
|
||||
const [totalPage, setTotalPage] = useState<number>(0);
|
||||
const [totalContent, setTotalContent] = useState<number>(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 ? (
|
||||
<div className="flex flex-col gap-3 w-full">
|
||||
<p>{`Indeks (${totalContent})`}</p>
|
||||
<Carousel className="w-full max-w-7xl mx-auto mt-3">
|
||||
<CarouselContent>
|
||||
{newContent.map((image: any) => (
|
||||
<CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
|
||||
<div
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="w-full h-48 lg:h-60">
|
||||
<Image
|
||||
priority
|
||||
width={2560}
|
||||
height={1440}
|
||||
alt="image"
|
||||
src={image?.thumbnailLink}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="p-4 h-full flex flex-col justify-between">
|
||||
<div className="flex flex-col gap-1 flex-grow">
|
||||
<p className="text-[10px] font-bold text-[#bb3523] uppercase">
|
||||
{image?.categoryName?.toUpperCase() ?? "Giat Pimpinan"}
|
||||
</p>
|
||||
<p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
|
||||
{image?.title}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="-ml-0" />
|
||||
<CarouselNext className="-mr-0" />
|
||||
</Carousel>
|
||||
<div className="flex justify-center mt-1 mb-6">
|
||||
<Link
|
||||
href={`${prefixPath}/image`}
|
||||
className="border border-red-500 text-red-500 hover:bg-red-500 text-sm hover:text-white px-4 py-2 rounded transition duration-200"
|
||||
>
|
||||
Lihat Semua
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
}
|
||||
|
|
@ -480,7 +480,7 @@ const DetailVideo = () => {
|
|||
className="cursor-pointer flex flex-col items-center gap-1"
|
||||
>
|
||||
<img
|
||||
src={file?.thumbnailLink}
|
||||
src={file?.thumbnailFileUrl}
|
||||
alt={file?.fileName}
|
||||
className="w-32 h-20 object-cover rounded"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue