From be3f45393ca97519aaa6ee9c2767b6f63713c323 Mon Sep 17 00:00:00 2001 From: Ainun Nadhifah Syamsiyah Date: Thu, 28 Nov 2024 08:05:58 +0700 Subject: [PATCH] feat: add category filter (wip) --- resources/js/Pages/Transaction/Index.tsx | 44 ++++++++++++++++++++++-- 1 file changed, 42 insertions(+), 2 deletions(-) diff --git a/resources/js/Pages/Transaction/Index.tsx b/resources/js/Pages/Transaction/Index.tsx index f66e590..67774bc 100644 --- a/resources/js/Pages/Transaction/Index.tsx +++ b/resources/js/Pages/Transaction/Index.tsx @@ -9,17 +9,47 @@ import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout"; import { cn, numberToCurrency } from "@/Lib/utils"; import { CartType } from "@/types/entities/cart"; import { TransactionType } from "@/types/entities/transaction"; -import { Head } from "@inertiajs/react"; +import { Head, router } from "@inertiajs/react"; import { format } from "date-fns"; import { Search, XCircle } from "lucide-react"; import * as React from "react"; import NotFound from "./container/NotFound"; +import { CategoryType } from "@/types/entities/category"; +import PopupFilter, { + PopupFilterProps, +} from "../Product/Components/PopupFilter"; + +type CategoryFilter = { + category: string[]; +}; + +type TransactionIndexProps = { + transaction: TransactionType[]; + category: CategoryType[]; +}; export default function TransactionIndex({ transaction, -}: { transaction: TransactionType[] }) { + category, +}: TransactionIndexProps) { const [filter, setFilter] = React.useState(""); + const [filterQuery, setFilterQuery] = React.useState({ + category: [], + }); + + const filterOption: PopupFilterProps["filterOption"] = + React.useMemo( + () => [ + { + id: "category", + name: "Category", + options: category, + }, + ], + [], + ); + const filteredTransaction = transaction.filter((t) => { const matchesText = t.cart_product.some((cp) => cp.product.name.toLowerCase().includes(filter.toLowerCase()), @@ -27,6 +57,10 @@ export default function TransactionIndex({ return matchesText; }); + React.useEffect(() => { + router.replace("/transaction"); + }); + return ( @@ -68,6 +102,12 @@ export default function TransactionIndex({ )} +
+ +
{filteredTransaction.map((t) => (