fix: fixing filter nd pagination in spit

2025-07-22 22:07:18 +07:00 · 2025-07-22 22:07:18 +07:00 · 549eec65cc
parent 969eceab14
commit 549eec65cc
6 changed files with 183 additions and 42 deletions
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/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),
--- a/app/[locale]/(protected)/contributor/content/audio/page.tsx
+++ b/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>
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/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>({
-    pageIndex: 0,
-    pageSize: 10,
-  });
+  // const [pagination, setPagination] = React.useState<PaginationState>({
+  //   pageIndex: 0,
+  //   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
-    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+    setSearch(e.target.value);
+    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>
--- a/components/form/content/audio-form.tsx
+++ b/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">
--- a/components/table/table-pagination.tsx
+++ b/components/table/table-pagination.tsx
@ -1,9 +1,14 @@
-import { Button } from '@/components/ui/button';
-import { useMediaQuery } from '@/hooks/use-media-query';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { Table } from "@tanstack/react-table";
+import {
+  ChevronLeft,
+  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"
-            variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
+            className="min-w-[2rem] h-8 px-2 flex items-center justify-center"
+            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;
--- a/service/content/content.ts
+++ b/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}`
  );
 }