B: Small dialog fixes
Some checks failed
Frontend CI / build (22.x) (push) Has been cancelled

This commit is contained in:
Ivan 2024-08-29 12:41:59 +03:00
parent 88652d57d3
commit 25029a212b
6 changed files with 49 additions and 45 deletions

View File

@ -9,6 +9,7 @@ import Modal, { ModalProps } from '@/components/ui/Modal';
import Overlay from '@/components/ui/Overlay'; import Overlay from '@/components/ui/Overlay';
import TabLabel from '@/components/ui/TabLabel'; import TabLabel from '@/components/ui/TabLabel';
import AnimateFade from '@/components/wrap/AnimateFade'; import AnimateFade from '@/components/wrap/AnimateFade';
import { useLibrary } from '@/context/LibraryContext';
import usePartialUpdate from '@/hooks/usePartialUpdate'; import usePartialUpdate from '@/hooks/usePartialUpdate';
import { HelpTopic } from '@/models/miscellaneous'; import { HelpTopic } from '@/models/miscellaneous';
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform'; import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
@ -33,8 +34,10 @@ export enum TabID {
} }
function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }: DlgConstituentaTemplateProps) { function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }: DlgConstituentaTemplateProps) {
const { retrieveTemplate } = useLibrary();
const [activeTab, setActiveTab] = useState(TabID.TEMPLATE); const [activeTab, setActiveTab] = useState(TabID.TEMPLATE);
const [templateSchema, setTemplateSchema] = useState<IRSForm | undefined>(undefined);
const [template, updateTemplate] = usePartialUpdate<ITemplateState>({}); const [template, updateTemplate] = usePartialUpdate<ITemplateState>({});
const [substitutes, updateSubstitutes] = usePartialUpdate<IArgumentsState>({ const [substitutes, updateSubstitutes] = usePartialUpdate<IArgumentsState>({
definition: '', definition: '',
@ -43,7 +46,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
const [constituenta, updateConstituenta] = usePartialUpdate<ICstCreateData>({ const [constituenta, updateConstituenta] = usePartialUpdate<ICstCreateData>({
cst_type: CstType.TERM, cst_type: CstType.TERM,
insert_after: insertAfter ?? null, insert_after: insertAfter ?? null,
alias: '', alias: generateAlias(CstType.TERM, schema),
convention: '', convention: '',
definition_formal: '', definition_formal: '',
definition_raw: '', definition_raw: '',
@ -55,8 +58,12 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
const handleSubmit = () => onCreate(constituenta); const handleSubmit = () => onCreate(constituenta);
useLayoutEffect(() => { useLayoutEffect(() => {
updateConstituenta({ alias: generateAlias(constituenta.cst_type, schema) }); if (!template.templateID) {
}, [constituenta.cst_type, updateConstituenta, schema]); setTemplateSchema(undefined);
} else {
retrieveTemplate(template.templateID, setTemplateSchema);
}
}, [template.templateID, retrieveTemplate]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (!template.prototype) { if (!template.prototype) {
@ -72,6 +79,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
} else { } else {
updateConstituenta({ updateConstituenta({
cst_type: template.prototype.cst_type, cst_type: template.prototype.cst_type,
alias: generateAlias(template.prototype.cst_type, schema),
definition_raw: template.prototype.definition_raw, definition_raw: template.prototype.definition_raw,
definition_formal: template.prototype.definition_formal, definition_formal: template.prototype.definition_formal,
term_raw: template.prototype.term_raw term_raw: template.prototype.term_raw
@ -85,7 +93,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
})) }))
}); });
} }
}, [template.prototype, updateConstituenta, updateSubstitutes]); }, [template.prototype, updateConstituenta, updateSubstitutes, schema]);
useLayoutEffect(() => { useLayoutEffect(() => {
if (substitutes.arguments.length === 0 || !template.prototype) { if (substitutes.arguments.length === 0 || !template.prototype) {
@ -95,12 +103,13 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
const type = inferTemplatedType(template.prototype.cst_type, substitutes.arguments); const type = inferTemplatedType(template.prototype.cst_type, substitutes.arguments);
updateConstituenta({ updateConstituenta({
cst_type: type, cst_type: type,
alias: generateAlias(type, schema),
definition_formal: definition definition_formal: definition
}); });
updateSubstitutes({ updateSubstitutes({
definition: definition definition: definition
}); });
}, [substitutes.arguments, template.prototype, updateConstituenta, updateSubstitutes]); }, [substitutes.arguments, template.prototype, updateConstituenta, updateSubstitutes, schema]);
useLayoutEffect(() => { useLayoutEffect(() => {
setValidated(!!template.prototype && validateNewAlias(constituenta.alias, constituenta.cst_type, schema)); setValidated(!!template.prototype && validateNewAlias(constituenta.alias, constituenta.cst_type, schema));
@ -109,10 +118,10 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
const templatePanel = useMemo( const templatePanel = useMemo(
() => ( () => (
<TabPanel> <TabPanel>
<TabTemplate state={template} partialUpdate={updateTemplate} /> <TabTemplate state={template} partialUpdate={updateTemplate} templateSchema={templateSchema} />
</TabPanel> </TabPanel>
), ),
[template, updateTemplate] [template, templateSchema, updateTemplate]
); );
const argumentsPanel = useMemo( const argumentsPanel = useMemo(

View File

@ -216,6 +216,7 @@ function TabArguments({ state, schema, partialUpdate }: TabArgumentsProps) {
<RSInput <RSInput
disabled disabled
noTooltip
id='result' id='result'
placeholder='Итоговое определение' placeholder='Итоговое определение'
className='mt-[1.2rem]' className='mt-[1.2rem]'

View File

@ -11,6 +11,7 @@ import { useLibrary } from '@/context/LibraryContext';
import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform'; import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
import { applyFilterCategory } from '@/models/rsformAPI'; import { applyFilterCategory } from '@/models/rsformAPI';
import { prefixes } from '@/utils/constants'; import { prefixes } from '@/utils/constants';
export interface ITemplateState { export interface ITemplateState {
templateID?: number; templateID?: number;
prototype?: IConstituenta; prototype?: IConstituenta;
@ -20,11 +21,11 @@ export interface ITemplateState {
interface TabTemplateProps { interface TabTemplateProps {
state: ITemplateState; state: ITemplateState;
partialUpdate: Dispatch<Partial<ITemplateState>>; partialUpdate: Dispatch<Partial<ITemplateState>>;
templateSchema?: IRSForm;
} }
function TabTemplate({ state, partialUpdate }: TabTemplateProps) { function TabTemplate({ state, partialUpdate, templateSchema }: TabTemplateProps) {
const { templates, retrieveTemplate } = useLibrary(); const { templates } = useLibrary();
const [templateSchema, setTemplateSchema] = useState<IRSForm | undefined>(undefined);
const [filteredData, setFilteredData] = useState<IConstituenta[]>([]); const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
@ -65,14 +66,6 @@ function TabTemplate({ state, partialUpdate }: TabTemplateProps) {
} }
}, [templates, state.templateID, partialUpdate]); }, [templates, state.templateID, partialUpdate]);
useEffect(() => {
if (!state.templateID) {
setTemplateSchema(undefined);
} else {
retrieveTemplate(state.templateID, setTemplateSchema);
}
}, [state.templateID, retrieveTemplate]);
useEffect(() => { useEffect(() => {
if (!templateSchema) { if (!templateSchema) {
return; return;

View File

@ -1,11 +1,11 @@
'use client'; 'use client';
import { useEffect, useLayoutEffect, useState } from 'react'; import { useState } from 'react';
import Modal, { ModalProps } from '@/components/ui/Modal'; import Modal, { ModalProps } from '@/components/ui/Modal';
import usePartialUpdate from '@/hooks/usePartialUpdate'; import usePartialUpdate from '@/hooks/usePartialUpdate';
import { CstType, ICstCreateData, IRSForm } from '@/models/rsform'; import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
import { generateAlias, validateNewAlias } from '@/models/rsformAPI'; import { generateAlias } from '@/models/rsformAPI';
import FormCreateCst from './FormCreateCst'; import FormCreateCst from './FormCreateCst';
@ -21,7 +21,7 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
initial || { initial || {
cst_type: CstType.BASE, cst_type: CstType.BASE,
insert_after: null, insert_after: null,
alias: '', alias: generateAlias(CstType.BASE, schema),
convention: '', convention: '',
definition_formal: '', definition_formal: '',
definition_raw: '', definition_raw: '',
@ -32,14 +32,6 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
const handleSubmit = () => onCreate(cstData); const handleSubmit = () => onCreate(cstData);
useLayoutEffect(() => {
updateCstData({ alias: generateAlias(cstData.cst_type, schema) });
}, [cstData.cst_type, updateCstData, schema]);
useEffect(() => {
setValidated(validateNewAlias(cstData.alias, cstData.cst_type, schema));
}, [cstData.alias, cstData.cst_type, schema]);
return ( return (
<Modal <Modal
header='Создание конституенты' header='Создание конституенты'

View File

@ -2,7 +2,7 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import { useLayoutEffect, useMemo, useState } from 'react'; import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import BadgeHelp from '@/components/info/BadgeHelp'; import BadgeHelp from '@/components/info/BadgeHelp';
import RSInput from '@/components/RSInput'; import RSInput from '@/components/RSInput';
@ -33,7 +33,6 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
const showConvention = useMemo(() => !!state.convention || forceComment || isBasic, [state, forceComment, isBasic]); const showConvention = useMemo(() => !!state.convention || forceComment || isBasic, [state, forceComment, isBasic]);
useLayoutEffect(() => { useLayoutEffect(() => {
partialUpdate({ alias: generateAlias(state.cst_type, schema) });
setForceComment(false); setForceComment(false);
}, [state.cst_type, partialUpdate, schema]); }, [state.cst_type, partialUpdate, schema]);
@ -43,30 +42,35 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
} }
}, [state.alias, state.cst_type, schema, setValidated]); }, [state.alias, state.cst_type, schema, setValidated]);
const handleTypeChange = useCallback(
(target: CstType) => partialUpdate({ cst_type: target, alias: generateAlias(target, schema) }),
[partialUpdate, schema, generateAlias]
);
return ( return (
<AnimatePresence> <AnimatePresence>
<div key='dlg_cst_alias_picker' className='flex items-center self-center'> <div key='dlg_cst_alias_picker' className='flex items-center self-center gap-3'>
<SelectSingle <SelectSingle
id='dlg_cst_type' id='dlg_cst_type'
placeholder='Выберите тип' placeholder='Выберите тип'
className='w-[15rem]' className='w-[15rem]'
options={SelectorCstType} options={SelectorCstType}
value={{ value: state.cst_type, label: labelCstType(state.cst_type) }} value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
onChange={data => partialUpdate({ cst_type: data?.value ?? CstType.BASE })} onChange={data => handleTypeChange(data?.value ?? CstType.BASE)}
/>
<BadgeHelp
topic={HelpTopic.CC_CONSTITUENTA}
offset={16}
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
/> />
<TextInput <TextInput
id='dlg_cst_alias' id='dlg_cst_alias'
dense dense
label='Имя' label='Имя'
className='w-[7rem] ml-3' className='w-[7rem] mr-8'
value={state.alias} value={state.alias}
onChange={event => partialUpdate({ alias: event.target.value })} onChange={event => partialUpdate({ alias: event.target.value })}
/> />
<BadgeHelp
topic={HelpTopic.CC_CONSTITUENTA}
offset={16}
className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
/>
</div> </div>
<TextArea <TextArea
key='dlg_cst_term' key='dlg_cst_term'
@ -82,6 +86,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
<AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}> <AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}>
<RSInput <RSInput
id='dlg_cst_expression' id='dlg_cst_expression'
noTooltip
label={ label={
state.cst_type === CstType.STRUCTURED state.cst_type === CstType.STRUCTURED
? 'Область определения' ? 'Область определения'

View File

@ -437,10 +437,14 @@ export const RSEditState = ({
const createCst = useCallback( const createCst = useCallback(
(type: CstType | undefined, skipDialog: boolean, definition?: string) => { (type: CstType | undefined, skipDialog: boolean, definition?: string) => {
if (!model.schema) {
return;
}
const targetType = type ?? activeCst?.cst_type ?? CstType.BASE;
const data: ICstCreateData = { const data: ICstCreateData = {
insert_after: activeCst?.id ?? null, insert_after: activeCst?.id ?? null,
cst_type: type ?? activeCst?.cst_type ?? CstType.BASE, cst_type: targetType,
alias: '', alias: generateAlias(targetType, model.schema),
term_raw: '', term_raw: '',
definition_formal: definition ?? '', definition_formal: definition ?? '',
definition_raw: '', definition_raw: '',
@ -454,17 +458,17 @@ export const RSEditState = ({
setShowCreateCst(true); setShowCreateCst(true);
} }
}, },
[activeCst, handleCreateCst] [activeCst, handleCreateCst, model.schema]
); );
const cloneCst = useCallback(() => { const cloneCst = useCallback(() => {
if (!activeCst) { if (!activeCst || !model.schema) {
return; return;
} }
const data: ICstCreateData = { const data: ICstCreateData = {
insert_after: activeCst.id, insert_after: activeCst.id,
cst_type: activeCst.cst_type, cst_type: activeCst.cst_type,
alias: '', alias: generateAlias(activeCst.cst_type, model.schema),
term_raw: activeCst.term_raw, term_raw: activeCst.term_raw,
definition_formal: activeCst.definition_formal, definition_formal: activeCst.definition_formal,
definition_raw: activeCst.definition_raw, definition_raw: activeCst.definition_raw,
@ -472,7 +476,7 @@ export const RSEditState = ({
term_forms: activeCst.term_forms term_forms: activeCst.term_forms
}; };
handleCreateCst(data); handleCreateCst(data);
}, [activeCst, handleCreateCst]); }, [activeCst, handleCreateCst, model.schema]);
const renameCst = useCallback(() => { const renameCst = useCallback(() => {
if (!activeCst) { if (!activeCst) {