Dev baptiste aca 3430

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

@@ -245,8 +245,8 @@
                 (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" (update)="onFilterUpdate($event)"></adf-search-header>
+                    <ng-template let-col let-update="update">
+                        <adf-search-header [col]="col" [update]="update"></adf-search-header>
                     </ng-template>
                 </adf-custom-header-filter-template>
                 <adf-custom-no-permission-template *ngIf="enableCustomPermissionMessage">

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

@@ -634,8 +634,4 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
         return '';
     }
-
-    onFilterUpdate(newNodePaging: NodePaging) {
-        this.documentList.onFilterUpdate(newNodePaging);
-    }
 }

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -27,7 +27,7 @@
     <adf-header-filter-template>
         <ng-template let-col>
             <ng-template [ngTemplateOutlet]="customHeaderFilterTemplate?.template"
-                [ngTemplateOutletContext]="{$implicit: col}">
+                [ngTemplateOutletContext]="{$implicit: col, update: filterUpdate}">
             </ng-template>
         </ng-template>
     </adf-header-filter-template>

lib/content-services/src/lib/document-list/components/document-list.component.scss

@@ -207,11 +207,4 @@
             }
         }
     }
-
-    .adf-filter-button {
-        mat-icon {
-            height: 18px;
-            width: 18px;
-        }
-    }
 }

lib/content-services/src/lib/document-list/components/document-list.component.spec.ts

@@ -33,7 +33,8 @@ import {
     fakeNodeAnswerWithNOEntries,
     fakeNodeWithNoPermission,
     fakeGetSitesAnswer,
-    fakeGetSiteMembership
+    fakeGetSiteMembership,
+    fakeNodePaging
 } from '../../mock';
 import { ContentActionModel } from '../models/content-action.model';
 import { NodeMinimal, NodeMinimalEntry, NodePaging } from '../models/document-library.model';
@@ -1486,6 +1487,15 @@ describe('DocumentList', () => {
             where: undefined
         }, undefined);
     });
+
+    it('should update the displayed nodes when a new node paging comes from the header filters', () => {
+        const mockNodePaging: NodePaging = <NodePaging> fakeNodePaging;
+        documentList.filterUpdate.emit(mockNodePaging);
+
+        fixture.detectChanges();
+
+        expect(documentList.node).toBe(mockNodePaging);
+    });
 });
 
 @Component({

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -313,6 +313,7 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
     selection = new Array<NodeEntry>();
     $folderNode: Subject<Node> = new Subject<Node>();
     allowFiltering: boolean = true;
+    filterUpdate: EventEmitter<NodePaging> = new EventEmitter();
 
     // @deprecated 3.0.0
     folderNode: Node;
@@ -404,6 +405,12 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
             .subscribe(val => this.contextActionCallback(val));
 
         this.enforceSingleClickNavigationForMobile();
+
+        this.filterUpdate
+            .subscribe((newNodePaging: NodePaging) => {
+                this.node = newNodePaging;
+                this.reload();
+            });
     }
 
     ngAfterContentInit() {
@@ -858,9 +865,4 @@ export class DocumentListComponent implements OnInit, OnChanges, OnDestroy, Afte
         this.setLoadingState(false);
         this.error.emit(err);
     }
-
-    onFilterUpdate(newNodePaging: NodePaging) {
-        this.node = newNodePaging;
-        this.reload();
-    }
 }

lib/content-services/src/lib/i18n/en.json

