Enonic UI: Add Filter Panel component #4185

Author: ashklianko

modules/app/pnpm-lock.yaml

@@ -32,6 +32,7 @@
     <!-- Styles -->
     <link rel="stylesheet" type="text/css" href="{{assetsUri}}/admin/common/styles/lib.css">
     <link rel="stylesheet" type="text/css" href="{{assetsUri}}/styles/contentlib.css">
+    <link rel="stylesheet" type="text/css" href="{{assetsUri}}/admin/common/styles/tailwind.css">
     <link rel="stylesheet" type="text/css" href="{{assetsUri}}/styles/tailwind.css">
     <script type="text/javascript" src="{{assetsUri}}/admin/common/js/lib.js"></script>
 

modules/app/src/main/resources/admin/tools/main/main.html

@@ -233,7 +233,6 @@ export class ContentBrowsePanel
     }
 
     protected disableSelectionMode() {
-        this.filterPanel.resetConstraints();
         this.hideFilterPanel();
         super.disableSelectionMode();
         this.treeListBox.setFilterQuery(null);

modules/lib/pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import {Aggregation} from '@enonic/lib-admin-ui/aggregation/Aggregation';
 import {Bucket} from '@enonic/lib-admin-ui/aggregation/Bucket';
 import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
+import {AuthContext} from '@enonic/lib-admin-ui/auth/AuthContext';
 import {i18n} from '@enonic/lib-admin-ui/util/Messages';
 import {ContentAggregation} from './ContentAggregation';
 import {GetPrincipalsByKeysRequest} from '../../security/GetPrincipalsByKeysRequest';
@@ -20,17 +21,19 @@ export class AggregationsDisplayNamesResolver {
     private contentTypes: Map<string, string>;
     private readonly currentUserId?: string;
 
-    constructor(currentUserId?: string) {
-        this.currentUserId = currentUserId;
+    constructor() {
+        this.currentUserId = AuthContext.get().getUser().getKey().toString();
     }
 
-    updateAggregationsDisplayNames(aggregations: Aggregation[], userId: string): Q.Promise<void> {
+    updateAggregationsDisplayNames(aggregations: BucketAggregation[]): Q.Promise<void> {
         this.updateWorkflowAggregations(aggregations);
 
         const updatePromises: Q.Promise<void>[] = [];
         updatePromises.push(this.updateLanguageAggregations(aggregations));
         updatePromises.push(this.updateContentTypeAggregations(aggregations));
-
+        aggregations.filter((aggr) => this.isPrincipalAggregation(aggr.getName())).forEach((principalAggr: BucketAggregation) => {
+            updatePromises.push(this.updateUnknownPrincipals(principalAggr).then(() => this.updateKnownPrincipals(principalAggr)));
+        });
 
         return Q.all(updatePromises).thenResolve(null);
     }
@@ -142,4 +145,8 @@ export class AggregationsDisplayNamesResolver {
             return this.updateContentTypeAggregation(aggregation);
         });
     }
+
+    private isPrincipalAggregation(name: string): boolean {
+        return name === ContentAggregation.OWNER.toString() || name === ContentAggregation.MODIFIED_BY.toString();
+    }
 }

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

@@ -134,8 +134,7 @@ export class ContentAggregationsFetcher {
         const aggregationSelect: AggregationSelection[] = this.searchInputValues.aggregationSelections.filter(
             (aggrSelection: AggregationSelection) => aggrSelection.getName() !== aggregation.getName());
 
-        const emptyAggregationSelection: AggregationSelection = new AggregationSelection(aggregation.getName());
-        emptyAggregationSelection.setValues([]);
+        const emptyAggregationSelection: AggregationSelection = new AggregationSelection(aggregation.getName(), []);
         aggregationSelect.push(emptyAggregationSelection);
 
         return aggregationSelect;

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

@@ -1,3 +1,4 @@
+import {DefaultErrorHandler} from '@enonic/lib-admin-ui/DefaultErrorHandler';
 import Q from 'q';
 import {i18n} from '@enonic/lib-admin-ui/util/Messages';
 import {Router} from '../../Router';
@@ -9,7 +10,6 @@ import {Aggregation} from '@enonic/lib-admin-ui/aggregation/Aggregation';
 import {BrowseFilterPanel} from '@enonic/lib-admin-ui/app/browse/filter/BrowseFilterPanel';
 import {BucketAggregation} from '@enonic/lib-admin-ui/aggregation/BucketAggregation';
 import {Bucket} from '@enonic/lib-admin-ui/aggregation/Bucket';
-import {BucketAggregationView} from '@enonic/lib-admin-ui/aggregation/BucketAggregationView';
 import {ContentServerChangeItem} from '../../event/ContentServerChangeItem';
 import {ProjectContext} from '../../project/ProjectContext';
 import {ContentSummary} from '../../content/ContentSummary';
@@ -45,10 +45,12 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
     constructor() {
         super();
 
-        this.addClass(cn('content-browse-filter-panel bg-surface-primary text-main'));
+        this.addClass(cn('content-browse-filter-panel bg-surface-neutral text-main'));
         this.aggregationsFetcher = this.createAggregationFetcher();
+        this.displayNamesResolver = new AggregationsDisplayNamesResolver();
+        this.dependenciesSection = new DependenciesSection();
 
-        this.getAndUpdateAggregations();
+        this.getAndUpdateAggregations().catch(DefaultErrorHandler.handle);
         this.initElementsAndListeners();
     }
 
@@ -127,55 +129,24 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
         });
     }
 
