F: Rework Constituenta editor form

rsconcept/frontend/src/backend/rsform/api.ts

@@ -1,4 +1,5 @@
 import { queryOptions } from '@tanstack/react-query';
+import { z } from 'zod';
 
 import { axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
 import { DELAYS } from '@/backend/configuration';
@@ -74,16 +75,21 @@ export interface ICstCreatedResponse {
 /**
  * Represents data, used in updating persistent attributes in {@link IConstituenta}.
  */
-export interface ICstUpdateDTO {
+export const CstUpdateSchema = z.object({
-  target: ConstituentaID;
+  target: z.number(),
-  item_data: {
+  item_data: z.object({
-    convention?: string;
+    convention: z.string().optional(),
-    definition_formal?: string;
+    definition_formal: z.string().optional(),
-    definition_raw?: string;
+    definition_raw: z.string().optional(),
-    term_raw?: string;
+    term_raw: z.string().optional(),
-    term_forms?: TermForm[];
+    term_forms: z.array(z.object({ text: z.string(), tags: z.string() })).optional()
-  };
+  })
-}
+});
+
+/**
+ * Represents data, used in updating persistent attributes in {@link IConstituenta}.
+ */
+export type ICstUpdateDTO = z.infer<typeof CstUpdateSchema>;
 
 /**
  * Represents data, used in renaming {@link IConstituenta}.

rsconcept/frontend/src/backend/rsform/useCheckConstituenta.tsx

@@ -8,7 +8,7 @@ import { ICheckConstituentaDTO, rsformsApi } from './api';
 
 export const useCheckConstituenta = () => {
   const mutation = useMutation({
-    mutationKey: [rsformsApi.baseKey, 'check-constituenta'],
+    mutationKey: ['actions', 'check-constituenta'],
     mutationFn: rsformsApi.checkConstituenta
   });
   return {

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -1,10 +1,12 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import clsx from 'clsx';
 import { useEffect, useLayoutEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 
-import { ICstUpdateDTO } from '@/backend/rsform/api';
+import { CstUpdateSchema, ICstUpdateDTO } from '@/backend/rsform/api';
 import { useCstUpdate } from '@/backend/rsform/useCstUpdate';
 import { useMutatingRSForm } from '@/backend/rsform/useMutatingRSForm';
 import { IconChild, IconPredecessor, IconSave } from '@/components/Icons';
@@ -19,7 +21,7 @@ import { isBaseSet, isBasicConcept, isFunctional } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { useDialogsStore } from '@/stores/dialogs';
 import { useModificationStore } from '@/stores/modification';
-import { errors, labelCstTypification } from '@/utils/labels';
+import { errors, labelCstTypification, labelTypification } from '@/utils/labels';
 
 import EditorRSExpression from '../EditorRSExpression';
 import { useRSEdit } from '../RSEditContext';
@@ -42,15 +44,29 @@ function FormConstituenta({
 }: FormConstituentaProps) {
   const { cstUpdate } = useCstUpdate();
   const { schema, activeCst, navigateCst } = useRSEdit();
+  const showTypification = useDialogsStore(activeCst => activeCst.showShowTypeGraph);
   const { isModified, setIsModified } = useModificationStore();
   const isProcessing = useMutatingRSForm();
 
-  const [term, setTerm] = useState(activeCst?.term_raw ?? '');
+  const {
-  const [textDefinition, setTextDefinition] = useState(activeCst?.definition_raw ?? '');
+    register,
-  const [expression, setExpression] = useState(activeCst?.definition_formal ?? '');
+    handleSubmit,
-  const [convention, setConvention] = useState(activeCst?.convention ?? '');
+    control,
-  const [typification, setTypification] = useState('N/A');
+    reset,
+    formState: { isDirty }
+  } = useForm<ICstUpdateDTO>({ resolver: zodResolver(CstUpdateSchema) });
+
   const [localParse, setLocalParse] = useState<IExpressionParse | undefined>(undefined);
+  const typification = localParse
+    ? labelTypification({
+        isValid: localParse.parseResult,
+        resultType: localParse.typification,
+        args: localParse.args
+      })
+    : activeCst
+    ? labelCstTypification(activeCst)
+    : 'N/A';
+
   const typeInfo = activeCst
     ? {
         alias: activeCst.alias,
@@ -60,67 +76,36 @@ function FormConstituenta({
     : undefined;
 
   const [forceComment, setForceComment] = useState(false);
-
   const isBasic = !!activeCst && isBasicConcept(activeCst.cst_type);
   const isElementary = !!activeCst && isBaseSet(activeCst.cst_type);
   const showConvention = !activeCst || !!activeCst.convention || forceComment || isBasic;
 
-  const showTypification = useDialogsStore(activeCst => activeCst.showShowTypeGraph);
-
   useEffect(() => {
-    if (activeCst) {
+    reset({
-      setConvention(activeCst.convention);
+      target: activeCst?.id ?? 0,
-      setTerm(activeCst.term_raw);
+      item_data: {
-      setTextDefinition(activeCst.definition_raw);
+        convention: activeCst?.convention ?? '',
-      setExpression(activeCst.definition_formal);
+        term_raw: activeCst?.term_raw ?? '',
-      setTypification(activeCst ? labelCstTypification(activeCst) : 'N/A');
+        definition_raw: activeCst?.definition_raw ?? '',
+        definition_formal: activeCst?.definition_formal ?? ''
+      }
+    });
     setForceComment(false);
     setLocalParse(undefined);
-    }
+  }, [activeCst, schema, toggleReset, reset]);
-  }, [activeCst, schema, toggleReset, setIsModified]);
 
   useLayoutEffect(() => {
     if (!activeCst) {
       setIsModified(false);
       return;
     }
-    setIsModified(
+    setIsModified(isDirty);
-      activeCst.term_raw !== term ||
-        activeCst.definition_raw !== textDefinition ||
-        activeCst.convention !== convention ||
-        activeCst.definition_formal !== expression
-    );
     return () => setIsModified(false);
-  }, [
+  }, [isDirty, activeCst, setIsModified]);
-    activeCst,
-    activeCst?.term_raw,
-    activeCst?.definition_formal,
-    activeCst?.definition_raw,
-    activeCst?.convention,
-    term,
-    textDefinition,
-    expression,
-    convention,
-    setIsModified
-  ]);
 
-  function handleSubmit(event?: React.FormEvent<HTMLFormElement>) {
+  function onSubmit(data: ICstUpdateDTO) {
-    if (event) {
-      event.preventDefault();
-    }
-    if (!activeCst || isProcessing || !schema) {
-      return;
-    }
-    const data: ICstUpdateDTO = {
-      target: activeCst.id,
-      item_data: {
-        term_raw: activeCst.term_raw !== term ? term : undefined,
-        definition_formal: activeCst.definition_formal !== expression ? expression : undefined,
-        definition_raw: activeCst.definition_raw !== textDefinition ? textDefinition : undefined,
-        convention: activeCst.convention !== convention ? convention : undefined
-      }
-    };
     cstUpdate({ itemID: schema.id, data });
+    reset({ ...data });
   }
 
   function handleTypeGraph(event: CProps.EventMouse) {
@@ -136,7 +121,15 @@ function FormConstituenta({
   return (
     <div className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
       {activeCst ? <EditorControls disabled={disabled} constituenta={activeCst} onEditTerm={onEditTerm} /> : null}
-      <form id={id} className={clsx('cc-column', 'mt-1 md:w-[48.8rem] shrink-0', 'px-6 py-1')} onSubmit={handleSubmit}>
+      <form
+        id={id}
+        className={clsx('cc-column', 'mt-1 md:w-[48.8rem] shrink-0', 'px-6 py-1')}
+        onSubmit={event => void handleSubmit(onSubmit)(event)}
+      >
+        <Controller
+          control={control}
+          name='item_data.term_raw'
+          render={({ field }) => (
             <RefsInput
               key='cst_term'
               id='cst_term'
@@ -145,11 +138,13 @@ function FormConstituenta({
               placeholder='Обозначение для текстовых определений'
               schema={schema}
               onOpenEdit={navigateCst}
-          value={term}
+              value={field.value}
               initialValue={activeCst?.term_raw ?? ''}
               resolved={activeCst?.term_resolved ?? 'Конституента не выбрана'}
               disabled={disabled}
-          onChange={newValue => setTerm(newValue)}
+              onChange={newValue => field.onChange(newValue)}
+            />
+          )}
         />
         {activeCst ? (
           <TextArea
@@ -168,6 +163,10 @@ function FormConstituenta({
         {activeCst ? (
           <>
             {!!activeCst.definition_formal || !isElementary ? (
+              <Controller
+                control={control}
+                name='item_data.definition_formal'
+                render={({ field }) => (
                   <EditorRSExpression
                     id='cst_expression'
                     label={
@@ -182,18 +181,23 @@ function FormConstituenta({
                         ? 'Родоструктурное выражение'
                         : 'Типизация родовой структуры'
                     }
-                value={expression}
+                    value={field.value ?? ''}
                     activeCst={activeCst}
                     disabled={disabled || activeCst.is_inherited}
                     toggleReset={toggleReset}
-                onChangeExpression={newValue => setExpression(newValue)}
+                    onChange={newValue => field.onChange(newValue)}
-                onChangeTypification={setTypification}
                     onChangeLocalParse={setLocalParse}
                     onOpenEdit={navigateCst}
                     onShowTypeGraph={handleTypeGraph}
                   />
+                )}
+              />
             ) : null}
             {!!activeCst.definition_raw || !isElementary ? (
+              <Controller
+                control={control}
+                name='item_data.definition_raw'
+                render={({ field }) => (
                   <RefsInput
                     id='cst_definition'
                     label='Текстовое определение'
@@ -202,25 +206,26 @@ function FormConstituenta({
                     maxHeight='8rem'
                     schema={schema}
                     onOpenEdit={navigateCst}
-                value={textDefinition}
+                    value={field.value}
                     initialValue={activeCst.definition_raw}
                     resolved={activeCst.definition_resolved}
                     disabled={disabled}
-                onChange={newValue => setTextDefinition(newValue)}
+                    onChange={newValue => field.onChange(newValue)}
+                  />
+                )}
               />
             ) : null}
 
             {showConvention ? (
               <TextArea
                 id='cst_convention'
+                {...register('item_data.convention')}
                 fitContent
                 className='max-h-[8rem]'
                 spellCheck
                 label={isBasic ? 'Конвенция' : 'Комментарий'}
                 placeholder={isBasic ? 'Договоренность об интерпретации' : 'Пояснение разработчика'}
-                value={convention}
                 disabled={disabled || (isBasic && activeCst.is_inherited)}
-                onChange={event => setConvention(event.target.value)}
               />
             ) : null}
 

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

@@ -22,7 +22,7 @@ import { TokenID } from '@/models/rslang';
 import { useDialogsStore } from '@/stores/dialogs';
 import { usePreferencesStore } from '@/stores/preferences';
 import { transformAST } from '@/utils/codemirror';
-import { errors, labelTypification } from '@/utils/labels';
+import { errors } from '@/utils/labels';
 
 import { useRSEdit } from '../RSEditContext';
 import ParsingResult from './ParsingResult';
@@ -32,17 +32,17 @@ import ToolbarRSExpression from './ToolbarRSExpression';
 
 interface EditorRSExpressionProps {
   id?: string;
-  activeCst: IConstituenta;
   value: string;
+  onChange: (newValue: string) => void;
+
+  activeCst: IConstituenta;
+
   label: string;
   placeholder?: string;
-
   disabled?: boolean;
   toggleReset?: boolean;
 
-  onChangeTypification: (typification: string) => void;
   onChangeLocalParse: (typification: IExpressionParse | undefined) => void;
-  onChangeExpression: (newValue: string) => void;
   onOpenEdit?: (cstID: ConstituentaID) => void;
   onShowTypeGraph: (event: CProps.EventMouse) => void;
 }
@@ -52,9 +52,8 @@ function EditorRSExpression({
   disabled,
   value,
   toggleReset,
-  onChangeTypification,
+  onChange,
   onChangeLocalParse,
-  onChangeExpression,
   onOpenEdit,
   onShowTypeGraph,
   ...restProps
@@ -89,7 +88,7 @@ function EditorRSExpression({
   }, [activeCst, toggleReset]);
 
   function handleChange(newValue: string) {
-    onChangeExpression(newValue);
+    onChange(newValue);
     setIsModified(newValue !== activeCst.definition_formal);
   }
 
@@ -102,13 +101,6 @@ function EditorRSExpression({
         rsInput.current?.view?.focus();
       }
       setIsModified(false);
-      onChangeTypification(
-        labelTypification({
-          isValid: parse.parseResult,
-          resultType: parse.typification,
-          args: parse.args
-        })
-      );
       callback?.(parse);
     });
   }