From b38b72f7085abc89dc79361c416b4c7c38b0e0be Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Fri, 23 May 2025 00:24:14 +0700 Subject: [PATCH 1/2] fix:conten detail image, feat:author, date filter --- components/page/detail-news.tsx | 10 +- components/table/article-table.tsx | 189 +++++++++++++++++++++-------- 2 files changed, 145 insertions(+), 54 deletions(-) diff --git a/components/page/detail-news.tsx b/components/page/detail-news.tsx index d8a2eef..4056688 100644 --- a/components/page/detail-news.tsx +++ b/components/page/detail-news.tsx @@ -4,7 +4,6 @@ import { formatMonthString, formatTextToHtmlTag, } from "@/utils/global"; -import Image from "next/image"; import { CalendarIcon, ChevronLeftIcon, @@ -26,6 +25,7 @@ import { useEffect, useState } from "react"; import { image } from "@heroui/theme"; import Cookies from "js-cookie"; import { saveActivity } from "@/services/activity-log"; +import { Image } from "@heroui/react"; const token = Cookies.get("access_token"); const uid = Cookies.get("uie"); @@ -155,8 +155,10 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
{data?.files?.length > 0 && ( Main Image NextUI hero Image([]); - const [selectedCategories, setSelectedCategories] = useState([]); + const [selectedCategories, setSelectedCategories] = useState(""); const [startDateValue, setStartDateValue] = useState({ startDate: null, endDate: null, }); + const [articleDate, setArticleDate] = useState({ + startDate: parseDate( + convertDateFormatNoTimeV2( + new Date(new Date().setDate(new Date().getDate() - 7)) + ) + ), + endDate: parseDate(convertDateFormatNoTimeV2(new Date())), + }); + useEffect(() => { initState(); - }, [page, showData, startDateValue, selectedCategories]); + }, [page, showData, startDateValue, selectedCategories, articleDate]); useEffect(() => { getCategories(); @@ -106,16 +126,26 @@ export default function ArticleTable() { setCategories(data); } + const onSelectionChange = (id: Key | null) => { + setSelectedCategories(String(id)); + }; + + const getDate = (data: any) => { + return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${ + data.day < 10 ? `0${data.day}` : data.day + }`; + }; + async function initState() { loading(); + console.log("test", selectedCategories); const req = { limit: showData, page: page, search: search, - // startDate: - // startDateValue.startDate === null ? "" : startDateValue.startDate, - // endDate: startDateValue.endDate === null ? "" : startDateValue.endDate, - categorySlug: Array.from(selectedCategories).join(","), + startDate: getDate(articleDate.startDate), + endDate: getDate(articleDate.endDate), + category: selectedCategories, sort: "desc", sortBy: "created_at", }; @@ -248,13 +278,13 @@ export default function ArticleTable() { - {(username === "admin-mabes" || + {(username?.includes("mabes") || Number(userId) === article.createdById) && ( @@ -267,9 +297,9 @@ export default function ArticleTable() { onPress={() => handleBanner(article?.id, !article?.isBanner) } - className={username === "admin-mabes" ? "" : "hidden"} + className={username?.includes("mabes") ? "" : "hidden"} > - {username === "admin-mabes" && ( + {username?.includes("mabes") && ( <> {article?.isBanner @@ -282,13 +312,13 @@ export default function ArticleTable() { key="delete" onPress={() => handleDelete(article.id)} className={ - username === "admin-mabes" || + username?.includes("mabes") || Number(userId) === article.createdById ? "" : "hidden" } > - {(username === "admin-mabes" || + {(username?.includes("mabes") || Number(userId) === article.createdById) && ( <> {" "} @@ -330,6 +360,15 @@ export default function ArticleTable() { initState(); } + const [hasMounted, setHasMounted] = useState(false); + + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; + return ( <>
@@ -375,44 +414,96 @@ export default function ArticleTable() {

Kategori

- + {(item: any) => ( + + {item.title} + + )} + +
+ {username?.includes("mabes") && ( +
+

Author

+ + + {(item: any) => ( + + {item.title} + + )} + +
+ )} +
+

Start Date

+ + + + + {convertDateFormatNoTime(articleDate.startDate)} + + + + + setArticleDate({ + startDate: e, + endDate: articleDate.endDate, + }) + } + maxValue={articleDate.endDate} + /> + + +
+
+

End Date

+ + + + + {convertDateFormatNoTime(articleDate.endDate)} + + + + + setArticleDate({ + startDate: articleDate.startDate, + endDate: e, + }) + } + minValue={articleDate.startDate} + /> + +
- {/*
-

Tanggal

- setStartDateValue(e)} - inputClassName="z-50 w-full text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-gray-600 dark:text-gray-300" - /> -
*/}
{(column) => ( {column.name} From 686fa7bc95e595a61b40a0f694d8b71ca3264b38 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Sat, 24 May 2025 11:59:31 +0700 Subject: [PATCH 2/2] fix:startdate, end date, categoryIds, createdByIds --- components/table/article-table.tsx | 215 ++++++++++++++++++++++------- services/article.ts | 6 +- types/globals.tsx | 2 + 3 files changed, 174 insertions(+), 49 deletions(-) diff --git a/components/table/article-table.tsx b/components/table/article-table.tsx index 4453313..e55cec3 100644 --- a/components/table/article-table.tsx +++ b/components/table/article-table.tsx @@ -7,6 +7,7 @@ import { DotsYIcon, EyeIconMdi, SearchIcon, + TimesIcon, } from "@/components/icons"; import { close, error, loading, success, successToast } from "@/config/swal"; import { @@ -54,6 +55,9 @@ import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import Cookies from "js-cookie"; import { parseDate } from "@internationalized/date"; +import { listMasterUsers } from "@/services/master-user"; +import ReactSelect from "react-select"; +import makeAnimated from "react-select/animated"; const columns = [ { name: "No", uid: "no" }, @@ -90,6 +94,7 @@ export default function ArticleTable() { const MySwal = withReactContent(Swal); const username = Cookies.get("username"); const userId = Cookies.get("uie"); + const animatedComponents = makeAnimated(); const [page, setPage] = useState(1); const [totalPage, setTotalPage] = useState(1); @@ -97,13 +102,18 @@ export default function ArticleTable() { const [showData, setShowData] = useState("10"); const [search, setSearch] = useState(""); const [categories, setCategories] = useState([]); - const [selectedCategories, setSelectedCategories] = useState(""); + const [users, setUsers] = useState([]); + const [selectedCategories, setSelectedCategories] = useState([]); + const [selectedUsers, setSelectedUsers] = useState([]); const [startDateValue, setStartDateValue] = useState({ startDate: null, endDate: null, }); - const [articleDate, setArticleDate] = useState({ + const [articleDate, setArticleDate] = useState<{ + startDate: any; + endDate: any; + }>({ startDate: parseDate( convertDateFormatNoTimeV2( new Date(new Date().setDate(new Date().getDate() - 7)) @@ -114,16 +124,46 @@ export default function ArticleTable() { useEffect(() => { initState(); - }, [page, showData, startDateValue, selectedCategories, articleDate]); + }, [ + page, + showData, + startDateValue, + selectedCategories, + articleDate, + selectedUsers, + ]); useEffect(() => { getCategories(); + getUsers(); }, []); + const setupList = (data: any, type: string) => { + const temp = []; + for (const element of data) { + temp.push({ + id: element.id, + label: element.title || element.fullname, + value: element.id, + }); + } + if (type === "users") { + setUsers(temp); + } + + if (type === "category") { + setCategories(temp); + } + }; + + async function getUsers() { + const res = await listMasterUsers({ page: page, limit: -1 }); + setupList(res?.data?.data, "users"); + } + async function getCategories() { const res = await getArticleByCategory(); - const data = res?.data?.data; - setCategories(data); + setupList(res?.data?.data, "category"); } const onSelectionChange = (id: Key | null) => { @@ -131,21 +171,41 @@ export default function ArticleTable() { }; const getDate = (data: any) => { - return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${ - data.day < 10 ? `0${data.day}` : data.day - }`; + if (data === null) { + return ""; + } else { + return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${ + data.day < 10 ? `0${data.day}` : data.day + }`; + } + }; + + const getIds = (data: { id: number; label: string; value: number }[]) => { + let temp = ""; + if (data) { + for (let i = 0; i < data.length; i++) { + if (i == 0) { + temp = String(data[i].id); + } else { + temp = temp + `,${data[i].id}`; + } + } + } + + return temp; }; async function initState() { loading(); - console.log("test", selectedCategories); + console.log("test", getIds(selectedCategories)); const req = { limit: showData, page: page, search: search, startDate: getDate(articleDate.startDate), endDate: getDate(articleDate.endDate), - category: selectedCategories, + categoryIds: getIds(selectedCategories), + createdByIds: getIds(selectedUsers), sort: "desc", sortBy: "created_at", }; @@ -414,45 +474,72 @@ export default function ArticleTable() {

Kategori

- - - {(item: any) => ( - - {item.title} - - )} - + + "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500", + }} + classNamePrefix="select" + onChange={setSelectedCategories} + closeMenuOnSelect={false} + components={animatedComponents} + isClearable={true} + isSearchable={true} + isMulti={true} + placeholder="Kategori..." + name="sub-module" + options={categories} + // styles={{ + // control: (base) => ({ + // ...base, + // width: "100%", + // overflowX: "auto", + // }), + // valueContainer: (base) => ({ + // ...base, + // display: "flex", + // flexWrap: "nowrap", + // overflowX: "auto", + // whiteSpace: "nowrap", + // gap: "4px", + // }), + // multiValue: (base) => ({ + // ...base, + // whiteSpace: "nowrap", + // flexShrink: 0, + // }), + // multiValueLabel: (base) => ({ + // ...base, + // whiteSpace: "nowrap", + // }), + // }} + />
{username?.includes("mabes") && (

Author

- - {(item: any) => ( - - {item.title} - - )} - + + "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500", + }} + classNamePrefix="select" + onChange={setSelectedUsers} + closeMenuOnSelect={false} + components={animatedComponents} + isClearable={true} + isSearchable={true} + isMulti={true} + placeholder="Kategori..." + name="sub-module" + options={users} + />
)} -