95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { Link } from "react-router";
|
|
import { TFunction } from "i18next";
|
|
import { RowHeaderDisplayDto } from "~/application/dtos/data/RowHeaderDisplayDto";
|
|
import { InputType } from "~/application/enums/shared/InputType";
|
|
import InputNumber from "~/components/ui/input/InputNumber";
|
|
import InputSelect from "~/components/ui/input/InputSelect";
|
|
import InputText from "~/components/ui/input/InputText";
|
|
import { isKeyShapedLabel } from "~/utils/i18n/translateLabel";
|
|
|
|
function safeTitle(t: TFunction, title: string) {
|
|
const translated = String(t(title));
|
|
return translated === title && isKeyShapedLabel(title) ? String(t("shared.invalid")) : translated;
|
|
}
|
|
|
|
function displayRowValue<T>(t: TFunction, header: RowHeaderDisplayDto<T>, item: T, idxRow: number) {
|
|
return (
|
|
<>
|
|
{!header.setValue ? (
|
|
<>
|
|
{header.href !== undefined && header.href(item) ? (
|
|
<Link
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
to={header.href(item) ?? ""}
|
|
className="focus:bg-secondary/90 hover:border-border rounded-md border-b border-dashed border-transparent"
|
|
>
|
|
<span>{header.formattedValue ? header.formattedValue(item, idxRow) : header.value(item, idxRow)}</span>
|
|
</Link>
|
|
) : (
|
|
<span>{header.formattedValue ? header.formattedValue(item, idxRow) : header.value(item, idxRow)}</span>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{header.type === undefined || header.type === InputType.TEXT ? (
|
|
<InputText
|
|
borderless={header.inputBorderless}
|
|
withLabel={false}
|
|
name={header.name}
|
|
title={safeTitle(t, header.title)}
|
|
value={header.value(item, idxRow)}
|
|
disabled={header.editable && !header.editable(item, idxRow)}
|
|
setValue={(e) => {
|
|
if (header.setValue) {
|
|
header.setValue(e, idxRow);
|
|
}
|
|
}}
|
|
required={!header.inputOptional}
|
|
/>
|
|
) : header.type === InputType.NUMBER ? (
|
|
<InputNumber
|
|
borderless={header.inputBorderless}
|
|
withLabel={false}
|
|
name={header.name}
|
|
title={safeTitle(t, header.title)}
|
|
value={header.value(item, idxRow)}
|
|
disabled={header.editable && !header.editable(item)}
|
|
setValue={(e) => {
|
|
if (header.setValue) {
|
|
header.setValue(e, idxRow);
|
|
}
|
|
}}
|
|
required={!header.inputOptional}
|
|
step={header.inputNumberStep}
|
|
/>
|
|
) : header.type === InputType.SELECT ? (
|
|
<InputSelect
|
|
borderless={header.inputBorderless}
|
|
withLabel={false}
|
|
name={header.name}
|
|
title={safeTitle(t, header.title)}
|
|
value={header.value(item, idxRow)}
|
|
setValue={(e) => {
|
|
if (header.setValue) {
|
|
header.setValue(Number(e), idxRow);
|
|
}
|
|
}}
|
|
options={header.options ?? []}
|
|
required={!header.inputOptional}
|
|
disabled={header.editable && !header.editable(item)}
|
|
/>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default {
|
|
displayRowValue,
|
|
};
|