B: Fix small bugs and refactor away useEffect

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

@@ -1,6 +1,6 @@
 import { queryOptions } from '@tanstack/react-query';
 
-import { axiosDelete, axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
+import { axiosGet, axiosPatch, axiosPost } from '@/backend/apiTransport';
 import { DELAYS } from '@/backend/configuration';
 import { ILibraryItemReference, ILibraryItemVersioned, LibraryItemID, VersionID } from '@/models/library';
 import { ICstSubstitute, ICstSubstitutions } from '@/models/oss';
@@ -182,7 +182,7 @@ export const rsformsApi = {
       }
     }),
   cstDelete: ({ itemID, data }: { itemID: LibraryItemID; data: IConstituentaList }) =>
-    axiosDelete<IConstituentaList, IRSFormDTO>({
+    axiosPatch<IConstituentaList, IRSFormDTO>({
       endpoint: `/api/rsforms/${itemID}/delete-multiple-cst`,
       request: {
         data: data,

rsconcept/frontend/src/components/info/BadgeConstituenta.tsx

@@ -22,7 +22,7 @@ function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstitue
 
   return (
     <div
-      id={`${prefixID}${value.id}`}
+      id={prefixID ? `${prefixID}${value.id}` : undefined}
       className={clsx(
         'min-w-[3.1rem] max-w-[3.1rem]',
         'px-1',

rsconcept/frontend/src/components/select/PickConstituenta.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
@@ -12,16 +12,14 @@ import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
 interface PickConstituentaProps extends CProps.Styling {
   id?: string;
+  items: IConstituenta[];
   value?: IConstituenta;
   onChange: (newValue: IConstituenta) => void;
 
-  prefixID: string;
-  data?: IConstituenta[];
   rows?: number;
 
   initialFilter?: string;
@@ -34,11 +32,10 @@ const columnHelper = createColumnHelper<IConstituenta>();
 
 function PickConstituenta({
   id,
-  data,
+  items,
   value,
   initialFilter = '',
   rows = 4,
-  prefixID = prefixes.cst_list,
   describeFunc = describeConstituenta,
   matchFunc = (cst, filter) => matchConstituenta(cst, filter, CstMatchMode.ALL),
   onBeginFilter,
@@ -46,21 +43,10 @@ function PickConstituenta({
   className,
   ...restProps
 }: PickConstituentaProps) {
-  const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
   const [filterText, setFilterText] = useState(initialFilter);
 
-  useEffect(() => {
+  const initialData = onBeginFilter ? items.filter(onBeginFilter) : items;
-    if (!data) {
+  const filteredData = filterText === '' ? initialData : initialData.filter(cst => matchFunc(cst, filterText));
-      setFilteredData([]);
-    } else {
-      const newData = onBeginFilter ? data.filter(onBeginFilter) : data;
-      if (filterText) {
-        setFilteredData(newData.filter(cst => matchFunc(cst, filterText)));
-      } else {
-        setFilteredData(newData);
-      }
-    }
-  }, [data, filterText, matchFunc, onBeginFilter]);
 
   const columns = [
     columnHelper.accessor('alias', {
@@ -68,7 +54,7 @@ function PickConstituenta({
       size: 65,
       minSize: 65,
       maxSize: 65,
-      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} />
     }),
     columnHelper.accessor(cst => describeFunc(cst), {
       id: 'description',

rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx

@@ -22,9 +22,8 @@ interface PickMultiConstituentaProps extends CProps.Styling {
   onChange: React.Dispatch<React.SetStateAction<ConstituentaID[]>>;
 
   schema: IRSForm;
-  data: IConstituenta[];
+  items: IConstituenta[];
 
-  prefixID: string;
   rows?: number;
   noBorder?: boolean;
 }
@@ -34,8 +33,7 @@ const columnHelper = createColumnHelper<IConstituenta>();
 function PickMultiConstituenta({
   id,
   schema,
-  data,
+  items,
-  prefixID,
   rows,
   noBorder,
   value,
@@ -44,12 +42,13 @@ function PickMultiConstituenta({
   ...restProps
 }: PickMultiConstituentaProps) {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [filtered, setFiltered] = useState<IConstituenta[]>(data);
   const [filterText, setFilterText] = useState('');
 
+  const [filtered, setFiltered] = useState<IConstituenta[]>(items);
+
   // TODO: extract graph fold logic to separate function
   const foldedGraph = (() => {
-    if (data.length === schema.items.length) {
+    if (items.length === schema.items.length) {
       return schema.graph;
     }
     const newGraph = new Graph();
@@ -60,7 +59,7 @@ function PickMultiConstituenta({
       });
     });
     schema.items
-      .filter(item => data.find(cst => cst.id === item.id) === undefined)
+      .filter(item => items.find(cst => cst.id === item.id) === undefined)
       .forEach(item => {
         newGraph.foldNode(item.id);
       });
@@ -80,17 +79,17 @@ function PickMultiConstituenta({
   }, [filtered, setRowSelection, value]);
 
   useEffect(() => {
-    if (data.length === 0) {
+    if (items.length === 0) {
       setFiltered([]);
     } else if (filterText) {
-      setFiltered(data.filter(cst => matchConstituenta(cst, filterText, CstMatchMode.ALL)));
+      setFiltered(items.filter(cst => matchConstituenta(cst, filterText, CstMatchMode.ALL)));
     } else {
-      setFiltered(data);
+      setFiltered(items);
     }
-  }, [filterText, data]);
+  }, [filterText, items]);
 
   function handleRowSelection(updater: React.SetStateAction<RowSelectionState>) {
-    if (!data) {
+    if (!items) {
       onChange([]);
     } else {
       const newRowSelection = typeof updater === 'function' ? updater(rowSelection) : updater;
@@ -109,7 +108,7 @@ function PickMultiConstituenta({
       id: 'alias',
       header: () => <span className='pl-3'>Имя</span>,
       size: 65,
-      cell: props => <BadgeConstituenta value={props.row.original} prefixID={prefixID} />
+      cell: props => <BadgeConstituenta value={props.row.original} />
     }),
     columnHelper.accessor(cst => describeConstituenta(cst), {
       id: 'description',
@@ -122,7 +121,7 @@ function PickMultiConstituenta({
     <div className={clsx(noBorder ? '' : 'border', className)} {...restProps}>
       <div className={clsx('px-3 flex justify-between items-center', 'clr-input', 'border-b', 'rounded-t-md')}>
         <div className='w-[24ch] select-none whitespace-nowrap'>
-          {data.length > 0 ? `Выбраны ${value.length} из ${data.length}` : 'Конституенты'}
+          {items.length > 0 ? `Выбраны ${value.length} из ${items.length}` : 'Конституенты'}
         </div>
         <SearchBar
           id='dlg_constituents_search'

rsconcept/frontend/src/components/select/PickSubstitutions.tsx

@@ -25,7 +25,6 @@ interface PickSubstitutionsProps extends CProps.Styling {
 
   suggestions?: ICstSubstitute[];
 
-  prefixID: string;
   rows?: number;
   allowSelfSubstitution?: boolean;
 
@@ -39,7 +38,6 @@ function PickSubstitutions({
   value,
   onChange,
   suggestions,
-  prefixID,
   rows,
   schemas,
   filter,
@@ -162,9 +160,7 @@ function PickSubstitutions({
     columnHelper.accessor(item => item.substitution.alias, {
       id: 'left_alias',
       size: 65,
-      cell: props => (
+      cell: props => <BadgeConstituenta value={props.row.original.substitution} />
-        <BadgeConstituenta value={props.row.original.substitution} prefixID={`${prefixID}_${props.row.index}_1_`} />
-      )
     }),
     columnHelper.display({
       id: 'status',
@@ -174,9 +170,7 @@ function PickSubstitutions({
     columnHelper.accessor(item => item.original.alias, {
       id: 'right_alias',
       size: 65,
-      cell: props => (
+      cell: props => <BadgeConstituenta value={props.row.original.original} />
-        <BadgeConstituenta value={props.row.original.original} prefixID={`${prefixID}_${props.row.index}_2_`} />
-      )
     }),
     columnHelper.accessor(item => item.original_source.alias, {
       id: 'right_schema',

rsconcept/frontend/src/components/ui/Checkbox.tsx

@@ -64,7 +64,7 @@ function Checkbox({
       <div
         className={clsx(
           'max-w-[1rem] min-w-[1rem] h-4', //
-          'pt-[0.1rem] pl-[0.1rem]',
+          'pt-[0.05rem] pl-[0.05rem]',
           'border rounded-sm',
           'cc-animate-color',
           {

rsconcept/frontend/src/components/ui/CheckboxTristate.tsx

@@ -66,7 +66,7 @@ function CheckboxTristate({
       <div
         className={clsx(
           'w-4 h-4', //
-          'pt-[0.1rem] pl-[0.1rem]',
+          'pt-[0.05rem] pl-[0.05rem]',
           'border rounded-sm',
           'cc-animate-color',
           {

rsconcept/frontend/src/dialogs/DlgCstTemplate/TabArguments.tsx

@@ -13,7 +13,6 @@ import NoData from '@/components/ui/NoData';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { IArgumentValue } from '@/models/rslang';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';
 
 interface TabArgumentsProps {
   state: IArgumentsState;
@@ -189,9 +188,8 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
       <PickConstituenta
         id='dlg_argument_picker'
         value={selectedCst}
-        data={schema.items}
+        items={schema.items}
         onChange={handleSelectConstituenta}
-        prefixID={prefixes.cst_modal_list}
         rows={7}
       />
 

rsconcept/frontend/src/dialogs/DlgCstTemplate/TabTemplate.tsx

@@ -9,7 +9,6 @@ import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
 import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
 import { applyFilterCategory } from '@/models/rsformAPI';
-import { prefixes } from '@/utils/constants';
 
 export interface ITemplateState {
   templateID?: number;
@@ -101,9 +100,8 @@ function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps)
       <PickConstituenta
         id='dlg_template_picker'
         value={state.prototype}
-        data={filteredData}
+        items={filteredData}
         onChange={cst => partialUpdate({ prototype: cst })}
-        prefixID={prefixes.cst_template_ist}
         className='rounded-t-none'
         rows={8}
       />

rsconcept/frontend/src/dialogs/DlgEditOperation/TabSynthesis.tsx

@@ -3,7 +3,6 @@ import TextArea from '@/components/ui/TextArea';
 import { ICstSubstitute } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { APP_COLORS } from '@/styling/color';
-import { prefixes } from '@/utils/constants';
 
 interface TabSynthesisProps {
   validationText: string;
@@ -27,7 +26,6 @@ function TabSynthesis({
     <div className='cc-fade-in cc-column mt-3'>
       <PickSubstitutions
         schemas={schemas}
-        prefixID={prefixes.dlg_cst_substitutes_list}
         rows={8}
         value={substitutions}
         onChange={setSubstitutions}

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

@@ -12,7 +12,6 @@ import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
 import { CstMatchMode } from '@/models/miscellaneous';
 import { IConstituenta, IRSForm } from '@/models/rsform';
 import { matchConstituenta } from '@/models/rsformAPI';
-import { prefixes } from '@/utils/constants';
 import { IGrammemeOption, SelectorGrammemes } from '@/utils/selectors';
 
 import { IReferenceInputState } from './DlgEditReference';
@@ -63,9 +62,8 @@ function TabEntityReference({ initial, schema, onChangeValid, onChangeReference
         id='dlg_reference_entity_picker'
         initialFilter={initial.text}
         value={selectedCst}
-        data={schema.items}
+        items={schema.items}
         onChange={handleSelectConstituenta}
-        prefixID={prefixes.cst_modal_list}
         describeFunc={cst => cst.term_resolved}
         matchFunc={(cst, filter) => matchConstituenta(cst, filter, CstMatchMode.TERM)}
         onBeginFilter={cst => cst.term_resolved !== ''}

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabConstituents.tsx

@@ -4,7 +4,6 @@ import { useRSFormSuspense } from '@/backend/rsform/useRSForm';
 import PickMultiConstituenta from '@/components/select/PickMultiConstituenta';
 import { LibraryItemID } from '@/models/library';
 import { ConstituentaID } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';
 
 interface TabConstituentsProps {
   itemID: LibraryItemID;
@@ -16,14 +15,7 @@ function TabConstituents({ itemID, selected, setSelected }: TabConstituentsProps
   const { schema } = useRSFormSuspense({ itemID });
 
   return (
-    <PickMultiConstituenta
+    <PickMultiConstituenta schema={schema} items={schema.items} rows={13} value={selected} onChange={setSelected} />
-      schema={schema}
-      data={schema.items}
-      rows={13}
-      prefixID={prefixes.cst_inline_synth_list}
-      value={selected}
-      onChange={setSelected}
-    />
   );
 }
 

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSubstitutions.tsx

@@ -5,7 +5,6 @@ import PickSubstitutions from '@/components/select/PickSubstitutions';
 import { LibraryItemID } from '@/models/library';
 import { ICstSubstitute } from '@/models/oss';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';
 
 interface TabSubstitutionsProps {
   receiver: IRSForm;
@@ -25,7 +24,6 @@ function TabSubstitutions({ sourceID, receiver, selected, substitutions, setSubs
       value={substitutions}
       onChange={setSubstitutions}
       rows={10}
-      prefixID={prefixes.cst_inline_synth_substitutes}
       schemas={schemas}
       filter={cst => cst.id !== source?.id || selected.includes(cst.id)}
     />

rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx

@@ -18,7 +18,6 @@ import { IOperation, IOperationSchema } from '@/models/oss';
 import { getRelocateCandidates } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
-import { prefixes } from '@/utils/constants';
 
 export interface DlgRelocateConstituentsProps {
   oss: IOperationSchema;
@@ -124,9 +123,8 @@ function DlgRelocateConstituents() {
           <PickMultiConstituenta
             noBorder
             schema={sourceData.schema}
-            data={filteredConstituents}
+            items={filteredConstituents}
             rows={12}
-            prefixID={prefixes.dlg_cst_constituents_list}
             value={selected}
             onChange={setSelected}
           />

rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx

@@ -9,7 +9,6 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, ICstSubstitutions } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
-import { prefixes } from '@/utils/constants';
 
 export interface DlgSubstituteCstProps {
   schema: IRSForm;
@@ -43,7 +42,6 @@ function DlgSubstituteCst() {
         value={substitutions}
         onChange={setSubstitutions}
         rows={6}
-        prefixID={prefixes.dlg_cst_substitutes_list}
         schemas={[schema]}
       />
     </Modal>

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

@@ -14,7 +14,7 @@ import Indicator from '@/components/ui/Indicator';
 import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
-import { ConstituentaID, CstType } from '@/models/rsform';
+import { CstType } from '@/models/rsform';
 import { isBaseSet, isBasicConcept, isFunctional } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { useDialogsStore } from '@/stores/dialogs';
@@ -31,7 +31,6 @@ interface FormConstituentaProps {
   toggleReset: boolean;
 
   onEditTerm: () => void;
-  onOpenEdit?: (cstID: ConstituentaID) => void;
 }
 
 function FormConstituenta({
@@ -39,11 +38,10 @@ function FormConstituenta({
   id,
 
   toggleReset,
-  onEditTerm,
+  onEditTerm
-  onOpenEdit
 }: FormConstituentaProps) {
   const { cstUpdate } = useCstUpdate();
-  const { schema, activeCst } = useRSEdit();
+  const { schema, activeCst, navigateCst } = useRSEdit();
   const { isModified, setIsModified } = useModificationStore();
   const isProcessing = useMutatingRSForm();
 
@@ -146,7 +144,7 @@ function FormConstituenta({
           maxHeight='8rem'
           placeholder='Обозначение для текстовых определений'
           schema={schema}
-          onOpenEdit={onOpenEdit}
+          onOpenEdit={navigateCst}
           value={term}
           initialValue={activeCst?.term_raw ?? ''}
           resolved={activeCst?.term_resolved ?? 'Конституента не выбрана'}
@@ -191,7 +189,7 @@ function FormConstituenta({
                 onChangeExpression={newValue => setExpression(newValue)}
                 onChangeTypification={setTypification}
                 onChangeLocalParse={setLocalParse}
-                onOpenEdit={onOpenEdit}
+                onOpenEdit={navigateCst}
                 onShowTypeGraph={handleTypeGraph}
               />
             ) : null}
@@ -203,7 +201,7 @@ function FormConstituenta({
                 minHeight='3.75rem'
                 maxHeight='8rem'
                 schema={schema}
-                onOpenEdit={onOpenEdit}
+                onOpenEdit={navigateCst}
                 value={textDefinition}
                 initialValue={activeCst.definition_raw}
                 resolved={activeCst.definition_resolved}

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

@@ -193,7 +193,7 @@ export const RSEditState = ({
       navigateRSForm({ tab: activeTab, activeID: newCst.id });
       if (activeTab === RSTabID.CST_LIST) {
         setTimeout(() => {
-          const element = document.getElementById(`${prefixes.cst_list}${newCst.alias}`);
+          const element = document.getElementById(`${prefixes.cst_list}${newCst.id}`);
           if (element) {
             element.scrollIntoView({
               behavior: 'smooth',

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx

@@ -36,7 +36,7 @@ function TableSideConstituents({
     }
     if (autoScroll) {
       setTimeout(() => {
-        const element = document.getElementById(`${prefixes.cst_side_table}${activeCst.alias}`);
+        const element = document.getElementById(`${prefixes.cst_side_table}${activeCst.id}`);
         if (element) {
           element.scrollIntoView({
             behavior: 'smooth',

rsconcept/frontend/src/utils/constants.ts

@@ -125,15 +125,9 @@ export const prefixes = {
   page_size: 'page_size_',
   oss_list: 'oss_list_',
   cst_list: 'cst_list_',
-  cst_inline_synth_list: 'cst_inline_synth_list_',
-  cst_inline_synth_substitutes: 'cst_inline_synth_substitutes_',
   cst_side_table: 'cst_side_table_',
   cst_hidden_list: 'cst_hidden_list_',
-  cst_modal_list: 'cst_modal_list_',
-  cst_template_ist: 'cst_template_list_',
-  cst_wordform_list: 'cst_wordform_list_',
   cst_status_list: 'cst_status_list_',
-  cst_match_mode_list: 'cst_match_mode_list_',
   cst_source_list: 'cst_source_list_',
   cst_delete_list: 'cst_delete_list_',
   cst_dependant_list: 'cst_dependant_list_',
@@ -150,7 +144,5 @@ export const prefixes = {
   user_subs: 'user_subs_',
   user_editors: 'user_editors_',
   wordform_list: 'wordform_list_',
-  rsedit_btn: 'rsedit_btn_',
+  rsedit_btn: 'rsedit_btn_'
-  dlg_cst_substitutes_list: 'dlg_cst_substitutes_list_',
-  dlg_cst_constituents_list: 'dlg_cst_constituents_list_'
 };