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

[ADF-524] Datatable loading state (#1958)

Browse Source 
* loading state datatable

* modify readme after review
This commit is contained in:
Eugenio Romano
2017-06-14 20:18:52 +01:00
committed by Eugenio Romano
parent 069345a028
commit f3d5b88671
17 changed files with 305 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.css
View File

@@ -42,3 +42,7 @@
object-fit: contain;
margin-top: 17px;
}
.adf-document-list-loading-margin {
margin: auto;
}

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

@@ -16,6 +16,7 @@
[contextMenu]="contextMenuActions"
[rowStyle]="rowStyle"
[rowStyleClass]="rowStyleClass"
[loading]="loading"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
@@ -24,20 +25,31 @@
<div *ngIf="!isEmptyTemplateDefined()">
<no-content-template>
<ng-template>
<div 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>
<!--put your cutom template here-->
<md-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</no-content-template>
</div>
<div>
<loading-content-template>
<ng-template>
<md-progress-spinner id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</md-progress-spinner>
</ng-template>
</loading-content-template>
</div>
</alfresco-datatable>
<alfresco-pagination *ngIf="isPaginationEnabled()"
(changePageSize)="onChangePageSize($event)"
(nextPage)="onNextPage($event)"
(prevPage)="onPrevPage($event)"
[pagination]="pagination"
[supportedPageSizes]="[5, 10, 15, 20]">
(changePageSize)="onChangePageSize($event)"
(nextPage)="onNextPage($event)"
(prevPage)="onPrevPage($event)"
[pagination]="pagination"
[supportedPageSizes]="[5, 10, 15, 20]">
</alfresco-pagination>

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

