78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import { Typography, Divider, Button, Form } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import SolutionFieldNew from './SolutionField';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const SolutionForm = ({
|
|
solutionForm,
|
|
solutionFields,
|
|
solutionTypes,
|
|
solutionStatuses,
|
|
onAddSolutionField,
|
|
onRemoveSolutionField,
|
|
onSolutionTypeChange,
|
|
onSolutionStatusChange,
|
|
onSolutionFileUpload,
|
|
onFileView,
|
|
fileList,
|
|
isReadOnly = false,
|
|
solutionData = [],
|
|
}) => {
|
|
|
|
return (
|
|
<div style={{ marginBottom: 0 }}>
|
|
|
|
<Form form={solutionForm} layout="vertical">
|
|
<div style={{
|
|
maxHeight: '400px',
|
|
overflowY: 'auto',
|
|
paddingRight: '8px'
|
|
}}>
|
|
{solutionFields.map((field, displayIndex) => (
|
|
<SolutionFieldNew
|
|
key={field}
|
|
fieldKey={field}
|
|
fieldName={['solution_items', field]}
|
|
index={displayIndex}
|
|
solutionType={solutionTypes[field]}
|
|
solutionStatus={solutionStatuses[field]}
|
|
onTypeChange={onSolutionTypeChange}
|
|
onStatusChange={onSolutionStatusChange}
|
|
onRemove={() => onRemoveSolutionField(field)}
|
|
onFileUpload={onSolutionFileUpload}
|
|
onFileView={onFileView}
|
|
fileList={fileList}
|
|
isReadOnly={isReadOnly}
|
|
canRemove={solutionFields.length > 1 && displayIndex > 0}
|
|
originalSolutionData={solutionData[displayIndex]}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{!isReadOnly && (
|
|
<div style={{ marginBottom: 8, marginTop: 12 }}>
|
|
<Button
|
|
type="dashed"
|
|
onClick={onAddSolutionField}
|
|
icon={<PlusOutlined />}
|
|
style={{
|
|
width: '100%',
|
|
borderColor: '#23A55A',
|
|
color: '#23A55A',
|
|
height: '32px',
|
|
fontSize: '12px'
|
|
}}
|
|
>
|
|
Add sollution
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SolutionForm;
|