Enonic UI: Externalize Filter State management #9332

Author: ashklianko

modules/lib/src/main/resources/assets/js/app/browse/filter/ContentBrowseFilterPanel.ts

@@ -1,33 +1,42 @@
+import {AggregationGroupView} from '@enonic/lib-admin-ui/aggregation/AggregationGroupView';
+import {Bucket} from '@enonic/lib-admin-ui/aggregation/Bucket';
+import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
+import {BrowseFilterPanel} from '@enonic/lib-admin-ui/app/browse/filter/BrowseFilterPanel';
+import {TextSearchField} from '@enonic/lib-admin-ui/app/browse/filter/TextSearchField';
+import {AuthContext} from '@enonic/lib-admin-ui/auth/AuthContext';
+import {DivEl} from '@enonic/lib-admin-ui/dom/DivEl';
+import {Element} from '@enonic/lib-admin-ui/dom/Element';
 import {SearchInputValues} from '@enonic/lib-admin-ui/query/SearchInputValues';
-import {StringHelper} from '@enonic/lib-admin-ui/util/StringHelper';
-import Q from 'q';
 import {i18n} from '@enonic/lib-admin-ui/util/Messages';
-import {Router} from '../../Router';
-import {ContentServerEventsHandler} from '../../event/ContentServerEventsHandler';
-import {ContentSummaryAndCompareStatus} from '../../content/ContentSummaryAndCompareStatus';
+import {cn} from '@enonic/ui';
+import Q from 'q';
+import {
+    $contentFilterState,
+    addSelectedBucket,
+    deselectAllFilterBuckets,
+    getFilterSelection,
+    getFilterValue,
+    hasFilterSet,
+    hasFilterValueSet,
+    resetContentFilter
+} from '../../../v6/features/store/contentFilter.store';
+import {ContentId} from '../../content/ContentId';
 import {ContentQuery} from '../../content/ContentQuery';
-import {AggregationGroupView} from '@enonic/lib-admin-ui/aggregation/AggregationGroupView';
-import {BrowseFilterPanel} from '@enonic/lib-admin-ui/app/browse/filter/BrowseFilterPanel';
-import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
-import {BucketAggregationView} from '@enonic/lib-admin-ui/aggregation/BucketAggregationView';
+import {ContentSummary} from '../../content/ContentSummary';
+import {ContentSummaryAndCompareStatus} from '../../content/ContentSummaryAndCompareStatus';
 import {ContentServerChangeItem} from '../../event/ContentServerChangeItem';
+import {ContentServerEventsHandler} from '../../event/ContentServerEventsHandler';
 import {ProjectContext} from '../../project/ProjectContext';
-import {ContentSummary} from '../../content/ContentSummary';
-import {ContentId} from '../../content/ContentId';
+import {Router} from '../../Router';
 import {ContentBrowseFilterComponent} from '../../ui2/filter/ContentBrowseFilterComponent';
-import {DependenciesSection} from './DependenciesSection';
-import {ContentAggregation} from './ContentAggregation';
+import {Branch} from '../../versioning/Branch';
 import {AggregationsDisplayNamesResolver} from './AggregationsDisplayNamesResolver';
-import {ContentAggregationsFetcher} from './ContentAggregationsFetcher';
 import {AggregationsQueryResult} from './AggregationsQueryResult';
-import {Element} from '@enonic/lib-admin-ui/dom/Element';
-import {DivEl} from '@enonic/lib-admin-ui/dom/DivEl';
-import {ContentExportElement} from './ContentExportElement';
+import {ContentAggregation} from './ContentAggregation';
+import {ContentAggregationsFetcher} from './ContentAggregationsFetcher';
 import {ContentDependency} from './ContentDependency';
-import {TextSearchField} from '@enonic/lib-admin-ui/app/browse/filter/TextSearchField';
-import {Branch} from '../../versioning/Branch';
-import {AuthContext} from '@enonic/lib-admin-ui/auth/AuthContext';
-import {cn} from '@enonic/ui';
+import {ContentExportElement} from './ContentExportElement';
+import {DependenciesSection} from './DependenciesSection'
 
 export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus = ContentSummaryAndCompareStatus>
     extends BrowseFilterPanel<T> {
@@ -50,22 +59,16 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
         this.aggregationsFetcher = this.createAggregationFetcher();
         this.displayNamesResolver = new AggregationsDisplayNamesResolver();
         this.dependenciesSection = new DependenciesSection();
-        this.initElementsAndListeners();
 
         this.filterComponent = new ContentBrowseFilterComponent({
             bucketAggregations: [],
-            onChange: () => {
-                this.search();
-            },
-            onSelectionChange: () => {
-                this.search();
-            },
             filterableAggregations: this.getFilterableAggregations(),
             exportOptions: this.getExportOptions(),
         });
 
         this.appendChild(this.filterComponent);
 
+        this.handleEvents();
         this.getAndUpdateAggregations();
     }
 
