Skip to content

Commit 5298f15

Browse files
QaidVoidQaidVoid
committed
disable space search, fix max page number input
1 parent 90a1002 commit 5298f15

1 file changed

Lines changed: 118 additions & 72 deletions

File tree

‎web/src/components/data-table.tsx‎

Lines changed: 118 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
import * as React from "react"
2-
3-
import type { ColumnDef, VisibilityState, SortingState, ColumnFiltersState } from "@tanstack/react-table";
1+
import * as React from "react";
2+
3+
import type {
4+
ColumnDef,
5+
VisibilityState,
6+
SortingState,
7+
ColumnFiltersState,
8+
} from "@tanstack/react-table";
49
import {
510
flexRender,
611
getCoreRowModel,
712
useReactTable,
813
getSortedRowModel,
914
getFilteredRowModel,
10-
getPaginationRowModel
11-
} from "@tanstack/react-table"
15+
getPaginationRowModel,
16+
} from "@tanstack/react-table";
1217

1318
import {
1419
Table,
@@ -17,22 +22,38 @@ import {
1722
TableHead,
1823
TableHeader,
1924
TableRow,
20-
} from "@/components/ui/table"
25+
} from "@/components/ui/table";
2126

22-
import { Input } from "@/components/ui/input"
27+
import { Input } from "@/components/ui/input";
2328

2429
import {
2530
DropdownMenu,
2631
DropdownMenuCheckboxItem,
2732
DropdownMenuContent,
2833
DropdownMenuTrigger,
29-
} from "@/components/ui/dropdown-menu"
34+
} from "@/components/ui/dropdown-menu";
3035
import { Button, buttonVariants } from "./ui/button";
3136
import { Label } from "./ui/label";
32-
import { CheckIcon, ChevronLeft, ChevronRight, ListTree, Search, SkipBack, SkipForward } from "lucide-react";
37+
import {
38+
CheckIcon,
39+
ChevronLeft,
40+
ChevronRight,
41+
ListTree,
42+
Search,
43+
SkipBack,
44+
SkipForward,
45+
} from "lucide-react";
3346
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
3447
import { cn } from "@/lib/utils";
35-
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select";
48+
import {
49+
Select,
50+
SelectContent,
51+
SelectGroup,
52+
SelectItem,
53+
SelectLabel,
54+
SelectTrigger,
55+
SelectValue,
56+
} from "./ui/select";
3657
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
3758

3859
import binX86 from "../metadata_bincache_x86_64-linux.json";
@@ -46,8 +67,8 @@ const pkgArm64 = import("../metadata_pkgcache_aarch64-linux.json");
4667
const pkgX86 = import("../metadata_pkgcache_x86_64-linux.json");
4768

4869
interface DataTableProps<TData, TValue> {
49-
columns: ColumnDef<TData, TValue>[]
50-
data: TData[]
70+
columns: ColumnDef<TData, TValue>[];
71+
data: TData[];
5172
}
5273

5374
const getColumnVis = () => {
@@ -57,62 +78,66 @@ const getColumnVis = () => {
5778
return {
5879
sha: false,
5980
id: false,
60-
size: false
81+
size: false,
6182
};
6283
}
63-
}
84+
};
6485

6586
const initialFilters = {
6687
column: "name",
6788
columnVisibility: getColumnVis(),
6889
page: "bincache_amd64",
69-
search: '',
70-
}
90+
search: "",
91+
};
7192

7293
const getUrlParams = () => {
7394
const params = new URLSearchParams(window.location.search);
7495
return {
75-
column: params.get('searchBy') || initialFilters.column,
76-
page: params.get('repo') || initialFilters.page,
77-
search: params.get('search') || initialFilters.search,
96+
column: params.get("searchBy") || initialFilters.column,
97+
page: params.get("repo") || initialFilters.page,
98+
search: params.get("search") || initialFilters.search,
7899
};
79100
};
80101

