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 sorting icons to inventory table headers and disable sorting for edit/delete columns

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-03-31 21:53:09 +07:00
parent 83bffe9747
commit e004c62941
3 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ import {
PaginationItem, PaginationItem,
} from "@/components/ui/pagination"; } from "@/components/ui/pagination";
import { Search } from "lucide-react"; import { Search } from "lucide-react";
import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { fetchInventoryItems } from "@/api/inventory"; import { fetchInventoryItems } from "@/api/inventory";
@ -102,11 +103,17 @@ export default function InventoryPage() {
| undefined; | undefined;
}) => <Badge>{info.getValue()}</Badge>, }) => <Badge>{info.getValue()}</Badge>,
}, },
{ accessorKey: "edit", header: "Edit", cell: () => <EditInventoryItem /> }, {
accessorKey: "edit",
header: "Edit",
cell: () => <EditInventoryItem />,
enableSorting: false,
},
{ {
accessorKey: "delete", accessorKey: "delete",
header: "Delete", header: "Delete",
cell: () => <DeleteInventoryItem />, cell: () => <DeleteInventoryItem />,
enableSorting: false,
}, },
]; ];
@ -158,11 +165,26 @@ export default function InventoryPage() {
<TableHead <TableHead
key={header.id} key={header.id}
onClick={header.column.getToggleSortingHandler()} onClick={header.column.getToggleSortingHandler()}
className="cursor-pointer "
> >
{flexRender( <div className="flex items-center">
header.column.columnDef.header, {flexRender(
header.getContext() header.column.columnDef.header,
)} header.getContext()
)}
{header.column.getCanSort() &&
!header.column.columnDef.enableSorting && (
<span className="ml-2">
{header.column.getIsSorted() === "desc" ? (
<FaSortDown />
) : header.column.getIsSorted() === "asc" ? (
<FaSortUp />
) : (
<FaSort />
)}
</span>
)}
</div>
</TableHead> </TableHead>
))} ))}
</TableRow> </TableRow>

1
frontend/package.json
View File

@ -46,6 +46,7 @@
"react-day-picker": "8.10.1", "react-day-picker": "8.10.1",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"react-hook-form": "^7.54.2", "react-hook-form": "^7.54.2",
"react-icons": "^5.5.0",
"recharts": "^2.15.1", "recharts": "^2.15.1",
"tailwind-merge": "^3.0.1", "tailwind-merge": "^3.0.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",

11
frontend/pnpm-lock.yaml
View File

@ -116,6 +116,9 @@ dependencies:
react-hook-form: react-hook-form:
specifier: ^7.54.2 specifier: ^7.54.2
version: 7.54.2(react@19.0.0) version: 7.54.2(react@19.0.0)
react-icons:
specifier: ^5.5.0
version: 5.5.0(react@19.0.0)
recharts: recharts:
specifier: ^2.15.1 specifier: ^2.15.1
version: 2.15.1(react-dom@19.0.0)(react@19.0.0) version: 2.15.1(react-dom@19.0.0)(react@19.0.0)
@ -3996,6 +3999,14 @@ packages:
react: 19.0.0 react: 19.0.0
dev: false dev: false
/react-icons@5.5.0(react@19.0.0):
resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
peerDependencies:
react: '*'
dependencies:
react: 19.0.0
dev: false
/react-is@16.13.1: /react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}