denozord/cloudflare-domain-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 48 Wiki Activity

refactor: Enhance ChartCard and DataTable components by improving layout structure, adding pagination controls, and optimizing tab functionality for better user experience
Build, Test, and Push CFDM Docker Image / test (push) Successful in 4m12s
Details
Build, Test, and Push CFDM Docker Image / build-and-push (push) Successful in 2m24s
Details
Build, Test, and Push CFDM Docker Image / update-wiki (push) Successful in 8s
Details
Build, Test, and Push CFDM Docker Image / create-release (push) Has been skipped
Details

Browse Source
This commit is contained in:
Denozordec
2026-06-25 17:43:17 +07:00
parent 063761539c
commit e5dc483d43
4 changed files with 96 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/chart-card.tsx
+10 -8
View File
@@ -42,17 +42,19 @@ export function ChartCard({
{description && <AppCardDescription>{description}</AppCardDescription>}
{action}
</AppCardHeader>
<AppCardContent>
<AppCardContent className="pb-6">
{hasTabs ? (
<Tabs defaultValue="chart">
<TabsList>
<TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
<TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
</TabsList>
<TabsContent value="chart" className="pt-4">
<Tabs defaultValue="chart" className="w-full flex-col gap-6">
<div className="flex items-center justify-between gap-2">
<TabsList>
<TabsTrigger value="chart">{chartTabLabel}</TabsTrigger>
<TabsTrigger value="table">{tableTabLabel}</TabsTrigger>
</TabsList>
</div>
<TabsContent value="chart" className="mt-0">
{chart}
</TabsContent>
<TabsContent value="table" className="pt-4">
<TabsContent value="table" className="mt-0">
{table}
</TabsContent>
</Tabs>
apps/web/src/components/data-table-pagination.tsx
+72 -40
View File
@@ -8,10 +8,19 @@ import {
PaginationNext,
PaginationPrevious,
} from '@cfdm/ui/components/pagination'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@cfdm/ui/components/select'
import { pageSizeOptions } from '@/components/data-table-density'
interface DataTablePaginationProps<TData> {
table: Table<TData>
selectedCount?: number
pageSizeLabel?: string
}
function buildPageRange(current: number, total: number): (number | 'ellipsis')[] {
@@ -31,57 +40,80 @@ function buildPageRange(current: number, total: number): (number | 'ellipsis')[]
export function DataTablePagination<TData>({
table,
selectedCount,
pageSizeLabel = 'Строк',
}: DataTablePaginationProps<TData>) {
const { pageIndex } = table.getState().pagination
const { pageIndex, pageSize } = table.getState().pagination
const pageCount = table.getPageCount()
if (pageCount <= 1) return null
const pages = buildPageRange(pageIndex + 1, pageCount)
const total = table.getFilteredRowModel().rows.length
const from = total === 0 ? 0 : pageIndex * pageSize + 1
const to = Math.min((pageIndex + 1) * pageSize, total)
return (
<div className="flex flex-col items-center justify-between gap-4 px-4 py-3 text-sm sm:flex-row">
<div className="text-muted-foreground tabular-nums">
{selectedCount != null && selectedCount > 0
? `Выбрано: ${selectedCount} из ${table.getFilteredRowModel().rows.length}`
: `Всего: ${table.getFilteredRowModel().rows.length}`}
? `Выбрано: ${selectedCount} из ${total}`
: `${from}–${to} из ${total}`}
</div>
<Pagination className="mx-0 w-auto">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
text="Назад"
onClick={() => table.previousPage()}
aria-disabled={!table.getCanPreviousPage()}
className={!table.getCanPreviousPage() ? 'pointer-events-none opacity-50' : undefined}
/>
</PaginationItem>
{pages.map((page, idx) =>
page === 'ellipsis' ? (
<PaginationItem key={`ellipsis-${idx}`}>
<PaginationEllipsis />
<div className="flex items-center gap-6">
<div className="flex items-center gap-2">
<span className="text-muted-foreground">{pageSizeLabel}</span>
<Select
value={String(pageSize)}
onValueChange={(val) => table.setPageSize(Number(val))}
>
<SelectTrigger className="h-8 w-20">
<SelectValue />
</SelectTrigger>
<SelectContent>
{pageSizeOptions.map((size) => (
<SelectItem key={size} value={String(size)}>
{size}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{pageCount > 1 && (
<Pagination className="mx-0 w-auto">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
text="Назад"
onClick={() => table.previousPage()}
aria-disabled={!table.getCanPreviousPage()}
className={!table.getCanPreviousPage() ? 'pointer-events-none opacity-50' : undefined}
/>
</PaginationItem>
) : (
<PaginationItem key={page}>
<PaginationLink
isActive={page === pageIndex + 1}
onClick={() => table.setPageIndex(page - 1)}
>
{page}
</PaginationLink>
{buildPageRange(pageIndex + 1, pageCount).map((page, idx) =>
page === 'ellipsis' ? (
<PaginationItem key={`ellipsis-${idx}`}>
<PaginationEllipsis />
</PaginationItem>
) : (
<PaginationItem key={page}>
<PaginationLink
isActive={page === pageIndex + 1}
onClick={() => table.setPageIndex(page - 1)}
>
{page}
</PaginationLink>
</PaginationItem>
),
)}
<PaginationItem>
<PaginationNext
text="Вперёд"
onClick={() => table.nextPage()}
aria-disabled={!table.getCanNextPage()}
className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
/>
</PaginationItem>
),
)}
<PaginationItem>
<PaginationNext
text="Вперёд"
onClick={() => table.nextPage()}
aria-disabled={!table.getCanNextPage()}
className={!table.getCanNextPage() ? 'pointer-events-none opacity-50' : undefined}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</PaginationContent>
</Pagination>
)}
</div>
</div>
)
}
apps/web/src/components/data-table-toolbar.tsx
+9 -27
View File
@@ -13,13 +13,11 @@ import {
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@cfdm/ui/components/dropdown-menu'
import { AppButton } from '@/components/app-button'
import {
densityLabel,
pageSizeOptions,
type Density,
} from '@/components/data-table-density'
@@ -66,13 +64,11 @@ export function DataTableToolbar<TData>({
<div className="flex items-center gap-2">
<DropdownMenu>
<DropdownMenuTrigger
render={
<AppButton variant="outline" size="sm">
<ColumnsIcon data-icon="inline-start" />
Колонки
</AppButton>
}
/>
render={<AppButton variant="outline" size="sm" />}
>
<ColumnsIcon data-icon="inline-start" />
Колонки
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-44">
<DropdownMenuLabel>Видимость</DropdownMenuLabel>
{columns.map((column) => (
@@ -90,12 +86,10 @@ export function DataTableToolbar<TData>({
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger
render={
<AppButton variant="outline" size="sm">
Плотность
</AppButton>
}
/>
render={<AppButton variant="outline" size="sm" />}
>
Плотность
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-44">
<DropdownMenuLabel>Плотность строк</DropdownMenuLabel>
<DropdownMenuRadioGroup
@@ -108,18 +102,6 @@ export function DataTableToolbar<TData>({
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
<DropdownMenuSeparator />
<DropdownMenuLabel>Строк на странице</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={String(table.getState().pagination.pageSize)}
onValueChange={(val) => table.setPageSize(Number(val))}
>
{pageSizeOptions.map((size) => (
<DropdownMenuRadioItem key={size} value={String(size)}>
{size}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
packages/ui/src/components/tabs.tsx
+5 -5
View File
@@ -11,9 +11,9 @@ function Tabs({
return (
<TabsPrimitive.Root
data-slot="tabs"
data-orientation={orientation}
orientation={orientation}
className={cn(
"group/tabs flex gap-2 data-horizontal:flex-col",
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
className
)}
{...props}
@@ -22,7 +22,7 @@ function Tabs({
}
const tabsListVariants = cva(
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
{
variants: {
variant: {
@@ -56,10 +56,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
<TabsPrimitive.Tab
data-slot="tabs-trigger"
className={cn(
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
className
)}
{...props}