57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Controller, useFormContext, useWatch } from 'react-hook-form';
|
|
|
|
import { useRSForms } from '@/features/rsform/backend/use-rsforms';
|
|
import { PickSubstitutions } from '@/features/rsform/components/pick-substitutions';
|
|
|
|
import { TextArea } from '@/components/input';
|
|
|
|
import { type IUpdateOperationDTO } from '../../backend/types';
|
|
import { type IOperationSchema } from '../../models/oss';
|
|
import { SubstitutionValidator } from '../../models/oss-api';
|
|
|
|
interface TabSubstitutionsProps {
|
|
oss: IOperationSchema;
|
|
}
|
|
|
|
export function TabSubstitutions({ oss }: TabSubstitutionsProps) {
|
|
const { control } = useFormContext<IUpdateOperationDTO>();
|
|
const inputs = useWatch({ control, name: 'arguments' });
|
|
const substitutions = useWatch({ control, name: 'substitutions' });
|
|
|
|
const schemasIDs = inputs
|
|
.map(id => oss.operationByID.get(id)!)
|
|
.map(operation => operation.result)
|
|
.filter(id => id !== null);
|
|
const schemas = useRSForms(schemasIDs);
|
|
|
|
const validator = new SubstitutionValidator(schemas, substitutions);
|
|
const isCorrect = validator.validate();
|
|
|
|
return (
|
|
<div className='cc-fade-in cc-column mt-3'>
|
|
<Controller
|
|
name='substitutions'
|
|
control={control}
|
|
render={({ field }) => (
|
|
<PickSubstitutions
|
|
schemas={schemas}
|
|
rows={8}
|
|
value={field.value}
|
|
onChange={field.onChange}
|
|
suggestions={validator.suggestions}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<TextArea
|
|
disabled
|
|
value={validator.msg}
|
|
rows={4}
|
|
className={isCorrect ? '' : 'border-accent-red-foreground border-2'}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|