[ADF-970] Create a new Empty list component for the datatable (#2045)

* Create a new empty list component
Share the component between attachment list and document list
Add unit test
Add basic documentation

* Use the adf empty list also in the process attachment component

* Fix unit test

* delete wrong file

ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html

@@ -1,12 +1,10 @@
-<div class="no-attachment-message" *ngIf="isEmpty()">
-    No Attachments Found
-</div>
-<adf-datatable *ngIf="!isEmpty()"
+<adf-datatable
     [rows]="attachments"
     [actions]="true"
     (rowDblClick)="openContent($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
+    <adf-empty-list></adf-empty-list>
     <data-columns>
         <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>

ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts

@@ -161,18 +161,18 @@ describe('Activiti Process Instance Attachment List', () => {
         });
     }));
 
-    it('should not display attachments when the process has no attachments', async(() => {
+    it('should show the empty list component when the attachments list is empty', async(() => {
         component.processInstanceId = '123';
         getProcessRelatedContentSpy.and.returnValue(Observable.of({
-                'size': 0,
-                'total': 0,
-                'start': 0,
-                'data': []
-            }));
+            'size': 0,
+            'total': 0,
+            'start': 0,
+            'data': []
+        }));
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(0);
+            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
         });
     }));
 

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html

@@ -1,12 +1,10 @@
-<div class="no-attachment-message" *ngIf="isEmpty()">
-    No Attachments Found
-</div>
-<adf-datatable *ngIf="!isEmpty()"
+<adf-datatable
     [rows]="attachments"
     [actions]="true"
     (rowDblClick)="openContent($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)">
+    <adf-empty-list></adf-empty-list>
     <data-columns>
         <data-column key="icon" type="icon" srTitle="Thumbnail" [sortable]="false"></data-column>
         <data-column key="name" type="text" title="Name" class="full-width ellipsis-cell" [sortable]="true"></data-column>

ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts

@@ -156,7 +156,7 @@ describe('TaskAttachmentList', () => {
         });
     }));
 
