diff --git a/rsconcept/frontend/src/features/rsform/components/view-constituents/constituents-search.tsx b/rsconcept/frontend/src/features/rsform/components/view-constituents/constituents-search.tsx index c7b0f55c..c9337fc7 100644 --- a/rsconcept/frontend/src/features/rsform/components/view-constituents/constituents-search.tsx +++ b/rsconcept/frontend/src/features/rsform/components/view-constituents/constituents-search.tsx @@ -1,30 +1,31 @@ 'use client'; import { MiniButton } from '@/components/control'; -import { IconChild } from '@/components/icons'; +import { IconChild, IconCrucial } from '@/components/icons'; import { SearchBar } from '@/components/input'; +import { tripleToggleColor } from '@/utils/utils'; -import { type IRSForm } from '../../models/rsform'; import { useCstSearchStore } from '../../stores/cst-search'; import { SelectGraphFilter } from './select-graph-filter'; import { SelectMatchMode } from './select-match-mode'; interface ConstituentsSearchProps { - schema: IRSForm; dense?: boolean; hideGraphFilter?: boolean; } -export function ConstituentsSearch({ schema, dense, hideGraphFilter }: ConstituentsSearchProps) { +export function ConstituentsSearch({ dense, hideGraphFilter }: ConstituentsSearchProps) { 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 showInherited = useCstSearchStore(state => state.isInherited); + const showCrucial = useCstSearchStore(state => state.isCrucial); const setQuery = useCstSearchStore(state => state.setQuery); const setMatch = useCstSearchStore(state => state.setMatch); const setSource = useCstSearchStore(state => state.setSource); const toggleInherited = useCstSearchStore(state => state.toggleInherited); + const toggleCrucial = useCstSearchStore(state => state.toggleCrucial); return (
@@ -37,15 +38,19 @@ export function ConstituentsSearch({ schema, dense, hideGraphFilter }: Constitue /> {!hideGraphFilter ? : null} - {schema.stats.count_inherited > 0 ? ( - ${includeInherited ? 'отображать' : 'скрывать'}`} - aria-label={`Отображение наследованных: ${includeInherited ? 'отображать' : 'скрывать'}`} - icon={} - className='h-fit self-center' - onClick={toggleInherited} - /> - ) : null} + + } + className='h-fit self-center' + onClick={toggleInherited} + /> + } + className='h-fit self-center' + onClick={toggleCrucial} + />
); } diff --git a/rsconcept/frontend/src/features/rsform/components/view-constituents/use-filtered-items.ts b/rsconcept/frontend/src/features/rsform/components/view-constituents/use-filtered-items.ts index 3dfd70f2..5bf63921 100644 --- a/rsconcept/frontend/src/features/rsform/components/view-constituents/use-filtered-items.ts +++ b/rsconcept/frontend/src/features/rsform/components/view-constituents/use-filtered-items.ts @@ -6,11 +6,13 @@ export function useFilteredItems(schema: IRSForm, activeCst?: IConstituenta | nu 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 showInherited = useCstSearchStore(state => state.isInherited); + const showCrucial = useCstSearchStore(state => state.isCrucial); 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; + let items = showInherited !== null ? queryFiltered.filter(cst => cst.is_inherited === showInherited) : queryFiltered; + items = showCrucial !== null ? items.filter(cst => cst.crucial === showCrucial) : items; return items; } diff --git a/rsconcept/frontend/src/features/rsform/stores/cst-search.ts b/rsconcept/frontend/src/features/rsform/stores/cst-search.ts index b546e8e4..66208b76 100644 --- a/rsconcept/frontend/src/features/rsform/stores/cst-search.ts +++ b/rsconcept/frontend/src/features/rsform/stores/cst-search.ts @@ -1,6 +1,8 @@ import { create } from 'zustand'; import { persist } from 'zustand/middleware'; +import { toggleTristateFlag } from '@/utils/utils'; + /** Represents graph dependency mode. */ export const DependencyMode = { ALL: 0, @@ -31,8 +33,11 @@ interface CstSearchStore { source: DependencyMode; setSource: (value: DependencyMode) => void; - includeInherited: boolean; + isInherited: boolean | null; toggleInherited: () => void; + + isCrucial: boolean | null; + toggleCrucial: () => void; } export const useCstSearchStore = create()( @@ -44,15 +49,18 @@ export const useCstSearchStore = create()( setMatch: value => set({ match: value }), source: DependencyMode.ALL, setSource: value => set({ source: value }), - includeInherited: true, - toggleInherited: () => set(state => ({ includeInherited: !state.includeInherited })) + isInherited: null, + toggleInherited: () => set(state => ({ isInherited: toggleTristateFlag(state.isInherited) })), + isCrucial: null, + toggleCrucial: () => set(state => ({ isCrucial: toggleTristateFlag(state.isCrucial) })) }), { version: 1, partialize: state => ({ match: state.match, source: state.source, - includeInherited: state.includeInherited + isInherited: state.isInherited, + isCrucial: state.isCrucial }), name: 'portal.constituenta.search' }