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

feat: update landing image filter

This commit is contained in:
hanif salafi 2025-01-13 00:22:47 +07:00
parent 0f34e48cf5
commit 64b7da44b5
7 changed files with 85 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/[locale]/(public)/document/filter/page.tsx
View File

@ -285,8 +285,9 @@ const FilterPage = () => {
useEffect(() => {
initFetch();
}, [page]);
const initFetch = async () => {
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3", isInt: locale == "en" ? true : false });
console.log(response);
setDocumentData(response?.data?.data?.content);
const data = response?.data?.data;

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

@ -15,6 +15,7 @@ import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { close, loading } from "@/config/swal";
import { useTranslations } from "next-intl";
import ImageBlurry from "@/components/ui/image-blurry";
const columns: ColumnDef<any>[] = [
{
@ -154,7 +155,8 @@ const FilterPage = () => {
startDateString,
endDateString,
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
locale == "en" ? true : false,
);
close();
// setGetTotalPage(response?.data?.data?.totalPages);
@ -368,7 +370,7 @@ const FilterPage = () => {
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-[25%] h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<div className="lg:w-96 h-fit w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
@ -483,11 +485,20 @@ const FilterPage = () => {
{imageData?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{imageData?.map((image: any) => (
<Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
<Card key={image?.id} className="hover:scale-105 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" />
<div className="flex flex-row items-center gap-2 text-[10px] mx-2">
{/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
<div
className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg"
>
<ImageBlurry
src={image?.thumbnailLink}
alt={image?.title}
style={{ objectFit: "contain", width: "100%", height: "100%" }}
/>
</div>
<div className="flex flex-row items-center gap-2 text-[10px] mx-2 mt-2">
{formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
{image?.clickCount}{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">

1
app/[locale]/(public)/video/filter/page.tsx
View File

@ -289,6 +289,7 @@ const FilterPage = () => {
size: 6,
sortBy: "createdAt",
contentTypeId: "2",
isInt: locale == "en" ? true : false,
});
console.log(response);
setVideoData(response?.data?.data?.content);

2
app/[locale]/globals.css
View File

@ -582,4 +582,4 @@ html[dir="rtl"] .react-select .select__loading-indicator {
/* Hide FullCalendar grid elements */
.fc-view-harness:has(.hide-calendar-grid) {
display: none;
}
}

1
components/landing-page/new-content.tsx
View File

@ -36,6 +36,7 @@ const NewContent = (props: { group: string, type: string }) => {
group: props.group == "mabes" ? "" :
props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName :
props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-"+satkerName : "",
isInt: locale == "en" ? true : false
};
const response = await getListContent(request);
console.log("category", response);

61
components/ui/image-blurry.tsx Normal file
View File

@ -0,0 +1,61 @@
import React, { useEffect, useState } from 'react';
interface ImageBlurryProps {
src: string;
alt?: string;
classname?: string;
key?: string | number;
style?: React.CSSProperties;
}
const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
const { src, alt, classname, key, style } = props;
const [imgSrc, setImgSrc] = useState<string>(src);
const [isError, setIsError] = useState<boolean>(false);
useEffect(() => {
setImgSrc(src);
}, [src]);
const handleImage = () => {
const pics = document.querySelectorAll<HTMLImageElement>('img');
pics.forEach((pic) => {
if (pic.complete) {
checkImage(pic);
} else {
pic.addEventListener('load', function () {
checkImage(this);
});
}
});
};
const checkImage = (img: HTMLImageElement) => {
if (img.naturalHeight > img.naturalWidth) {
img.classList.add('portrait');
} else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
img.classList.add('square');
} else {
img.classList.add('landscape');
}
};
const onLoad = () => {
console.log('Image loaded:', src);
handleImage();
};
return (
// <div className="relative overflow-hidden bg-[#e9e9e9] blurry-wrapper">
// <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// </div>
<div className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg" key={key} style={style}>
<div className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
<div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
</div>
);
};
export default ImageBlurry;

6
service/landing/landing.ts
View File

@ -11,7 +11,7 @@ export async function getCategoryData() {
export async function getListContent(props: any) {
return await httpGetInterceptor(
`media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=`
`media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&isInt=${props.isInt}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=`
);
}
@ -47,9 +47,9 @@ export async function publicDetailBlog(slug: any) {
return await httpGetInterceptor(`blog/public/read/${slug}`);
}
export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "") {
export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "", isInt = false) {
return await httpGetInterceptor(
`media/public/list?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}`
`media/public/list?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}`
);
}