-    it('should not display attachments when the task has no attachments', async(() => {
+    it('should show the empty list component when the attachments list is empty', async(() => {
         component.taskId = '123';
         getTaskRelatedContentSpy.and.returnValue(Observable.of({
             'size': 0,
@@ -167,7 +167,7 @@ describe('TaskAttachmentList', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            expect(fixture.debugElement.queryAll(By.css('adf-datatable tbody tr')).length).toBe(0);
+            expect(fixture.nativeElement.querySelector('adf-empty-list .empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
         });
     }));
 

ng2-components/ng2-alfresco-datatable/README.md

@@ -11,7 +11,8 @@
   * [DataColumn Properties](#datacolumn-properties)
   * [DataTable Events](#datatable-events)
   * [DataTable DOM Events](#datatable-dom-events)
-  * [Empty content template](#empty-content-template)
+  * [Default Empty content template](#default-empty-content-template)
+  * [Custom Empty content template](#custom-empty-content-template)
   * [Loading content template](#loading-content-template)
   * [Column Templates](#column-templates)
   * [Events](#events)
@@ -212,7 +213,7 @@ onRowClick(event) {
 
 ![](docs/assets/datatable-dom-events.png)
 
-### Empty content template
+### Custom Empty content template
 
 You can add a template that will be showed when there are no result in your datatable:
 
@@ -239,6 +240,40 @@ You can add a template that will be showed when there are no result in your data
 </adf-datatable>
 ```
 
+### Default Empty content template
+
+You can use the empty list component if you want show the default ADF empty template:
+
+```html
+<adf-datatable
+    [data]="data"
+    [actions]="contentActions"
+    [multiselect]="multiselect"
+    (showRowContextMenu)="onShowRowContextMenu($event)"
+    (showRowActionsMenu)="onShowRowActionsMenu($event)"
+    (executeRowAction)="onExecuteRowAction($event)"
+    (rowClick)="onRowClick($event)"
+    (rowDblClick)="onRowDblClick($event)">
+        
+        <adf-empty-list 
+            [emptyListImageUrl]="'my-background-image.svg'"
+            [emptyMsg]="'My custom msg'"
+            [dragDropMsg]="'My drag and drom msg'"
+            [additionalMsg]="'My additional msg'">
+        </adf-empty-list>
+        
+</adf-datatable>
+```
+
+| Name | Type | Default | Description
+| --- | --- | --- | --- |
+| emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background |
+| emptyMsg | String | This list is empty | The default title message |
+| dragDropMsg | String | Drag and drop | The default drag and drop message |
+| additionalMsg | String | Drag and drop | The default additional message |
+
+![](docs/assets/adf-empty-list.png)
+
 ### Loading content template
 
 You can add a template that will be showed during the loading of your data:

ng2-components/ng2-alfresco-datatable/index.ts

@@ -23,11 +23,13 @@ export * from './src/data/index';
 
 export { DataTableCellComponent } from './src/components/datatable/datatable-cell.component';
 export { DataTableComponent } from './src/components/datatable/datatable.component';
+export { AdfEmptyList } from './src/components/datatable/adf-empty-list.component';
 export { PaginationComponent } from './src/components/pagination/pagination.component';
 export { DataCellEvent, DataCellEventModel } from './src/components/datatable/data-cell.event';
 export { DataRowActionEvent, DataRowActionModel } from './src/components/datatable/data-row-action.event';
 
 import { DataTableComponent } from './src/components/datatable/datatable.component';
+import { AdfEmptyList } from './src/components/datatable/adf-empty-list.component';
 import { NoContentTemplateComponent } from './src/directives/no-content-template.component';
 import { LoadingContentTemplateComponent } from './src/directives/loading-template.component';
 import { PaginationComponent } from './src/components/pagination/pagination.component';
@@ -36,6 +38,7 @@ import { DataTableCellComponent } from './src/components/datatable/datatable-cel
 export function directives() {
     return [
         DataTableComponent,
+        AdfEmptyList,
         DataTableCellComponent,
         NoContentTemplateComponent,
         LoadingContentTemplateComponent,

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.css

@@ -0,0 +1,44 @@
+.empty-list_empty_template {
+    text-align: center;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.empty-list__this-space-is-empty {
+    height: 32px;
+    opacity: 0.26;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 24px;
+    line-height: 1.33;
+    letter-spacing: -1px;
+    color: #000000;
+}
+
+.empty-list__drag-drop {
+    height: 56px;
+    opacity: 0.54;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 56px;
+    line-height: 1;
+    letter-spacing: -2px;
+    color: #000000;
+    margin-top: 40px;
+}
+
+.empty-list__any-files-here-to-add {
+    height: 24px;
+    opacity: 0.54;
+    font-family: Muli, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: -0.4px;
+    color: #000000;
+    margin-top: 17px;
+}
+
+.empty-list__empty_doc_lib {
+    width: 565px;
+    height: 161px;
+    object-fit: contain;
+    margin-top: 17px;
+}

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html

@@ -0,0 +1,6 @@
+<div  id="adf-empty-list" class="empty-list_empty_template">
+    <div class="empty-list__this-space-is-empty">{{emptyMsg}}</div>
+    <div class="empty-list__drag-drop">{{dragDropMsg}}</div>
+    <div class="empty-list__any-files-here-to-add">{{additionalMsg}}</div>
+    <img [src]="emptyListImageUrl" class="empty-list__empty_doc_lib">
+</div>

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts

@@ -0,0 +1,67 @@
+/*!
+ * @license
+ * Copyright 2016 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 { CoreModule } from 'ng2-alfresco-core';
+import { AdfEmptyList } from './adf-empty-list.component';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+describe('AdfEmptyListComponent', () => {
+    let component: AdfEmptyList;
+    let fixture: ComponentFixture<AdfEmptyList>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot()
+            ],
+            declarations: [
+                AdfEmptyList
+            ]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AdfEmptyList);
+        component = fixture.componentInstance;
+    }));
+
+    it('should be defined', () => {
+        expect(component).toBeDefined();
+    });
+
+    it('should show the default values', async(() => {
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('This list is empty');
+            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Drag and drop');
+            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('any files here to add');
+            expect(fixture.nativeElement.querySelector('.empty-list__empty_doc_lib').src).toContain('empty_doc_lib');
+        });
+    }));
+
+    it('should render the input values', async(() => {
+        component.emptyMsg = 'Fake empty msg';
+        component.dragDropMsg = 'Fake drag drop msg';
+        component.additionalMsg = 'Fake additional msg';
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.querySelector('.empty-list__this-space-is-empty').innerHTML).toEqual('Fake empty msg');
+            expect(fixture.nativeElement.querySelector('.empty-list__drag-drop').innerHTML).toEqual('Fake drag drop msg');
+            expect(fixture.nativeElement.querySelector('.empty-list__any-files-here-to-add').innerHTML).toEqual('Fake additional msg');
+        });
+    }));
+});

ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts

@@ -0,0 +1,43 @@
+/*!
+ * @license
+ * Copyright 2016 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 { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'adf-empty-list',
+    styleUrls: ['./adf-empty-list.component.css'],
+    templateUrl: './adf-empty-list.component.html'
+})
+export class AdfEmptyList {
+
+    @Input()
+    emptyListImageUrl: string = require('../../assets/images/empty_doc_lib.svg');
+
+    @Input()
+    emptyMsg: string = 'This list is empty';
+
+    @Input()
+    dragDropMsg: string = 'Drag and drop';
+
+    @Input()
+    additionalMsg: string = 'any files here to add';
+
+    constructor() {
+
+    }
+
+}

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -125,6 +125,7 @@
                              ngFor [ngForOf]="[data]"
                              [ngForTemplate]="noContentTemplate">
                 </ng-template>
+                <ng-content select="adf-empty-list"></ng-content>
             </td>
         </tr>
     </ng-container>

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

@@ -25,12 +25,7 @@
     <div *ngIf="!isEmptyTemplateDefined()">
         <no-content-template>
             <ng-template>
-                <div  id="adf-document-list-empty" class="document-list_empty_template">
-                    <div class="document-list__this-space-is-empty">This folder is empty</div>
-                    <div class="document-list__drag-drop">Drag and Drop</div>
-                    <div class="document-list__any-files-here-to-add">any files here to add</div>
-                    <img [src]="emptyFolderImageUrl" class="document-list__empty_doc_lib">
-                </div>
+                <adf-empty-list [emptyMsg]="'This folder is empty'"></adf-empty-list>
             </ng-template>
         </no-content-template>
     </div>