63 lines
3.1 KiB
TypeScript
63 lines
3.1 KiB
TypeScript
|
|
import Form from 'react-bootstrap/Form';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FieldConstraint, RecordConstraint } from '@stirling-pdf/shared-operations/src/dynamic-ui/OperatorConstraints'
|
|
|
|
interface DynamicParameterFieldsProps {
|
|
constraints: RecordConstraint;
|
|
parentKeyPath?: string[];
|
|
}
|
|
|
|
const DynamicParameterFields: React.FC<DynamicParameterFieldsProps> = ({constraints, parentKeyPath=["DPF"]}) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (<>
|
|
{Object.entries(constraints.record).map(([fieldName, value]) => {
|
|
console.log(fieldName, value)
|
|
const globallyUniqueId = joinKeyPath([...parentKeyPath, fieldName]);
|
|
return <div className='mb-3' key={fieldName} >
|
|
<label htmlFor={globallyUniqueId}>{t(value.displayNameKey)}</label>
|
|
{fieldConstraintToElement(fieldName, parentKeyPath, globallyUniqueId, value)}
|
|
</div>
|
|
})}
|
|
</>);
|
|
}
|
|
|
|
function joinKeyPath(keyPath: string[]) {
|
|
return keyPath.join(".");
|
|
}
|
|
|
|
function fieldConstraintToElement(fieldName: string, parentKeyPath: string[], globallyUniqueId: string, fieldConstraint: FieldConstraint) {
|
|
if (Array.isArray(fieldConstraint.type)) {
|
|
if (fieldConstraint.type.every(e => typeof e == 'string' || typeof e == 'number')) {
|
|
return (
|
|
<Form.Select id={globallyUniqueId} name={fieldName}>
|
|
<option value="" disabled>Select an option</option>
|
|
{fieldConstraint.type.map((option) => <option key={option} value={option}>{option}</option> )}
|
|
</Form.Select>
|
|
);
|
|
} else {
|
|
return <div key={fieldName}>Error: Field type '{fieldConstraint.type}' not supported</div>
|
|
}
|
|
} else if (typeof fieldConstraint.type == 'string') {
|
|
switch (fieldConstraint.type) {
|
|
case "file.pdf":
|
|
return <input id={globallyUniqueId} type="file" name={fieldName} required={fieldConstraint.required} className="form-control required" accept="application/pdf" multiple={false}/>;
|
|
case "files.pdf":
|
|
return <input id={globallyUniqueId} type="file" name={fieldName} required={fieldConstraint.required} className="form-control required" accept="application/pdf" multiple={true}/>;
|
|
case "string":
|
|
return <input id={globallyUniqueId} type="text" name={fieldName} required={fieldConstraint.required} />;
|
|
case "number":
|
|
return <input id={globallyUniqueId} type="number" name={fieldName} required={fieldConstraint.required} />;
|
|
default:
|
|
return <div key={fieldName}>Error: Field type '{fieldConstraint.type}' not supported</div>
|
|
}
|
|
} else if (fieldConstraint.type instanceof RecordConstraint) {
|
|
//return <DynamicParameterFields constraints={fieldConstraint.type} parentKeyPath={[...parentKeyPath, fieldName]}/>
|
|
return <div key={fieldName}>Error: Field type 'RecordConstraint' not supported yet!</div>
|
|
}
|
|
|
|
return <div key={fieldName}>Error: Field type '{fieldConstraint.type}' not supported</div>
|
|
}
|
|
|
|
export default DynamicParameterFields; |