From 686fa7bc95e595a61b40a0f694d8b71ca3264b38 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Sat, 24 May 2025 11:59:31 +0700 Subject: [PATCH] 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} + />
)} -