fix:startdate, end date, categoryIds, createdByIds

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<any>([]);
-  const [selectedCategories, setSelectedCategories] = useState<string>("");
+  const [users, setUsers] = useState<any>([]);
+  const [selectedCategories, setSelectedCategories] = useState<any>([]);
+  const [selectedUsers, setSelectedUsers] = useState<any>([]);
   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;
+    setupList(res?.data?.data, "category");
-    setCategories(data);
   }
 
   const onSelectionChange = (id: Key | null) => {
@@ -131,21 +171,41 @@ export default function ArticleTable() {
   };
 
   const getDate = (data: any) => {
+    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() {
             </div>
             <div className="flex flex-col gap-1 w-full lg:w-[230px]">
               <p className="font-semibold text-sm">Kategori</p>
-
+              <ReactSelect
-              <Autocomplete
+                className="basic-single text-black z-50"
-                className="w-full"
+                classNames={{
-                defaultItems={categories}
+                  control: (state: any) =>
-                label=""
+                    "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
-                labelPlacement="outside"
+                }}
-                variant="bordered"
+                classNamePrefix="select"
-                inputProps={{ classNames: { inputWrapper: "border-1" } }}
+                onChange={setSelectedCategories}
-                onSelectionChange={onSelectionChange}
+                closeMenuOnSelect={false}
-              >
+                components={animatedComponents}
-                {(item: any) => (
+                isClearable={true}
-                  <AutocompleteItem key={item.id}>
+                isSearchable={true}
-                    {item.title}
+                isMulti={true}
-                  </AutocompleteItem>
+                placeholder="Kategori..."
-                )}
+                name="sub-module"
-              </Autocomplete>
+                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",
+                //   }),
+                // }}
+              />
             </div>
             {username?.includes("mabes") && (
               <div className="flex flex-col gap-1 w-full lg:w-[230px]">
                 <p className="font-semibold text-sm">Author</p>
 
-                <Autocomplete
+                <ReactSelect
-                  className="w-full"
+                  className="basic-single text-black z-50"
-                  inputProps={{ classNames: { inputWrapper: "border-1" } }}
+                  classNames={{
-                  defaultItems={categories}
+                    control: (state: any) =>
-                  label=""
+                      "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
-                  labelPlacement="outside"
+                  }}
-                  variant="bordered"
+                  classNamePrefix="select"
-                  onSelectionChange={onSelectionChange}
+                  onChange={setSelectedUsers}
-                >
+                  closeMenuOnSelect={false}
-                  {(item: any) => (
+                  components={animatedComponents}
-                    <AutocompleteItem key={item.id}>
+                  isClearable={true}
-                      {item.title}
+                  isSearchable={true}
-                    </AutocompleteItem>
+                  isMulti={true}
-                  )}
+                  placeholder="Kategori..."
-                </Autocomplete>
+                  name="sub-module"
+                  options={users}
+                />
               </div>
             )}
-            <div className="flex flex-col gap-1 w-full lg:w-[120px]">
+            <div className="flex flex-col gap-1 w-full lg:w-[140px]">
               <p className="font-semibold text-sm">Start Date</p>
 
               <Popover
@@ -460,9 +547,25 @@ export default function ArticleTable() {
                 classNames={{ content: ["!bg-transparent", "p-0"] }}
               >
                 <PopoverTrigger>
-                  <a className="cursor-pointer border-1 px-2 py-2 rounded-xl">
+                  <div className="flex flex-row gap-1 items-center cursor-pointer border-1 px-2 py-2 rounded-xl">
-                    {convertDateFormatNoTime(articleDate.startDate)}
+                    <a className=" w-[120px]">
+                      {articleDate.startDate
+                        ? convertDateFormatNoTime(articleDate.startDate)
+                        : "-"}
                     </a>
+                    {articleDate.startDate && (
+                      <a
+                        onClick={() =>
+                          setArticleDate({
+                            startDate: null,
+                            endDate: articleDate.endDate,
+                          })
+                        }
+                      >
+                        <TimesIcon size={16} />
+                      </a>
+                    )}
+                  </div>
                 </PopoverTrigger>
                 <PopoverContent className="bg-transparent">
                   <Calendar
@@ -486,9 +589,25 @@ export default function ArticleTable() {
                 classNames={{ content: ["!bg-transparent", "p-0"] }}
               >
                 <PopoverTrigger>
-                  <a className="cursor-pointer border-1 px-2 py-2 rounded-xl">
+                  <div className="flex flex-row gap-1 items-center cursor-pointer border-1 px-2 py-2 rounded-xl">
-                    {convertDateFormatNoTime(articleDate.endDate)}
+                    <a className=" w-[120px]">
+                      {articleDate.endDate
+                        ? convertDateFormatNoTime(articleDate.endDate)
+                        : "-"}
                     </a>
+                    {articleDate.endDate && (
+                      <a
+                        onClick={() =>
+                          setArticleDate({
+                            endDate: null,
+                            startDate: articleDate.startDate,
+                          })
+                        }
+                      >
+                        <TimesIcon size={16} />
+                      </a>
+                    )}
+                  </div>
                 </PopoverTrigger>
                 <PopoverContent className="bg-transparent">
                   <Calendar

services/article.ts

@@ -22,6 +22,8 @@ export async function getListArticle(props: PaginationRequest) {
     sort,
     categorySlug,
     isBanner,
+    categoryIds,
+    createdByIds,
   } = props;
   const headers = {
     "content-type": "application/json",
@@ -33,7 +35,9 @@ export async function getListArticle(props: PaginationRequest) {
       endDate || ""
     }&categoryId=${category || ""}&sortBy=${sortBy || "created_at"}&sort=${
       sort || "asc"
-    }&category=${categorySlug || ""}&isBanner=${isBanner || ""}`,
+    }&category=${categorySlug || ""}&isBanner=${isBanner || ""}&categoryIds=${
+      categoryIds || ""
+    }&createdByIds=${createdByIds || ""}`,
     headers
   );
 }

types/globals.tsx

@@ -67,4 +67,6 @@ export type PaginationRequest = {
   sort?: string;
   categorySlug?: string;
   isBanner?: boolean;
+  categoryIds?: string;
+  createdByIds?: string;
 };