50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import type { ResponseGetData, ResponseMetaData } from '@/api/ius/types';
|
||
import { mapFieldTypeElement } from '@/config/elements';
|
||
import { Background, Button, Divider, ElementContainer, Heading } from 'ui';
|
||
|
||
type Props = {
|
||
readonly data: ResponseGetData;
|
||
readonly metaData: ResponseMetaData;
|
||
readonly title: string;
|
||
};
|
||
|
||
export function Form({ data, metaData, title }: Props) {
|
||
return (
|
||
<Background>
|
||
<Heading size={2}>{title}</Heading>
|
||
<div className="mt-1 grid auto-rows-auto grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||
{Object.keys(metaData).map((name) => {
|
||
const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
|
||
|
||
if (!visible) return false;
|
||
|
||
const Element = mapFieldTypeElement[fieldType];
|
||
|
||
return (
|
||
<ElementContainer
|
||
key={name}
|
||
id={name}
|
||
title={fieldType === 'CHECKBOX' ? '' : metaData[name].label}
|
||
>
|
||
<Element
|
||
id={name}
|
||
defaultValue={data[name]}
|
||
title={label}
|
||
min={min}
|
||
max={max}
|
||
{...props}
|
||
/>
|
||
</ElementContainer>
|
||
);
|
||
})}
|
||
</div>
|
||
<Divider />
|
||
<div className="grid grid-cols-1 gap-2 md:grid-cols-3">
|
||
<Button>Сохранить</Button>
|
||
<Button>Возврат на доработку</Button>
|
||
<Button color="danger">Отмена</Button>
|
||
</div>
|
||
</Background>
|
||
);
|
||
}
|