hide Pagination in empty folder #1595 (#1811)

* hide Pagination in empty folder #1595

* unify isPaginationEnabled condition in template #1595

ng2-components/ng2-alfresco-documentlist/karma.conf.js

@@ -51,6 +51,7 @@ module.exports = function (config) {
 
       { pattern: 'node_modules/ng2-alfresco-datatable/src/**/*.js', included: false, served: true, watched: false },
       { pattern: 'node_modules/ng2-alfresco-datatable/index.js', included: false, served: true, watched: false },
+      { pattern: 'src/assets/images/empty_doc_lib.svg', included: false, served: true, watched: false },
 
       // paths to support debugging with source maps in dev tools
       {pattern: 'src/**/*.ts', included: false, watched: false},

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -30,11 +30,10 @@
         </no-content-template>
     </div>
 </alfresco-datatable>
-<alfresco-pagination *ngIf="enablePagination"
+<alfresco-pagination *ngIf="isPaginationEnabled()"
     (changePageSize)="onChangePageSize($event)"
     (nextPage)="onNextPage($event)"
     (prevPage)="onPrevPage($event)"
     [pagination]="pagination"
     [supportedPageSizes]="[5, 10, 15, 20]">
 </alfresco-pagination>
-

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.spec.ts

@@ -17,26 +17,45 @@
 
 import { NgZone, SimpleChange, TemplateRef } from '@angular/core';
 import { DataTableComponent, DataColumn, DataRowEvent } from 'ng2-alfresco-datatable';
-
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { CoreModule } from 'ng2-alfresco-core';
 import { DocumentListComponent } from './document-list.component';
-import { DocumentListServiceMock } from './../assets/document-list.service.mock';
+import { DocumentListService } from './../services/document-list.service';
 import { ContentActionModel } from '../models/content-action.model';
 import { FileNode, FolderNode } from '../assets/document-library.model.mock';
 import { NodeMinimalEntry, NodeMinimal, NodePaging } from '../models/document-library.model';
 import { ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatable-adapter';
+import { DataTableModule } from 'ng2-alfresco-datatable';
+import { DocumentMenuActionComponent } from './document-menu-action.component';
 
 describe('DocumentList', () => {
 
-    let documentListService: DocumentListServiceMock;
     let documentList: DocumentListComponent;
+    let fixture: ComponentFixture<DocumentListComponent>;
+    let element: HTMLElement;
     let eventMock: any;
     let componentHandler;
 
-    beforeEach(() => {
-        documentListService = new DocumentListServiceMock();
+    beforeEach(async(() => {
         let zone = new NgZone(false);
-        documentList = new DocumentListComponent(documentListService, zone, null);
 
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                DataTableModule.forRoot()
+            ],
+            declarations: [
+                DocumentListComponent,
+                DocumentMenuActionComponent
+            ],
+            providers: [
+                DocumentListService,
+                {provide: NgZone, useValue: zone}
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
         eventMock = {
             preventDefault: function () {
                 console.log('mock preventDefault');
@@ -47,18 +66,21 @@ describe('DocumentList', () => {
             'upgradeAllRegistered'
         ]);
         window['componentHandler'] = componentHandler;
+
+        fixture = TestBed.createComponent(DocumentListComponent);
+
+        element = fixture.nativeElement;
+        documentList = fixture.componentInstance;
+        fixture.detectChanges();
     });
 
     it('should setup default columns', () => {
-        spyOn(documentList, 'setupDefaultColumns').and.callThrough();
-
         documentList.ngAfterContentInit();
 
-        expect(documentList.setupDefaultColumns).toHaveBeenCalled();
         expect(documentList.data.getColumns().length).not.toBe(0);
     });
 
-    it('should use custom columns instead of default ones', () => {
+    it('should add the custom columns', () => {
         let column = <DataColumn> {
             title: 'title',
             key: 'source',
@@ -72,8 +94,8 @@ describe('DocumentList', () => {
         columns.push(column);
 
         documentList.ngAfterContentInit();
-        expect(columns.length).toBe(1);
-        expect(columns[0]).toBe(column);
+        expect(columns.length).toBe(3);
+        expect(columns[2]).toBe(column);
     });
 
     it('should execute action with node', () => {
@@ -313,12 +335,6 @@ describe('DocumentList', () => {
         expect(documentList.performNavigation(null)).toBeFalsy();
     });
 
-    /*
-     it('should not get node path for null node', () => {
-     expect(documentList.getNodePath(null)).toBeNull();
-     });
-     */
-
     it('should require valid node for file preview', () => {
         let file = new FileNode();
         file.entry = null;
@@ -359,7 +375,6 @@ describe('DocumentList', () => {
 
     it('should display folder content from loadFolderByNodeId on reload if currentFolderId defined', () => {
         documentList.currentFolderId = 'id-folder';
-        spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.reject(false));
         spyOn(documentList, 'loadFolderByNodeId').and.callThrough();
         documentList.reload();
         expect(documentList.loadFolderByNodeId).toHaveBeenCalled();
@@ -440,16 +455,12 @@ describe('DocumentList', () => {
     });
 
     it('should emit error on wrong folder id', (done) => {
-        let raised = false;
-        documentList.error.subscribe(err => raised = true);
-        spyOn(documentListService, 'getFolderNode').and.returnValue(Promise.reject(false));
+        documentList.error.subscribe(() => {
+            done();
+        });
 
         documentList.currentFolderId = 'wrong-id';
         documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId)});
-        setTimeout(() => {
-            expect(raised).toBeTruthy();
-            done();
-        }, 0);
     });
 
     it('should require dataTable to check empty template', () => {
@@ -467,6 +478,14 @@ describe('DocumentList', () => {
         expect(documentList.isEmptyTemplateDefined()).toBeFalsy();
     });
 
+    it('should empty folder NOT show the pagination', () => {
+        documentList.emptyFolderTemplate = <TemplateRef<any>> {};
+        documentList.dataTable = new DataTableComponent(null);
+
+        expect(documentList.isEmpty()).toBeTruthy();
+        expect(element.querySelector('alfresco-pagination')).toBe(null);
+    });
+
     it('should set row filter for underlying adapter', () => {
         let filter = <RowFilter> {};
         documentList.currentFolderId = 'id';

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts

@@ -255,6 +255,14 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
         return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     }
 
+    isEmpty() {
+        return this.data.getRows().length === 0;
+    }
+
+    isPaginationEnabled() {
+        return this.enablePagination && !this.isEmpty();
+    }
+
     getNodeActions(node: MinimalNodeEntity): ContentActionModel[] {
         let target = null;