86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { FormDialog } from "@repo/shadcn-ui/components/form-dialog";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { CatalogItemDTO } from "../common";
|
|
|
|
import { CatalogHelp } from "./catalog-help";
|
|
export function CatalogDefinitionDialog({
|
|
item,
|
|
items,
|
|
onClose,
|
|
}: {
|
|
item?: CatalogItemDTO | undefined;
|
|
items: readonly CatalogItemDTO[];
|
|
onClose: () => void;
|
|
}) {
|
|
const { t } = useTranslation("resources");
|
|
if (!item) {
|
|
return null;
|
|
}
|
|
const values = item.values;
|
|
return (
|
|
<FormDialog
|
|
cancelLabel={t("close")}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
onClose();
|
|
}
|
|
}}
|
|
open
|
|
title={t("viewDefinition", { name: values.name })}
|
|
wide={values.kind === "template"}
|
|
>
|
|
<div className="space-y-4">
|
|
{values.description && (
|
|
<p className="text-sm text-muted-foreground">{values.description}</p>
|
|
)}
|
|
{values.kind === "field" ? (
|
|
<dl className="space-y-2 text-sm">
|
|
<div>
|
|
<dt className="font-medium">{t("type")}</dt>
|
|
<dd>{t(values.type)}</dd>
|
|
</div>
|
|
{values.unit && (
|
|
<div>
|
|
<dt className="font-medium">{t("unit")}</dt>
|
|
<dd>{values.unit}</dd>
|
|
</div>
|
|
)}
|
|
{values.choices.length > 0 && (
|
|
<div>
|
|
<dt className="font-medium">{t("choices")}</dt>
|
|
<dd className="whitespace-pre-line">{values.choices.join("\n")}</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
) : (
|
|
<ul className="divide-y rounded-md border">
|
|
{values.fields.map((binding) => {
|
|
const field = items.find((entry) => entry.id === binding.fieldId);
|
|
return (
|
|
<li className="flex justify-between gap-4 p-3 text-sm" key={binding.fieldId}>
|
|
<div>
|
|
<p className="font-medium">{field?.values.name}</p>
|
|
{field?.values.kind === "field" && (
|
|
<p className="text-muted-foreground">
|
|
{t(field.values.type)}
|
|
{field.values.unit ? ` · ${field.values.unit}` : ""}
|
|
</p>
|
|
)}
|
|
{field && !field.effectiveActive && (
|
|
<p className="text-muted-foreground">{t("disabledField")}</p>
|
|
)}
|
|
</div>
|
|
<span>{t(binding.required ? "required" : "optional")}</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
{item.builtin && <p className="text-sm text-muted-foreground">{t("protected")}</p>}
|
|
<CatalogHelp kind={values.kind} scope={item.companyId ?? "global"} />
|
|
</div>
|
|
</FormDialog>
|
|
);
|
|
}
|