[ADF-5257] Refactor Document list header filters (#1691)

* [ADF-5219] Refactor Document list header filters

* Fix navigation

* Remove unsued code

* Push package-lock

* Fix C306990

src/app/components/files/files.component.html

@@ -29,26 +29,13 @@
           [navigate]="false"
           [sorting]="['name', 'ASC']"
           [imageResolver]="imageResolver"
+          [headerFilters]="true"
+          [filterValue]="queryParams"
           (node-dblclick)="navigateTo($event.detail?.node)"
           (name-click)="navigateTo($event.detail?.node)"
           (sorting-changed)="onSortingChanged($event)"
+          (filterSelection)="onFilterSelected($event)"
         >
-          <adf-custom-header-filter-template>
-            <ng-template let-col>
-              <adf-search-header
-                [col]="col"
-                [currentFolderNodeId]="node?.id"
-                [maxItems]="(documentList?.pagination | async)?.maxItems"
-                [value]="queryParams ? queryParams[col.key] : null"
-                [skipCount]="(documentList?.pagination | async)?.skipCount"
-                [sorting]="filterSorting"
-                (update)="onFilterUpdate($event)"
-                (clear)="onAllFilterCleared()"
-                (selection)="onFilterSelected($event)"
-              >
-              </adf-search-header>
-            </ng-template>
-          </adf-custom-header-filter-template>
           <data-columns>
             <ng-container *ngFor="let column of columns; trackBy: trackById">
               <ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">

src/app/components/files/files.component.ts

@@ -35,16 +35,11 @@ import { AppExtensionService, ContentApiService } from '@alfresco/aca-shared';
 import { SetCurrentFolderAction, isAdmin, AppStore, UploadFileVersionAction } from '@alfresco/aca-shared/store';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { debounceTime, takeUntil } from 'rxjs/operators';
-import { ShareDataRow, SEARCH_QUERY_SERVICE_TOKEN, SearchHeaderQueryBuilderService } from '@alfresco/adf-content-services';
+import { ShareDataRow } from '@alfresco/adf-content-services';
+import { FilterSearch } from '@alfresco/adf-content-services/lib/search/filter-search.interface';
 
 @Component({
-  templateUrl: './files.component.html',
-  providers: [
-    {
-      provide: SEARCH_QUERY_SERVICE_TOKEN,
-      useClass: SearchHeaderQueryBuilderService
-    }
-  ]
+  templateUrl: './files.component.html'
 })
 export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
   isValidPath = true;
@@ -296,16 +291,24 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  onFilterSelected(currentActiveFilters: Map<string, string>) {
+  onFilterSelected(activeFilters: FilterSearch[]) {
+    if (activeFilters.length) {
+      this.navigateToFilter(activeFilters);
+    } else {
+      this.onAllFilterCleared();
+    }
+  }
+
+  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 });

src/app/components/page.component.spec.ts

@@ -149,18 +149,6 @@ describe('PageComponent', () => {
       expect(store.dispatch['calls'].mostRecent().args[0]).toEqual(new SetSelectedNodesAction([node]));
     });
 
-    it('should update source on onFilterUpdate event', () => {
-      const nodePaging = {
-        list: {
-          pagination: {},
-          entries: [{ entry: { id: 'new-node-id' } }]
-        }
-      } as NodePaging;
-
-      component.onFilterUpdate(nodePaging);
-      expect(component.nodeResult).toEqual(nodePaging);
-    });
-
     it('should clear results onAllFilterCleared event', () => {
       component.documentList = {
         node: {

src/app/components/page.component.ts

@@ -161,10 +161,6 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
     return location.href.includes('viewer:view');
   }
 
-  onFilterUpdate(newNodePaging: NodePaging) {
-    this.nodeResult = newNodePaging;
-  }
-
   onSortingChanged(event) {
     this.filterSorting = event.detail.key + '-' + event.detail.direction;
   }