diff --git a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx index 9bee71a1..66db6815 100644 --- a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx +++ b/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(""); + const [categories, setCategories] = React.useState([]); + const [selectedCategories, setSelectedCategories] = React.useState( + [] + ); + const [categoryFilter, setCategoryFilter] = React.useState(""); + const [statusFilter, setStatusFilter] = React.useState([]); 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) => { setSearch(e.target.value); // Perbarui state search table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel @@ -130,17 +185,134 @@ const BlogTable = () => { /> -
- ) => - table.getColumn("status")?.setFilterValue(event.target.value) - } - className="max-w-sm " - /> +
+
+ + + + + +
+

Filter

+ {/*

+ Simpan +

*/} +
+ + {categories.length > 0 ? ( + categories.map((category) => ( +
+ handleCheckboxChange(category.id)} + /> + +
+ )) + ) : ( +

+ No categories found. +

+ )} + +
+ handleStatusCheckboxChange(1)} + /> + +
+
+ handleStatusCheckboxChange(2)} + /> + +
+
+ handleStatusCheckboxChange(3)} + /> + +
+
+ handleStatusCheckboxChange(4)} + /> + +
+
+
+
+
+ + + + + + {table + .getAllColumns() + .filter((column) => column.getCanHide()) + .map((column) => { + return ( + + column.toggleVisibility(!!value) + } + > + {column.id} + + ); + })} + + +
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 0fcfcb37..e5e821d5 100644 --- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx +++ b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx @@ -91,7 +91,7 @@ const TableAudio = () => { [] ); const [categoryFilter, setCategoryFilter] = React.useState(""); - const [statusFilter, setStatusFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); 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 ) => { @@ -324,22 +330,54 @@ const TableAudio = () => { /> -
- - ) => - table - .getColumn("statusName") - ?.setFilterValue(event.target.value) - } - className="max-w-sm " + +
+ handleStatusCheckboxChange(1)} /> + +
+
+ handleStatusCheckboxChange(2)} + /> + +
+
+ handleStatusCheckboxChange(3)} + /> + +
+
+ handleStatusCheckboxChange(4)} + /> +
diff --git a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx index 9c14dfc8..89f465bc 100644 --- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx +++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx @@ -96,7 +96,7 @@ const TableImage = () => { [] ); const [categoryFilter, setCategoryFilter] = React.useState(""); - const [statusFilter, setStatusFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); 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 ) => { @@ -330,22 +336,54 @@ const TableImage = () => { />
-
- - ) => - table - .getColumn("statusName") - ?.setFilterValue(event.target.value) - } - className="max-w-sm " + +
+ handleStatusCheckboxChange(1)} /> + +
+
+ handleStatusCheckboxChange(2)} + /> + +
+
+ handleStatusCheckboxChange(3)} + /> + +
+
+ handleStatusCheckboxChange(4)} + /> +
diff --git a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx index 7236cbe7..e3301f9d 100644 --- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx +++ b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx @@ -90,7 +90,7 @@ const TableTeks = () => { [] ); const [categoryFilter, setCategoryFilter] = React.useState(""); - const [statusFilter, setStatusFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); 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 ) => { @@ -323,22 +329,54 @@ const TableTeks = () => { />
-
- - ) => - table - .getColumn("statusName") - ?.setFilterValue(event.target.value) - } - className="max-w-sm " + +
+ handleStatusCheckboxChange(1)} /> + +
+
+ handleStatusCheckboxChange(2)} + /> + +
+
+ handleStatusCheckboxChange(3)} + /> + +
+
+ handleStatusCheckboxChange(4)} + /> +
diff --git a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx index 90a47401..3b5f8bd1 100644 --- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx +++ b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx @@ -90,7 +90,7 @@ const TableVideo = () => { [] ); const [categoryFilter, setCategoryFilter] = React.useState(""); - const [statusFilter, setStatusFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); 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 ) => { @@ -324,22 +330,54 @@ const TableVideo = () => { />
-
- - ) => - table - .getColumn("statusName") - ?.setFilterValue(event.target.value) - } - className="max-w-sm " + +
+ handleStatusCheckboxChange(1)} /> + +
+
+ handleStatusCheckboxChange(2)} + /> + +
+
+ handleStatusCheckboxChange(3)} + /> + +
+
+ handleStatusCheckboxChange(4)} + /> +
diff --git a/service/blog/blog.ts b/service/blog/blog.ts index fee03257..2fbebc0e 100644 --- a/service/blog/blog.ts +++ b/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); +}