9e9fd208ad
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced new components for managing admin settings, including AdminListControls, AdminSettingsCard, and TechBrandSelectLabel. - Implemented dynamic loading for admin settings sections to optimize performance. - Enhanced the layout of various admin settings sections for better user experience. - Updated the AiAssistantSection to include LLM provider management and improved model selection. - Refactored authentication settings to streamline configuration and improve accessibility.
114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
"use client"
|
||
|
||
import { Button } from "@/components/ui/button"
|
||
import { Label } from "@/components/ui/label"
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
|
||
export type AdminListSortOption = {
|
||
value: string
|
||
label: string
|
||
}
|
||
|
||
const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const
|
||
|
||
export function AdminListControls({
|
||
page,
|
||
pageSize,
|
||
total,
|
||
totalPages,
|
||
pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
|
||
sort,
|
||
sortOptions,
|
||
onPageChange,
|
||
onPageSizeChange,
|
||
onSortChange,
|
||
itemLabel,
|
||
}: {
|
||
page: number
|
||
pageSize: number
|
||
total: number
|
||
totalPages: number
|
||
pageSizeOptions?: readonly number[]
|
||
sort: string
|
||
sortOptions: readonly AdminListSortOption[]
|
||
onPageChange: (page: number) => void
|
||
onPageSizeChange: (pageSize: number) => void
|
||
onSortChange: (sort: string) => void
|
||
itemLabel: string
|
||
}) {
|
||
const rangeStart = total === 0 ? 0 : (page - 1) * pageSize + 1
|
||
const rangeEnd = Math.min(page * pageSize, total)
|
||
|
||
return (
|
||
<div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
||
<div className="flex flex-wrap items-end gap-3">
|
||
<div className="w-36">
|
||
<Label className="text-xs">Par page</Label>
|
||
<Select
|
||
value={String(pageSize)}
|
||
onValueChange={(value) => onPageSizeChange(Number(value))}
|
||
>
|
||
<SelectTrigger className="mt-1 h-9">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{pageSizeOptions.map((size) => (
|
||
<SelectItem key={size} value={String(size)}>
|
||
{size}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="min-w-[200px] flex-1 sm:max-w-xs">
|
||
<Label className="text-xs">Tri</Label>
|
||
<Select value={sort} onValueChange={onSortChange}>
|
||
<SelectTrigger className="mt-1 h-9">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{sortOptions.map((option) => (
|
||
<SelectItem key={option.value} value={option.value}>
|
||
{option.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-center justify-between gap-3 sm:justify-end">
|
||
<p className="text-sm text-muted-foreground">
|
||
{total === 0
|
||
? `0 ${itemLabel}`
|
||
: `${rangeStart.toLocaleString("fr-FR")}–${rangeEnd.toLocaleString("fr-FR")} sur ${total.toLocaleString("fr-FR")} ${itemLabel}`}
|
||
</p>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={page <= 1}
|
||
onClick={() => onPageChange(page - 1)}
|
||
>
|
||
Précédent
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
disabled={page >= totalPages}
|
||
onClick={() => onPageChange(page + 1)}
|
||
>
|
||
Suivant
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|