mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Performance improvements (#1166)
#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
committed by
Eugenio Romano
Eugenio Romano
parent
0f563e38bb
commit
3ca2c28a41
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user