Enonic UI: Add Filter Panel component #4185

Author: ashklianko

package.json

@@ -21,7 +21,7 @@
     "fix": "eslint . --fix --cache"
   },
   "dependencies": {
-    "@enonic/ui": "~0.12.0",
+    "@enonic/ui": "~0.13.0",
     "dompurify": "~3.2.7",
     "fine-uploader": "^5.16.2",
     "jquery": "^3.7.1",

pnpm-lock.yaml

@@ -1,13 +1,20 @@
 export class Aggregation {
 
-    private name: string;
+    private readonly name: string;
 
-    constructor(name: string) {
+    private readonly displayName: string;
+
+    constructor(name: string, displayName?: string) {
         this.name = name;
+        this.displayName = displayName ?? name;
     }
 
-    public getName(): string {
+    getName(): string {
         return this.name;
     }
 
+    getDisplayName(): string {
+        return this.displayName;
+    }
+
 }

src/main/resources/assets/admin/common/js/aggregation/Aggregation.ts

@@ -1,7 +1,6 @@
-import {BucketAggregationView} from './BucketAggregationView';
+import {BucketAggregationView} from '../ui2/BucketAggregationView';
 import {AggregationSelection} from './AggregationSelection';
 import {DivEl} from '../dom/DivEl';
-import {AggregationView} from './AggregationView';
 import {H2El} from '../dom/H2El';
 import {Aggregation} from './Aggregation';
 import {Bucket} from './Bucket';
@@ -15,7 +14,7 @@ export class AggregationGroupView
 
     private readonly displayName: string;
 
-    protected aggregationViews: AggregationView[] = [];
+    protected aggregationViews: BucketAggregationView[] = [];
 
     private titleEl: H2El = new H2El();
 
@@ -39,7 +38,7 @@ export class AggregationGroupView
         // must be implemented by children
     }
 
-    getAggregationViews(): AggregationView[] {
+    getAggregationViews(): BucketAggregationView[] {
         return this.aggregationViews;
     }
 
@@ -61,8 +60,7 @@ export class AggregationGroupView
             const selectedBuckets: Bucket[] = bucketAggregationView.getSelectedValues();
 
             if (selectedBuckets != null) {
-                const aggregationSelection: AggregationSelection = new AggregationSelection(bucketAggregationView.getName());
-                aggregationSelection.setValues(selectedBuckets);
+                const aggregationSelection: AggregationSelection = new AggregationSelection(bucketAggregationView.getName(), selectedBuckets);
 
                 aggregationSelections.push(aggregationSelection);
             }
@@ -83,7 +81,7 @@ export class AggregationGroupView
     }
 
     deselectGroup(supressEvent?: boolean) {
-        this.aggregationViews.forEach((aggregationView: AggregationView) => {
+        this.aggregationViews.forEach((aggregationView: BucketAggregationView) => {
             aggregationView.deselectFacet(supressEvent);
         });
     }
@@ -104,24 +102,24 @@ export class AggregationGroupView
     }
 
     update(aggregations: Aggregation[]) {
-        aggregations.forEach((aggregation: Aggregation) => {
-            const aggregationView: AggregationView =
+        aggregations.forEach((aggregation: BucketAggregation) => {
+            const aggregationView =
                 this.getAggregationView(aggregation.getName()) || this.addAggregationView(aggregation);
 
             aggregationView.update(aggregation);
         });
     }
 
-    private addAggregationView(aggregation: Aggregation): AggregationView {
-        const aggregationView: AggregationView = this.createAggregationView(aggregation);
+    private addAggregationView(aggregation: Aggregation): BucketAggregationView {
+        const aggregationView = this.createAggregationView(aggregation);
 
         this.appendChild(aggregationView);
         this.aggregationViews.push(aggregationView);
 
         return aggregationView;
     }
 
-    protected createAggregationView(aggregation: Aggregation): AggregationView {
+    protected createAggregationView(aggregation: Aggregation): BucketAggregationView {
         if (aggregation instanceof BucketAggregation) {
             const bucketAggregationView: BucketAggregationView = new BucketAggregationView(aggregation);
 
@@ -135,7 +133,7 @@ export class AggregationGroupView
         }
     }
 
-    private getAggregationView(name: string): AggregationView {
-        return this.aggregationViews.find((aggregationView: AggregationView) => aggregationView.getName() === name);
+    private getAggregationView(name: string): BucketAggregationView {
+        return this.aggregationViews.find((aggregationView) => aggregationView.getName() === name);
     }
 }

src/main/resources/assets/admin/common/js/aggregation/AggregationGroupView.ts

@@ -2,14 +2,11 @@ import {Bucket} from './Bucket';
 
 export class AggregationSelection {
 
-    name: string;
-    selectedBuckets: Bucket[];
+    private readonly name: string;
+    private readonly selectedBuckets: Bucket[];
 
-    constructor(name: string) {
+    constructor(name: string, selectedBuckets: Bucket[]) {
         this.name = name;
-    }
-
-    public setValues(selectedBuckets: Bucket[]) {
         this.selectedBuckets = selectedBuckets;
     }
 

src/main/resources/assets/admin/common/js/aggregation/AggregationSelection.ts

@@ -1,3 +1,4 @@
+import {i18n} from '../util/Messages';
 import {Bucket} from './Bucket';
 import {BucketAggregationJson} from './BucketAggregationJson';
 import {BucketWrapperJson} from './BucketWrapperJson';
@@ -32,7 +33,7 @@ export class BucketAggregation
 
     public static fromJson(json: BucketAggregationJson): BucketAggregation {
 
-        let bucketAggregation: BucketAggregation = new BucketAggregation(json.name);
+        let bucketAggregation: BucketAggregation = new BucketAggregation(json.name, i18n(`field.${json.name}`));
 
         json.buckets.forEach((bucketWrapper: BucketWrapperJson) => {
             bucketAggregation.addBucket(BucketFactory.createFromJson(bucketWrapper));

src/main/resources/assets/admin/common/js/aggregation/BucketAggregation.ts

@@ -106,7 +106,7 @@ export class BucketAggregationView
     protected addBucketView(bucketView: BucketView): void {
         bucketView.onSelectionChanged((event: BucketViewSelectionChangedEvent) => {
             const bucketSelection: SelectionChange<Bucket> = {selected: [], deselected: []};
-            const bucket: Bucket = event.getBucketView().getBucket();
+            const bucket: Bucket = event.getBucket();
 
             if (event.getNewValue()) {
                 bucketSelection.selected.push(bucket);

src/main/resources/assets/admin/common/js/aggregation/BucketAggregationView.ts

@@ -27,7 +27,7 @@ export class BucketView
             label: this.resolveLabelValue(),
             onCheckedChange: (checked) => {
                 const isChecked = checked === true;
-                const event = new BucketViewSelectionChangedEvent(!isChecked, isChecked, this);
+                const event = new BucketViewSelectionChangedEvent(!isChecked, isChecked, this.getBucket());
                 this.selectionChangedListeners.forEach(l => l(event));
             }
         });

src/main/resources/assets/admin/common/js/aggregation/BucketView.ts

@@ -1,17 +1,17 @@
-import {BucketView} from './BucketView';
+import {Bucket} from './Bucket';
 
 export class BucketViewSelectionChangedEvent {
 
     private oldValue: boolean;
 
     private newValue: boolean;
 
-    private bucketView: BucketView;
+    private bucket: Bucket;
 
-    constructor(oldValue: boolean, newValue: boolean, bucketView: BucketView) {
+    constructor(oldValue: boolean, newValue: boolean, bucket: Bucket) {
         this.oldValue = oldValue;
         this.newValue = newValue;
-        this.bucketView = bucketView;
+        this.bucket = bucket;
     }
 
     getOldValue(): boolean {
@@ -22,7 +22,7 @@ export class BucketViewSelectionChangedEvent {
         return this.newValue;
     }
 
-    getBucketView(): BucketView {
-        return this.bucketView;
+    getBucket(): Bucket {
+        return this.bucket;
     }
 }

src/main/resources/assets/admin/common/js/aggregation/BucketViewSelectionChangedEvent.ts

@@ -1,6 +1,6 @@
 import {DivEl} from '../dom/DivEl';
-import {BucketView} from './BucketView';
 import {Button} from '../ui/button/Button';
+import {BucketView} from '../ui2/BucketView';
 import {i18n} from '../util/Messages';
 
 export class BucketsContainer