inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
This commit is contained in:
Maurizio Vitale
2017-07-06 12:03:57 +01:00
committed by Eugenio Romano
parent 843afdbcc6
commit dac9b21e85
13 changed files with 215 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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');
});
}));

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

@@ -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>

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

@@ -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');
});
}));

39
ng2-components/ng2-alfresco-datatable/README.md
View File

@@ -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:

BIN
ng2-components/ng2-alfresco-datatable/docs/assets/adf-empty-list.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

3
ng2-components/ng2-alfresco-datatable/index.ts
View File

@@ -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,

44
ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.css Normal file
View File

@@ -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;
}

6
ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.html Normal file
View File

@@ -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>

67
ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.spec.ts Normal file
View File

@@ -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');
});
}));
});

43
ng2-components/ng2-alfresco-datatable/src/components/datatable/adf-empty-list.component.ts Normal file
View File

@@ -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() {
}
}

1
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
View File

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

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

@@ -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>