[ACA-4045] Show Document List header if filter header is active (#1739)

* [ACA-4045] Show Document List header if filter heeader is active

* Update files.component.spec.ts

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

@@ -68,6 +68,16 @@
               </ng-container>
             </ng-container>
           </data-columns>
+
+          <adf-custom-empty-content-template *ngIf="isFilterHeaderActive()">
+            <ng-container>
+              <div class="empty-search__block">
+                <p class="empty-search__text">
+                  {{ 'APP.BROWSE.SEARCH.NO_FILTER_RESULTS' | translate }}
+                </p>
+              </div>
+            </ng-container>
+          </adf-custom-empty-content-template>
         </adf-document-list>
 
         <adf-pagination acaPagination [target]="documentList"> </adf-pagination>

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

@@ -32,14 +32,16 @@ import {
   UploadService,
   AppConfigPipe,
   AlfrescoApiService,
-  AlfrescoApiServiceMock
+  AlfrescoApiServiceMock,
+  DataTableModule
 } from '@alfresco/adf-core';
-import { DocumentListComponent } from '@alfresco/adf-content-services';
+import { DocumentListComponent, FilterSearch } from '@alfresco/adf-content-services';
 import { NodeActionsService } from '../../services/node-actions.service';
 import { FilesComponent } from './files.component';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { ContentApiService } from '@alfresco/aca-shared';
 import { of, throwError } from 'rxjs';
+import { By } from '@angular/platform-browser';
 
 describe('FilesComponent', () => {
   let node;
@@ -55,7 +57,7 @@ describe('FilesComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [AppTestingModule],
+      imports: [AppTestingModule, DataTableModule],
       declarations: [FilesComponent, DataTableComponent, NodeFavoriteDirective, DocumentListComponent, AppConfigPipe],
       providers: [
         { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
@@ -299,4 +301,18 @@ describe('FilesComponent', () => {
       expect(component.isSiteContainer(mock)).toBe(true);
     });
   });
+
+  describe('filter header', () => {
+    it('should show custom empty template if filter headers are applied', async () => {
+      fixture.detectChanges();
+      spyOn(component.documentList, 'loadFolder').and.callFake(() => {});
+      component.onFilterSelected([{ key: 'name', value: 'aaa' } as FilterSearch]);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      const emptyContentTemplate: HTMLElement = fixture.debugElement.query(By.css('.empty-search__block')).nativeElement;
+      expect(emptyContentTemplate).toBeDefined();
+      expect(emptyContentTemplate.innerText).toBe('APP.BROWSE.SEARCH.NO_FILTER_RESULTS');
+    });
+  });
 });

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

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { FileUploadEvent, UploadService } from '@alfresco/adf-core';
+import { FileUploadEvent, ShowHeaderMode, UploadService } from '@alfresco/adf-core';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -293,8 +293,10 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
 
   onFilterSelected(activeFilters: FilterSearch[]) {
     if (activeFilters.length) {
+      this.showHeader = ShowHeaderMode.Always;
       this.navigateToFilter(activeFilters);
     } else {
+      this.showHeader = ShowHeaderMode.Data;
       this.onAllFilterCleared();
     }
   }
@@ -313,4 +315,8 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
 
     this.router.navigate([], { relativeTo: this.route, queryParams: objectFromMap });
   }
+
+  isFilterHeaderActive(): boolean {
+    return this.showHeader === ShowHeaderMode.Always;
+  }
 }

src/app/testing/translation.service.ts

@@ -30,7 +30,7 @@ import { Observable, of } from 'rxjs';
 @Injectable()
 export class TranslateServiceMock extends TranslateService {
   constructor() {
-    super(null, null, null, null, null, null, null, null, null);
+    super(null, null, null, null, null, null, true, null, null);
   }
 
   get(key: string | Array<string> /*,

src/assets/i18n/en.json

@@ -175,6 +175,7 @@
                 },
                 "UNKNOWN_LOCATION": "Unknown",
                 "NO_RESULTS": "Your search returned 0 results",
+                "NO_FILTER_RESULTS": "Your filter returned 0 results",
                 "TOGGLE_SEARCH_FILTER": "Toggle search filter",
                 "ERRORS": {
                     "500": "There was an error processing the search query [500]",