F: Rework edit wordforms dialog

rsconcept/frontend/src/components/Modal/ModalForm.tsx

@@ -43,7 +43,7 @@ interface ModalFormProps extends ModalProps {
   beforeSubmit?: () => boolean;
 
   /** Callback to be called after submit. */
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
 
   /** Callback to be called when modal is canceled. */
   onCancel?: () => void;
@@ -82,7 +82,8 @@ export function ModalForm({
     if (beforeSubmit && !beforeSubmit()) {
       return;
     }
-    void Promise.resolve(onSubmit(event)).then(hideDialog);
+    onSubmit(event);
+    hideDialog();
   }
 
   return (

rsconcept/frontend/src/features/rsform/components/BadgeWordForm.tsx

@@ -13,7 +13,7 @@ interface BadgeWordFormProps {
 /**
  * Displays a badge with grammemes of a word form.
  */
-function BadgeWordForm({ keyPrefix, form }: BadgeWordFormProps) {
+export function BadgeWordForm({ keyPrefix, form }: BadgeWordFormProps) {
   return (
     <div className='flex flex-wrap justify-start gap-1 select-none w-fit'>
       {form.grams.map(gram => (
@@ -22,5 +22,3 @@ function BadgeWordForm({ keyPrefix, form }: BadgeWordFormProps) {
     </div>
   );
 }
-
-export default BadgeWordForm;

rsconcept/frontend/src/features/rsform/components/SelectMultiGrammeme.tsx

@@ -12,7 +12,7 @@ interface SelectMultiGrammemeProps
   placeholder?: string;
 }
 
-function SelectMultiGrammeme({ value, onChange, ...restProps }: SelectMultiGrammemeProps) {
+export function SelectMultiGrammeme({ value, onChange, ...restProps }: SelectMultiGrammemeProps) {
   const compatible = getCompatibleGrams(
     value.filter(data => Object.values(Grammeme).includes(data.value as Grammeme)).map(data => data.value as Grammeme)
   );
@@ -27,5 +27,3 @@ function SelectMultiGrammeme({ value, onChange, ...restProps }: SelectMultiGramm
     />
   );
 }
-
-export default SelectMultiGrammeme;

rsconcept/frontend/src/features/rsform/components/SelectWordForm.tsx

@@ -33,7 +33,7 @@ interface SelectWordFormProps extends CProps.Styling {
   onChange: React.Dispatch<React.SetStateAction<IGrammemeOption[]>>;
 }
 
-function SelectWordForm({ value, onChange, className, ...restProps }: SelectWordFormProps) {
+export function SelectWordForm({ value, onChange, className, ...restProps }: SelectWordFormProps) {
   function handleSelect(grams: Grammeme[]) {
     onChange(supportedGrammeOptions.filter(({ value }) => grams.includes(value as Grammeme)));
   }
@@ -53,5 +53,3 @@ function SelectWordForm({ value, onChange, className, ...restProps }: SelectWord
     </div>
   );
 }
-
-export default SelectWordForm;

rsconcept/frontend/src/features/rsform/dialogs/DlgEditReference/TabEntityReference.tsx

@@ -6,8 +6,8 @@ import { Label, TextInput } from '@/components/Input';
 import { useDialogsStore } from '@/stores/dialogs';
 
 import { PickConstituenta } from '../../components/PickConstituenta';
-import SelectMultiGrammeme from '../../components/SelectMultiGrammeme';
-import SelectWordForm from '../../components/SelectWordForm';
+import { SelectMultiGrammeme } from '../../components/SelectMultiGrammeme';
+import { SelectWordForm } from '../../components/SelectWordForm';
 import { IConstituenta } from '../../models/rsform';
 import { matchConstituenta } from '../../models/rsformAPI';
 import { CstMatchMode } from '../../stores/cstSearch';

rsconcept/frontend/src/features/rsform/dialogs/DlgEditWordForms/DlgEditWordForms.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import clsx from 'clsx';
 
 import { HelpTopic } from '@/features/help';
@@ -16,53 +16,51 @@ import { useGenerateLexeme } from '../../backend/cctext/useGenerateLexeme';
 import { useInflectText } from '../../backend/cctext/useInflectText';
 import { useIsProcessingCctext } from '../../backend/cctext/useIsProcessingCctext';
 import { useParseText } from '../../backend/cctext/useParseText';
-import SelectMultiGrammeme from '../../components/SelectMultiGrammeme';
+import { useCstUpdate } from '../../backend/useCstUpdate';
+import { SelectMultiGrammeme } from '../../components/SelectMultiGrammeme';
 import { Grammeme, IGrammemeOption, IWordForm, supportedGrammemes } from '../../models/language';
 import { parseGrammemes, supportedGrammeOptions, wordFormEquals } from '../../models/languageAPI';
-import { IConstituenta, TermForm } from '../../models/rsform';
+import { IConstituenta } from '../../models/rsform';
 
-import TableWordForms from './TableWordForms';
+import { TableWordForms } from './TableWordForms';
 
 export interface DlgEditWordFormsProps {
+  itemID: number;
   target: IConstituenta;
-  onSave: (data: TermForm[]) => void;
 }
 
 function DlgEditWordForms() {
-  const { target, onSave } = useDialogsStore(state => state.props as DlgEditWordFormsProps);
+  const { itemID, target } = useDialogsStore(state => state.props as DlgEditWordFormsProps);
+  const { cstUpdate } = useCstUpdate();
+
   const isProcessing = useIsProcessingCctext();
   const { inflectText } = useInflectText();
   const { parseText } = useParseText();
   const { generateLexeme } = useGenerateLexeme();
 
-  const [term, setTerm] = useState('');
-  const [inputText, setInputText] = useState('');
+  const [inputText, setInputText] = useState(target.term_resolved);
   const [inputGrams, setInputGrams] = useState<IGrammemeOption[]>([]);
-  const [forms, setForms] = useState<IWordForm[]>([]);
 
-  useEffect(() => {
-    const initForms: IWordForm[] = [];
-    target.term_forms.forEach(term =>
-      initForms.push({
+  const [forms, setForms] = useState<IWordForm[]>(
+    target.term_forms.map(term => ({
       text: term.text,
       grams: parseGrammemes(term.tags)
-      })
+    }))
   );
-    setForms(initForms);
-    setTerm(target.term_resolved);
-    setInputText(target.term_resolved);
-    setInputGrams([]);
-  }, [target]);
 
   function handleSubmit() {
-    const result: TermForm[] = [];
-    forms.forEach(({ text, grams }) =>
-      result.push({
+    void cstUpdate({
+      itemID: itemID,
+      data: {
+        target: target.id,
+        item_data: {
+          term_forms: forms.map(({ text, grams }) => ({
             text: text,
             tags: grams.join(',')
-      })
-    );
-    onSave(result);
+          }))
+        }
+      }
+    });
   }
 
   function handleAddForm() {
@@ -80,7 +78,7 @@ function DlgEditWordForms() {
 
   function handleInflect() {
     void inflectText({
-      text: term,
+      text: target.term_resolved,
       grams: inputGrams.map(gram => gram.value).join(',')
     }).then(response => setInputText(response.result));
   }
@@ -134,7 +132,7 @@ function DlgEditWordForms() {
         label='Начальная форма'
         placeholder='Термин в начальной форме'
         rows={1}
-        value={term}
+        value={target.term_resolved}
       />
 
       <div className='mt-3 mb-2'>

rsconcept/frontend/src/features/rsform/dialogs/DlgEditWordForms/TableWordForms.tsx

@@ -7,7 +7,7 @@ import DataTable, { createColumnHelper } from '@/components/DataTable';
 import { IconRemove } from '@/components/Icons';
 import { NoData } from '@/components/View';
 
-import BadgeWordForm from '../../components/BadgeWordForm';
+import { BadgeWordForm } from '../../components/BadgeWordForm';
 import { IWordForm } from '../../models/language';
 
 interface TableWordFormsProps {
@@ -18,7 +18,7 @@ interface TableWordFormsProps {
 
 const columnHelper = createColumnHelper<IWordForm>();
 
-function TableWordForms({ forms, setForms, onFormSelect }: TableWordFormsProps) {
+export function TableWordForms({ forms, setForms, onFormSelect }: TableWordFormsProps) {
   function handleDeleteRow(row: number) {
     setForms(prev => {
       const newForms: IWordForm[] = [];
@@ -80,5 +80,3 @@ function TableWordForms({ forms, setForms, onFormSelect }: TableWordFormsProps)
     />
   );
 }
-
-export default TableWordForms;

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx

@@ -11,7 +11,6 @@ import { usePreferencesStore } from '@/stores/preferences';
 import { globals } from '@/utils/constants';
 import { promptUnsaved } from '@/utils/utils';
 
-import { useCstUpdate } from '../../../backend/useCstUpdate';
 import { useMutatingRSForm } from '../../../backend/useMutatingRSForm';
 import { useRSEdit } from '../RSEditContext';
 import { ViewConstituents } from '../ViewConstituents';
@@ -30,7 +29,6 @@ function EditorConstituenta() {
 
   const showList = usePreferencesStore(state => state.showCstSideList);
   const showEditTerm = useDialogsStore(state => state.showEditWordForms);
-  const { cstUpdate } = useCstUpdate();
   const { isModified } = useModificationStore();
 
   const [toggleReset, setToggleReset] = useState(false);
@@ -66,17 +64,7 @@ function EditorConstituenta() {
     if (isModified && !promptUnsaved()) {
       return;
     }
-    showEditTerm({
-      target: activeCst,
-      onSave: forms =>
-        void cstUpdate({
-          itemID: schema.id,
-          data: {
-            target: activeCst.id,
-            item_data: { term_forms: forms }
-          }
-        })
-    });
+    showEditTerm({ itemID: schema.id, target: activeCst });
   }
 
   function initiateSubmit() {