fix: fixing filter nd pagination in spit

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

@@ -78,7 +78,7 @@ const TableAudio = () => {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
-  const [showData, setShowData] = React.useState("50");
+  const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: Number(showData),

app/[locale]/(protected)/contributor/content/audio/page.tsx

@@ -35,7 +35,7 @@ const ReactTableAudioPage = () => {
               </div>
               <div>
                 <p>
-                  <span className="text-red-500">{t("average", { defaultValue: "Average" })} :0</span>
+                  <span className="text-red-500">{t("average", { defaultValue: "Average" })} : 0</span>
                 </p>
                 <p className="text-sm">{t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}</p>
               </div>

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

@@ -36,7 +36,7 @@ import {
 import { title } from "process";
 import { getCookiesDecrypt } from "@/lib/utils";
 import TablePagination from "@/components/table/table-pagination";
-import { listSPIT } from "@/service/content/content";
+import { listEnableCategory, listSPIT } from "@/service/content/content";
 
 import { useSearchParams } from "next/navigation";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -45,6 +45,8 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Label } from "@/components/ui/label";
@@ -71,10 +73,10 @@ const TableSPIT = () => {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
-  const [pagination, setPagination] = React.useState<PaginationState>({
+  // const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
+  //   pageIndex: 0,
-    pageSize: 10,
+  //   pageSize: 10,
-  });
+  // });
   const [page, setPage] = React.useState(1);
   const [totalPage, setTotalPage] = React.useState(1);
   const [limit, setLimit] = React.useState(10);
@@ -89,7 +91,12 @@ const TableSPIT = () => {
     []
   );
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
-
+  const [showData, setShowData] = React.useState("10");
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categories, setCategories] = React.useState<any[]>([]);
   const roleId = getCookiesDecrypt("urie");
   const columns = useTableColumns();
   const table = useReactTable({
@@ -122,14 +129,33 @@ const TableSPIT = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page, limit, search, statusFilter, dateFilter]);
+  }, [showData, page, search, statusFilter, dateFilter]);
+
+  React.useEffect(() => {
+    fetchData();
+    getCategories();
+  }, [
+    // categoryFilter,
+    statusFilter,
+    page,
+    showData,
+    search,
+    // startDate,
+    // endDate,
+  ]);
+
+  async function getCategories() {
+    const category = await listEnableCategory("4");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory || []);
+  }
 
   async function fetchData() {
     let isPublish;
     if (statusFilter.length === 0) {
-      isPublish = ""; // Tidak ada filter, tampilkan semua data
+      isPublish = "";
     } else if (statusFilter.length > 1) {
-      isPublish = ""; // Tidak spesifik, bisa ditafsirkan sebagai semua
+      isPublish = "";
     } else {
       isPublish = statusFilter.includes(1) ? false : true;
     }
@@ -140,17 +166,17 @@ const TableSPIT = () => {
 
     try {
       const res = await listSPIT(
+        showData,
         page - 1,
-        limit,
+        // limit,
         search,
         formattedStartDate,
         isPublish
       );
       const data = res?.data?.data;
-      const contentData = data?.content || [];
+      const contentData = data?.content;
-
       contentData.forEach((item: any, index: number) => {
-        item.no = (page - 1) * limit + index + 1;
+        item.no = (page - 1) * Number(showData) + index + 1;
       });
 
       console.log("contentData : ", contentData);
@@ -164,8 +190,8 @@ const TableSPIT = () => {
   }
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.target.value); // Perbarui state search
+    setSearch(e.target.value);
-    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+    table.getColumn("judul")?.setFilterValue(e.target.value);
   };
 
   function handleStatusCheckboxChange(value: any) {
@@ -194,6 +220,42 @@ const TableSPIT = () => {
           </InputGroup>
         </div>
         <div className="flex fle-row items-center gap-3">
+          <div className="mx-3">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size="md" variant="outline">
+                  {showData} Data
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56 text-sm">
+                <DropdownMenuRadioGroup
+                  value={showData}
+                  onValueChange={(value) => {
+                    setShowData(value);
+                    setPagination((prev) => ({
+                      ...prev,
+                      pageSize: Number(value),
+                      pageIndex: 0,
+                    }));
+                    setPage(1);
+                  }}
+                >
+                  <DropdownMenuRadioItem value="10">
+                    10 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="50">
+                    50 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="100">
+                    100 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="250">
+                    250 Data
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
           <div className="flex items-center py-4">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>

components/form/content/audio-form.tsx

@@ -212,6 +212,9 @@ export default function FormAudio() {
     tags: z
       .array(z.string().min(1))
       .min(1, { message: "Wajib isi minimal 1 tag" }),
+    publishedFor: z
+      .array(z.string())
+      .min(1, { message: "Minimal 1 target publish harus dipilih." }),
   });
 
   const {
@@ -228,6 +231,7 @@ export default function FormAudio() {
       rewriteDescription: "",
       category: "",
       tags: [],
+      publishedFor: [],
     },
   });
 
@@ -648,7 +652,7 @@ export default function FormAudio() {
         filename: file.name,
         filetype: file.type,
         duration,
-        isWatermark: "false", 
+        isWatermark: "false",
       },
       onBeforeRequest: function (req) {
         var xhr = req.getUnderlyingObject();
@@ -1414,7 +1418,7 @@ export default function FormAudio() {
               )}
             </div>
 
-            <div className="px-3 py-3">
+            {/* <div className="px-3 py-3">
               <div className="flex flex-col gap-3 space-y-2">
                 <Label>
                   {t("publish-target", { defaultValue: "Publish Target" })}
@@ -1436,7 +1440,74 @@ export default function FormAudio() {
                   </div>
                 ))}
               </div>
-            </div>
+            </div> */}
+            <Controller
+              control={control}
+              name="publishedFor"
+              render={({ field }) => (
+                <div className="px-3 py-3">
+                  <div className="flex flex-col gap-3 space-y-2">
+                    <Label>
+                      {t("publish-target", { defaultValue: "Publish Target" })}
+                    </Label>
+
+                    {options.map((option) => {
+                      const isAllChecked =
+                        field.value.length ===
+                        options.filter((opt: any) => opt.id !== "all").length;
+
+                      const isChecked =
+                        option.id === "all"
+                          ? isAllChecked
+                          : field.value.includes(option.id);
+
+                      const handleChange = () => {
+                        let updated: string[] = [];
+
+                        if (option.id === "all") {
+                          updated = isAllChecked
+                            ? []
+                            : options
+                                .filter((opt: any) => opt.id !== "all")
+                                .map((opt: any) => opt.id);
+                        } else {
+                          updated = isChecked
+                            ? field.value.filter((val) => val !== option.id)
+                            : [...field.value, option.id];
+
+                          if (isAllChecked && option.id !== "all") {
+                            updated = updated.filter((val) => val !== "all");
+                          }
+                        }
+
+                        field.onChange(updated);
+                        setPublishedFor(updated);
+                      };
+
+                      return (
+                        <div
+                          key={option.id}
+                          className="flex gap-2 items-center"
+                        >
+                          <Checkbox
+                            id={option.id}
+                            checked={isChecked}
+                            onCheckedChange={handleChange}
+                          />
+                          <Label htmlFor={option.id}>{option.label}</Label>
+                        </div>
+                      );
+                    })}
+
+                    {errors.publishedFor && (
+                      <p className="text-red-500 text-sm">
+                        {errors.publishedFor.message}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
           </Card>
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">

components/table/table-pagination.tsx

@@ -1,9 +1,14 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
-import { useMediaQuery } from '@/hooks/use-media-query';
+import { useMediaQuery } from "@/hooks/use-media-query";
-import { Table } from '@tanstack/react-table';
+import { Table } from "@tanstack/react-table";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import {
-import { useSearchParams, useRouter } from 'next/navigation';
+  ChevronLeft,
-import React, { useEffect, useState } from 'react';
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { useSearchParams, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -23,14 +28,13 @@ const TablePagination = ({
 
   const [currentPageIndex, setCurrentPageIndex] = useState<number>(1);
 
-  
   const isMobile = useMediaQuery("(min-width: 768px)");
   if (!isMobile) {
     visiblePageCount = 3;
   }
 
   useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       const pageIndex = Math.min(Math.max(1, Number(pageFromUrl)), totalPage);
       setCurrentPageIndex(pageIndex);
@@ -41,7 +45,7 @@ const TablePagination = ({
   const handlePageChange = (pageIndex: number) => {
     const clampedPageIndex = Math.min(Math.max(1, pageIndex), totalPage);
     const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('page', clampedPageIndex.toString());
+    searchParams.set("page", clampedPageIndex.toString());
 
     router.push(`${window.location.pathname}?${searchParams.toString()}`);
     setCurrentPageIndex(clampedPageIndex);
@@ -57,13 +61,17 @@ const TablePagination = ({
       startPage = Math.max(1, endPage - visiblePageCount + 1);
     }
 
-    return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+    return Array.from(
+      { length: endPage - startPage + 1 },
+      (_, i) => startPage + i
+    );
   };
 
   return (
     <div className="flex flex-col md:flex-row items-center justify-between py-4 px-10 space-y-4 md:space-y-0">
       <div className="flex-1 text-sm text-muted-foreground text-center md:text-left">
-        {table.getFilteredSelectedRowModel().rows.length} of {totalData} row(s) selected.
+        {table.getFilteredSelectedRowModel().rows.length} of {totalData} row(s)
+        selected.
       </div>
       <div className="flex items-center gap-2">
         <Button
@@ -71,16 +79,16 @@ const TablePagination = ({
           size="icon"
           onClick={() => handlePageChange(1)}
           disabled={currentPageIndex === 1}
-          className="w-8 h-8"
+          className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
         >
           <ChevronsLeft className="w-4 h-4" />
         </Button>
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex-1)}
+          onClick={() => handlePageChange(currentPageIndex - 1)}
           disabled={currentPageIndex === 1}
-          className="w-8 h-8"
+          className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
         >
           <ChevronLeft className="w-4 h-4" />
         </Button>
@@ -89,8 +97,8 @@ const TablePagination = ({
             key={pageIndex}
             onClick={() => handlePageChange(pageIndex)}
             size="icon"
-            className="w-8 h-8"
+            className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
-            variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
+            variant={currentPageIndex === pageIndex ? "default" : "outline"}
           >
             {pageIndex}
           </Button>
@@ -98,9 +106,9 @@ const TablePagination = ({
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex+1)}
+          onClick={() => handlePageChange(currentPageIndex + 1)}
           disabled={currentPageIndex === totalPage}
-          className="w-8 h-8"
+          className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
         >
           <ChevronRight className="w-4 h-4" />
         </Button>
@@ -109,7 +117,7 @@ const TablePagination = ({
           size="icon"
           onClick={() => handlePageChange(totalPage)}
           disabled={currentPageIndex === totalPage}
-          className="w-8 h-8"
+          className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
         >
           <ChevronsRight className="w-4 h-4" />
         </Button>
@@ -118,4 +126,4 @@ const TablePagination = ({
   );
 };
 
-export default TablePagination;
+export default TablePagination;

service/content/content.ts

@@ -128,14 +128,14 @@ export async function listDataAudio(
 }
 
 export async function listSPIT(
+  size: any,
   page: any,
-  limit: any,
   title = "",
   contentCreatedDate = "",
   isPublish: any
 ) {
   return await httpGetInterceptor(
-    `media/spit/pagination?enablePage=1&page=${page}&size=${limit}&sort=desc&sortBy=contentTitleId&title=${title}& contentCreatedDate=${contentCreatedDate}&isPublish=${isPublish}`
+    `media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}& contentCreatedDate=${contentCreatedDate}&isPublish=${isPublish}`
   );
 }