[ADF-5219] Refactor Document list Filters (#6092)

* First commit

* Second commit

* Commit 4

* Add unit tests

* Fix unit tests

* Add documentation for breaking change

* Fix rebase

* Fix unit test

demo-shell/src/app/components/files/files.component.html

@@ -222,7 +222,6 @@
                 [contentActions]="true"
                 [allowDropFiles]="allowDropFiles"
                 [selectionMode]="selectionMode"
-                [preselectNodes]="selectedNodes"
                 [multiselect]="multiselect"
                 [display]="displayMode"
                 [node]="nodeResult"
@@ -232,27 +231,17 @@
                 [showHeader]="showHeader"
                 [thumbnails]="thumbnails"
                 [stickyHeader]="stickyHeader"
+                [headerFilters]="headerFilters"
+                [filterValue]="paramValues"
                 (error)="onNavigationError($event)"
                 (success)="resetError()"
                 (ready)="emitReadyEvent($event)"
                 (preview)="showFile($event)"
                 (folderChange)="onFolderChange($event)"
                 (permissionError)="handlePermissionError($event)"
-                (name-click)="documentList.onNodeDblClick($event.detail?.node)">
-                <adf-custom-header-filter-template *ngIf="enableCustomHeaderFilter">
-                    <ng-template let-col>
-                        <adf-search-header [col]="col"
-                                           [value]="paramValues? paramValues[col.key] : null"
-                                           [currentFolderNodeId]="currentFolderId"
-                                           [sorting]="filterSorting"
-                                           [maxItems]="pagination?.maxItems"
-                                           [skipCount]="pagination?.skipCount"
-                                           (update)="onFilterUpdate($event)"
-                                           (clear)="onAllFilterCleared()"
-                                           (selection)="onFilterSelected($event)">
-                        </adf-search-header>
-                    </ng-template>
-                </adf-custom-header-filter-template>
+                (name-click)="documentList.onNodeDblClick($event.detail?.node)"
+                (filterSelection)="onFilterSelected($event)">
+
                 <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">
                     <h1>You don't have permissions</h1>
                 </adf-custom-no-permission-template>

demo-shell/src/app/components/files/files.component.ts

@@ -39,7 +39,8 @@ import {
     UploadFilesEvent,
     ConfirmDialogComponent,
     LibraryDialogComponent,
-    ContentMetadataService
+    ContentMetadataService,
+    FilterSearch
 } from '@alfresco/adf-content-services';
 
 import { SelectAppsDialogComponent, ProcessFormRenderingService } from '@alfresco/adf-process-services';
@@ -79,9 +80,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     toolbarColor = 'default';
 
     selectionModes = [
-        {value: 'none', viewValue: 'None'},
-        {value: 'single', viewValue: 'Single'},
-        {value: 'multiple', viewValue: 'Multiple'}
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
     ];
 
     // The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
@@ -165,7 +166,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
     navigationRoute = '/files';
 
     @Input()
-    enableCustomHeaderFilter = false;
+    headerFilters = false;
 
     @Input()
     paramValues: Map<any, any> = null;
@@ -365,7 +366,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
     getCurrentDocumentListNode(): MinimalNodeEntity[] {
         if (this.documentList.folderNode) {
-            return [{entry: this.documentList.folderNode}];
+            return [{ entry: this.documentList.folderNode }];
         } else {
             return [];
         }
@@ -464,7 +465,7 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
 
         if (this.contentService.hasAllowableOperations(contentEntry, 'update')) {
             this.dialog.open(VersionManagerDialogAdapterComponent, {
-                data: {contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload},
+                data: { contentEntry: contentEntry, showComments: showComments, allowDownload: allowDownload },
                 panelClass: 'adf-version-manager-dialog',
                 width: '630px'
             });
@@ -677,11 +678,30 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return '';
     }
 
-    onFilterUpdate(newNodePaging: NodePaging) {
-        this.nodeResult = newNodePaging;
+    onFilterSelected(activeFilters: FilterSearch[]) {
+        if (activeFilters.length) {
+           this.navigateToFilter(activeFilters);
+        } else {
+           this.clearFilterNavigation();
+        }
     }
 
-    onAllFilterCleared() {
+    navigateToFilter(activeFilters: FilterSearch[]) {
+        const objectFromMap = {};
+        activeFilters.forEach((filter: FilterSearch) => {
+            let paramValue = null;
+            if (filter.value && filter.value.from && filter.value.to) {
+                paramValue = `${filter.value.from}||${filter.value.to}`;
+            } else {
+                paramValue = filter.value;
+            }
+            objectFromMap[filter.key] = paramValue;
+        });
+
+        this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
+    }
+
+    clearFilterNavigation() {
         this.documentList.node = null;
         if (this.currentFolderId === '-my-') {
             this.router.navigate([this.navigationRoute, '']);
@@ -691,21 +711,6 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         this.documentList.reload();
     }
 
-    onFilterSelected(currentActiveFilters: Map<string, string>) {
-        const objectFromMap = {};
-        currentActiveFilters.forEach((value: any, key) => {
-            let paramValue = null;
-            if (value && value.from && value.to) {
-                paramValue = `${value.from}||${value.to}`;
-            } else {
-                paramValue = value;
-            }
-            objectFromMap[key] = paramValue;
-        });
-
-        this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
-    }
-
     setPreselectNodes(nodes: string) {
         this.selectedNodes = this.getArrayFromString(nodes);
         this.documentList.reload();

demo-shell/src/app/components/files/filtered-search.component.html

@@ -4,8 +4,6 @@
                      [showSettingsPanel]="false"
                      [navigationRoute]="navigationRoute"
                      [currentFolderId]="currentFolderId"
-                     [filterSorting]="filterSorting"
-                     [enableCustomHeaderFilter]="true"
-                     [paramValues]="queryParams"
-                     (sorting-changed)="onSortingChanged($event)">
+                     [headerFilters]="true"
+                     [paramValues]="queryParams">
 </app-files-component>

demo-shell/src/app/components/files/filtered-search.component.ts

@@ -16,13 +16,11 @@
  */
 
 import { Component, Optional } from '@angular/core';
-import { SEARCH_QUERY_SERVICE_TOKEN, SearchHeaderQueryBuilderService } from '@alfresco/adf-content-services';
 import { ActivatedRoute, Params } from '@angular/router';
 
 @Component({
     selector: 'app-filtered-search-component',
-    templateUrl: './filtered-search.component.html',
-    providers: [{ provide: SEARCH_QUERY_SERVICE_TOKEN, useClass: SearchHeaderQueryBuilderService}]
+    templateUrl: './filtered-search.component.html'
 })
 export class FilteredSearchComponent {
 
@@ -30,7 +28,6 @@ export class FilteredSearchComponent {
     currentFolderId = '-my-';
 
     queryParams = null;
-    filterSorting: string = 'name-asc';
 
     constructor(@Optional() private route: ActivatedRoute) {
 
@@ -46,9 +43,4 @@ export class FilteredSearchComponent {
             });
         }
     }
-
-    onSortingChanged(event) {
-        this.filterSorting = event.detail.key + '-' + event.detail.direction;
-    }
-
 }