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

fix:news all filter, pagination collapse

This commit is contained in:
Rama Priyanto 2025-05-31 20:56:53 +07:00
parent 9b4016af80
commit a7eef2e1dc
1 changed files with 118 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
components/main/detail/list-news.tsx
View File

@ -48,6 +48,7 @@ import {
} from "next/navigation"; } from "next/navigation";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { format } from "date-fns"; import { format } from "date-fns";
import { getCategoryById } from "@/services/master-categories";
const months = [ const months = [
"Jan", "Jan",
@ -76,11 +77,16 @@ export default function ListNews() {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const categoryIds = searchParams.get("category_id"); const categoryIds = searchParams.get("category_id");
const [categories, setCategories] = useState<any>([]); const [categories, setCategories] = useState<any>([]);
const [search, setSearch] = useState(searchParams.get("search") || ""); const [searchValue, setSearchValue] = useState(
const [searchValue, setSearchValue] = useState(search || ""); searchParams.get("search") || ""
);
const [categorySearch, setCategorySearch] = useState(""); const [categorySearch, setCategorySearch] = useState("");
const [debouncedValue, setDebouncedValue] = useState(""); const [debouncedValue, setDebouncedValue] = useState("");
const [selectedCategoryId, setSelectedCategoryId] = useState<any>(); const [selectedCategoryId, setSelectedCategoryId] = useState<any>(
categoryIds ? categoryIds : ""
);
const [count, setCount] = useState(0);
const today = new Date(); const today = new Date();
const [year, setYear] = useState(today.getFullYear()); const [year, setYear] = useState(today.getFullYear());
@ -95,26 +101,26 @@ export default function ListNews() {
setSelectedDate(new Date(year, monthIndex, 1)); setSelectedDate(new Date(year, monthIndex, 1));
}; };
useEffect(() => { const getCategoryId = async () => {
setSearch(searchParams.get("search") || ""); if (categoryIds) {
setSearchValue(searchParams.get("search") || ""); const res = await getCategoryById(Number(selectedCategoryId));
console.log( setCategorySearch(res?.data?.data.title);
"ini", setCategories([res?.data?.data]);
searchParams.get("month") ? Number(searchParams.get("month")) : null setCount(1);
); }
setSelectedMonth( };
searchParams.get("month") ? Number(searchParams.get("month")) : null
);
}, [searchParams]);
useEffect(() => {
getArticle();
}, [page, category, search, searchParams]);
useEffect(() => { useEffect(() => {
getCategory(); getCategory();
if (categoryIds && count == 0) {
getCategoryId();
}
}, [debouncedValue]); }, [debouncedValue]);
useEffect(() => {
getArticle();
}, [page]);
const getCategory = async () => { const getCategory = async () => {
const res = await getArticleByCategoryLanding({ const res = await getArticleByCategoryLanding({
limit: debouncedValue === "" ? "5" : "", limit: debouncedValue === "" ? "5" : "",
@ -128,7 +134,6 @@ export default function ListNews() {
async function getArticle() { async function getArticle() {
loading(); loading();
// topRef.current?.scrollIntoView({ behavior: "smooth" }); // topRef.current?.scrollIntoView({ behavior: "smooth" });
const req = { const req = {
page: page, page: page,
search: searchValue || "", search: searchValue || "",
@ -139,13 +144,17 @@ export default function ListNews() {
pathname.includes("polda") || pathname.includes("satker") pathname.includes("polda") || pathname.includes("satker")
? String(category) ? String(category)
: "", : "",
categoryIds: categoryIds ? categoryIds : "", categoryIds: selectedCategoryId,
startDate: selectedMonth // categoryIds:
? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1)) // selectedCategoryId && categorySearch !== "" ? selectedCategoryId : "",
: "", startDate:
endDate: selectedMonth selectedDate && selectedMonth !== null
? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0)) ? convertDateFormatNoTimeV2(new Date(year, selectedMonth, 1))
: "", : "",
endDate:
selectedDate && selectedMonth !== null
? convertDateFormatNoTimeV2(new Date(year, selectedMonth + 1, 0))
: "",
}; };
const response = await getListArticle(req); const response = await getListArticle(req);
setArticle(response?.data?.data); setArticle(response?.data?.data);
@ -163,6 +172,9 @@ export default function ListNews() {
const onInputChange = (value: string) => { const onInputChange = (value: string) => {
setCategorySearch(value); setCategorySearch(value);
if (value === "") {
setSelectedCategoryId("");
}
}; };
return ( return (
@ -202,18 +214,22 @@ export default function ListNews() {
labelPlacement="outside" labelPlacement="outside"
variant="bordered" variant="bordered"
placeholder="Kategori" placeholder="Kategori"
classNames={{ base: "!mt-0" }}
inputValue={categorySearch} inputValue={categorySearch}
// selectedKey={selectedCategoryId}
onInputChange={onInputChange} onInputChange={onInputChange}
onSelectionChange={(e) => setSelectedCategoryId(e)} onSelectionChange={(e) => setSelectedCategoryId(e)}
inputProps={{ classNames: { inputWrapper: "border-1" } }} inputProps={{ classNames: { inputWrapper: "border-1" } }}
defaultItems={categories}
> >
{categories.length > 0 && {/* {categories.length > 0 &&
categories.map((category: any) => ( categories.map((category: any) => (
<AutocompleteItem key={category.id}> <AutocompleteItem key={`${category.id}`}>
{category.title} {category.title}
</AutocompleteItem> </AutocompleteItem>
))} ))} */}
{(item: any) => (
<AutocompleteItem key={item.id}>{item.title}</AutocompleteItem>
)}
</Autocomplete> </Autocomplete>
</div> </div>
<div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2"> <div className="flex flex-row items-center border-1 h-[40px] w-full lg:w-[240px] rounded-xl px-2">
@ -271,67 +287,86 @@ export default function ListNews() {
</a> </a>
)} )}
</div> </div>
<Link {/* <Link
href={`/news/all?search=${searchValue}&category_id=${ href={`/news/all?search=${searchValue}&category_id=${
selectedCategoryId || "" selectedCategoryId || ""
}&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`} }&month=${selectedMonth && selectedDate ? selectedMonth + 1 : ""}`}
> */}
<Button
onPress={getArticle}
className="bg-red-600 text-white w-[80px]"
> >
<Button className="bg-red-600 text-white w-[80px]">Cari</Button> Cari
</Link> </Button>
{/* </Link> */}
</div> </div>
<section {article?.length < 1 || !article ? (
id="content" <div className="flex justify-center items-center">Tidak ada Data</div>
className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7" ) : (
> <>
{article?.map((news: any) => ( <section
<Link id="content"
href={`/news/detail/${news?.id}-${news?.slug}`} className=" grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7"
key={news?.id}
> >
<div className=""> {article?.map((news: any) => (
<Image <Link
src={ href={`/news/detail/${news?.id}-${news?.slug}`}
news.thumbnailUrl == "" key={news?.id}
? "/no-image.jpg" >
: news.thumbnailUrl <div className="">
} <Image
width={1920} src={
alt="thumbnail" news.thumbnailUrl == ""
className="rounded-b-none h-[27vh] w-full object-cover" ? "/no-image.jpg"
/> : news.thumbnailUrl
</div> }
<div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md"> width={1920}
<div className="font-semibold text-lg">{news?.title}</div> alt="thumbnail"
<div className="flex flex-row items-center py-1 text-[10px] gap-2"> className="rounded-b-none h-[27vh] w-full object-cover"
<div className="flex flex-row items-center gap-1"> />
<CalendarIcon size={18} />
<p>{formatMonthString(news?.createdAt)}</p>
</div> </div>
<div className="flex flex-row items-center"> <div className="p-2 lg:p-5 bg-[#f0f0f0] rounded-b-md">
<ClockIcon size={18} /> <div className="font-semibold text-lg">{news?.title}</div>
<p>{`${new Date(news?.createdAt) <div className="flex flex-row items-center py-1 text-[10px] gap-2">
.getHours() <div className="flex flex-row items-center gap-1">
.toString() <CalendarIcon size={18} />
.padStart(2, "0")}:${new Date(news?.createdAt) <p>{formatMonthString(news?.createdAt)}</p>
.getMinutes() </div>
.toString() <div className="flex flex-row items-center">
.padStart(2, "0")}`}</p> <ClockIcon size={18} />
<p>{`${new Date(news?.createdAt)
.getHours()
.toString()
.padStart(2, "0")}:${new Date(news?.createdAt)
.getMinutes()
.toString()
.padStart(2, "0")}`}</p>
</div>
<div className="flex flex-row items-center gap-1">
<UserIcon size={14} />
<p>{news?.createdByName}</p>
</div>
</div>
<div className="text-sm">
{textEllipsis(htmlToString(news?.description), 165)}
</div>
</div> </div>
<div className="flex flex-row items-center gap-1"> </Link>
<UserIcon size={14} /> ))}
<p>{news?.createdByName}</p> </section>
</div> <div className="flex justify-center mt-5">
</div> <Pagination
<div className="text-sm"> page={page}
{textEllipsis(htmlToString(news?.description), 165)} total={totalPage}
</div> onChange={setPage}
</div> classNames={{
</Link> item: "w-fit px-3",
))} cursor: "w-fit px-3 text-center",
</section> }}
<div className="flex justify-center mt-5"> />
<Pagination page={page} total={totalPage} onChange={setPage} /> </div>
</div> </>
)}
</div> </div>
</div> </div>
); );