@@ -286,6 +286,7 @@
       }
     },
     "SEARCH_HEADER" : {
+      "TITLE":"Filter",
       "FILTER_BY": "Filter by {{ category }}",
       "CLEAR": "Clear",
       "APPLY": "Apply"

lib/content-services/src/lib/mock/document-list.component.mock.ts

@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
-import { Node } from '@alfresco/js-api';
+import { Node, NodePaging } from '@alfresco/js-api';
 
-export const fakeNodeWithCreatePermission =  new Node({
+export const fakeNodeWithCreatePermission = new Node({
     isFile: false,
     createdByUser: { id: 'admin', displayName: 'Administrator' },
     modifiedAt: '2017-06-08T13:53:46.495Z',
@@ -193,3 +193,25 @@ export const fakeGetSiteMembership = {
         }]
     }
 };
+
+export const fakeNodePaging: NodePaging = {
+    list: {
+        pagination: {
+            count: 5,
+            hasMoreItems: false,
+            totalItems: 5,
+            skipCount: 0,
+            maxItems: 100
+        }, entries: [{
+            entry: fakeNodeWithNoPermission
+        }, {
+            entry: fakeNodeWithNoPermission
+        }, {
+            entry: fakeNodeWithNoPermission
+        }, {
+            entry: fakeNodeWithNoPermission
+        }, {
+            entry: fakeNodeWithNoPermission
+        }]
+    }
+};

lib/content-services/src/lib/search/base-query-builder.service.ts

@@ -191,7 +191,6 @@ export abstract class BaseQueryBuilderService {
     update(): void {
         const query = this.buildQuery();
         this.updated.next(query);
-        // console.log(query);
     }
 
     /**

lib/content-services/src/lib/search/components/search-header/search-header.component.html

@@ -1,24 +1,25 @@
-<div *ngIf="!!category">
+<div *ngIf="!!category" class="adf-filter">
     <button mat-icon-button [matMenuTriggerFor]="filter"
         (click)="onMenuButtonClick($event)"
         class="adf-filter-button"
-        matTooltip="{{ 'SEARCH.SEARCH_HEADER.FILTER_BY' | translate:{category: col.title} }}">
+        matTooltip="{{ 'SEARCH.SEARCH_HEADER.FILTER_BY' | translate: { category: col.title || 'Type' } }}">
         <adf-icon value="adf:filter" color="primary"></adf-icon>
     </button>
 
-    <mat-menu #filter="matMenu">
-        <div (click)="onMenuButtonClick($event)">
+    <mat-menu #filter="matMenu" class="adf-filter-menu">
+        <div (click)="onMenuClick($event)" class="adf-filter-container">
+            <div class="adf-filter-title">{{ 'SEARCH.SEARCH_HEADER.TITLE' | translate }}</div>
             <adf-search-widget-container
                 [id]="category.id"
                 [selector]="category.component.selector"
                 [settings]="category.component.settings">
             </adf-search-widget-container>
-            <mat-dialog-actions>
-                <button mat-button>{{ 'SEARCH.SEARCH_HEADER.CLEAR' | translate | uppercase }}
-                </button>
-                <button mat-button (click)="onApplyButtonClick()">{{ 'SEARCH.SEARCH_HEADER.APPLY' | translate | uppercase }}
-                </button>
-            </mat-dialog-actions>
         </div>
+        <mat-dialog-actions class="adf-filter-actions">
+            <button mat-button>{{ 'SEARCH.SEARCH_HEADER.CLEAR' | translate | uppercase }}
+            </button>
+            <button mat-button color="primary" class="adf-filter-apply-button" (click)="onApplyButtonClick()">{{ 'SEARCH.SEARCH_HEADER.APPLY' | translate | uppercase }}
+            </button>
+        </mat-dialog-actions>
     </mat-menu>
 </div>

lib/content-services/src/lib/search/components/search-header/search-header.component.scss

@@ -0,0 +1,57 @@
+@mixin adf-filter-menu-theme($theme) {
+    $background: map-get($theme, background);
+
+    .adf-filter {
+
+        &-button {
+
+            .adf-icon {
+                opacity: 1;
+            }
+
+            .mat-icon {
+                height: 18px;
+                width: 18px;
+            }
+        }
+
+        &-container {
+            display: flex;
+            flex-direction: column;
+            padding: 10px;
+
+            .adf-facet-buttons {
+                display: none;
+            }
+
+            .adf-search-check-list {
+                padding: 5px 0;
+            }
+        }
+
+        &-title {
+            font-size: 1.1em;
+            padding-bottom: 5px;
+        }
+
+        &-actions {
+            background-color: mat-color($background, background);
+            display: flex;
+            justify-content: flex-end;
+            padding: 5px 10px;
+
+            > button {
+                font-size: 0.9em;
+            }
+        }
+
+        &-apply-button {
+            background-color: mat-color($background, hover);
+        }
+    }
+
+    .mat-menu-panel.adf-filter-menu .mat-menu-content {
+        min-width: 250px;
+        padding: 0;
+    }
+}

lib/content-services/src/lib/search/components/search-header/search-header.component.spec.ts

@@ -0,0 +1,98 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Subject } from 'rxjs';
+import { EventEmitter } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { NodePaging } from '@alfresco/js-api';
+import { AppConfigService, SearchService, setupTestBed } from '@alfresco/adf-core';
+import { SearchHeaderComponent } from './search-header.component';
+import { SearchQueryBuilderService } from '../../search-query-builder.service';
+import { SearchHeaderQueryBuilderService } from '../../search-header-query-builder.service';
+import { ContentTestingModule } from '../../../testing/content.testing.module';
+import { fakeNodePaging } from '../../../mock';
+
+const mockCategory: any = {
+    'id': 'queryName',
+    'name': 'Name',
+    'columnKey': 'name',
+    'enabled': true,
+    'expanded': true,
+    'component': {
+        'selector': 'text',
+        'settings': {
+            'pattern': "cm:name:'(.*?)'",
+            'field': 'cm:name',
+            'placeholder': 'Enter the name'
+        }
+    }
+};
+
+describe('SearchHeaderComponent', () => {
+    let fixture: ComponentFixture<SearchHeaderComponent>;
+    let component: SearchHeaderComponent;
+    let queryBuilder: SearchHeaderQueryBuilderService;
+    let appConfigService: AppConfigService;
+    const searchMock: any = {
+        dataLoaded: new Subject()
+    };
+
+    setupTestBed({
+        imports: [
+            TranslateModule.forRoot(),
+            ContentTestingModule
+        ],
+        providers: [
+            {
+                provide: SearchService,
+                useValue: searchMock
+            },
+            {
+                provide: SearchQueryBuilderService,
+                useClass: SearchHeaderQueryBuilderService
+            }
+        ]
+    });
+
+    beforeEach(() => {
+        queryBuilder = TestBed.get(SearchHeaderQueryBuilderService);
+        fixture = TestBed.createComponent(SearchHeaderComponent);
+        appConfigService = TestBed.get(AppConfigService);
+        component = fixture.componentInstance;
+        component.col = {key: '123', type: 'text'};
+        component.update = new EventEmitter();
+        spyOn(queryBuilder, 'getCategoryForColumn').and.returnValue(mockCategory);
+        fixture.detectChanges();
+    });
+
+    afterEach(() => fixture.destroy());
+
+    it('should emit the node paging received from the queryBuilder after the filter gets applied', (done) => {
+        const mockNodePaging: NodePaging = <NodePaging> fakeNodePaging;
+        spyOn(queryBuilder, 'execute').and.callFake(() => {
+            queryBuilder.executed.next(mockNodePaging);
+        });
+
+        const applyButton = fixture.debugElement.nativeElement.querySelector('.adf-filter-button');
+        applyButton.click();
+
+        component.update.subscribe((newNodePaging) => {
+            expect(newNodePaging).toBe(mockNodePaging);
+            done();
+        });
+    });
+});