fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 02:09:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: reorganize systems table options into single dropdown

Browse Source 
Combines view type, sort by and visible fields into a single dropdown menu for better organization.
This commit is contained in:
0xMMMMMM
2024-12-08 06:26:12 +07:00
parent 0234682720
commit 5110eaf10f
1 changed files with 80 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -53,6 +53,9 @@ import {
ChevronDownIcon, ChevronDownIcon,
LayoutGridIcon, LayoutGridIcon,
LayoutListIcon, LayoutListIcon,
XCircle,
ArrowDownIcon,
ArrowUpIcon,
} from "lucide-react" } from "lucide-react"
import { useEffect, useMemo, useState } from "react" import { useEffect, useMemo, useState } from "react"
import { $hubVersion, $systems, pb } from "@/lib/stores" import { $hubVersion, $systems, pb } from "@/lib/stores"
@@ -334,30 +337,46 @@ export default function SystemsTable() {
</div> </div>
<div className="flex gap-2 ms-auto w-full md:w-[500px]"> <div className="flex gap-2 ms-auto w-full md:w-[500px]">
<Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" /> <Input placeholder={t`Filter...`} onChange={(e) => setFilter(e.target.value)} className="px-4" />
<Button
variant="outline"
onClick={() => setViewMode(viewMode === 'table' ? 'grid' : 'table')}
title={viewMode === 'table' ? t`Switch to grid view` : t`Switch to table view`}
>
{viewMode === 'table' ? (
<LayoutGridIcon className="h-[1.2rem] w-[1.2rem]" />
) : (
<LayoutListIcon className="h-[1.2rem] w-[1.2rem]" />
)}
</Button>
{viewMode === 'grid' && (
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline"> <Button variant="outline">
<Trans>Sort</Trans> <ChevronDownIcon className="ms-1.5 h-4 w-4 opacity-90" /> <Trans>Options</Trans>
<ChevronDownIcon className="ms-1.5 h-4 w-4 opacity-90" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end" className="w-[600px]">
<div className="grid grid-cols-3 divide-x">
<div className="p-2">
<DropdownMenuItem className="font-medium" disabled>
<Trans>View Type</Trans>
</DropdownMenuItem>
<DropdownMenuCheckboxItem
checked={viewMode === 'table'}
onCheckedChange={() => setViewMode('table')}
className="gap-2"
>
<LayoutListIcon className="h-4 w-4" />
<span>Table</span>
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={viewMode === 'grid'}
onCheckedChange={() => setViewMode('grid')}
className="gap-2"
>
<LayoutGridIcon className="h-4 w-4" />
<span>Grid</span>
</DropdownMenuCheckboxItem>
</div>
<div className="p-2">
<DropdownMenuItem className="font-medium" disabled>
<Trans>Sort by</Trans>
</DropdownMenuItem>
{table.getAllColumns().map((column) => { {table.getAllColumns().map((column) => {
if (column.id === t`Actions` || !column.getCanSort()) return null if (column.id === t`Actions` || !column.getCanSort()) return null
const isCurrentSort = sorting[0]?.id === column.id const isCurrentSort = sorting[0]?.id === column.id
const sortDirection = sorting[0]?.desc ? '↓' : '↑' const sortDirection = sorting[0]?.desc ? <ArrowDownIcon className="me-2.5 h-4 w-4" /> : <ArrowUpIcon className="me-2.5 h-4 w-4" />
return ( return (
<DropdownMenuItem <DropdownMenuItem
@@ -367,38 +386,23 @@ export default function SystemsTable() {
setSorting([{ id: column.id, desc: isDesc }]) setSorting([{ id: column.id, desc: isDesc }])
}} }}
> >
{column.id} {isCurrentSort && sortDirection} {isCurrentSort && sortDirection}
{column.id}
</DropdownMenuItem> </DropdownMenuItem>
) )
})} })}
{sorting.length > 0 && ( {sorting.length > 0 && (
<>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={() => setSorting([])}> <DropdownMenuItem onClick={() => setSorting([])}>
<XCircle className="me-2.5 h-4 w-4" />
<Trans>Clear Sort</Trans> <Trans>Clear Sort</Trans>
</DropdownMenuItem> </DropdownMenuItem>
</>
)} )}
</DropdownMenuContent> </div>
</DropdownMenu>
)} <div className="p-2">
<DropdownMenu> <DropdownMenuItem className="font-medium" disabled>
<DropdownMenuTrigger asChild> <Trans>Visible Fields</Trans>
<Button variant="outline"> </DropdownMenuItem>
{viewMode === 'table' ? (
<>
<Trans comment="Context: table columns">Columns</Trans>
<ChevronDownIcon className="ms-1.5 h-4 w-4 opacity-90" />
</>
) : (
<>
<Trans>Fields</Trans>
<ChevronDownIcon className="ms-1.5 h-4 w-4 opacity-90" />
</>
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{table {table
.getAllColumns() .getAllColumns()
.filter((column) => column.getCanHide()) .filter((column) => column.getCanHide())
@@ -413,6 +417,8 @@ export default function SystemsTable() {
</DropdownMenuCheckboxItem> </DropdownMenuCheckboxItem>
) )
})} })}
</div>
</div>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div> </div>