feat:update filter blog, filter content

app/[locale]/(protected)/contributor/blog/components/blog-table.tsx

@@ -25,15 +25,23 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Search } from "lucide-react";
+import { ChevronDown, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/service/blog/blog";
+import { getBlogCategory, paginationBlog } from "@/service/blog/blog";
 import { ticketingPagination } from "@/service/ticketing/ticketing";
 import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { listEnableCategory } from "@/service/content/content";
 
 const BlogTable = () => {
   const router = useRouter();
@@ -56,6 +64,12 @@ const BlogTable = () => {
   const [totalPage, setTotalPage] = React.useState(1);
   const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState<string>("");
+  const [categories, setCategories] = React.useState<any[]>([]);
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
+    []
+  );
+  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
 
   const table = useReactTable({
     data: dataTable,
@@ -87,11 +101,18 @@ const BlogTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, limit, search]);
+    getCategories();
+  }, [categoryFilter, statusFilter, page, limit, search]);
 
   async function fetchData() {
     try {
-      const res = await paginationBlog(limit, page - 1, search);
+      const res = await paginationBlog(
+        limit,
+        page - 1,
+        search,
+        categoryFilter,
+        statusFilter
+      );
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -108,6 +129,40 @@ const BlogTable = () => {
     }
   }
 
+  async function getCategories() {
+    const category = await getBlogCategory();
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory || []);
+  }
+
+  const handleCheckboxChange = (categoryId: number) => {
+    setSelectedCategories(
+      (prev: any) =>
+        prev.includes(categoryId)
+          ? prev.filter((id: any) => id !== categoryId) // Hapus jika sudah dipilih
+          : [...prev, categoryId] // Tambahkan jika belum dipilih
+    );
+
+    // Perbarui filter kategori
+    setCategoryFilter((prev) => {
+      const updatedCategories = prev.split(",").filter(Boolean).map(Number);
+
+      const newCategories = updatedCategories.includes(categoryId)
+        ? updatedCategories.filter((id) => id !== categoryId)
+        : [...updatedCategories, categoryId];
+
+      return newCategories.join(",");
+    });
+  };
+
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value); // Perbarui state search
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
@@ -130,17 +185,134 @@ const BlogTable = () => {
             />
           </InputGroup>
         </div>
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
+        <div className="flex flex-row items-center gap-3">
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Filter <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                className="w-64 h-[200px] overflow-y-auto"
+              >
+                <div className="flex flex-row justify-between my-1 mx-1">
+                  <p>Filter</p>
+                  {/* <p
+                    className="text-blue-600 cursor-pointer"
+                    onClick={fetchData}
+                  >
+                    Simpan
+                  </p> */}
+                </div>
+                <Label className="ml-2">Kategori</Label>
+                {categories.length > 0 ? (
+                  categories.map((category) => (
+                    <div
+                      key={category.id}
+                      className="flex items-center px-4 py-1"
+                    >
+                      <input
+                        type="checkbox"
+                        id={`category-${category.id}`}
+                        className="mr-2"
+                        checked={selectedCategories.includes(category.id)}
+                        onChange={() => handleCheckboxChange(category.id)}
+                      />
+                      <label
+                        htmlFor={`category-${category.id}`}
+                        className="text-sm"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-sm text-gray-500 px-4 py-2">
+                    No categories found.
+                  </p>
+                )}
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-3"
+                    className="mr-2"
+                    checked={statusFilter.includes(3)}
+                    onChange={() => handleStatusCheckboxChange(3)}
+                  />
+                  <label htmlFor="status-3" className="text-sm">
+                    Minta Update
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-4"
+                    className="mr-2"
+                    checked={statusFilter.includes(4)}
+                    onChange={() => handleStatusCheckboxChange(4)}
+                  />
+                  <label htmlFor="status-4" className="text-sm">
+                    Ditolak
+                  </label>
+                </div>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
       <Table className="overflow-hidden mt-3">

app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx

@@ -91,7 +91,7 @@ const TableAudio = () => {
     []
   );
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
-  const [statusFilter, setStatusFilter] = React.useState([]);
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
   const [endDate, setEndDate] = React.useState("");
   const [filterByCreator, setFilterByCreator] = React.useState("");
@@ -131,7 +131,7 @@ const TableAudio = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [categoryFilter, page, limit, search, startDate, endDate]);
+  }, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("4");
@@ -175,9 +175,7 @@ const TableAudio = () => {
         isForSelf,
         !isForSelf,
         categoryFilter,
-        statusFilter?.sort().join(",").includes("1")
-          ? "1,2"
-          : statusFilter?.sort().join(","),
+        statusFilter,
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
@@ -214,6 +212,14 @@ const TableAudio = () => {
     fetchData(); // Panggil ulang data dengan filter baru
   };
 
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   const handleSearchFilterByCreator = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -324,22 +330,54 @@ const TableAudio = () => {
                   />
                 </div>
 
-                <div className="mx-2 my-1">
-                  <Label>Status</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={
-                      (table
-                        .getColumn("statusName")
-                        ?.getFilterValue() as string) ?? ""
-                    }
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      table
-                        .getColumn("statusName")
-                        ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm "
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
                   />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-3"
+                    className="mr-2"
+                    checked={statusFilter.includes(3)}
+                    onChange={() => handleStatusCheckboxChange(3)}
+                  />
+                  <label htmlFor="status-3" className="text-sm">
+                    Minta Update
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-4"
+                    className="mr-2"
+                    checked={statusFilter.includes(4)}
+                    onChange={() => handleStatusCheckboxChange(4)}
+                  />
+                  <label htmlFor="status-4" className="text-sm">
+                    Ditolak
+                  </label>
                 </div>
               </DropdownMenuContent>
             </DropdownMenu>

app/[locale]/(protected)/contributor/content/image/components/table-image.tsx

@@ -96,7 +96,7 @@ const TableImage = () => {
     []
   );
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
-  const [statusFilter, setStatusFilter] = React.useState([]);
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
   const [endDate, setEndDate] = React.useState("");
   const [filterByCreator, setFilterByCreator] = React.useState("");
@@ -137,7 +137,7 @@ const TableImage = () => {
     // Panggil fetchData saat filter kategori berubah
     fetchData();
     getCategories();
-  }, [categoryFilter, page, limit, search, startDate, endDate]);
+  }, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("1");
@@ -181,9 +181,7 @@ const TableImage = () => {
         isForSelf,
         !isForSelf,
         categoryFilter,
-        statusFilter?.sort().join(",").includes("1")
-          ? "1,2"
-          : statusFilter?.sort().join(","),
+        statusFilter,
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
@@ -220,6 +218,14 @@ const TableImage = () => {
     fetchData(); // Panggil ulang data dengan filter baru
   };
 
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   const handleSearchFilterByCreator = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -330,22 +336,54 @@ const TableImage = () => {
                   />
                 </div>
 
-                <div className="mx-2 my-1">
-                  <Label>Status</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={
-                      (table
-                        .getColumn("statusName")
-                        ?.getFilterValue() as string) ?? ""
-                    }
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      table
-                        .getColumn("statusName")
-                        ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm "
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
                   />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-3"
+                    className="mr-2"
+                    checked={statusFilter.includes(3)}
+                    onChange={() => handleStatusCheckboxChange(3)}
+                  />
+                  <label htmlFor="status-3" className="text-sm">
+                    Minta Update
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-4"
+                    className="mr-2"
+                    checked={statusFilter.includes(4)}
+                    onChange={() => handleStatusCheckboxChange(4)}
+                  />
+                  <label htmlFor="status-4" className="text-sm">
+                    Ditolak
+                  </label>
                 </div>
               </DropdownMenuContent>
             </DropdownMenu>

app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx

@@ -90,7 +90,7 @@ const TableTeks = () => {
     []
   );
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
-  const [statusFilter, setStatusFilter] = React.useState([]);
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
   const [endDate, setEndDate] = React.useState("");
   const [filterByCreator, setFilterByCreator] = React.useState("");
@@ -130,7 +130,7 @@ const TableTeks = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [categoryFilter, page, limit, search, startDate, endDate]);
+  }, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("3");
@@ -174,9 +174,7 @@ const TableTeks = () => {
         isForSelf,
         !isForSelf,
         categoryFilter,
-        statusFilter?.sort().join(",").includes("1")
-          ? "1,2"
-          : statusFilter?.sort().join(","),
+        statusFilter,
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
@@ -213,6 +211,14 @@ const TableTeks = () => {
     fetchData(); // Panggil ulang data dengan filter baru
   };
 
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   const handleSearchFilterByCreator = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -323,22 +329,54 @@ const TableTeks = () => {
                   />
                 </div>
 
-                <div className="mx-2 my-1">
-                  <Label>Status</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={
-                      (table
-                        .getColumn("statusName")
-                        ?.getFilterValue() as string) ?? ""
-                    }
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      table
-                        .getColumn("statusName")
-                        ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm "
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
                   />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-3"
+                    className="mr-2"
+                    checked={statusFilter.includes(3)}
+                    onChange={() => handleStatusCheckboxChange(3)}
+                  />
+                  <label htmlFor="status-3" className="text-sm">
+                    Minta Update
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-4"
+                    className="mr-2"
+                    checked={statusFilter.includes(4)}
+                    onChange={() => handleStatusCheckboxChange(4)}
+                  />
+                  <label htmlFor="status-4" className="text-sm">
+                    Ditolak
+                  </label>
                 </div>
               </DropdownMenuContent>
             </DropdownMenu>

app/[locale]/(protected)/contributor/content/video/components/table-video.tsx

@@ -90,7 +90,7 @@ const TableVideo = () => {
     []
   );
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
-  const [statusFilter, setStatusFilter] = React.useState([]);
+  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
   const [endDate, setEndDate] = React.useState("");
   const [filterByCreator, setFilterByCreator] = React.useState("");
@@ -130,7 +130,7 @@ const TableVideo = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [categoryFilter, page, limit, search, startDate, endDate]);
+  }, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("2");
@@ -174,9 +174,7 @@ const TableVideo = () => {
         isForSelf,
         !isForSelf,
         categoryFilter,
-        statusFilter?.sort().join(",").includes("1")
-          ? "1,2"
-          : statusFilter?.sort().join(","),
+        statusFilter,
         statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
         filterByCreator,
         filterBySource,
@@ -213,6 +211,14 @@ const TableVideo = () => {
     fetchData(); // Panggil ulang data dengan filter baru
   };
 
+  function handleStatusCheckboxChange(value: any) {
+    setStatusFilter((prev: any) =>
+      prev.includes(value)
+        ? prev.filter((status: any) => status !== value)
+        : [...prev, value]
+    );
+  }
+
   const handleSearchFilterByCreator = (
     e: React.ChangeEvent<HTMLInputElement>
   ) => {
@@ -324,22 +330,54 @@ const TableVideo = () => {
                   />
                 </div>
 
-                <div className="mx-2 my-1">
-                  <Label>Status</Label>
-                  <Input
-                    placeholder="Filter Status..."
-                    value={
-                      (table
-                        .getColumn("statusName")
-                        ?.getFilterValue() as string) ?? ""
-                    }
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                      table
-                        .getColumn("statusName")
-                        ?.setFilterValue(event.target.value)
-                    }
-                    className="max-w-sm "
+                <Label className="ml-2 mt-2">Status</Label>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(1)}
+                    onChange={() => handleStatusCheckboxChange(1)}
                   />
+                  <label htmlFor="status-2" className="text-sm">
+                    Menunggu Review
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-2"
+                    className="mr-2"
+                    checked={statusFilter.includes(2)}
+                    onChange={() => handleStatusCheckboxChange(2)}
+                  />
+                  <label htmlFor="status-2" className="text-sm">
+                    Diterima
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-3"
+                    className="mr-2"
+                    checked={statusFilter.includes(3)}
+                    onChange={() => handleStatusCheckboxChange(3)}
+                  />
+                  <label htmlFor="status-3" className="text-sm">
+                    Minta Update
+                  </label>
+                </div>
+                <div className="flex items-center px-4 py-1">
+                  <input
+                    type="checkbox"
+                    id="status-4"
+                    className="mr-2"
+                    checked={statusFilter.includes(4)}
+                    onChange={() => handleStatusCheckboxChange(4)}
+                  />
+                  <label htmlFor="status-4" className="text-sm">
+                    Ditolak
+                  </label>
                 </div>
               </DropdownMenuContent>
             </DropdownMenu>

service/blog/blog.ts

@@ -7,10 +7,12 @@ import {
 export async function paginationBlog(
   size: number,
   page: number,
-  title: string = ""
+  title: string = "",
+  categoryFilter: any,
+  statusFilter: any
 ) {
   return await httpGetInterceptor(
-    `blog/pagination?enablePage=1&page=${page}&size=${size}&title=${title}`
+    `blog/pagination?enablePage=1&page=${page}&size=${size}&title=${title}&categoryId=${categoryFilter}&statusId=${statusFilter}`
   );
 }
 
@@ -36,3 +38,8 @@ export async function deleteBlog(id: any) {
   const url = `blog?id=${id}`;
   return httpDeleteInterceptor(url);
 }
+
+export async function getBlogCategory() {
+  const url = "blog/categories/enable";
+  return httpGetInterceptor(url);
+}