@@ -28,6 +28,7 @@ import { ShareDataRow, RowFilter, ImageResolver } from './../data/share-datatabl
import { DataTableModule } from 'ng2-alfresco-datatable';
import { DocumentMenuActionComponent } from './document-menu-action.component';
import { Observable } from 'rxjs/Rx';
import { MdProgressSpinnerModule } from '@angular/material';
declare let jasmine: any;
@@ -43,7 +44,7 @@ let fakeNodeAnswerWithEntries = {
'entries': [{
'entry': {
'isFile': true,
'createdByUser': { 'id': 'admin', 'displayName': 'Administrator' },
'createdByUser': {'id': 'admin', 'displayName': 'Administrator'},
'modifiedAt': '2017-05-24T15:08:55.640Z',
'nodeType': 'cm:content',
'content': {
@@ -60,13 +61,13 @@ let fakeNodeAnswerWithEntries = {
'elements': [{
'id': '94acfc73-7014-4475-9bd9-93a2162f0f8c',
'name': 'Company Home'
}, { 'id': 'd124de26-6ba0-4f40-8d98-4907da2d337a', 'name': 'Guest Home' }]
}, {'id': 'd124de26-6ba0-4f40-8d98-4907da2d337a', 'name': 'Guest Home'}]
},
'isFolder': false,
'modifiedByUser': { 'id': 'admin', 'displayName': 'Administrator' },
'modifiedByUser': {'id': 'admin', 'displayName': 'Administrator'},
'name': 'b_txt_file.rtf',
'id': '67b80f77-dbca-4f58-be6c-71b9dd61ea53',
'properties': { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
'properties': {'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR'},
'allowableOperations': ['delete', 'update']
}
}]
@@ -100,7 +101,8 @@ describe('DocumentList', () => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
DataTableModule.forRoot()
DataTableModule.forRoot(),
MdProgressSpinnerModule
],
declarations: [
DocumentListComponent,
@@ -108,7 +110,7 @@ describe('DocumentList', () => {
],
providers: [
DocumentListService,
{ provide: NgZone, useValue: zone }
{provide: NgZone, useValue: zone}
]
}).compileComponents();
}));
@@ -199,6 +201,19 @@ describe('DocumentList', () => {
});
it('should show the loading state during the loading of new elements', (done) => {
documentList.ngAfterContentInit();
documentList.node = new NodePaging();
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('#adf-document-list-loading')).toBeDefined();
done();
});
});
it('should not execute action without node provided', () => {
let action = new ContentActionModel();
action.handler = function () {
@@ -248,7 +263,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -269,7 +284,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -290,7 +305,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -310,7 +325,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update'] } };
let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -330,7 +345,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete'] } };
let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -350,7 +365,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete'] } };
let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: ['create', 'update', 'delete']}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -369,7 +384,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFile: true, name: 'xyz', allowableOperations: null } };
let nodeFile = {entry: {isFile: true, name: 'xyz', allowableOperations: null}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -388,7 +403,7 @@ describe('DocumentList', () => {
documentMenu
];
let nodeFile = { entry: { isFolder: true, name: 'xyz', allowableOperations: null } };
let nodeFile = {entry: {isFolder: true, name: 'xyz', allowableOperations: null}};
let actions = documentList.getNodeActions(nodeFile);
expect(actions.length).toBe(1);
@@ -692,7 +707,7 @@ describe('DocumentList', () => {
});
documentList.currentFolderId = 'wrong-id';
documentList.ngOnChanges({ currentFolderId: new SimpleChange(null, documentList.currentFolderId, true) });
documentList.ngOnChanges({currentFolderId: new SimpleChange(null, documentList.currentFolderId, true)});
});
it('should require dataTable to check empty template', () => {
@@ -784,11 +799,11 @@ describe('DocumentList', () => {
it('should load folder by ID on init', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
spyOn(documentList, 'loadFolderNodesByFolderNodeId').and.returnValue(Promise.resolve());
documentList.ngOnChanges({ folderNode: new SimpleChange(null, documentList.currentFolderId, true) });
documentList.ngOnChanges({folderNode: new SimpleChange(null, documentList.currentFolderId, true)});
expect(documentList.loadFolderNodesByFolderNodeId).toHaveBeenCalled();
});
it('should load previous page if there are no other elements in multi page table', async(() => {
it('should load previous page if there are no other elements in multi page table', () => {
documentList.currentFolderId = '1d26e465-dea3-42f3-b415-faa8364b9692';
documentList.folderNode = new NodeMinimal();
documentList.folderNode.id = '1d26e465-dea3-42f3-b415-faa8364b9692';
@@ -799,11 +814,12 @@ describe('DocumentList', () => {
fixture.detectChanges();
fixture.whenStable().then(() => {
documentList.ready.subscribe(() => {
fixture.detectChanges();
let rowElement = element.querySelector('[data-automation-id="b_txt_file.rtf"]');
expect(rowElement).toBeDefined();
expect(rowElement).not.toBeNull();
done();
});
jasmine.Ajax.requests.at(0).respondWith({
@@ -817,5 +833,5 @@ describe('DocumentList', () => {
contentType: 'application/json',
responseText: JSON.stringify(fakeNodeAnswerWithEntries)
});
}));
});
});

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

@@ -146,6 +146,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
@Output()
success: EventEmitter<any> = new EventEmitter();
@Output()
ready: EventEmitter<any> = new EventEmitter();
@Output()
error: EventEmitter<any> = new EventEmitter();
@@ -161,6 +164,8 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
contextActionHandler: Subject<any> = new Subject();
data: ShareDataTableAdapter;
loading: boolean = false;
constructor(private documentListService: DocumentListService,
private ngZone: NgZone,
private translateService: AlfrescoTranslationService,
@@ -223,19 +228,12 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
ngOnChanges(changes: SimpleChanges) {
if (changes['folderNode'] && changes['folderNode'].currentValue) {
this.loadFolder();
return;
}
if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
} else if (changes['currentFolderId'] && changes['currentFolderId'].currentValue) {
this.loadFolderByNodeId(changes['currentFolderId'].currentValue);
return;
}
if (changes['node'] && changes['node'].currentValue) {
} else if (changes['node'] && changes['node'].currentValue) {
if (this.data) {
this.data.loadPage(changes['node'].currentValue);
}
return;
}
}
@@ -243,17 +241,11 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
this.ngZone.run(() => {
if (this.folderNode) {
this.loadFolder();
return;
}
if (this.currentFolderId) {
} else if (this.currentFolderId) {
this.loadFolderByNodeId(this.currentFolderId);
return;
}
if (this.node) {
} else if (this.node) {
this.data.loadPage(this.node);
return;
this.ready.emit();
}
});
}
@@ -356,6 +348,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
}
loadFolder() {
this.loading = true;
let nodeId = this.folderNode ? this.folderNode.id : this.currentFolderId;
if (nodeId) {
this.loadFolderNodesByFolderNodeId(nodeId, this.pageSize, this.skipCount).catch(err => this.error.emit(err));
@@ -364,6 +357,7 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
// gets folder node and its content
loadFolderByNodeId(nodeId: string) {
this.loading = true;
this.documentListService.getFolderNode(nodeId).then(node => {
this.folderNode = node;
this.currentFolderId = node.id;
@@ -375,42 +369,36 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
loadFolderNodesByFolderNodeId(id: string, maxItems: number, skipCount: number): Promise<any> {
return new Promise((resolve, reject) => {
if (id && this.documentListService) {
this.documentListService
.getFolder(null, {
maxItems: maxItems,
skipCount: skipCount,
rootFolderId: id
})
.subscribe(
val => {
if (this.checkIfTheCurrentPageIsEmpty(val, skipCount)) {
this.updateSkipCount(skipCount - maxItems);
this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems);
} else {
this.data.loadPage(<NodePaging>val);
this.pagination = val.list.pagination;
this.documentListService
.getFolder(null, {
maxItems: maxItems,
skipCount: skipCount,
rootFolderId: id
})
.subscribe(
val => {
if (this.isCurrentPageEmpty(val, skipCount)) {
this.updateSkipCount(skipCount - maxItems);
this.loadFolderNodesByFolderNodeId(id, maxItems, skipCount - maxItems).then(() => {
resolve(true);
}
},
error => {
reject(error);
});
} else {
resolve(false);
}
}, () => {
reject(error);
});
} else {
this.data.loadPage(<NodePaging>val);
this.pagination = val.list.pagination;
this.loading = false;
this.ready.emit();
resolve(true);
}
},
error => {
reject(error);
});
});
}
private checkIfTheCurrentPageIsEmpty(node, skipCount): boolean {
let isCheckNeeded: boolean = false;
if (this.isCurrentPageEmpty(node, skipCount)) {
isCheckNeeded = true;
}
return isCheckNeeded;
}
private isCurrentPageEmpty(node, skipCount): boolean {
return !this.hasNodeEntries(node) && this.hasPages(skipCount);
}
@@ -592,4 +580,5 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
updateSkipCount(newSkipCount) {
this.skipCount = newSkipCount;
}
}