ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add search functionality to inventory page

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-03-31 21:37:38 +07:00
parent 2b694a1b44
commit 83bffe9747
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/app/(sidebar)/inventory/page.tsx
View File

@ -1,11 +1,12 @@
"use client"; "use client";
import { import {
useState,
JSXElementConstructor, JSXElementConstructor,
ReactElement, ReactElement,
ReactNode, ReactNode,
ReactPortal, ReactPortal,
useState, useMemo,
} from "react"; } from "react";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { import {
@ -33,17 +34,15 @@ import {
PaginationContent, PaginationContent,
PaginationItem, PaginationItem,
} from "@/components/ui/pagination"; } from "@/components/ui/pagination";
import { Search } from "lucide-react";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { fetchInventoryItems } from "@/api/inventory"; import { fetchInventoryItems } from "@/api/inventory";
import { AddInventoryItem } from "./add-inventory-item"; import { AddInventoryItem } from "./add-inventory-item";
import { EditInventoryItem } from "./edit-inventory-item"; import { EditInventoryItem } from "./edit-inventory-item";
import { DeleteInventoryItem } from "./delete-inventory-item"; import { DeleteInventoryItem } from "./delete-inventory-item";
export default function InventoryPage() { export default function InventoryPage() {
const [date, setDate] = useState<Date>();
const [inventoryType, setInventoryType] = useState("all");
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [pagination, setPagination] = useState<PaginationState>({ const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
@ -59,13 +58,16 @@ export default function InventoryPage() {
queryFn: fetchInventoryItems, queryFn: fetchInventoryItems,
staleTime: 60 * 1000, staleTime: 60 * 1000,
}); });
const [searchTerm, setSearchTerm] = useState("");
const filteredItems = const handleSearch = () => {
inventoryType === "all" // update search state when user clicks or presses enter
? inventoryItems setSearchTerm(searchTerm);
: inventoryItems.filter( };
(item) => item.type.toLowerCase() === inventoryType const filteredItems = useMemo(() => {
return inventoryItems.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase())
); );
}, [inventoryItems, searchTerm]);
const columns = [ const columns = [
{ accessorKey: "name", header: "Name" }, { accessorKey: "name", header: "Name" },
@ -138,10 +140,13 @@ export default function InventoryPage() {
<main className="flex-1 p-6"> <main className="flex-1 p-6">
<h1 className="text-2xl font-bold tracking-tight mb-6">Inventory</h1> <h1 className="text-2xl font-bold tracking-tight mb-6">Inventory</h1>
<div className="flex flex-col sm:flex-row gap-4 mb-6"> <div className="flex flex-col sm:flex-row gap-4 mb-6">
<Button onClick={() => setInventoryType("all")} className="w-24"> <Search className="mt-1" />
All <Input
</Button> type="search"
<Input type="search" placeholder="Search the name" /> placeholder="Search by name..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<AddInventoryItem /> <AddInventoryItem />
</div> </div>
<div className="border rounded-md"> <div className="border rounded-md">
@ -180,7 +185,7 @@ export default function InventoryPage() {
</Table> </Table>
</div> </div>
<Pagination className="mt-5"> <Pagination className="mt-5">
<PaginationContent> <PaginationContent className="space-x-5">
<PaginationItem> <PaginationItem>
<Button <Button
className="flex w-24" className="flex w-24"
@ -190,6 +195,7 @@ export default function InventoryPage() {
pageIndex: Math.max(0, prev.pageIndex - 1), pageIndex: Math.max(0, prev.pageIndex - 1),
})) }))
} }
disabled={pagination.pageIndex === 0}
> >
Previous Previous
</Button> </Button>
@ -204,6 +210,10 @@ export default function InventoryPage() {
pageIndex: prev.pageIndex + 1, pageIndex: prev.pageIndex + 1,
})) }))
} }
disabled={
pagination.pageIndex >=
Math.ceil(filteredItems.length / pagination.pageSize) - 1
}
> >
Next Next
</Button> </Button>