From 549eec65cc9172a6b17b127bac7f9554e1de0e57 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Tue, 22 Jul 2025 22:07:18 +0700 Subject: [PATCH] fix: fixing filter nd pagination in spit --- .../content/audio/components/table-audio.tsx | 2 +- .../contributor/content/audio/page.tsx | 2 +- .../content/spit/table-spit/table-spit.tsx | 92 ++++++++++++++++--- components/form/content/audio-form.tsx | 77 +++++++++++++++- components/table/table-pagination.tsx | 48 ++++++---- service/content/content.ts | 4 +- 6 files changed, 183 insertions(+), 42 deletions(-) diff --git a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx index fdcccead..dca97c62 100644 --- 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({}); const [rowSelection, setRowSelection] = React.useState({}); - const [showData, setShowData] = React.useState("50"); + const [showData, setShowData] = React.useState("10"); const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: Number(showData), diff --git a/app/[locale]/(protected)/contributor/content/audio/page.tsx b/app/[locale]/(protected)/contributor/content/audio/page.tsx index 8dc46b6c..017d05b4 100644 --- a/app/[locale]/(protected)/contributor/content/audio/page.tsx +++ b/app/[locale]/(protected)/contributor/content/audio/page.tsx @@ -35,7 +35,7 @@ const ReactTableAudioPage = () => {

- {t("average", { defaultValue: "Average" })} :0 + {t("average", { defaultValue: "Average" })} : 0

{t("Hasil_unggah_direvisi_hari_ini", { defaultValue: "Hasil Unggah Direvisi Hari Ini" })}

diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx index 55ce0186..93d58a4d 100644 --- 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({}); const [rowSelection, setRowSelection] = React.useState({}); - const [pagination, setPagination] = React.useState({ - pageIndex: 0, - pageSize: 10, - }); + // const [pagination, setPagination] = React.useState({ + // 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([]); - + const [showData, setShowData] = React.useState("10"); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: Number(showData), + }); + const [categories, setCategories] = React.useState([]); 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) => { - 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 = () => {
+
+ + + + + + { + setShowData(value); + setPagination((prev) => ({ + ...prev, + pageSize: Number(value), + pageIndex: 0, + })); + setPage(1); + }} + > + + 10 Data + + + 50 Data + + + 100 Data + + + 250 Data + + + + +
diff --git a/components/form/content/audio-form.tsx b/components/form/content/audio-form.tsx index 9b354a1b..ecf0d0a1 100644 --- 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() { )}
-
+ {/*
))}
-
+
*/} + ( +
+
+ + + {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 ( +
+ + +
+ ); + })} + + {errors.publishedFor && ( +

+ {errors.publishedFor.message} +

+ )} +
+
+ )} + />
diff --git a/components/table/table-pagination.tsx b/components/table/table-pagination.tsx index 8a62e034..06593f59 100644 --- 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; @@ -23,14 +28,13 @@ const TablePagination = ({ const [currentPageIndex, setCurrentPageIndex] = useState(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 (
- {table.getFilteredSelectedRowModel().rows.length} of {totalData} row(s) selected. + {table.getFilteredSelectedRowModel().rows.length} of {totalData} row(s) + selected.
@@ -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} @@ -98,9 +106,9 @@ const TablePagination = ({ @@ -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" > @@ -118,4 +126,4 @@ const TablePagination = ({ ); }; -export default TablePagination; \ No newline at end of file +export default TablePagination; diff --git a/service/content/content.ts b/service/content/content.ts index 7a47c35b..6a3924a1 100644 --- 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}` ); }