diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
index c7fc64d343..0cd731869d 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.html
@@ -1,12 +1,10 @@
-
- No Attachments Found
-
-
+
diff --git a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts
index 37a00c0ee6..74b2021bd2 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/adf-process-attachment-list.component.spec.ts
+++ b/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');
});
}));
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
index f377d700b3..505b36183c 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
+++ b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.html
@@ -1,12 +1,10 @@
-
- No Attachments Found
-
-
+
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts b/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
index c528c016ba..f3e2a9cba7 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/adf-task-attachment-list.component.spec.ts
+++ b/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');
});
}));
diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index edb56ab7f0..32ed5fd304 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/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) {

-### 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
```
+### Default Empty content template
+
+You can use the empty list component if you want show the default ADF empty template:
+
+```html
+
+
+
+
+
+
+```
+
+| 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 |
+
+
+
### Loading content template
You can add a template that will be showed during the loading of your data:
diff --git a/ng2-components/ng2-alfresco-datatable/docs/assets/adf-empty-list.png b/ng2-components/ng2-alfresco-datatable/docs/assets/adf-empty-list.png
new file mode 100644
index 0000000000..1b07ec298e
Binary files /dev/null and b/ng2-components/ng2-alfresco-datatable/docs/assets/adf-empty-list.png differ
diff --git a/ng2-components/ng2-alfresco-datatable/index.ts b/ng2-components/ng2-alfresco-datatable/index.ts
index 4afb42c5b6..ff192936e7 100644
--- a/ng2-components/ng2-alfresco-datatable/index.ts
+++ b/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,
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.css b/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.css
new file mode 100644
index 0000000000..9a8fc48a47
--- /dev/null
+++ b/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;
+}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html
new file mode 100644
index 0000000000..3cd0ab71bf
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html
@@ -0,0 +1,6 @@
+
+
{{emptyMsg}}
+
{{dragDropMsg}}
+
{{additionalMsg}}
+
![]()
+
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts
new file mode 100644
index 0000000000..6ec7ec982e
--- /dev/null
+++ b/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;
+
+ 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');
+ });
+ }));
+});
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts
new file mode 100644
index 0000000000..28232bc00d
--- /dev/null
+++ b/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() {
+
+ }
+
+}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 6662bfb777..54753fe69c 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -125,6 +125,7 @@
ngFor [ngForOf]="[data]"
[ngForTemplate]="noContentTemplate">
+
diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
index 0f2550aaa4..7616777289 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
+++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html
@@ -25,12 +25,7 @@
-
-
This folder is empty
-
Drag and Drop
-
any files here to add
-
![]()
-
+