-    protected createHitsCountContainer(): DivEl {
-        const hitsCounterAndClearButtonWrapper = super.createHitsCountContainer();
-        if (this.exportElement) {
-            hitsCounterAndClearButtonWrapper.appendChild(this.exportElement);
-        }
-
-        return hitsCounterAndClearButtonWrapper;
-    }
-
-    protected getAggregationEnum(): Record<string, string> {
-        return ContentAggregation;
-    }
-
-    protected getGroupViews(): AggregationGroupView[] {
-        this.aggregations = new Map<string, AggregationGroupView>();
-
-        const aggregationEnum = this.getAggregationEnum();
-        for (let aggrEnum in aggregationEnum) {
-            const name: string = aggregationEnum[aggrEnum];
-            this.aggregations.set(name, this.createGroupView(name));
-        }
+    protected getFilterableAggregations(): { name: string; idsToKeepOnTop?: string[] }[] {
+        const currentUserKey = AuthContext.get().getUser().getKey().toString();
 
-        return Array.from(this.aggregations.values());
+        return [
+            {
+                name: ContentAggregation.OWNER.toString(),
+                idsToKeepOnTop: [currentUserKey]
+            },
+            {
+                name: ContentAggregation.MODIFIED_BY.toString(),
+                idsToKeepOnTop: [currentUserKey]
+            },
+        ];
     }
 
-    protected isPrincipalAggregation(name: string): boolean {
-        return name === ContentAggregation.OWNER.toString() || name === ContentAggregation.MODIFIED_BY.toString();
-    }
-
-    protected createGroupView(name: string): AggregationGroupView {
-        if (this.isPrincipalAggregation(name)) {
-            const currentUserKey = this.getCurrentUserKeyAsString();
-            if (!this.displayNamesResolver) {
-                this.displayNamesResolver = new AggregationsDisplayNamesResolver(currentUserKey);
-            }
-            const aggregationGroupView = new FilterableAggregationGroupView(name, i18n(`field.${name}`));
-            aggregationGroupView.setIdsToKeepOnToTop([currentUserKey]);
-            aggregationGroupView.setResolver(this.displayNamesResolver);
-
-            return aggregationGroupView;
-        }
-
-        return new AggregationGroupView(name, i18n(`field.${name}`));
-    }
-
-    protected appendExtraSections() {
-        super.appendExtraSections();
-        this.dependenciesSection = new DependenciesSection();
-        this.appendChild(this.dependenciesSection);
+    protected isFilterableAggregation(aggregation: BucketAggregation): boolean {
+        return aggregation.getName() === ContentAggregation.OWNER.toString() || aggregation.getName() ===
+               ContentAggregation.MODIFIED_BY.toString();
     }
 
     protected isExportAllowed(): boolean {
@@ -185,7 +156,6 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
 
     private removeDependencyItem() {
         this.dependenciesSection.reset();
-        this.resetConstraints();
         this.search();
         Router.get().back();
     }
@@ -197,7 +167,6 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
             this.selectBucketByTypeOnLoad(type);
         }
 
-        this.setConstraintItems(this.dependenciesSection, [item.getId()]);
         this.dependenciesSection.setDependencyItem(item);
     }
 
@@ -220,7 +189,7 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
     }
 
     private selectContentTypeBucket(key: string): void {
-        (this.aggregations.get(ContentAggregation.CONTENT_TYPE).getAggregationViews()[0] as BucketAggregationView)?.selectBucketViewByKey(key);
+        (this.aggregations.get(ContentAggregation.CONTENT_TYPE).getAggregationViews()[0])?.selectBucketViewByKey(key);
     }
 
     searchItemById(id: ContentId): void {
@@ -262,7 +231,6 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
 
     setSelectedItems(itemsIds: string[]) {
         this.dependenciesSection.reset();
-        super.setSelectedItems(itemsIds);
     }
 
     protected isFilteredOrConstrained() {
@@ -276,7 +244,7 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
             this.updateHitsCounter(aggregationsQueryResult.getMetadata().getTotalHits());
             this.updateExportState(aggregationsQueryResult);
 
-            return this.processAggregations(aggregationsQueryResult.getAggregations()).then(() => {
+            return this.processAggregations(aggregationsQueryResult.getAggregations() as BucketAggregation[]).then(() => {
                 return aggregationsQueryResult;
             });
         });
@@ -289,25 +257,27 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
         this.exportElement.setTotal(aggregationsQueryResult.getMetadata().getTotalHits());
         this.exportElement.setSearchInputValues(this.getSearchInputValues());
         this.exportElement.setDependency(this.getDependency());
-        this.exportElement.setConstraintIds(this.hasConstraint() ? this.getSelectionItems().slice() : null);
         this.exportElement.setEnabled(aggregationsQueryResult.getMetadata().getTotalHits() > 0);
     }
 
-    private processAggregations(aggregations: Aggregation[]): Q.Promise<void> {
-        this.toggleAggregationsVisibility(aggregations);
+    private processAggregations(aggregations: BucketAggregation[]): Q.Promise<void> {
+        this.sortAggregations(aggregations);
 
-        return this.displayNamesResolver.updateAggregationsDisplayNames(aggregations, this.getCurrentUserKeyAsString()).then(() => {
+        return this.displayNamesResolver.updateAggregationsDisplayNames(aggregations).then(() => {
             this.updateAggregations(aggregations);
         });
     }
 
-    private getCurrentUserKeyAsString(): string {
-        return AuthContext.get().getUser().getKey().toString();
+    private sortAggregations(aggregations: BucketAggregation[]): void {
+        const order = Object.values(ContentAggregation).filter(value => typeof value === 'string') as string[];
+
+        aggregations.sort(
+            (a, b) => order.indexOf(a.getName()) - order.indexOf(b.getName())
+        );
     }
 
     private getAggregations(): Q.Promise<AggregationsQueryResult> {
         this.aggregationsFetcher.setSearchInputValues(this.getSearchInputValues());
-        this.aggregationsFetcher.setConstraintItemsIds(this.hasConstraint() ? this.getSelectionItems().slice() : null);
         this.aggregationsFetcher.setDependency(this.getDependency());
 
         return this.aggregationsFetcher.getAggregations();
@@ -335,14 +305,6 @@ export class ContentBrowseFilterPanel<T extends ContentSummaryAndCompareStatus =
         return null;
     }
 
-    private toggleAggregationsVisibility(aggregations: Aggregation[]) {
-        aggregations.forEach((aggregation: BucketAggregation) => {
-            const isAggregationNotEmpty: boolean = aggregation.getBuckets().some((bucket: Bucket) => bucket.docCount > 0);
-            this.aggregations.get(aggregation.getName()).setVisible(isAggregationNotEmpty);
-        });
-    }
-
-
     // doing a trick to avoid changing lib-admin-ui, adding all children except export button to a wrapper
     appendChild(child: Element, lazyRender?: boolean): Element {
         if (!this.elementsContainer) {

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

@@ -103,7 +103,7 @@ export class ContentExportElement extends SpanEl {
         }
 
         this.searchInputValues.aggregationSelections.filter((value) => value.getSelectedBuckets().length).forEach((selected) => {
-            params[selected.name] = this.aggregationSelectionValueToString(selected);
+            params[selected.getName()] = this.aggregationSelectionValueToString(selected);
         });
 
         return UriHelper.appendUrlParams(this.getReportServicePath(), params);
@@ -115,7 +115,7 @@ export class ContentExportElement extends SpanEl {
                 (bucket: DateRangeBucket) => ValueExpr.dateTime(bucket.getFrom()).getValue().getString()).join();
         }
 
-        return selected.selectedBuckets.map((bucket) => bucket.getKey()).join();
+        return selected.getSelectedBuckets().map((bucket) => bucket.getKey()).join();
     }