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) { ![](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 ``` +### 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 | + +![](docs/assets/adf-empty-list.png) + ### 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
- -
+