78 lines
No EOL
2.7 KiB
TypeScript
78 lines
No EOL
2.7 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { CornerDownRightIcon } from "lucide-react";
|
|
import { ReactNode } from "react";
|
|
// * Components shadcn
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
// * Other
|
|
import str from "@/hooks/use-string";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import { ConfigField, DynamicFieldTypes } from "@/back/types/global";
|
|
|
|
type ConfigTableProps = {
|
|
config: ConfigField[];
|
|
};
|
|
|
|
export default function ConfigTable({ config }: ConfigTableProps) {
|
|
const enumDynamicFieldTypes = usePage().props .enumDynamicFieldTypes as DynamicFieldTypes;
|
|
const getEnumDynamicFieldType = (value: number) => {
|
|
return Object.values(enumDynamicFieldTypes).find((def) => def.value === value);
|
|
};
|
|
|
|
const GetChildrenRow = (fields: ConfigField[], depth: number = 0): ReactNode => {
|
|
console.log(depth)
|
|
return Object.entries(fields).map(
|
|
([id, field]) => (
|
|
<>
|
|
<TableRow key={id}>
|
|
<TableCell>
|
|
<div className="flex justify-start items-center gap-1.5">
|
|
{depth > 0 && <CornerDownRightIcon size={18} />}
|
|
{depth > 0 && <span className="text-muted-foreground">#{depth}</span>}
|
|
{getEnumDynamicFieldType(field.type)?.label}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{field.label}
|
|
<code className="text-xs ms-1">
|
|
({field.key})
|
|
</code>
|
|
</TableCell>
|
|
<TableCell>
|
|
{field.validation}
|
|
</TableCell>
|
|
</TableRow>
|
|
{field.children && GetChildrenRow(field.children, depth + 1)}
|
|
</>
|
|
)
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>
|
|
{str(useTrans("validation.custom.type")).ucFirst().value()}
|
|
</TableHead>
|
|
<TableHead>
|
|
{str(useTrans("validation.custom.label")).ucFirst().value()}
|
|
</TableHead>
|
|
<TableHead>
|
|
{str(useTrans("validation.custom.validation")).ucFirst().value()}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{GetChildrenRow(config)}
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
} |