81102
const updateUrlParams = (params: typeof initialFilters) => {
82103
const urlParams = new URLSearchParams();
83-
if (params.column !== initialFilters.column) urlParams.set('searchBy', params.column);
84-
if (params.page !== initialFilters.page) urlParams.set('repo', params.page);
85-
if (params.search) urlParams.set('search', params.search);
104+
if (params.column !== initialFilters.column)
105+
urlParams.set("searchBy", params.column);
106+
if (params.page !== initialFilters.page) urlParams.set("repo", params.page);
107+
if (params.search) urlParams.set("search", params.search);
86108

87-
const newUrl = `${window.location.pathname}${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
88-
window.history.replaceState({}, '', newUrl);
109+
const newUrl = `${window.location.pathname}${urlParams.toString() ? `?${urlParams.toString()}` : ""}`;
110+
window.history.replaceState({}, "", newUrl);
89111
};
90112

91113
export function DataTable<TData>({
92114
columns: col,
93115
}: { columns: (_: string) => ColumnDef<TData>[] }) {
94116
const urlParams = getUrlParams();
95117

96-
const [sorting, setSorting] = React.useState<SortingState>([])
97-
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
118+
const [sorting, setSorting] = React.useState<SortingState>([]);
119+
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
120+
[],
121+
);
98122
const [column, setColumn] = React.useState(urlParams.column);
99-
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(getColumnVis());
123+
const [columnVisibility, setColumnVisibility] =
124+
React.useState<VisibilityState>(getColumnVis());
100125
const [page, setPage] = React.useState(urlParams.page);
101-
const [data, setData] = React.useState<TData[] | "loading">(binX86 as unknown as TData[]);
126+
const [data, setData] = React.useState<TData[] | "loading">(
127+
binX86 as unknown as TData[],
128+
);
102129

103130
const columns = React.useMemo(() => {
104-
return col(page)
131+
return col(page);
105132
}, [page]);
106133

107134
React.useEffect(() => {
108-
updateUrlParams(
109-
{
110-
column,
111-
page,
112-
search: (table?.getColumn(column)?.getFilterValue() as string) || '',
113-
columnVisibility,
114-
},
115-
);
135+
updateUrlParams({
136+
column,
137+
page,
138+
search: (table?.getColumn(column)?.getFilterValue() as string) || "",
139+
columnVisibility,
140+
});
116141
}, [column, page, columnFilters, columnVisibility]);
117142

118143
React.useEffect(() => {
@@ -151,7 +176,7 @@ export function DataTable<TData>({
151176
}, [page]);
152177

153178
const table = useReactTable({
154-
data: data == "loading" ? [] : data,
179+
data: data === "loading" ? [] : data,
155180
columns,
156181
getCoreRowModel: getCoreRowModel(),
157182
onSortingChange: setSorting,
@@ -179,7 +204,8 @@ export function DataTable<TData>({
179204
}, []);
180205

181206
const input: React.RefObject<HTMLInputElement | null> = React.useRef(null);
182-
const pageNumberInput: React.RefObject<HTMLInputElement | null> = React.useRef(null);
207+
const pageNumberInput: React.RefObject<HTMLInputElement | null> =
208+
React.useRef(null);
183209

184210
return (
185211
<div className="rounded-md border">
@@ -189,8 +215,10 @@ export function DataTable<TData>({
189215
onSubmit={(e) => {
190216
e.preventDefault();
191217
if (input.current) {
192-
const val = input.current.value;
193-
table.getColumn(column)?.setFilterValue(val);
218+
const val = input.current.value.trim();
219+
if (val) {
220+
table.getColumn(column)?.setFilterValue(val);
221+
}
194222
}
195223
}}
196224
>
@@ -200,34 +228,38 @@ export function DataTable<TData>({
200228
maxLength={64}
201229
// value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
202230
onChange={(event) => {
203-
if (event.target.value == "") {
204-
table.getAllColumns().forEach((s) => s.setFilterValue(""))
231+
if (!event.target.value.trim()) {
232+
for (const col of table.getAllColumns()) {
233+
col.setFilterValue("");
234+
}
205235
}
206236
}}
207237
className="max-w-sm rounded-r-none"
208238
/>
209-
<Select
210-
value={page}
211-
onValueChange={setPage}
212-
>
239+
<Select value={page} onValueChange={setPage}>
213240
<SelectTrigger className="w-[180px] rounded-none">
214241
<SelectValue placeholder="Select Repo" />
215242
</SelectTrigger>
216243
<SelectContent>
217244
<SelectGroup>
218245
<SelectLabel>bincache</SelectLabel>
219-
<SelectItem value="bincache_amd64">bincache (x86_64)</SelectItem>
220-
<SelectItem value="bincache_arm64">bincache (aarch64)</SelectItem>
221-
<SelectItem value="pkgcache_amd64">pkgcache (x86_64)</SelectItem>
222-
<SelectItem value="pkgcache_arm64">pkgcache (aarch64)</SelectItem>
246+
<SelectItem value="bincache_amd64">
247+
bincache (x86_64)
248+
</SelectItem>
249+
<SelectItem value="bincache_arm64">
250+
bincache (aarch64)
251+
</SelectItem>
252+
<SelectItem value="pkgcache_amd64">
253+
pkgcache (x86_64)
254+
</SelectItem>
255+
<SelectItem value="pkgcache_arm64">
256+
pkgcache (aarch64)
257+
</SelectItem>
223258
<SelectItem value="soarpkgs">soarpkgs</SelectItem>
224259
</SelectGroup>
225260
</SelectContent>
226261
</Select>
227-
<Select
228-
value={column}
229-
onValueChange={setColumn}
230-
>
262+
<Select value={column} onValueChange={setColumn}>
231263
<SelectTrigger className="w-[180px] rounded-none">
232264
<SelectValue placeholder="Theme" />
233265
</SelectTrigger>
@@ -242,7 +274,11 @@ export function DataTable<TData>({
242274
</Select>
243275
<Tooltip>
244276
<TooltipTrigger
245-
className={buttonVariants({ variant: "default", size: "default", className: "rounded-l-none" })}
277+
className={buttonVariants({
278+
variant: "default",
279+
size: "default",
280+
className: "rounded-l-none",
281+
})}
246282
aria-valuetext="Search"
247283
>
248284
<Search />
@@ -254,23 +290,24 @@ export function DataTable<TData>({
254290
</form>
255291
<DropdownMenu>
256292
<DropdownMenuTrigger asChild>
257-
<Button variant="outline" className="my-2 md:my-0 w-[90%] md:w-auto md:ml-auto">
293+
<Button
294+
variant="outline"
295+
className="my-2 md:my-0 w-[90%] md:w-auto md:ml-auto"
296+
>
258297
Configure
259298
<ListTree />
260299
</Button>
261300
</DropdownMenuTrigger>
262301
<DropdownMenuContent align="end">
263302
{table
264303
.getAllColumns()
265-
.filter(
266-
(column) => column.getCanHide()
267-
)
304+
.filter((column) => column.getCanHide())
268305
.map((column) => {
269306
return (
270307
<DropdownMenuCheckboxItem
271308
key={column.id}
272309
className={cn("capitalize", {
273-
"uppercase": column.id == "sha" || column.id == 'id',
310+
uppercase: column.id === "sha" || column.id === "id",
274311
})}
275312
checked={column.getIsVisible()}
276313
onCheckedChange={(value) =>
@@ -279,7 +316,7 @@ export function DataTable<TData>({
279316
>
280317
{column.id}
281318
</DropdownMenuCheckboxItem>
282-
)
319+
);
283320
})}
284321
</DropdownMenuContent>
285322
</DropdownMenu>
@@ -294,11 +331,11 @@ export function DataTable<TData>({
294331
{header.isPlaceholder
295332
? null
296333
: flexRender(
297-
header.column.columnDef.header,
298-
header.getContext()
299-
)}
334+
header.column.columnDef.header,
335+
header.getContext(),
336+
)}
300337
</TableHead>
301-
)
338+
);
302339
})}
303340
</TableRow>
304341
))}
@@ -331,7 +368,7 @@ export function DataTable<TData>({
331368
variant="outline"
332369
size="sm"
333370
onClick={() => table.setPageIndex(0)}
334-
disabled={table.getState().pagination.pageIndex == 0}
371+
disabled={table.getState().pagination.pageIndex === 0}
335372
aria-valuetext="Go to first page"
336373
>
337374
<SkipBack />
@@ -349,9 +386,16 @@ export function DataTable<TData>({
349386
<Popover>
350387
<PopoverTrigger>
351388
<span
352-
className={cn(buttonVariants({ variant: "outline", size: "sm", className: "" }))}
389+
className={cn(
390+
buttonVariants({
391+
variant: "outline",
392+
size: "sm",
393+
className: "",
394+
}),
395+
)}
353396
>
354-
Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
397+
Page {table.getState().pagination.pageIndex + 1} of{" "}
398+
{table.getPageCount()}
355399
</span>
356400
</PopoverTrigger>
357401
<PopoverContent>
@@ -371,7 +415,7 @@ export function DataTable<TData>({
371415
if (pageNumberInput.current) {
372416
const val = Number(pageNumberInput.current.value);
373417

374-
if (val > 0 && val < table.getPageCount()) {
418+
if (val > 0 && val <= table.getPageCount()) {
375419
table.setPageIndex(val - 1);
376420
}
377421
}
@@ -415,12 +459,14 @@ export function DataTable<TData>({
415459
variant="outline"
416460
size="sm"
417461
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
418-
disabled={table.getState().pagination.pageIndex == (table.getPageCount() - 1)}
462+
disabled={
463+
table.getState().pagination.pageIndex === table.getPageCount() - 1
464+
}
419465
aria-valuetext="Go to last page"
420466
>
421467
<SkipForward />
422468
</Button>
423469
</div>
424470
</div>
425-
)
471+
);
426472
}

0 commit comments

Comments
 (0)