81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
import { Form, Card, Typography, Divider, Button } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import SolutionFieldNew from './SolutionField';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const SolutionForm = ({
|
|
solutionForm,
|
|
solutionFields,
|
|
solutionTypes,
|
|
solutionStatuses,
|
|
fileList,
|
|
solutionsToDelete,
|
|
firstSolutionValid,
|
|
onAddSolutionField,
|
|
onRemoveSolutionField,
|
|
onSolutionTypeChange,
|
|
onSolutionStatusChange,
|
|
onSolutionFileUpload,
|
|
onFileView,
|
|
isReadOnly = false,
|
|
onAddSolution,
|
|
}) => {
|
|
return (
|
|
<div>
|
|
<Form
|
|
form={solutionForm}
|
|
layout="vertical"
|
|
initialValues={{
|
|
solution_status_0: true,
|
|
solution_type_0: 'text',
|
|
}}
|
|
>
|
|
<Divider orientation="left">Solution Items</Divider>
|
|
|
|
{solutionFields.map((field, index) => (
|
|
<SolutionFieldNew
|
|
key={field.key}
|
|
fieldKey={field.key}
|
|
fieldName={field.name}
|
|
index={index}
|
|
solutionType={solutionTypes[field.key]}
|
|
solutionStatus={solutionStatuses[field.key]}
|
|
onTypeChange={onSolutionTypeChange}
|
|
onStatusChange={onSolutionStatusChange}
|
|
onRemove={() => onRemoveSolutionField(field.key)}
|
|
onFileUpload={onSolutionFileUpload}
|
|
onFileView={onFileView}
|
|
fileList={fileList}
|
|
isReadOnly={isReadOnly}
|
|
canRemove={solutionFields.length > 1}
|
|
/>
|
|
))}
|
|
|
|
{!isReadOnly && (
|
|
<>
|
|
<Form.Item>
|
|
<Button
|
|
type="dashed"
|
|
onClick={onAddSolutionField}
|
|
icon={<PlusOutlined />}
|
|
style={{ width: '100%' }}
|
|
>
|
|
+ Add Solution
|
|
</Button>
|
|
</Form.Item>
|
|
<div style={{ marginTop: 16 }}>
|
|
<Text type="secondary">
|
|
* At least one solution is required for each error code.
|
|
</Text>
|
|
</div>
|
|
</>
|
|
)}
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SolutionForm;
|