diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx index 02db34b7..29deb9ea 100644 --- a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx +++ b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx @@ -5,9 +5,10 @@ import SelectSingle from '../components/Common/SelectSingle'; import TextArea from '../components/Common/TextArea'; import TextInput from '../components/Common/TextInput'; import RSInput from '../components/RSInput'; +import usePartialUpdate from '../hooks/usePartialUpdate'; import { CstType,ICstCreateData, IRSForm } from '../models/rsform'; import { labelCstType } from '../utils/labels'; -import { createAliasFor, getCstTypePrefix } from '../utils/misc'; +import { createAliasFor, validateCstAlias } from '../utils/misc'; import { SelectorCstType } from '../utils/selectors'; interface DlgCreateCstProps @@ -19,53 +20,31 @@ extends Pick { function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstProps) { const [validated, setValidated] = useState(false); - const [selectedType, setSelectedType] = useState(CstType.BASE); - const [alias, setAlias] = useState(''); - - const [term, setTerm] = useState(''); - const [textDefinition, setTextDefinition] = useState(''); - const [expression, setExpression] = useState(''); - const [convention, setConvention] = useState(''); - function getData(): ICstCreateData { - return { - cst_type: selectedType, - insert_after: initial?.insert_after ?? null, - alias: alias, - convention: convention, - definition_formal: expression, - definition_raw: textDefinition, - term_raw: term, + const [cstData, updateCstData] = usePartialUpdate( + initial || { + cst_type: CstType.BASE, + insert_after: null, + alias: '', + convention: '', + definition_formal: '', + definition_raw: '', + term_raw: '', term_forms: [] - }; - } - - const handleSubmit = () => onCreate(getData()); - - useLayoutEffect(() => { - if (initial) { - setSelectedType(initial.cst_type); - setTerm(initial.term_raw); - setTextDefinition(initial.definition_raw); - setExpression(initial.definition_formal); - setConvention(initial.convention); - setAlias(initial.alias); } - }, [initial]); + ); + + const handleSubmit = () => onCreate(cstData); useLayoutEffect( () => { - setAlias(createAliasFor(selectedType, schema)); - }, [selectedType, schema]); + updateCstData({ alias: createAliasFor(cstData.cst_type, schema) }); + }, [cstData.cst_type, updateCstData, schema]); useEffect( () => { - if(alias.length < 2 || alias[0] !== getCstTypePrefix(selectedType)) { - setValidated(false); - } else { - setValidated(!schema.items.find(cst => cst.alias === alias)) - } - }, [alias, selectedType, schema]); + setValidated(validateCstAlias(cstData.alias, cstData.cst_type, schema)); + }, [cstData.alias, cstData.cst_type, schema]); return ( setSelectedType(data?.value ?? CstType.BASE)} + value={{ value: cstData.cst_type, label: labelCstType(cstData.cst_type) }} + onChange={data => updateCstData({ cst_type: data?.value ?? CstType.BASE})} /> setAlias(event.target.value)} + value={cstData.alias} + onChange={event => updateCstData({ alias: event.target.value})} />