Add name change when creating cst

rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx

@@ -1,22 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import Modal, { ModalProps } from '../../components/Common/Modal';
 import SelectSingle from '../../components/Common/SelectSingle';
 import TextArea from '../../components/Common/TextArea';
+import TextInput from '../../components/Common/TextInput';
 import RSInput from '../../components/RSInput';
-import { CstType,ICstCreateData } from '../../models/rsform';
+import { CstType,ICstCreateData, IRSForm } from '../../models/rsform';
 import { labelCstType } from '../../utils/labels';
+import { createAliasFor, getCstTypePrefix } from '../../utils/misc';
 import { SelectorCstType } from '../../utils/selectors';
 
 interface DlgCreateCstProps
 extends Pick<ModalProps, 'hideWindow'> {
   initial?: ICstCreateData
+  schema: IRSForm
   onCreate: (data: ICstCreateData) => void
 }
 
-function DlgCreateCst({ hideWindow, initial, onCreate }: DlgCreateCstProps) {
+function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstProps) {
   const [validated, setValidated] = useState(false);
   const [selectedType, setSelectedType] = useState<CstType>(CstType.BASE);
+  const [alias, setAlias] = useState('');
   
   const [term, setTerm] = useState('');
   const [textDefinition, setTextDefinition] = useState('');
@@ -27,7 +31,7 @@ function DlgCreateCst({ hideWindow, initial, onCreate }: DlgCreateCstProps) {
     return {
       cst_type: selectedType,
       insert_after: initial?.insert_after ?? null,
-      alias: '',
+      alias: alias,
       convention: convention,
       definition_formal: expression,
       definition_raw: textDefinition,
@@ -37,17 +41,30 @@ function DlgCreateCst({ hideWindow, initial, onCreate }: DlgCreateCstProps) {
 
   const handleSubmit = () => onCreate(getData());
 
-  useEffect(() => {
+  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]);
 
-  useEffect(() => setValidated(selectedType !== undefined), [selectedType]);
+  useLayoutEffect(
+  () => {
+    setAlias(createAliasFor(selectedType, schema));
+  }, [selectedType, schema]);
+
+  useEffect(
+  () => {
+    if(alias.length < 2 || alias[0] !== getCstTypePrefix(selectedType)) {
+      setValidated(false);
+    } else {
+      setValidated(!schema.items.find(cst => cst.alias === alias))
+    }
+  }, [alias, selectedType, schema]);
 
   return (
     <Modal
@@ -57,7 +74,7 @@ function DlgCreateCst({ hideWindow, initial, onCreate }: DlgCreateCstProps) {
       onSubmit={handleSubmit}
     >
     <div className='h-fit w-[35rem] px-2 mb-2 flex flex-col justify-stretch gap-3'>
-      <div className='flex justify-center w-full'>
+      <div className='flex justify-center w-full gap-6'>
         <SelectSingle
           className='my-2 min-w-[15rem] self-center'
           options={SelectorCstType}
@@ -65,6 +82,12 @@ function DlgCreateCst({ hideWindow, initial, onCreate }: DlgCreateCstProps) {
           value={selectedType ? { value: selectedType, label: labelCstType(selectedType) } : null}
           onChange={data => setSelectedType(data?.value ?? CstType.BASE)}
         />
+        <TextInput id='alias' label='Имя'
+          singleRow
+          dimensions='w-[7rem]'
+          value={alias}
+          onChange={event => setAlias(event.target.value)}
+        />
       </div>
       <TextArea id='term' label='Термин'
         placeholder='Схемный или предметный термин, обозначающий данное понятие или утверждение'

rsconcept/frontend/src/pages/RSFormPage/DlgRenameCst.tsx

@@ -5,9 +5,9 @@ import SelectSingle from '../../components/Common/SelectSingle';
 import TextInput from '../../components/Common/TextInput';
 import { useRSForm } from '../../context/RSFormContext';
 import { CstType, ICstRenameData } from '../../models/rsform';
-import { SelectorCstType } from '../../utils/selectors';
-import { createAliasFor, getCstTypePrefix } from '../../utils/misc';
 import { labelCstType } from '../../utils/labels';
+import { createAliasFor, getCstTypePrefix } from '../../utils/misc';
+import { SelectorCstType } from '../../utils/selectors';
 
 interface DlgRenameCstProps
 extends Pick<ModalProps, 'hideWindow'> {

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -17,7 +17,6 @@ import useModificationPrompt from '../../hooks/useModificationPrompt';
 import { ICstCreateData, ICstRenameData, ICstUpdateData, TermForm } from '../../models/rsform';
 import { SyntaxTree } from '../../models/rslang';
 import { EXTEOR_TRS_FILE, prefixes, TIMEOUT_UI_REFRESH } from '../../utils/constants';
-import { createAliasFor } from '../../utils/misc';
 import DlgCloneRSForm from './DlgCloneRSForm';
 import DlgCreateCst from './DlgCreateCst';
 import DlgDeleteCst from './DlgDeleteCst';
@@ -134,7 +133,7 @@ function RSTabs() {
     if (!schema?.items) {
       return;
     }
-    data.alias = createAliasFor(data.cst_type, schema);
+    //data.alias = createAliasFor(data.cst_type, schema);
     cstCreate(data, newCst => {
       toast.success(`Конституента добавлена: ${newCst.alias}`);
       navigateTab(activeTab, newCst.id);    
@@ -339,6 +338,7 @@ function RSTabs() {
     <DlgCreateCst
       hideWindow={() => setShowCreateCst(false)}
       onCreate={handleCreateCst}
+      schema={schema}
       initial={createInitialData}
     />}
     {showRenameCst &&