F: Improve cst filters

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 (
     <div className='flex border-b bg-input rounded-t-md'>
@@ -37,15 +38,19 @@ export function ConstituentsSearch({ schema, dense, hideGraphFilter }: Constitue
       />
       <SelectMatchMode value={filterMatch} onChange={setMatch} dense={dense} />
       {!hideGraphFilter ? <SelectGraphFilter value={filterSource} onChange={setSource} dense={dense} /> : null}
-      {schema.stats.count_inherited > 0 ? (
+
-        <MiniButton
+      <MiniButton
-          titleHtml={`Наследованные: <b>${includeInherited ? 'отображать' : 'скрывать'}</b>`}
+        title='Отображение наследников'
-          aria-label={`Отображение наследованных: ${includeInherited ? 'отображать' : 'скрывать'}`}
+        icon={<IconChild size='1rem' className={tripleToggleColor(showInherited)} />}
-          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : undefined} />}
+        className='h-fit self-center'
-          className='h-fit self-center'
+        onClick={toggleInherited}
-          onClick={toggleInherited}
+      />
-        />
+      <MiniButton
-      ) : null}
+        title='Отображение ключевых'
+        icon={<IconCrucial size='1rem' className={tripleToggleColor(showCrucial)} />}
+        className='h-fit self-center'
+        onClick={toggleCrucial}
+      />
     </div>
   );
 }

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;
 }
 

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<CstSearchStore>()(
@@ -44,15 +49,18 @@ export const useCstSearchStore = create<CstSearchStore>()(
       setMatch: value => set({ match: value }),
       source: DependencyMode.ALL,
       setSource: value => set({ source: value }),
-      includeInherited: true,
+      isInherited: null,
-      toggleInherited: () => set(state => ({ includeInherited: !state.includeInherited }))
+      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'
     }