@@ -89,19 +92,15 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
         });
     }
 
-    protected initElementsAndListeners() {
-        if (this.isExportAllowed()) {
-            this.exportElement = new ContentExportElement().setEnabled(false).setTitle(i18n('action.export')) as ContentExportElement;
-        }
-
-        this.handleEvents();
-    }
-
     protected handleEvents() {
         this.onRendered(() => {
             super.appendChild(this.elementsContainer);
         });
 
+        $contentFilterState.listen(() => {
+            this.search();
+        });
+
         this.handleEventsForDependenciesSection();
     }
 
@@ -175,11 +174,6 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
                ContentAggregation.MODIFIED_BY.toString();
     }
 
-    protected isExportAllowed(): boolean {
-        // add more checks here if needed
-        return true;
-    }
-
     private removeDependencyItem() {
         this.dependenciesSection.reset();
         this.search();
@@ -215,7 +209,7 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
     }
 
     private selectContentTypeBucket(key: string): void {
-        this.filterComponent.selectBucketViewByKey(ContentAggregation.CONTENT_TYPE, key);
+        addSelectedBucket(ContentAggregation.CONTENT_TYPE, new Bucket(key, 0));
     }
 
     searchItemById(id: ContentId): void {
@@ -252,26 +246,26 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
     getSearchInputValues(): SearchInputValues {
         const searchInputValues: SearchInputValues = new SearchInputValues();
 
-        searchInputValues.setAggregationSelections(this.filterComponent.getSelectedBuckets());
-        searchInputValues.setTextSearchFieldValue(this.filterComponent.getValue());
+        searchInputValues.setAggregationSelections(getFilterSelection());
+        searchInputValues.setTextSearchFieldValue(getFilterValue());
 
         return searchInputValues;
     }
 
     hasFilterSet(): boolean {
-        return this.filterComponent.hasSelectedBuckets() || this.hasSearchStringSet();
+        return hasFilterSet();
     }
 
     hasSearchStringSet(): boolean {
-        return !StringHelper.isBlank(this.filterComponent.getValue());
+        return hasFilterValueSet();
     }
 
     resetControls() {
-        this.filterComponent.reset();
+        resetContentFilter();
     }
 
     deselectAll() {
-        this.filterComponent.deselectAll();
+        deselectAllFilterBuckets();
     }
 
     updateHitsCounter(hits: number) {

modules/lib/src/main/resources/assets/js/app/ui2/filter/BucketAggregation.tsx

@@ -1,14 +1,18 @@
 import {Bucket} from '@enonic/lib-admin-ui/aggregation/Bucket';
 import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
 import {Button, Checkbox, CheckboxChecked, useControlledState} from '@enonic/ui';
-import {ReactElement, useCallback, useMemo, useState} from 'react';
+import {useStore} from '@nanostores/preact';
+import {ReactElement, useCallback, useMemo} from 'react';
+import {
+    $contentFilterState,
+    addSelectedBucket,
+    removeSelectedBucket
+} from '../../../v6/features/store/contentFilter.store';
 import {useI18n} from '../hooks/useI18n';
 import {toSafeKey} from '../util/filter';
 
 export type BucketAggregationProps = {
     aggregation: BucketAggregation;
-    selection?: Bucket[];
-    onSelectionChange?: (selection: Bucket[]) => void;
     showAll?: boolean;
     showMoreLabel?: string;
     showLessLabel?: string;
@@ -17,32 +21,33 @@ export type BucketAggregationProps = {
 
 export const BucketAggregationComponent = ({
                                         aggregation,
-                                        selection,
-                                        onSelectionChange,
                                         showAll,
                                         showMoreLabel = 'Show more',
                                         showLessLabel = 'Show less',
                                         maxVisibleBuckets = 5,
                                     }: BucketAggregationProps): ReactElement => {
+    const {selection} = useStore($contentFilterState);
+    const isBucketSelected = (bucketKey: string): boolean => {
+        return selection.some((s) => s.getName() === aggregation.getName() && s.getSelectedBuckets().some((b) => b.getKey() === bucketKey));
+    }
+
     const [showAllState, setShowAllState] = useControlledState(showAll, false);
     const handleShowMoreLessClick = () => {
         setShowAllState(!showAllState);
     };
 
-    const [selectionState, setSelectionState] = useControlledState(selection, [], onSelectionChange);
-    const isSelected = (bucket: Bucket) => selectionState.some(b => b.getKey() === bucket.getKey());
-
     const buckets = aggregation.getBuckets().filter((b) => b.getDocCount() > 0);
     const visibleBuckets = showAllState ? buckets : buckets.slice(0, maxVisibleBuckets);
     const hasHiddenBuckets = buckets.length > maxVisibleBuckets;
 
-    const handleSelectionChange = useCallback((bucket: Bucket, checkedState: CheckboxChecked) => {
-        const isChecked = checkedState === true;
-        const newSelection = isChecked ? [...selectionState, bucket] : selectionState.filter(b => b.getKey() !== bucket.getKey());
-        setSelectionState(newSelection);
-    }, [selectionState, setSelectionState]);
-
     const displayName = useMemo(() => useI18n(`field.${aggregation.getName()}`), [aggregation]);
+    const handleSelectionChange = useCallback((bucket: Bucket, checked: CheckboxChecked) => {
+        if (checked) {
+            addSelectedBucket(aggregation.getName(), bucket);
+        } else {
+            removeSelectedBucket(aggregation.getName(), bucket);
+        }
+    }, [aggregation]);
 
     return (
         <div className=''>
@@ -56,7 +61,7 @@ export const BucketAggregationComponent = ({
                             id={safeKey}
                             key={safeKey}
                             className={'px-2.5'}
-                            checked={isSelected(bucket)}
+                            checked={isBucketSelected(bucket.getKey())}
                             defaultChecked={false}
                             label={label}
                             onCheckedChange={(checked: CheckboxChecked) => handleSelectionChange(bucket, checked)}

modules/lib/src/main/resources/assets/js/app/ui2/filter/ContentBrowseFilterComponent.tsx

@@ -1,18 +1,14 @@
-import {AggregationSelection} from '@enonic/lib-admin-ui/aggregation/AggregationSelection';
-import {Bucket} from '@enonic/lib-admin-ui/aggregation/Bucket';
 import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
 import {LegacyElement} from '@enonic/lib-admin-ui/ui2/LegacyElement';
-import {Button, SearchInput, useControlledState} from '@enonic/ui';
+import {Button, SearchInput} from '@enonic/ui';
+import {useStore} from '@nanostores/preact';
 import {Download} from 'lucide-react';
-import {useCallback, useMemo} from 'react';
+import {useMemo} from 'react';
+import {$contentFilterState, setContentFilterValue} from '../../../v6/features/store/contentFilter.store';
 import {BucketAggregationComponent} from './BucketAggregation';
 import {FilterableBucketAggregation} from './FilterableBucketAggregation';
 
 export interface ContentBrowseFilterPanelComponentProps {
-    value?: string;
-    onChange: (value: string) => void;
-    selection?: AggregationSelection[];
-    onSelectionChange?: (selection: AggregationSelection[]) => void;
     hits?: number;
     bucketAggregations: BucketAggregation[];
     filterableAggregations?: {
@@ -26,11 +22,7 @@ export interface ContentBrowseFilterPanelComponentProps {
 }
 
 const ContentBrowseFilterPanelComponent = ({
-                                               value,
-                                               onChange,
                                                hits = 0,
-                                               selection,
-                                               onSelectionChange,
                                                bucketAggregations,
                                                filterableAggregations,
                                                exportOptions,
@@ -39,26 +31,12 @@ const ContentBrowseFilterPanelComponent = ({
         () => bucketAggregations.filter(ba => ba.getBuckets().some(b => b.getDocCount() > 0)),
         [bucketAggregations]
     );
-
-    const [inputValue, setInputValue] = useControlledState(value, '', onChange);
-    const [selectionState, setSelectionState] = useControlledState(selection, [], onSelectionChange);
-
-    const getBucketSelection = useCallback(
-        (ba: BucketAggregation) => selectionState.find(s => s.getName() === ba.getName())?.getSelectedBuckets() || [], [selectionState]);
-    const onBucketSelectionChange = useCallback((name: string, newBucketSelection: Bucket[]) => {
-        const newSelection = selectionState.filter(s => s.getName() !== name);
-        if (newBucketSelection.length > 0) {
-            const aggrSel = new AggregationSelection(name);
-            aggrSel.setValues(newBucketSelection);
-            newSelection.push(aggrSel);
-        }
-        setSelectionState(newSelection);
-    }, [selectionState, setSelectionState]);
+    const {value} = useStore($contentFilterState);
 
     return (
         <div className='bg-surface-neutral'>
-            <SearchInput id={`bfc-input-${new Date().getDate()}`} className={'h-11.5'} showSearchIcon={false} value={inputValue}
-                         onChange={setInputValue} placeholder='Type to search...'/>
+            <SearchInput id={`bfc-input-${new Date().getDate()}`} className={'h-11.5'} showSearchIcon={false} value={value}
+                         onChange={setContentFilterValue} placeholder='Type to search...'/>
             <div className='flex mt-2 mb-8 items-center'>
                 <div className='grow'>
                     <span className='text-lg pl-4.5 pr-4.5'>{hits} hits</span>
@@ -78,14 +56,9 @@ const ContentBrowseFilterPanelComponent = ({
                         filterableOptions ?
                         <FilterableBucketAggregation
                             key={safeKey}
-                            selection={getBucketSelection(ba)}
                             idsToKeepOnTop={filterableOptions.idsToKeepOnTop}
-                            onSelectionChange={(bucketSel) => onBucketSelectionChange(ba.getName(), bucketSel)}
                             aggregation={ba}/> :
-                        <BucketAggregationComponent key={safeKey}
-                                                    selection={getBucketSelection(ba)}
-                                                    onSelectionChange={(bucketSel) => onBucketSelectionChange(ba.getName(), bucketSel)}
-                                                    aggregation={ba}/>
+                        <BucketAggregationComponent key={safeKey} aggregation={ba}/>
                     );
                 })}
             </div>
@@ -96,73 +69,16 @@ const ContentBrowseFilterPanelComponent = ({
 export class ContentBrowseFilterComponent
     extends LegacyElement<typeof ContentBrowseFilterPanelComponent, ContentBrowseFilterPanelComponentProps> {
 
-    private currentValue: string;
-
-    private selection: AggregationSelection[] = [];
 
     constructor(props: ContentBrowseFilterPanelComponentProps) {
-        const {onChange, onSelectionChange, ...rest} = props;
-
-        super({
-            onChange: (value: string) => {
-                this.currentValue = value;
-                props.onChange?.(value);
-            },
-            onSelectionChange: (selection: AggregationSelection[]) => {
-                this.selection = selection;
-                props.onSelectionChange?.(selection);
-            },
-            ...rest,
-        }, ContentBrowseFilterPanelComponent);
-
-        this.currentValue = props.value ?? '';
-    }
-
-    reset(): void {
-        this.props.setKey('value', '');
-        this.deselectAll();
-    }
-
-    deselectAll(): void {
-        this.props.setKey('selection', []);
+        super(props, ContentBrowseFilterPanelComponent);
     }
 
     updateAggregations(aggregations: BucketAggregation[]): void {
         this.props.setKey('bucketAggregations', aggregations);
     }
 
-    getSelectedBuckets(): AggregationSelection[] {
-        return this.selection;
-    }
-
-    getValue(): string {
-        return this.currentValue;
-    }
-
-    hasSelectedBuckets(): boolean {
-        return this.selection.length > 0;
-    }
-
     updateHitsCounter(hits: number): void {
         this.props.setKey('hits', hits);
     }
-
-    selectBucketViewByKey(aggregationName: string, bucketKey: string): void {
-        const aggregationSelection = this.selection.find(s => s.getName() === aggregationName);
-
-        if (aggregationSelection) {
-            const bucket = aggregationSelection.getSelectedBuckets().find(b => b.getKey() === bucketKey);
-
-            if (!bucket) {
-                const bucketToSelect = this.props.get().bucketAggregations
-                    .find(ba => ba.getName() === aggregationName)?.getBuckets()
-                    .find(b => b.getKey() === bucketKey);
-
-                if (bucketToSelect) {
-                    aggregationSelection.setValues([...aggregationSelection.getSelectedBuckets(), bucketToSelect]);
-                    this.props.setKey('selection', this.selection);
-                }
-            }
-        }
-    }
 }