This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -1,14 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Loader2,
|
||||
RotateCcw,
|
||||
Save,
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Loader2,
|
||||
RotateCcw,
|
||||
Save,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useMemo, useState, useTransition } from "react";
|
||||
@@ -17,387 +17,415 @@ import { saveEmulatorSettings } from "@/actions/emulator";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
|
||||
interface Setting {
|
||||
key: string;
|
||||
value: string;
|
||||
key: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface GroupSummary {
|
||||
name: string;
|
||||
count: number;
|
||||
name: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface EmulatorSettingsFormProps {
|
||||
settings: Setting[];
|
||||
pagination: { total: number; page: number; perPage: number; lastPage: number };
|
||||
search: string;
|
||||
allGroups?: GroupSummary[];
|
||||
activeGroup?: string;
|
||||
settings: Setting[];
|
||||
pagination: {
|
||||
total: number;
|
||||
page: number;
|
||||
perPage: number;
|
||||
lastPage: number;
|
||||
};
|
||||
search: string;
|
||||
allGroups?: GroupSummary[];
|
||||
activeGroup?: string;
|
||||
}
|
||||
|
||||
const PER_PAGE_OPTIONS = [25, 50, 100, 200] as const;
|
||||
|
||||
function getSettingGroup(key: string): string {
|
||||
const parts = key.split(".");
|
||||
return parts.length > 1 ? parts[0] : "general";
|
||||
const parts = key.split(".");
|
||||
return parts.length > 1 ? parts[0] : "general";
|
||||
}
|
||||
|
||||
const GROUP_BORDER_COLORS: Record<string, string> = {
|
||||
hotel: "border-l-blue-500",
|
||||
navigator: "border-l-green-500",
|
||||
catalog: "border-l-purple-500",
|
||||
room: "border-l-orange-500",
|
||||
camera: "border-l-pink-500",
|
||||
commands: "border-l-cyan-500",
|
||||
wordfilter: "border-l-red-500",
|
||||
pet: "border-l-yellow-500",
|
||||
matchmaking: "border-l-indigo-500",
|
||||
message: "border-l-emerald-500",
|
||||
notification: "border-l-fuchsia-500",
|
||||
general: "border-l-gray-400",
|
||||
hotel: "border-l-blue-500",
|
||||
navigator: "border-l-green-500",
|
||||
catalog: "border-l-purple-500",
|
||||
room: "border-l-orange-500",
|
||||
camera: "border-l-pink-500",
|
||||
commands: "border-l-cyan-500",
|
||||
wordfilter: "border-l-red-500",
|
||||
pet: "border-l-yellow-500",
|
||||
matchmaking: "border-l-indigo-500",
|
||||
message: "border-l-emerald-500",
|
||||
notification: "border-l-fuchsia-500",
|
||||
general: "border-l-gray-400",
|
||||
};
|
||||
|
||||
export function EmulatorSettingsForm({
|
||||
settings,
|
||||
pagination,
|
||||
search,
|
||||
allGroups,
|
||||
activeGroup,
|
||||
settings,
|
||||
pagination,
|
||||
search,
|
||||
allGroups,
|
||||
activeGroup,
|
||||
}: EmulatorSettingsFormProps) {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// `values` only contains overrides typed by the user. Display falls back
|
||||
// to `setting.value`. `originalValues` accumulates the on-disk values for
|
||||
// every setting we have ever rendered (across pages) so we can detect when
|
||||
// an edit returns to its original state.
|
||||
const [values, setValues] = useState<Record<string, string>>({});
|
||||
const [originalValues, setOriginalValues] = useState<Record<string, string>>({});
|
||||
const [changedKeys, setChangedKeys] = useState<Set<string>>(new Set());
|
||||
const [isNavigating, startTransition] = useTransition();
|
||||
const { run, isPending } = useServerAction();
|
||||
const [searchValue, setSearchValue] = useState(search);
|
||||
// `values` only contains overrides typed by the user. Display falls back
|
||||
// to `setting.value`. `originalValues` accumulates the on-disk values for
|
||||
// every setting we have ever rendered (across pages) so we can detect when
|
||||
// an edit returns to its original state.
|
||||
const [values, setValues] = useState<Record<string, string>>({});
|
||||
const [originalValues, setOriginalValues] = useState<Record<string, string>>(
|
||||
{},
|
||||
);
|
||||
const [changedKeys, setChangedKeys] = useState<Set<string>>(new Set());
|
||||
const [isNavigating, startTransition] = useTransition();
|
||||
const { run, isPending } = useServerAction();
|
||||
const [searchValue, setSearchValue] = useState(search);
|
||||
|
||||
useEffect(() => {
|
||||
setOriginalValues((prev) => {
|
||||
let dirty = false;
|
||||
const next = { ...prev };
|
||||
for (const s of settings) {
|
||||
if (!(s.key in next)) {
|
||||
next[s.key] = s.value;
|
||||
dirty = true;
|
||||
}
|
||||
}
|
||||
return dirty ? next : prev;
|
||||
});
|
||||
}, [settings]);
|
||||
useEffect(() => {
|
||||
setOriginalValues((prev) => {
|
||||
let dirty = false;
|
||||
const next = { ...prev };
|
||||
for (const s of settings) {
|
||||
if (!(s.key in next)) {
|
||||
next[s.key] = s.value;
|
||||
dirty = true;
|
||||
}
|
||||
}
|
||||
return dirty ? next : prev;
|
||||
});
|
||||
}, [settings]);
|
||||
|
||||
// Prefer the canonical list passed by the server (covers all groups, not
|
||||
// just those visible on the current page). Fall back to deriving from the
|
||||
// current page when the prop is omitted.
|
||||
const groupSummary = useMemo<GroupSummary[]>(() => {
|
||||
if (allGroups && allGroups.length > 0) return allGroups;
|
||||
const map = new Map<string, number>();
|
||||
for (const s of settings) {
|
||||
const g = getSettingGroup(s.key);
|
||||
map.set(g, (map.get(g) ?? 0) + 1);
|
||||
}
|
||||
return Array.from(map.entries())
|
||||
.map(([name, count]) => ({ name, count }))
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [allGroups, settings]);
|
||||
// Prefer the canonical list passed by the server (covers all groups, not
|
||||
// just those visible on the current page). Fall back to deriving from the
|
||||
// current page when the prop is omitted.
|
||||
const groupSummary = useMemo<GroupSummary[]>(() => {
|
||||
if (allGroups && allGroups.length > 0) return allGroups;
|
||||
const map = new Map<string, number>();
|
||||
for (const s of settings) {
|
||||
const g = getSettingGroup(s.key);
|
||||
map.set(g, (map.get(g) ?? 0) + 1);
|
||||
}
|
||||
return Array.from(map.entries())
|
||||
.map(([name, count]) => ({ name, count }))
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [allGroups, settings]);
|
||||
|
||||
function toggleGroup(name: string) {
|
||||
updateParams({
|
||||
group: activeGroup === name ? "" : name,
|
||||
page: "1",
|
||||
});
|
||||
}
|
||||
function toggleGroup(name: string) {
|
||||
updateParams({
|
||||
group: activeGroup === name ? "" : name,
|
||||
page: "1",
|
||||
});
|
||||
}
|
||||
|
||||
function getDisplayValue(setting: Setting): string {
|
||||
return values[setting.key] ?? setting.value;
|
||||
}
|
||||
function getDisplayValue(setting: Setting): string {
|
||||
return values[setting.key] ?? setting.value;
|
||||
}
|
||||
|
||||
function updateValue(key: string, val: string) {
|
||||
setValues((prev) => ({ ...prev, [key]: val }));
|
||||
setChangedKeys((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (originalValues[key] !== undefined && val === originalValues[key]) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
function updateValue(key: string, val: string) {
|
||||
setValues((prev) => ({ ...prev, [key]: val }));
|
||||
setChangedKeys((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (originalValues[key] !== undefined && val === originalValues[key]) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function revertChange(key: string) {
|
||||
setValues((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[key];
|
||||
return next;
|
||||
});
|
||||
setChangedKeys((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(key);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
function revertChange(key: string) {
|
||||
setValues((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[key];
|
||||
return next;
|
||||
});
|
||||
setChangedKeys((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(key);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
function updateParams(updates: Record<string, string>) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
for (const [key, value] of Object.entries(updates)) {
|
||||
if (value) params.set(key, value);
|
||||
else params.delete(key);
|
||||
}
|
||||
startTransition(() => {
|
||||
router.push(`?${params.toString()}`);
|
||||
});
|
||||
}
|
||||
function updateParams(updates: Record<string, string>) {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
for (const [key, value] of Object.entries(updates)) {
|
||||
if (value) params.set(key, value);
|
||||
else params.delete(key);
|
||||
}
|
||||
startTransition(() => {
|
||||
router.push(`?${params.toString()}`);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSearch(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
updateParams({ search: searchValue, page: "1" });
|
||||
}
|
||||
function handleSearch(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
updateParams({ search: searchValue, page: "1" });
|
||||
}
|
||||
|
||||
function handleSaveAll() {
|
||||
if (changedKeys.size === 0) {
|
||||
toast.info("No changes to save.");
|
||||
return;
|
||||
}
|
||||
const changedSettings: Record<string, string> = {};
|
||||
for (const key of changedKeys) {
|
||||
changedSettings[key] = values[key];
|
||||
}
|
||||
const count = changedKeys.size;
|
||||
run(() => saveEmulatorSettings({ settings: changedSettings }), {
|
||||
successMessage: `${count} setting(s) saved and synced with emulator.`,
|
||||
onSuccess: () => {
|
||||
setChangedKeys(new Set());
|
||||
setValues({});
|
||||
// Refresh server data so the on-disk values reflect the save and the
|
||||
// originalValues snapshot rebuilds on next render.
|
||||
setOriginalValues({});
|
||||
router.refresh();
|
||||
},
|
||||
});
|
||||
}
|
||||
function handleSaveAll() {
|
||||
if (changedKeys.size === 0) {
|
||||
toast.info("No changes to save.");
|
||||
return;
|
||||
}
|
||||
const changedSettings: Record<string, string> = {};
|
||||
for (const key of changedKeys) {
|
||||
changedSettings[key] = values[key];
|
||||
}
|
||||
const count = changedKeys.size;
|
||||
run(() => saveEmulatorSettings({ settings: changedSettings }), {
|
||||
successMessage: `${count} setting(s) saved and synced with emulator.`,
|
||||
onSuccess: () => {
|
||||
setChangedKeys(new Set());
|
||||
setValues({});
|
||||
// Refresh server data so the on-disk values reflect the save and the
|
||||
// originalValues snapshot rebuilds on next render.
|
||||
setOriginalValues({});
|
||||
router.refresh();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function jumpToPage(raw: string) {
|
||||
const n = parseInt(raw, 10);
|
||||
if (!Number.isFinite(n)) return;
|
||||
const clamped = Math.max(1, Math.min(pagination.lastPage, n));
|
||||
if (clamped !== pagination.page) updateParams({ page: String(clamped) });
|
||||
}
|
||||
function jumpToPage(raw: string) {
|
||||
const n = parseInt(raw, 10);
|
||||
if (!Number.isFinite(n)) return;
|
||||
const clamped = Math.max(1, Math.min(pagination.lastPage, n));
|
||||
if (clamped !== pagination.page) updateParams({ page: String(clamped) });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<form onSubmit={handleSearch} className="flex gap-2 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search settings..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="outline" size="sm">
|
||||
Search
|
||||
</Button>
|
||||
</form>
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<form onSubmit={handleSearch} className="flex gap-2 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search settings..."
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="outline" size="sm">
|
||||
Search
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">{pagination.total} settings</span>
|
||||
{changedKeys.size > 0 && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
{changedKeys.size} changed
|
||||
</Badge>
|
||||
)}
|
||||
<Button onClick={handleSaveAll} disabled={isPending || changedKeys.size === 0} size="sm">
|
||||
{isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save & Sync
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{pagination.total} settings
|
||||
</span>
|
||||
{changedKeys.size > 0 && (
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
{changedKeys.size} changed
|
||||
</Badge>
|
||||
)}
|
||||
<Button
|
||||
onClick={handleSaveAll}
|
||||
disabled={isPending || changedKeys.size === 0}
|
||||
size="sm"
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save & Sync
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Group summary chips — click to toggle group filter */}
|
||||
{groupSummary.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1.5 items-center">
|
||||
{activeGroup && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleGroup(activeGroup)}
|
||||
className="text-[11px] underline text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
clear
|
||||
</button>
|
||||
)}
|
||||
{groupSummary.map(({ name, count }) => {
|
||||
const isActive = activeGroup === name;
|
||||
const color = (GROUP_BORDER_COLORS[name] || GROUP_BORDER_COLORS.general).replace(
|
||||
"border-l-",
|
||||
"bg-",
|
||||
);
|
||||
return (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => toggleGroup(name)}
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md border text-[10px] font-mono transition-colors ${
|
||||
isActive
|
||||
? "border-primary bg-primary/10 text-foreground"
|
||||
: "border-border bg-background text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
}`}
|
||||
title={isActive ? `Rimuovi filtro: ${name}` : `Filtra: ${name}`}
|
||||
disabled={isNavigating}
|
||||
>
|
||||
<span className={`inline-block w-2 h-2 rounded-full ${color}`} />
|
||||
{name}
|
||||
<span className="text-muted-foreground">{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{/* Group summary chips — click to toggle group filter */}
|
||||
{groupSummary.length > 1 && (
|
||||
<div className="flex flex-wrap gap-1.5 items-center">
|
||||
{activeGroup && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleGroup(activeGroup)}
|
||||
className="text-[11px] underline text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
clear
|
||||
</button>
|
||||
)}
|
||||
{groupSummary.map(({ name, count }) => {
|
||||
const isActive = activeGroup === name;
|
||||
const color = (
|
||||
GROUP_BORDER_COLORS[name] || GROUP_BORDER_COLORS.general
|
||||
).replace("border-l-", "bg-");
|
||||
return (
|
||||
<button
|
||||
key={name}
|
||||
type="button"
|
||||
onClick={() => toggleGroup(name)}
|
||||
className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md border text-[10px] font-mono transition-colors ${
|
||||
isActive
|
||||
? "border-primary bg-primary/10 text-foreground"
|
||||
: "border-border bg-background text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
}`}
|
||||
title={isActive ? `Rimuovi filtro: ${name}` : `Filtra: ${name}`}
|
||||
disabled={isNavigating}
|
||||
>
|
||||
<span
|
||||
className={`inline-block w-2 h-2 rounded-full ${color}`}
|
||||
/>
|
||||
{name}
|
||||
<span className="text-muted-foreground">{count}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Settings list — flat rows with always-on inline editing */}
|
||||
<div className="rounded-md border bg-card divide-y">
|
||||
{settings.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground">No settings found.</div>
|
||||
) : (
|
||||
settings.map((setting) => {
|
||||
const group = getSettingGroup(setting.key);
|
||||
const borderColor = GROUP_BORDER_COLORS[group] || GROUP_BORDER_COLORS.general;
|
||||
const isChanged = changedKeys.has(setting.key);
|
||||
const display = getDisplayValue(setting);
|
||||
return (
|
||||
<div
|
||||
key={setting.key}
|
||||
className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
|
||||
isChanged ? "bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]" : ""
|
||||
}`}
|
||||
>
|
||||
<code
|
||||
className="text-xs font-mono text-muted-foreground w-[280px] flex-shrink-0 truncate"
|
||||
title={setting.key}
|
||||
>
|
||||
{setting.key}
|
||||
</code>
|
||||
<Input
|
||||
value={display}
|
||||
onChange={(e) => updateValue(setting.key, e.target.value)}
|
||||
className={`flex-1 h-8 text-xs font-mono ${
|
||||
isChanged ? "border-[var(--admin-warning-border)]" : ""
|
||||
}`}
|
||||
/>
|
||||
{isChanged && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 shrink-0"
|
||||
title="Revert"
|
||||
onClick={() => revertChange(setting.key)}
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
{/* Settings list — flat rows with always-on inline editing */}
|
||||
<div className="rounded-md border bg-card divide-y">
|
||||
{settings.length === 0 ? (
|
||||
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
|
||||
No settings found.
|
||||
</div>
|
||||
) : (
|
||||
settings.map((setting) => {
|
||||
const group = getSettingGroup(setting.key);
|
||||
const borderColor =
|
||||
GROUP_BORDER_COLORS[group] || GROUP_BORDER_COLORS.general;
|
||||
const isChanged = changedKeys.has(setting.key);
|
||||
const display = getDisplayValue(setting);
|
||||
return (
|
||||
<div
|
||||
key={setting.key}
|
||||
className={`flex items-center gap-3 px-3 py-1.5 border-l-4 ${borderColor} ${
|
||||
isChanged
|
||||
? "bg-[var(--admin-warning-subtle)] dark:bg-[var(--admin-warning-subtle)]"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<code
|
||||
className="text-xs font-mono text-muted-foreground w-[280px] flex-shrink-0 truncate"
|
||||
title={setting.key}
|
||||
>
|
||||
{setting.key}
|
||||
</code>
|
||||
<Input
|
||||
value={display}
|
||||
onChange={(e) => updateValue(setting.key, e.target.value)}
|
||||
className={`flex-1 h-8 text-xs font-mono ${
|
||||
isChanged ? "border-[var(--admin-warning-border)]" : ""
|
||||
}`}
|
||||
/>
|
||||
{isChanged && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 shrink-0"
|
||||
title="Revert"
|
||||
onClick={() => revertChange(setting.key)}
|
||||
>
|
||||
<RotateCcw className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination + per-page selector */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Per page</span>
|
||||
<Select
|
||||
value={String(pagination.perPage)}
|
||||
onValueChange={(v) => updateParams({ perPage: v, page: "1" })}
|
||||
>
|
||||
<SelectTrigger size="sm" className="w-[80px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PER_PAGE_OPTIONS.map((n) => (
|
||||
<SelectItem key={n} value={String(n)}>
|
||||
{n}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="ml-2">
|
||||
{pagination.total === 0
|
||||
? "0 results"
|
||||
: `${(pagination.page - 1) * pagination.perPage + 1}–${Math.min(
|
||||
pagination.page * pagination.perPage,
|
||||
pagination.total,
|
||||
)} of ${pagination.total}`}
|
||||
</span>
|
||||
</div>
|
||||
{/* Pagination + per-page selector */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Per page</span>
|
||||
<Select
|
||||
value={String(pagination.perPage)}
|
||||
onValueChange={(v) => updateParams({ perPage: v, page: "1" })}
|
||||
>
|
||||
<SelectTrigger size="sm" className="w-[80px]">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{PER_PAGE_OPTIONS.map((n) => (
|
||||
<SelectItem key={n} value={String(n)}>
|
||||
{n}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="ml-2">
|
||||
{pagination.total === 0
|
||||
? "0 results"
|
||||
: `${(pagination.page - 1) * pagination.perPage + 1}–${Math.min(
|
||||
pagination.page * pagination.perPage,
|
||||
pagination.total,
|
||||
)} of ${pagination.total}`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page <= 1 || isNavigating}
|
||||
onClick={() => updateParams({ page: "1" })}
|
||||
title="First page"
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page <= 1 || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.page - 1) })}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 mx-1 text-sm">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={pagination.lastPage}
|
||||
defaultValue={pagination.page}
|
||||
key={pagination.page}
|
||||
onBlur={(e) => jumpToPage(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") jumpToPage((e.target as HTMLInputElement).value);
|
||||
}}
|
||||
className="h-8 w-14 text-center text-xs"
|
||||
/>
|
||||
<span className="text-muted-foreground">of {pagination.lastPage}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page >= pagination.lastPage || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.page + 1) })}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page >= pagination.lastPage || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.lastPage) })}
|
||||
title="Last page"
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page <= 1 || isNavigating}
|
||||
onClick={() => updateParams({ page: "1" })}
|
||||
title="First page"
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page <= 1 || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.page - 1) })}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-1 mx-1 text-sm">
|
||||
<Input
|
||||
type="number"
|
||||
min={1}
|
||||
max={pagination.lastPage}
|
||||
defaultValue={pagination.page}
|
||||
key={pagination.page}
|
||||
onBlur={(e) => jumpToPage(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter")
|
||||
jumpToPage((e.target as HTMLInputElement).value);
|
||||
}}
|
||||
className="h-8 w-14 text-center text-xs"
|
||||
/>
|
||||
<span className="text-muted-foreground">
|
||||
of {pagination.lastPage}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page >= pagination.lastPage || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.page + 1) })}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={pagination.page >= pagination.lastPage || isNavigating}
|
||||
onClick={() => updateParams({ page: String(pagination.lastPage) })}
|
||||
title="Last page"
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user