inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Performance improvements (#1166)

Browse Source 
#1166 * Update angular libs
document-list: performance improvements
caching ‘heavy’ cell evaluations (i.e. date pipe)
code/test fixes
document-list: performance improvements
Removed ‘AfterViewChecked’ bottleneck as underlying data-table already
does it.
data-table: performance improvements
This commit is contained in:
Denys Vuika 2016-11-28 21:36:00 +00:00 committed by Eugenio Romano
parent 0f563e38bb
commit 3ca2c28a41
9 changed files with 223 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

362
demo-shell-ng2/app/components/files/files.component.html
View File

@ -1,191 +1,189 @@
<div *ngIf="!fileShowed">
<div class="container">
<alfresco-upload-drag-area
<div class="container">
<alfresco-upload-drag-area
[currentFolderPath]="currentPath"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<alfresco-document-list-breadcrumb
[currentFolderPath]="currentPath"
[target]="documentList">
</alfresco-document-list-breadcrumb>
<alfresco-document-list
#documentList
[currentFolderPath]="currentPath"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<alfresco-document-list-breadcrumb
[currentFolderPath]="currentPath"
[target]="documentList">
</alfresco-document-list-breadcrumb>
<alfresco-document-list
#documentList
[currentFolderPath]="currentPath"
[contextMenuActions]="true"
[contentActions]="true"
(preview)="showFile($event)"
(folderChange)="onFolderChanged($event)">
[contextMenuActions]="true"
[contentActions]="true"
(preview)="showFile($event)"
(folderChange)="onFolderChanged($event)">
<!--
<empty-folder-content>
<template>
<h1>Sorry, no content here</h1>
</template>
</empty-folder-content>
-->
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<!--
<empty-folder-content>
<template>
<h1>Sorry, no content here</h1>
</template>
</empty-folder-content>
<content-column
title="Type"
source="content.mimeType">
</content-column>
-->
<content-columns>
<content-column key="$thumbnail" type="image"></content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
key="name"
sortable="true"
class="full-width ellipsis-cell">
</content-column>
<!--
<content-column
title="Type"
source="content.mimeType">
</content-column>
-->
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
key="createdByUser.displayName"
sortable="true"
class="desktop-only">
</content-column>
<content-column
title="{{'DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
key="createdAt"
type="date"
format="medium"
sortable="true"
class="desktop-only">
</content-column>
</content-columns>
<content-actions>
<!-- folder actions -->
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</content-action>
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</content-action>
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete">
</content-action>
<!-- document actions -->
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete">
</content-action>
<content-action
target="folder"
title="Activiti: View Form"
(execute)="viewActivitiForm($event)">
</content-action>
</content-actions>
</alfresco-document-list>
<alfresco-pagination
[provider]="documentList.data"
[supportedPageSizes]="[5, 10, 15, 20]">
</alfresco-pagination>
</alfresco-upload-drag-area>
</div>
<context-menu-holder></context-menu-holder>
<div class="p-10">
<ul>
<li>Current path: {{documentList.currentFolderPath}}</li>
<li>
<button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
</li>
<li>
<button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
</li>
<li>
<button (click)="documentList.currentFolderPath = '/'">Go to root</button>
</li>
<li>
<button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
</li>
</ul>
</div>
<p style="width:250px;margin: 20px;">
<label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
<span class="mdl-switch__label">Multiple File Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
<span class="mdl-switch__label">Folder Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
<span class="mdl-switch__label">Filter extension</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
<span class="mdl-switch__label">Versioning</span>
</label>
</p>
<h5>Upload</h5>
<br>
<div *ngIf="acceptedFilesTypeShow">
<label class="mdl-input__label">Extension accepted
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
</label>
<br/>
</div>
<div *ngIf="!acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[currentFolderPath]="currentPath"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[currentFolderPath]="currentPath"
acceptedFilesType="{{acceptedFilesType}}"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>
<content-actions>
<!-- folder actions -->
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.SYSTEM_1' | translate}}"
handler="system1">
</content-action>
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.CUSTOM' | translate}}"
(execute)="myFolderAction1($event)">
</content-action>
<content-action
target="folder"
title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
handler="delete">
</content-action>
<!-- document actions -->
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
handler="download">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.SYSTEM_2' | translate}}"
handler="system2">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.CUSTOM' | translate}}"
(execute)="myCustomAction1($event)">
</content-action>
<content-action
target="document"
title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
handler="delete">
</content-action>
<content-action
target="folder"
title="Activiti: View Form"
(execute)="viewActivitiForm($event)">
</content-action>
</content-actions>
</alfresco-document-list>
<alfresco-pagination
[provider]="documentList.data"
[supportedPageSizes]="[5, 10, 15, 20]">
</alfresco-pagination>
</alfresco-upload-drag-area>
</div>
<context-menu-holder></context-menu-holder>
<div class="p-10">
<ul>
<li>Current path: {{documentList.currentFolderPath}}</li>
<li>
<button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary';">Go to Document Library</button>
</li>
<li>
<button (click)="documentList.currentFolderPath = '/Sites/swsdp/documentLibrary/Agency Files/Contracts'">Go to agency contracts</button>
</li>
<li>
<button (click)="documentList.currentFolderPath = '/'">Go to root</button>
</li>
<li>
<button (click)="fileDialog.toggleShowDialog()">Show/Hide File Dialog</button>
</li>
</ul>
</div>
<p style="width:250px;margin: 20px;">
<label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
<span class="mdl-switch__label">Multiple File Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
<span class="mdl-switch__label">Folder Upload</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
<span class="mdl-switch__label">Filter extension</span>
</label>
</p>
<p style="width:250px;margin: 20px;">
<label for="switch-versioning" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch-versioning" class="mdl-switch__input" (change)="toggleVersioning()">
<span class="mdl-switch__label">Versioning</span>
</label>
</p>
<h5>Upload</h5>
<br>
<div *ngIf="acceptedFilesTypeShow">
<label class="mdl-input__label">Extension accepted
<input type="text" data-automation-id="accepted-files-type" [(ngModel)]="acceptedFilesType">
</label>
<br/>
</div>
<div *ngIf="!acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[currentFolderPath]="currentPath"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<div *ngIf="acceptedFilesTypeShow">
<alfresco-upload-button data-automation-id="multiple-file-upload"
[currentFolderPath]="currentPath"
acceptedFilesType="{{acceptedFilesType}}"
[multipleFiles]="multipleFileUpload"
[uploadFolders]="folderUpload"
[versioning] = "versioning"
(onSuccess)="documentList.reload()">
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</alfresco-upload-button>
</div>
<file-uploading-dialog #fileDialog></file-uploading-dialog>
<div *ngIf="fileShowed">
<alfresco-viewer [(showViewer)]="fileShowed"
[fileNodeId]="fileNodeId"

2
demo-shell-ng2/app/main.ts
View File

@ -16,7 +16,9 @@
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
// enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

32
demo-shell-ng2/package.json
View File

@ -53,23 +53,21 @@
"alfresco"
],
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"@types/node": "^6.0.42",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"zone.js": "^0.6.23",
"@angular/common": "~2.2.0",
"@angular/compiler": "~2.2.0",
"@angular/core": "~2.2.0",
"@angular/forms": "~2.2.0",
"@angular/http": "~2.2.0",
"@angular/platform-browser": "~2.2.0",
"@angular/platform-browser-dynamic": "~2.2.0",
"@angular/router": "~3.2.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.26",
"rimraf": "2.5.2",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"ng2-translate": "2.5.0",
@ -100,9 +98,11 @@
"element.scrollintoviewifneeded-polyfill": "^1.0.1"
},
"devDependencies": {
"@types/node": "^6.0.42",
"@types/core-js": "^0.9.32",
"@types/jasmine": "^2.2.33",
"concurrently": "^2.2.0",
"rimraf": "2.5.2",
"license-check": "1.1.5",
"mime": "^1.3.4",
"tslint": "3.15.1",

4
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts
View File

@ -172,13 +172,13 @@ describe('DataTable', () => {
let handler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered']);
window['componentHandler'] = handler;
dataTable.ngAfterViewChecked();
dataTable.ngOnInit();
expect(handler.upgradeAllRegistered).toHaveBeenCalled();
});
it('should upgrade MDL components only when component handler present', () => {
expect(window['componentHandler']).toBeNull();
dataTable.ngAfterViewChecked();
dataTable.ngOnInit();
});
it('should invert "select all" status', () => {

15
ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
View File

@ -15,16 +15,7 @@
* limitations under the License.
*/
import {
Component,
OnInit,
Input,
Output,
EventEmitter,
AfterViewChecked,
TemplateRef
} from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
import {
DataTableAdapter,
DataRow,
@ -42,7 +33,7 @@ declare var componentHandler;
styleUrls: ['./datatable.component.css'],
templateUrl: './datatable.component.html'
})
export class DataTableComponent implements OnInit, AfterViewChecked {
export class DataTableComponent implements OnInit {
@Input()
data: DataTableAdapter;
@ -79,9 +70,7 @@ export class DataTableComponent implements OnInit, AfterViewChecked {
if (!this.data) {
this.data = new ObjectDataTableAdapter([], []);
}
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();

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

@ -272,11 +272,6 @@ describe('DocumentList', () => {
expect(documentList.executeContentAction).not.toHaveBeenCalled();
});
it('should upgrade material design components', () => {
documentList.ngAfterViewChecked();
expect(componentHandler.upgradeAllRegistered).toHaveBeenCalled();
});
it('should subscribe to context action handler', () => {
spyOn(documentList, 'displayFolderContent').and.stub();
spyOn(documentList, 'contextActionCallback').and.stub();

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

@ -22,7 +22,6 @@ import {
Output,
EventEmitter,
AfterContentInit,
AfterViewChecked,
TemplateRef,
NgZone,
ViewChild,
@ -41,15 +40,13 @@ import {
ImageResolver
} from './../data/share-datatable-adapter';
declare var componentHandler;
@Component({
moduleId: module.id,
selector: 'alfresco-document-list',
styleUrls: ['./document-list.css'],
templateUrl: './document-list.html'
})
export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit {
export class DocumentList implements OnInit, AfterContentInit {
static SINGLE_CLICK_NAVIGATION: string = 'click';
static DOUBLE_CLICK_NAVIGATION: string = 'dblclick';
@ -196,16 +193,8 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
return false;
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
isMobile(): boolean {
return !!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
getNodeActions(node: MinimalNodeEntity): ContentActionModel[] {

4
ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.spec.ts
View File

@ -203,8 +203,8 @@ describe('ShareDataTableAdapter', () => {
spyOn(console, 'error').and.stub();
let value = adapter.getValue(row, col);
expect(value).toBe(dateValue);
expect(console.error).toHaveBeenCalledWith(`Error parsing date ${value} to format ${col.format}`);
expect(value).toBe('Error');
expect(console.error).toHaveBeenCalled();
});
it('should generate fallback icon for a file thumbnail with unknown mime type', () => {

21
ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
View File

@ -121,15 +121,21 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
if (!col) {
throw new Error(this.ERR_COL_NOT_FOUND);
}
let value = row.getValue(col.key);
let dataRow: ShareDataRow = <ShareDataRow> row;
let value: any = row.getValue(col.key);
if (dataRow.cache[col.key] !== undefined) {
return dataRow.cache[col.key];
}
if (col.type === 'date') {
let datePipe = new DatePipe('en-US');
let format = col.format || this.DEFAULT_DATE_FORMAT;
try {
return datePipe.transform(value, format);
let result = datePipe.transform(value, format);
return dataRow.cacheValue(col.key, result);
} catch (err) {
console.error(`Error parsing date ${value} to format ${format}`);
return 'Error';
}
}
@ -174,7 +180,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
}
return value;
return dataRow.cacheValue(col.key, value);
}
getSorting(): DataSorting {
@ -308,6 +314,7 @@ export class ShareDataRow implements DataRow {
static ERR_OBJECT_NOT_FOUND: string = 'Object source not found';
cache: { [key: string]: any } = {};
isSelected: boolean = false;
get node(): NodeMinimalEntry {
@ -320,7 +327,15 @@ export class ShareDataRow implements DataRow {
}
}
cacheValue(key: string, value: any): any {
this.cache[key] = value;
return value;
}
getValue(key: string): any {
if (this.cache[key] !== undefined) {
return this.cache[key];
}
return ObjectUtils.getValue(this.obj.entry, key);
}