From cad521f46dd508992cfb440b474bdc7867d84d8f Mon Sep 17 00:00:00 2001 From: Ivan <8611739+IRBorisov@users.noreply.github.com> Date: Tue, 4 Mar 2025 14:30:28 +0300 Subject: [PATCH] R: Refactor constituents search --- .../ViewConstituents/ConstituentsSearch.tsx | 52 ++-------------- .../TableSideConstituents.tsx | 60 +++++++++++++++---- .../ViewConstituents/ViewConstituents.tsx | 22 +------ 3 files changed, 54 insertions(+), 80 deletions(-) diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx index a0a701f6..bb34bbfe 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx @@ -1,27 +1,20 @@ 'use client'; -import { useEffect } from 'react'; - import { MiniButton } from '@/components/Control'; import { IconChild } from '@/components/Icons'; import { SearchBar } from '@/components/Input'; -import { type IConstituenta, type IRSForm } from '../../../models/rsform'; -import { matchConstituenta } from '../../../models/rsformAPI'; import { SelectMatchMode } from '../../../pages/RSFormPage/ViewConstituents/SelectMatchMode'; -import { DependencyMode, useCstSearchStore } from '../../../stores/cstSearch'; +import { useCstSearchStore } from '../../../stores/cstSearch'; +import { useRSEdit } from '../RSEditContext'; import { SelectGraphFilter } from './SelectGraphFilter'; interface ConstituentsSearchProps { - schema: IRSForm; dense?: boolean; - activeID?: number; - - onChange: (newValue: IConstituenta[]) => void; } -export function ConstituentsSearch({ schema, activeID, dense, onChange }: ConstituentsSearchProps) { +export function ConstituentsSearch({ dense }: ConstituentsSearchProps) { const query = useCstSearchStore(state => state.query); const filterMatch = useCstSearchStore(state => state.match); const filterSource = useCstSearchStore(state => state.source); @@ -31,13 +24,7 @@ export function ConstituentsSearch({ schema, activeID, dense, onChange }: Consti const setSource = useCstSearchStore(state => state.setSource); const toggleInherited = useCstSearchStore(state => state.toggleInherited); - const graphFiltered = activeID ? applyGraphQuery(schema, activeID, filterSource) : schema.items; - const queryFiltered = query ? graphFiltered.filter(cst => matchConstituenta(cst, query, filterMatch)) : graphFiltered; - const inheritanceFiltered = !includeInherited ? queryFiltered.filter(cst => !cst.is_inherited) : queryFiltered; - - useEffect(() => { - onChange(inheritanceFiltered); - }, [inheritanceFiltered, onChange]); + const { schema } = useRSEdit(); return (
@@ -62,34 +49,3 @@ export function ConstituentsSearch({ schema, activeID, dense, onChange }: Consti
); } - -// ====== Internals ========= -/** - * Filter list of {@link ILibraryItem} to a given graph query. - */ -function applyGraphQuery(target: IRSForm, pivot: number, mode: DependencyMode): IConstituenta[] { - if (mode === DependencyMode.ALL) { - return target.items; - } - const ids = (() => { - switch (mode) { - case DependencyMode.OUTPUTS: { - return target.graph.nodes.get(pivot)?.outputs; - } - case DependencyMode.INPUTS: { - return target.graph.nodes.get(pivot)?.inputs; - } - case DependencyMode.EXPAND_OUTPUTS: { - return target.graph.expandAllOutputs([pivot]); - } - case DependencyMode.EXPAND_INPUTS: { - return target.graph.expandAllInputs([pivot]); - } - } - })(); - if (ids) { - return target.items.filter(cst => ids.find(id => id === cst.id)); - } else { - return target.items; - } -} diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx index 61323002..3c8ea05a 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/TableSideConstituents.tsx @@ -9,27 +9,32 @@ import { PARAMETER, prefixes } from '@/utils/constants'; import { BadgeConstituenta } from '../../../components/BadgeConstituenta'; import { describeConstituenta } from '../../../labels'; -import { type IConstituenta } from '../../../models/rsform'; +import { type IConstituenta, type IRSForm } from '../../../models/rsform'; +import { matchConstituenta } from '../../../models/rsformAPI'; +import { DependencyMode, useCstSearchStore } from '../../../stores/cstSearch'; +import { useRSEdit } from '../RSEditContext'; const DESCRIPTION_MAX_SYMBOLS = 280; interface TableSideConstituentsProps { - items: IConstituenta[]; - activeCst: IConstituenta | null; - onOpenEdit: (cstID: number) => void; autoScroll?: boolean; maxHeight: string; } const columnHelper = createColumnHelper(); -export function TableSideConstituents({ - items, - activeCst, - autoScroll = true, - onOpenEdit, - maxHeight -}: TableSideConstituentsProps) { +export function TableSideConstituents({ autoScroll = true, maxHeight }: TableSideConstituentsProps) { + const { schema, activeCst, navigateCst } = useRSEdit(); + + const query = useCstSearchStore(state => state.query); + const filterMatch = useCstSearchStore(state => state.match); + const filterSource = useCstSearchStore(state => state.source); + const includeInherited = useCstSearchStore(state => state.includeInherited); + + const graphFiltered = activeCst ? applyGraphQuery(schema, activeCst.id, filterSource) : schema.items; + const queryFiltered = query ? graphFiltered.filter(cst => matchConstituenta(cst, query, filterMatch)) : graphFiltered; + const items = !includeInherited ? queryFiltered.filter(cst => !cst.is_inherited) : queryFiltered; + useEffect(() => { if (!activeCst) { return; @@ -116,7 +121,38 @@ export function TableSideConstituents({

Измените параметры фильтра

} - onRowClicked={cst => onOpenEdit(cst.id)} + onRowClicked={cst => navigateCst(cst.id)} /> ); } + +// ====== Internals ========= +/** + * Filter list of {@link ILibraryItem} to a given graph query. + */ +function applyGraphQuery(target: IRSForm, pivot: number, mode: DependencyMode): IConstituenta[] { + if (mode === DependencyMode.ALL) { + return target.items; + } + const ids = (() => { + switch (mode) { + case DependencyMode.OUTPUTS: { + return target.graph.nodes.get(pivot)?.outputs; + } + case DependencyMode.INPUTS: { + return target.graph.nodes.get(pivot)?.inputs; + } + case DependencyMode.EXPAND_OUTPUTS: { + return target.graph.expandAllOutputs([pivot]); + } + case DependencyMode.EXPAND_INPUTS: { + return target.graph.expandAllInputs([pivot]); + } + } + })(); + if (ids) { + return target.items.filter(cst => ids.find(id => id === cst.id)); + } else { + return target.items; + } +} diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx index 9d333d0f..1f2522e8 100644 --- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx @@ -1,6 +1,5 @@ 'use client'; -import { useState } from 'react'; import clsx from 'clsx'; import { useRoleStore, UserRole } from '@/features/users'; @@ -9,9 +8,6 @@ import { useWindowSize } from '@/hooks/useWindowSize'; import { useFitHeight } from '@/stores/appLayout'; import { PARAMETER } from '@/utils/constants'; -import { type IConstituenta } from '../../../models/rsform'; -import { useRSEdit } from '../RSEditContext'; - import { ConstituentsSearch } from './ConstituentsSearch'; import { TableSideConstituents } from './TableSideConstituents'; @@ -27,9 +23,6 @@ export function ViewConstituents({ isBottom, isMounted }: ViewConstituentsProps) const windowSize = useWindowSize(); const role = useRoleStore(state => state.role); const listHeight = useFitHeight(!isBottom ? '8.2rem' : role !== UserRole.READER ? '42rem' : '35rem', '10rem'); - const { schema, activeCst, navigateCst } = useRSEdit(); - - const [filteredData, setFilteredData] = useState(schema.items); return ( ); }