98 lines
3.5 KiB
JavaScript

import React, {useEffect, useState} from "react";
import {ContentTitle} from "../ContentTitle/ContentTitle"
import {ContentButton} from "../ContentButton/ContentButton"
import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField"
import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
import {Link} from "react-router-dom"
import {useRequest} from "../../../../hooks/useRequest";
export const ContractContent = () => {
const [templates, setTemplates] = useState([]);
const [selectedTemplate, setSelectedTemplate] = useState();
const [templatedFields, setTemplatedFields] = useState([]);
const {apiRequest} = useRequest();
useEffect(() => {
apiRequest(`/document/get-document-list`)
.then(res => setTemplates(res))
}, []);
useEffect(() => {
if (selectedTemplate === undefined) {
return
}
apiRequest(`/document/get-document?document_id=${selectedTemplate}`)
.then(res => setTemplatedFields(res[0].templateDocumentFields)
)
}, [selectedTemplate]);
return (
<div>
<div className="content__info">
<ContentTitle title="Создание договора" description="# Описание"/>
<div className="content__info-main">
<form className='contract'>
<div className="contract__create">
<div className="contract__title">Создание договора </div>
<input type="text" className="contract__number" placeholder="#"/>
<span>от</span>
<input type="date" className="contract__date"/>
</div>
<BookkeepingFormField
title="Шаблон документа"
Component={BookkepingSelect}
innerComponentProps={{
onSelect: setSelectedTemplate,
textField: "title",
options: templates,
defaultIndexSelected: 0,
}}
action={{
text: "Добавить свой шаблон",
method: () => {
}
}}
/>
{templatedFields.map((field, index) =>
<BookkeepingFormField
title={field.field.title} key={index}
Component={BookkepingInput}
innerComponentProps={{
placeholder: "Введите данные",
}}
/>
)}
<div className="content__btn-list">
<ContentButton styles={{
width: "290px",
height: "75px",
boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
borderRadius: "38px",
backgroundColor: "#b64b3e",
border: "none",
color: "#ffffff",
}}>Сохранить</ContentButton>
<Link to="/documents" className="link-act-button">
<div className='act-Button'>
<ContentButton styles={{
color: "#282828",
marginLeft: "40px",
background: "none",
border: "none"
}}>Отменить</ContentButton>
</div>
</Link>
</div>
</form>
</div>
</div>
</div>
)
};