89 lines
2.9 KiB
JavaScript
89 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { Typography, Divider, Button } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import SolutionFieldNew from './SolutionField';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const SolutionForm = ({
|
|
solutionForm,
|
|
solutionFields,
|
|
solutionTypes,
|
|
solutionStatuses,
|
|
firstSolutionValid,
|
|
onAddSolutionField,
|
|
onRemoveSolutionField,
|
|
onSolutionTypeChange,
|
|
onSolutionStatusChange,
|
|
checkFirstSolutionValid,
|
|
onSolutionFileUpload,
|
|
onFileView,
|
|
fileList,
|
|
isReadOnly = false,
|
|
}) => {
|
|
// console.log('SolutionForm props:', {
|
|
// solutionFields,
|
|
// solutionTypes,
|
|
// solutionStatuses,
|
|
// firstSolutionValid,
|
|
// onAddSolutionField: typeof onAddSolutionField,
|
|
// onRemoveSolutionField: typeof onRemoveSolutionField,
|
|
// checkFirstSolutionValid: typeof checkFirstSolutionValid,
|
|
// onSolutionFileUpload: typeof onSolutionFileUpload,
|
|
// onFileView: typeof onFileView,
|
|
// fileList: fileList ? fileList.length : 0
|
|
// });
|
|
|
|
return (
|
|
<div style={{ marginBottom: 0 }}>
|
|
<Divider orientation="left">Solution Items</Divider>
|
|
|
|
<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}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{!isReadOnly && (
|
|
<div style={{ marginBottom: 8 }}>
|
|
<Button
|
|
type="dashed"
|
|
onClick={onAddSolutionField}
|
|
icon={<PlusOutlined />}
|
|
style={{
|
|
width: '100%',
|
|
borderColor: '#23A55A',
|
|
color: '#23A55A',
|
|
height: '32px',
|
|
fontSize: '12px'
|
|
}}
|
|
>
|
|
Add More Solution
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SolutionForm;
|