[ADF-5219] Refactor Document list Filters

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,35 +678,39 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         return '';
     }
 
-    onFilterUpdate(newNodePaging: NodePaging) {
-        this.nodeResult = newNodePaging;
-    }
-
-    onAllFilterCleared() {
-        this.documentList.node = null;
-        if (this.currentFolderId === '-my-') {
-            this.router.navigate([this.navigationRoute, '']);
+    onFilterSelected(activeFilters: FilterSearch[]) {
+        if (activeFilters.length) {
+           this.navigateToFilter(activeFilters);
         } else {
-            this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]);
+           this.clearFilterNavigation();
         }
-        this.documentList.reload();
     }
 
-    onFilterSelected(currentActiveFilters: Map<string, string>) {
+    navigateToFilter(activeFilters: FilterSearch[]) {
         const objectFromMap = {};
-        currentActiveFilters.forEach((value: any, key) => {
+        activeFilters.forEach((filter: FilterSearch) => {
             let paramValue = null;
-            if (value && value.from && value.to) {
-                paramValue = `${value.from}||${value.to}`;
+            if (filter.value && filter.value.from && filter.value.to) {
+                paramValue = `${filter.value.from}||${filter.value.to}`;
             } else {
-                paramValue = value;
+                paramValue = filter.value;
             }
-            objectFromMap[key] = paramValue;
+            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, '']);
+        } else {
+            this.router.navigate([this.navigationRoute, this.currentFolderId, 'display', this.displayMode]);
+        }
+        this.documentList.reload();
+    }
+
     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,21 +16,18 @@
  */
 
 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 {
 
     navigationRoute = '/filtered-search';
     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;
-    }
-
 }

docs/content-services/components/document-list.component.md

@@ -32,6 +32,7 @@ Displays the documents from a repository.
     -   [Location Column](#location-column)
     -   [Actions](#actions)
     -   [Navigation mode](#navigation-mode)
+    -   [Header filters](#header-filters)
 -   [Advanced usage and customization](#advanced-usage-and-customization)
     -   [Image Resolver and Row Filter functions](#image-resolver-and-row-filter-functions)
     -   [Custom 'empty folder' template](#custom-empty-folder-template)
@@ -56,7 +57,7 @@ Displays the documents from a repository.
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| additionalSorting | `string[]` | ['isFolder DESC'] | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
+| additionalSorting | [`DataSorting`](../../../lib/core/datatable/data/data-sorting.model.ts) | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
 | allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list or into another file to trigger updating it's version. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
 | contentActions | `boolean` | false | Toggles content actions for each row |
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
@@ -78,13 +79,15 @@ Displays the documents from a repository.
 | rowStyleClass | `string` |  | The CSS class to apply to every row |
 | selectionMode | `string` | "single" | Row selection mode. Can be null, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
 | showHeader | `string` |  | Toggles the header |
-| sorting | `string[]` | ['name', 'asc'] | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
+| sorting | `string[]` \| [`DataSorting`](../../../lib/core/datatable/data/data-sorting.model.ts) | ['name', 'asc'] | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override the default sorting detected by the component based on columns. |
 | sortingMode | `string` | "server" | Defines sorting mode. Can be either `client` (items in the list are sorted client-side) or `server` (the ordering supplied by the server is used without further client-side sorting). Note that the `server` option _does not_ request the server to sort the data before delivering it. |
 | stickyHeader | `boolean` | false | Toggles the sticky header mode. |
 | thumbnails | `boolean` | false | Show document thumbnails rather than icons |
 | where | `string` |  | Filters the [`Node`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) list using the _where_ condition of the REST API (for example, isFolder=true). See the REST API documentation for more information. |
-| currentFolderId | `string` |  | The ID of the folder node to display or a reserved string alias for special sources |
+| currentFolderId | `string` | null | The ID of the folder node to display or a reserved string alias for special sources |
 | rowFilter | [`RowFilter`](../../../lib/content-services/src/lib/document-list/data/row-filter.model.ts) |  | Custom function to choose whether to show or hide rows. See the [Row Filter Model](row-filter.model.md) page for more information. |
+| headerFilters | `boolean` | false | Toggles the header filters mode. |
+| filterValue | any | | Initial value for filter. |
 
 ### Events
 
@@ -96,7 +99,8 @@ Displays the documents from a repository.
 | nodeDblClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user double-clicks a list node |
 | nodeSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]>` | Emitted when the node selection change |
 | preview | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodeEntityEvent`](../../../lib/content-services/src/lib/document-list/components/node.event.ts)`>` | Emitted when the user acts upon files with either single or double click (depends on `navigation-mode`). Useful for integration with the [Viewer component](../../core/components/viewer.component.md). |
-| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use |
+| ready | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)`>` | Emitted when the Document List has loaded all items and is ready for use. |
+| filterSelection | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterSearch[]`](../../../lib/content-services/src/lib/search/filter-search.interface.ts)`>` | Emitted when a filter value is selected. |
 
 ## Details
 
@@ -687,6 +691,18 @@ The following example switches navigation to single clicks:
 </adf-document-list>
 ```
 
+### Header filters
+
+You can enable Header filters in your document list simply setting to true its `headerFilters` input.
+
+```html
+<adf-document-list 
+    currentFolderId="-my-" 
+    [headerFilters]="true">
+</adf-document-list>
+```
+![Header filters](../../docassets/images/header-filters.png)
+
 ## Advanced usage and customization
 
 ### Image Resolver and Row Filter functions