fix:startdate, end date, categoryIds, createdByIds

2025-05-24 11:59:31 +07:00 · 2025-05-24 11:59:31 +07:00 · 686fa7bc95
parent b38b72f708
commit 686fa7bc95
3 changed files with 174 additions and 49 deletions
--- 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<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;
-    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() {
            </div>
            <div className="flex flex-col gap-1 w-full lg:w-[230px]">
              <p className="font-semibold text-sm">Kategori</p>
-
-              <Autocomplete
-                className="w-full"
-                defaultItems={categories}
-                label=""
-                labelPlacement="outside"
-                variant="bordered"
-                inputProps={{ classNames: { inputWrapper: "border-1" } }}
-                onSelectionChange={onSelectionChange}
-              >
-                {(item: any) => (
-                  <AutocompleteItem key={item.id}>
-                    {item.title}
-                  </AutocompleteItem>
-                )}
-              </Autocomplete>
+              <ReactSelect
+                className="basic-single text-black z-50"
+                classNames={{
+                  control: (state: any) =>
+                    "!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",
+                //   }),
+                // }}
+              />
            </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
-                  className="w-full"
-                  inputProps={{ classNames: { inputWrapper: "border-1" } }}
-                  defaultItems={categories}
-                  label=""
-                  labelPlacement="outside"
-                  variant="bordered"
-                  onSelectionChange={onSelectionChange}
-                >
-                  {(item: any) => (
-                    <AutocompleteItem key={item.id}>
-                      {item.title}
-                    </AutocompleteItem>
-                  )}
-                </Autocomplete>
+                <ReactSelect
+                  className="basic-single text-black z-50"
+                  classNames={{
+                    control: (state: any) =>
+                      "!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}
+                />
              </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">
-                    {convertDateFormatNoTime(articleDate.startDate)}
-                  </a>
+                  <div className="flex flex-row gap-1 items-center cursor-pointer border-1 px-2 py-2 rounded-xl">
+                    <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">
-                    {convertDateFormatNoTime(articleDate.endDate)}
-                  </a>
+                  <div className="flex flex-row gap-1 items-center cursor-pointer border-1 px-2 py-2 rounded-xl">
+                    <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
--- a/services/article.ts
+++ b/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
  );
 }
--- a/types/globals.tsx
+++ b/types/globals.tsx
@ -67,4 +67,6 @@ export type PaginationRequest = {
  sort?: string;
  categorySlug?: string;
  isBanner?: boolean;
+  categoryIds?: string;
+  createdByIds?: string;
 };