Initial commit
This commit is contained in:
Zdeněk Burda
261
resources/js/components/ContestsTable.tsx
Normal file
261
resources/js/components/ContestsTable.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useLanguageStore } from "@/stores/languageStore";
|
||||
import { useContestRefreshStore } from "@/stores/contestRefreshStore";
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableColumn,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableCell,
|
||||
type Selection,
|
||||
} from "@heroui/react";
|
||||
|
||||
export type Contest = {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string | null;
|
||||
bands?: { id: number; name: string }[];
|
||||
categories?: { id: number; name: string }[];
|
||||
power_categories?: { id: number; name: string }[];
|
||||
|
||||
evaluator?: string | null;
|
||||
email?: string | null;
|
||||
email2?: string | null;
|
||||
|
||||
is_mcr: boolean;
|
||||
is_sixhr: boolean;
|
||||
is_active: boolean;
|
||||
is_test: boolean;
|
||||
|
||||
start_time: string | null; // "HH:MM:SS"
|
||||
duration: number; // hodiny
|
||||
logs_deadline_days: number;
|
||||
};
|
||||
|
||||
type PaginatedResponse<T> = {
|
||||
data: T[];
|
||||
};
|
||||
|
||||
type ContestsTableProps = {
|
||||
/** Handler vybraného řádku (klik/označení). */
|
||||
onRowSelect?: (contest: Contest) => void;
|
||||
/** Handler pro klik na ikonu editace (tužka). */
|
||||
onEditContest?: (contest: Contest) => void;
|
||||
|
||||
/** Show/hide the edit (pencil) actions column. Default: true */
|
||||
enableEdit?: boolean;
|
||||
|
||||
/** Při kliknutí/označení řádku zavolat onSelectContest. Default: false */
|
||||
selectOnRowClick?: boolean;
|
||||
|
||||
/** Filter the list to only active contests (is_active === true). Default: false */
|
||||
onlyActive?: boolean;
|
||||
|
||||
/** Show/hide the is_active column. Default: true */
|
||||
showActiveColumn?: boolean;
|
||||
|
||||
/** Zahrnout testovací závody. Default: false */
|
||||
showTests?: boolean;
|
||||
};
|
||||
|
||||
export default function ContestsTable({
|
||||
onRowSelect,
|
||||
onEditContest,
|
||||
enableEdit = true,
|
||||
onlyActive = false,
|
||||
showActiveColumn = true,
|
||||
selectOnRowClick = false,
|
||||
showTests = false,
|
||||
}: ContestsTableProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const locale = useLanguageStore((s) => s.locale);
|
||||
const refreshKey = useContestRefreshStore((s) => s.refreshKey);
|
||||
|
||||
const [items, setItems] = useState<Contest[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
|
||||
|
||||
useEffect(() => {
|
||||
let active = true;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const res = await axios.get<PaginatedResponse<Contest> | Contest[]>(
|
||||
"/api/contests",
|
||||
{
|
||||
withCredentials: true,
|
||||
headers: { Accept: "application/json" },
|
||||
params: {
|
||||
lang: locale,
|
||||
include_tests: showTests ? 1 : 0,
|
||||
only_active: onlyActive ? 1 : 0,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!active) return;
|
||||
|
||||
const data = Array.isArray(res.data)
|
||||
? res.data
|
||||
: (res.data as PaginatedResponse<Contest>).data;
|
||||
|
||||
setItems(data);
|
||||
} catch {
|
||||
if (!active) return;
|
||||
setError(t("unable_to_load_contests") ?? "Nepodařilo se načíst seznam závodů.");
|
||||
} finally {
|
||||
if (active) setLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => { active = false; };
|
||||
}, [locale, t, refreshKey, showTests, onlyActive]);
|
||||
|
||||
const handleEdit = onEditContest ?? onRowSelect;
|
||||
const handleRowSelect = onRowSelect;
|
||||
|
||||
const canEdit = Boolean(enableEdit && handleEdit);
|
||||
const visibleItems = onlyActive ? items.filter((c) => c.is_active) : items;
|
||||
|
||||
if (loading) return <div>{t("contests_loading") ?? "Načítám závody…"}</div>;
|
||||
if (error) return <div className="text-sm text-red-600">{error}</div>;
|
||||
if (visibleItems.length === 0) {
|
||||
return (
|
||||
<div>
|
||||
{t("contests_empty") ?? "Žádné závody nejsou k dispozici."}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ key: "name", label: t("contest_name") },
|
||||
{ key: "description", label: t("contest_description") },
|
||||
{ key: "bands", label: t("bands") ?? "Pásma" },
|
||||
{ key: "categories", label: t("categories") ?? "Kategorie" },
|
||||
{ key: "power_categories", label: t("power_categories") ?? "Výkonové kategorie" },
|
||||
...(showActiveColumn ? [{ key: "is_active", label: t("contest_active") }] : []),
|
||||
...(canEdit ? [{ key: "actions", label: "" }] : []),
|
||||
];
|
||||
|
||||
const handleSelectionChange = (keys: Selection) => {
|
||||
setSelectedKeys(keys);
|
||||
if (!selectOnRowClick || !handleRowSelect) return;
|
||||
if (keys === "all") return;
|
||||
const id = Array.from(keys)[0];
|
||||
if (!id) return;
|
||||
const selected = visibleItems.find((c) => String(c.id) === String(id));
|
||||
if (selected) handleRowSelect(selected);
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
aria-label="Contests table"
|
||||
selectionMode="single"
|
||||
selectedKeys={selectedKeys}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
>
|
||||
<TableHeader columns={columns}>
|
||||
{(column) => (
|
||||
<TableColumn key={column.key} className="text-left">
|
||||
{column.label}
|
||||
</TableColumn>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody items={visibleItems}>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => {
|
||||
switch (columnKey) {
|
||||
case "name":
|
||||
return (
|
||||
<TableCell>
|
||||
<span className="font-medium">{item.name}</span>
|
||||
</TableCell>
|
||||
);
|
||||
case "description":
|
||||
return (
|
||||
<TableCell>
|
||||
<span className="text-xs text-foreground-500 line-clamp-2">
|
||||
{item.description || "—"}
|
||||
</span>
|
||||
</TableCell>
|
||||
);
|
||||
case "bands": {
|
||||
const names = item.bands?.map((b) => b.name).join(", ");
|
||||
return (
|
||||
<TableCell>
|
||||
<span className="text-xs text-foreground-500 line-clamp-2">
|
||||
{names || "—"}
|
||||
</span>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "categories": {
|
||||
const names = item.categories?.map((c) => c.name).join(", ");
|
||||
return (
|
||||
<TableCell>
|
||||
<span className="text-xs text-foreground-500 line-clamp-2">
|
||||
{names || "—"}
|
||||
</span>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "power_categories": {
|
||||
const names = item.power_categories?.map((p) => p.name).join(", ");
|
||||
return (
|
||||
<TableCell>
|
||||
<span className="text-xs text-foreground-500 line-clamp-2">
|
||||
{names || "—"}
|
||||
</span>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "is_active":
|
||||
return (
|
||||
<TableCell>
|
||||
{item.is_active
|
||||
? t("yes") ?? "Ano"
|
||||
: t("no") ?? "Ne"}
|
||||
</TableCell>
|
||||
);
|
||||
case "actions":
|
||||
return (
|
||||
<TableCell>
|
||||
{canEdit && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleEdit?.(item)}
|
||||
className="inline-flex items-center p-1 rounded hover:bg-default-100 text-default-500 hover:text-default-700"
|
||||
aria-label={t("edit_contest") ?? "Edit contest"}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
className="h-4 w-4"
|
||||
>
|
||||
<path d="M13.586 3.586a2 2 0 0 1 2.828 2.828l-8.25 8.25a2 2 0 0 1-.878.518l-3.122.89a.75.75 0 0 1-.926-.926l.89-3.122a2 2 0 0 1 .518-.878l8.25-8.25Z" />
|
||||
<path d="M12.475 4.697 4.75 12.422l-.69 2.422 2.422-.69 7.725-7.725-1.732-1.732Z" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
default:
|
||||
return <TableCell />;
|
||||
}
|
||||
}}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user