mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-16 18:13:06 +00:00
Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Eugenio Romano
|
ee5fe6dab9 | ||
 Eugenio Romano
|
6516b9f0ce |
+3
-1
@@ -16,4 +16,6 @@ src/environments/
|
||||
/demo-shell-ng2/ng2-components/
|
||||
.happypack/
|
||||
.happypack/
|
||||
.history
|
||||
.history
|
||||
package-lock.*
|
||||
/ng2-components/ng2-alfresco-core/prebuilt-themes/
|
||||
|
||||
+2
-2
@@ -19,7 +19,7 @@ install:
|
||||
if ([ "$TRAVIS_BRANCH" = "master" ]); then
|
||||
(./scripts/npm-build-all.sh || exit 1;);
|
||||
else
|
||||
(./scripts/npm-build-all.sh -gitjsapi development || exit 1;);
|
||||
(./scripts/npm-build-all.sh -vjsapi alpha || exit 1;);
|
||||
fi
|
||||
fi
|
||||
|
||||
@@ -34,7 +34,7 @@ script:
|
||||
if ([ "$TRAVIS_BRANCH" = "master" ]); then
|
||||
(./scripts/start.sh -t -ss || exit 1;);
|
||||
else
|
||||
(./scripts/start.sh -dev -t -ss -gitjsapi development || exit 1;);
|
||||
(./scripts/start.sh -dev -t -ss -vjsapi alpha || exit 1;);
|
||||
fi
|
||||
fi
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"ecmHost": "http://{hostname}:{port}/ecm",
|
||||
"bpmHost": "http://{hostname}:{port}/bpm",
|
||||
"application": {
|
||||
"name": "Alfresco"
|
||||
"name": "Alfresco ADF Appplication"
|
||||
},
|
||||
"pagination": {
|
||||
"size": 25
|
||||
@@ -25,5 +25,231 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"document-list": {
|
||||
"supportedPageSizes": [5, 10, 15, 20],
|
||||
"presets": {
|
||||
"-trashcan-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "archivedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "archivedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-sites-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "title",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "visibility",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-favorites-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-recent-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"cssClass": "ellipsis-cell",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-sharedlinks-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"cssClass": "ellipsis-cell",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "sharedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"default": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"ecmHost": "http://{hostname}",
|
||||
"bpmHost": "http://{hostname}",
|
||||
"application": {
|
||||
"name": "Alfresco"
|
||||
"name": "Alfresco ADF Appplication"
|
||||
},
|
||||
"pagination": {
|
||||
"size": 25
|
||||
@@ -25,5 +25,231 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"document-list": {
|
||||
"supportedPageSizes": [5, 10, 15, 20],
|
||||
"presets": {
|
||||
"-trashcan-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "archivedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "archivedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.DELETED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-sites-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "title",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "visibility",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.STATUS",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-favorites-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-recent-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"cssClass": "ellipsis-cell",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"-sharedlinks-": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "path",
|
||||
"type": "location",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.LOCATION",
|
||||
"cssClass": "ellipsis-cell",
|
||||
"format": "/files",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "sharedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SHARED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
],
|
||||
"default": [
|
||||
{
|
||||
"key": "$thumbnail",
|
||||
"type": "image",
|
||||
"srTitle": "ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL",
|
||||
"sortable": false
|
||||
},
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.NAME",
|
||||
"cssClass": "full-width ellipsis-cell",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "content.sizeInBytes",
|
||||
"type": "fileSize",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.SIZE",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedAt",
|
||||
"type": "date",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_ON",
|
||||
"format": "timeAgo",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"key": "modifiedByUser.displayName",
|
||||
"type": "text",
|
||||
"title": "ADF-DOCUMENT-LIST.LAYOUT.MODIFIED_BY",
|
||||
"sortable": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,80 +1 @@
|
||||
<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
|
||||
<ng2-alfresco-userinfo
|
||||
class="user-profile"
|
||||
[menuPositionX]="'before'"
|
||||
[menuPositionY]="'above'">
|
||||
</ng2-alfresco-userinfo>
|
||||
|
||||
<span>ADF Demo Application</span>
|
||||
|
||||
<div class="app-menu--spacer"></div>
|
||||
|
||||
<search-bar (expand)="onToggleSearch($event)"></search-bar>
|
||||
|
||||
<a md-button data-automation-id="home" href="" routerLink="/">Home</a>
|
||||
<a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
|
||||
<a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
|
||||
<a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
|
||||
|
||||
<theme-picker></theme-picker>
|
||||
<button md-icon-button [mdMenuTriggerFor]="langMenu">
|
||||
<md-icon>language</md-icon>
|
||||
</button>
|
||||
<md-menu #langMenu="mdMenu">
|
||||
<button md-menu-item (click)="changeLanguage('en')">English</button>
|
||||
<button md-menu-item (click)="changeLanguage('it')">Italian</button>
|
||||
<button md-menu-item (click)="changeLanguage('ru')">Russian</button>
|
||||
</md-menu>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="appMenu">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
<md-menu #appMenu="mdMenu">
|
||||
<a md-menu-item href="" routerLink="/dl-custom-sources">
|
||||
<md-icon>extension</md-icon>
|
||||
<span>DL: Custom Sources</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/datatable">
|
||||
<md-icon>view_module</md-icon>
|
||||
<span>DataTable</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/form">
|
||||
<md-icon>poll</md-icon>
|
||||
<span>Form</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/form-list">
|
||||
<md-icon>library_books</md-icon>
|
||||
<span>Form List</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/uploader">
|
||||
<md-icon>file_upload</md-icon>
|
||||
<span>Uploader</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/webscript">
|
||||
<md-icon>extension</md-icon>
|
||||
<span>Webscript</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/tag">
|
||||
<md-icon>local_offer</md-icon>
|
||||
<span>Tag</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/social">
|
||||
<md-icon>thumb_up</md-icon>
|
||||
<span>Social</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/settings">
|
||||
<md-icon>settings</md-icon>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a md-menu-item href="" routerLink="/about">
|
||||
<md-icon>info_outline</md-icon>
|
||||
<span>About</span>
|
||||
</a>
|
||||
<button md-menu-item (click)="onLogout($event)">
|
||||
<md-icon>exit_to_app</md-icon>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</md-menu>
|
||||
</md-toolbar>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<router-outlet></router-outlet>
|
||||
@@ -1,24 +0,0 @@
|
||||
.user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-menu--spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
._dialog_overlay {
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
.md-simple-snackbar-action {
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -16,73 +16,25 @@
|
||||
*/
|
||||
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import {
|
||||
AlfrescoAuthenticationService,
|
||||
AlfrescoSettingsService,
|
||||
AlfrescoTranslationService,
|
||||
LogService,
|
||||
StorageService
|
||||
} from 'ng2-alfresco-core';
|
||||
|
||||
declare var document: any;
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { AlfrescoSettingsService, PageTitleService, StorageService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss', './theme.scss'],
|
||||
styleUrls: ['./theme.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AppComponent {
|
||||
searchTerm: string = '';
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService,
|
||||
private router: Router,
|
||||
private settingsService: AlfrescoSettingsService,
|
||||
private translateService: AlfrescoTranslationService,
|
||||
constructor(private settingsService: AlfrescoSettingsService,
|
||||
private storage: StorageService,
|
||||
private logService: LogService) {
|
||||
pageTitleService: PageTitleService,
|
||||
route: ActivatedRoute,
|
||||
router: Router) {
|
||||
this.setProvider();
|
||||
}
|
||||
|
||||
isAPageWithHeaderBar(): boolean {
|
||||
return location.pathname === '/login' || location.pathname === '/settings';
|
||||
}
|
||||
|
||||
onLogout(event) {
|
||||
event.preventDefault();
|
||||
this.authService.logout()
|
||||
.subscribe(
|
||||
() => {
|
||||
this.navigateToLogin();
|
||||
},
|
||||
(error: any) => {
|
||||
if (error && error.response && error.response.status === 401) {
|
||||
this.navigateToLogin();
|
||||
} else {
|
||||
this.logService.error('An unknown error occurred while logging out', error);
|
||||
this.navigateToLogin();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
navigateToLogin() {
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
|
||||
onToggleSearch(event) {
|
||||
let expandedHeaderClass = 'header-search-expanded',
|
||||
header = document.querySelector('header');
|
||||
if (event.expanded) {
|
||||
header.classList.add(expandedHeaderClass);
|
||||
} else {
|
||||
header.classList.remove(expandedHeaderClass);
|
||||
}
|
||||
}
|
||||
|
||||
changeLanguage(lang: string) {
|
||||
this.translateService.use(lang);
|
||||
pageTitleService.setTitle();
|
||||
}
|
||||
|
||||
private setProvider() {
|
||||
|
||||
@@ -31,15 +31,18 @@ import { SearchModule } from 'ng2-alfresco-search';
|
||||
import { SocialModule } from 'ng2-alfresco-social';
|
||||
import { TagModule } from 'ng2-alfresco-tag';
|
||||
import { UploadModule } from 'ng2-alfresco-upload';
|
||||
import { UserInfoComponentModule } from 'ng2-alfresco-userinfo';
|
||||
import { UserInfoModule } from 'ng2-alfresco-userinfo';
|
||||
import { ViewerModule } from 'ng2-alfresco-viewer';
|
||||
import { WebScriptModule } from 'ng2-alfresco-webscript';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
import { Editor3DModule } from 'ng2-3d-editor';
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
import { AppComponent } from './app.component';
|
||||
import { routing } from './app.routes';
|
||||
import { CustomEditorsModule } from './components/activiti/custom-editor/custom-editor.component';
|
||||
import { AppLayoutComponent } from './components/app-layout/app-layout.component';
|
||||
import { FileViewComponent } from './components/file-view/file-view.component';
|
||||
import { FormListDemoComponent } from './components/form/form-list-demo.component';
|
||||
import { ThemePickerModule } from './components/theme-picker/theme-picker';
|
||||
import { MaterialModule } from './material.module';
|
||||
@@ -69,38 +72,32 @@ import {
|
||||
WebscriptComponent
|
||||
} from './components/index';
|
||||
|
||||
let appConfigFile = 'app.config-dev.json';
|
||||
if (process.env.ENV === 'production') {
|
||||
appConfigFile = 'app.config-prod.json';
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
routing,
|
||||
CoreModule.forRoot({
|
||||
appConfigFile: appConfigFile
|
||||
}),
|
||||
CoreModule,
|
||||
MaterialModule,
|
||||
LoginModule.forRoot(),
|
||||
SearchModule.forRoot(),
|
||||
DataTableModule.forRoot(),
|
||||
DocumentListModule.forRoot(),
|
||||
UploadModule.forRoot(),
|
||||
TagModule.forRoot(),
|
||||
SocialModule.forRoot(),
|
||||
WebScriptModule.forRoot(),
|
||||
ViewerModule.forRoot(),
|
||||
ActivitiFormModule.forRoot(),
|
||||
ActivitiTaskListModule.forRoot(),
|
||||
ActivitiProcessListModule.forRoot(),
|
||||
UserInfoComponentModule.forRoot(),
|
||||
AnalyticsModule.forRoot(),
|
||||
DiagramsModule.forRoot(),
|
||||
LoginModule,
|
||||
SearchModule,
|
||||
DataTableModule,
|
||||
DocumentListModule,
|
||||
UploadModule,
|
||||
TagModule,
|
||||
SocialModule,
|
||||
WebScriptModule,
|
||||
ViewerModule,
|
||||
ActivitiFormModule,
|
||||
ActivitiTaskListModule,
|
||||
ActivitiProcessListModule,
|
||||
UserInfoModule,
|
||||
AnalyticsModule,
|
||||
DiagramsModule,
|
||||
CustomEditorsModule,
|
||||
Editor3DModule.forRoot(),
|
||||
Editor3DModule,
|
||||
ChartsModule,
|
||||
ThemePickerModule
|
||||
ThemePickerModule,
|
||||
FlexLayoutModule
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
@@ -124,7 +121,9 @@ if (process.env.ENV === 'production') {
|
||||
SettingsComponent,
|
||||
FormDemoComponent,
|
||||
FormListDemoComponent,
|
||||
CustomSourcesComponent
|
||||
CustomSourcesComponent,
|
||||
FileViewComponent,
|
||||
AppLayoutComponent
|
||||
],
|
||||
providers: [
|
||||
{ provide: AppConfigService, useClass: DebugAppConfigService },
|
||||
|
||||
+107
-100
@@ -18,6 +18,7 @@
|
||||
import { ModuleWithProviders } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { AuthGuard, AuthGuardBpm, AuthGuardEcm } from 'ng2-alfresco-core';
|
||||
import { AppLayoutComponent } from './components/app-layout/app-layout.component';
|
||||
|
||||
import {
|
||||
AboutComponent,
|
||||
@@ -39,113 +40,119 @@ import {
|
||||
} from './components/index';
|
||||
|
||||
import { UploadButtonComponent } from 'ng2-alfresco-upload';
|
||||
import { FileViewComponent } from './components/file-view/file-view.component';
|
||||
import { CustomSourcesComponent } from './components/files/custom-sources.component';
|
||||
import { FormListDemoComponent } from './components/form/form-list-demo.component';
|
||||
|
||||
export const appRoutes: Routes = [
|
||||
{ path: 'login', component: LoginDemoComponent },
|
||||
{ path: 'settings', component: SettingsComponent },
|
||||
{ path: 'files/:nodeId/view', component: FileViewComponent, canActivate: [ AuthGuardEcm ] },
|
||||
{
|
||||
path: '',
|
||||
component: HomeComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'files',
|
||||
component: FilesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'files/:id',
|
||||
component: FilesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'dl-custom-sources',
|
||||
component: CustomSourcesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'datatable',
|
||||
component: DataTableDemoComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'uploader',
|
||||
component: UploadButtonComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'search',
|
||||
component: SearchComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'activiti',
|
||||
component: ActivitiAppsViewComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps',
|
||||
component: ActivitiAppsViewComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/tasks',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/processes',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/diagram/:processDefinitionId',
|
||||
component: ActivitiShowDiagramComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if neeeded
|
||||
{
|
||||
path: 'activiti/appId/:appId',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if needed
|
||||
{
|
||||
path: 'activiti/tasks/:id',
|
||||
component: FormViewerComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if needed
|
||||
{
|
||||
path: 'activiti/tasksnode/:id',
|
||||
component: FormNodeViewerComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'webscript',
|
||||
component: WebscriptComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'tag',
|
||||
component: TagComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'social',
|
||||
component: SocialComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{ path: 'about', component: AboutComponent },
|
||||
{ path: 'settings', component: SettingsComponent },
|
||||
{ path: 'form', component: FormDemoComponent },
|
||||
{ path: 'form-list', component: FormListDemoComponent }
|
||||
component: AppLayoutComponent,
|
||||
canActivate: [AuthGuard],
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent
|
||||
},
|
||||
{
|
||||
path: 'files',
|
||||
component: FilesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'files/:id',
|
||||
component: FilesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'dl-custom-sources',
|
||||
component: CustomSourcesComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'datatable',
|
||||
component: DataTableDemoComponent
|
||||
},
|
||||
{
|
||||
path: 'uploader',
|
||||
component: UploadButtonComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'search',
|
||||
component: SearchComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'activiti',
|
||||
component: ActivitiAppsViewComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps',
|
||||
component: ActivitiAppsViewComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/tasks',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/processes',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'activiti/apps/:appId/diagram/:processDefinitionId',
|
||||
component: ActivitiShowDiagramComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if neeeded
|
||||
{
|
||||
path: 'activiti/appId/:appId',
|
||||
component: ActivitiDemoComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if needed
|
||||
{
|
||||
path: 'activiti/tasks/:id',
|
||||
component: FormViewerComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
// TODO: check if needed
|
||||
{
|
||||
path: 'activiti/tasksnode/:id',
|
||||
component: FormNodeViewerComponent,
|
||||
canActivate: [AuthGuardBpm]
|
||||
},
|
||||
{
|
||||
path: 'webscript',
|
||||
component: WebscriptComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'tag',
|
||||
component: TagComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{
|
||||
path: 'social',
|
||||
component: SocialComponent,
|
||||
canActivate: [AuthGuardEcm]
|
||||
},
|
||||
{ path: 'about', component: AboutComponent },
|
||||
{ path: 'form', component: FormDemoComponent },
|
||||
{ path: 'form-list', component: FormListDemoComponent }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
|
||||
|
||||
@@ -16,20 +16,7 @@
|
||||
<h3>BPM</h3>
|
||||
<label> Edition </label> {{ bpmVersion.edition }}
|
||||
<p></p>
|
||||
<table border="2" class="adf-table-version">
|
||||
<tr>
|
||||
<th>Major Version</th>
|
||||
<th>Revision Version</th>
|
||||
<th>Minor Version</th>
|
||||
<th>Type</th>
|
||||
</tr>
|
||||
<tr style="align-items: center">
|
||||
<td>{{ bpmVersion.majorVersion }}</td>
|
||||
<td>{{ bpmVersion.revisionVersion }}</td>
|
||||
<td>{{ bpmVersion.minorVersion }}</td>
|
||||
<td>{{ bpmVersion.type }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<label> Version </label> {{ bpmVersion.majorVersion }}.{{ bpmVersion.minorVersion }}.{{ bpmVersion.revisionVersion }}
|
||||
</div>
|
||||
<div *ngIf="ecmVersion">
|
||||
<h3>ECM</h3>
|
||||
@@ -38,64 +25,14 @@
|
||||
<label> Version </label> {{ ecmVersion.version.display }}
|
||||
<p></p>
|
||||
<h4>License</h4>
|
||||
<table border="2" class="adf-table-version">
|
||||
<tr>
|
||||
<th> Issued At </th>
|
||||
<th> Expires At </th>
|
||||
<th> Remaining Days </th>
|
||||
<th> Holder </th>
|
||||
<th> Mode </th>
|
||||
<th> Is Cluster Enabled </th>
|
||||
<th> Is Cryptodoc Enable </th>
|
||||
</tr>
|
||||
<tr style="align-items: center">
|
||||
<td>{{ ecmVersion.license.issuedAt }}</td>
|
||||
<td>{{ ecmVersion.license.expiresAt }}</td>
|
||||
<td>{{ ecmVersion.license.remainingDays }}</td>
|
||||
<td>{{ ecmVersion.license.holder }}</td>
|
||||
<td>{{ ecmVersion.license.mode }}</td>
|
||||
<td>{{ ecmVersion.license.isClusterEnabled }}</td>
|
||||
<td>{{ ecmVersion.license.isCryptodocEnabled }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<adf-datatable [data]="license"></adf-datatable>
|
||||
|
||||
<h4> Status</h4>
|
||||
<table border="2" class="adf-table-version">
|
||||
<tr>
|
||||
<th> ReadOnly </th>
|
||||
<th> Is Audit Enable </th>
|
||||
<th> Is quick shared enable </th>
|
||||
<th> Thumbnail Generation </th>
|
||||
</tr>
|
||||
<tr style="align-items: center">
|
||||
<td>{{ ecmVersion.status.isReadOnly }}</td>
|
||||
<td>{{ ecmVersion.status.isAuditEnabled }}</td>
|
||||
<td>{{ ecmVersion.status.isQuickShareEnabled }}</td>
|
||||
<td>{{ ecmVersion.status.isThumbnailGenerationEnabled }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<adf-datatable [data]="status"></adf-datatable>
|
||||
|
||||
<h4>Modules</h4>
|
||||
<table border="2" class="adf-table-version">
|
||||
<tr>
|
||||
<th> ID </th>
|
||||
<th> Title </th>
|
||||
<th> Description </th>
|
||||
<th> Version </th>
|
||||
<th> Install Date </th>
|
||||
<th> Install State </th>
|
||||
<th> Version Minor </th>
|
||||
<th> Version Max </th>
|
||||
</tr>
|
||||
<tr *ngFor="let module of ecmVersion.modules" style="align-items: center">
|
||||
<td>{{ module.id }}</td>
|
||||
<td>{{ module.title }}</td>
|
||||
<td>{{ module.description }}</td>
|
||||
<td>{{ module.version }}</td>
|
||||
<td>{{ module.installDate }}</td>
|
||||
<td>{{ module.installState }}</td>
|
||||
<td>{{ module.versionMin }}</td>
|
||||
<td>{{ module.versionMax }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<adf-datatable [data]="modules"></adf-datatable>
|
||||
</div>
|
||||
|
||||
<div *ngIf="githubUrlCommitAlpha">
|
||||
@@ -108,5 +45,5 @@
|
||||
|
||||
<h3>Packages</h3>
|
||||
<small>Current project is using the following ADF libraries:</small>
|
||||
<alfresco-datatable [data]="data"></alfresco-datatable>
|
||||
<adf-datatable [data]="data"></adf-datatable>
|
||||
</div>
|
||||
|
||||
@@ -17,20 +17,23 @@
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Http } from '@angular/http';
|
||||
import { AlfrescoAuthenticationService, AppConfigService, BpmProductVersionModel, DiscoveryApiService, EcmProductVersionModel, LogService } from 'ng2-alfresco-core';
|
||||
import { AlfrescoAuthenticationService, AppConfigService, BpmProductVersionModel, DiscoveryApiService, EcmProductVersionModel } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'about-page',
|
||||
selector: 'adf-about-page',
|
||||
templateUrl: './about.component.html',
|
||||
styleUrls: ['./about.component.css']
|
||||
})
|
||||
export class AboutComponent implements OnInit {
|
||||
|
||||
data: ObjectDataTableAdapter;
|
||||
status: ObjectDataTableAdapter;
|
||||
license: ObjectDataTableAdapter;
|
||||
modules: ObjectDataTableAdapter;
|
||||
githubUrlCommitAlpha: string = 'https://github.com/Alfresco/alfresco-ng2-components/commits/';
|
||||
|
||||
configFile: string = '';
|
||||
configFile: string = 'app.config.json';
|
||||
ecmHost: string = '';
|
||||
bpmHost: string = '';
|
||||
|
||||
@@ -40,7 +43,6 @@ export class AboutComponent implements OnInit {
|
||||
constructor(private http: Http,
|
||||
private appConfig: AppConfigService,
|
||||
private authService: AlfrescoAuthenticationService,
|
||||
private logService: LogService,
|
||||
private discovery: DiscoveryApiService) {
|
||||
}
|
||||
|
||||
@@ -49,6 +51,33 @@ export class AboutComponent implements OnInit {
|
||||
if (this.authService.isEcmLoggedIn()) {
|
||||
this.discovery.getEcmProductInfo().subscribe((ecmVers) => {
|
||||
this.ecmVersion = ecmVers;
|
||||
|
||||
this.modules = new ObjectDataTableAdapter(this.ecmVersion.modules, [
|
||||
{type: 'text', key: 'id', title: 'ID', sortable: true},
|
||||
{type: 'text', key: 'title', title: 'Title', sortable: true},
|
||||
{type: 'text', key: 'version', title: 'Description', sortable: true},
|
||||
{type: 'text', key: 'installDate', title: 'Install Date', sortable: true},
|
||||
{type: 'text', key: 'installState', title: 'Install State', sortable: true},
|
||||
{type: 'text', key: 'versionMin', title: 'Version Minor', sortable: true},
|
||||
{type: 'text', key: 'versionMax', title: 'Version Max', sortable: true}
|
||||
]);
|
||||
|
||||
this.status = new ObjectDataTableAdapter([this.ecmVersion.status], [
|
||||
{type: 'text', key: 'isReadOnly', title: 'ReadOnly', sortable: true},
|
||||
{type: 'text', key: 'isAuditEnabled', title: 'Is Audit Enable', sortable: true},
|
||||
{type: 'text', key: 'isQuickShareEnabled', title: 'Is quick shared enable', sortable: true},
|
||||
{type: 'text', key: 'isThumbnailGenerationEnabled', title: 'Thumbnail Generation', sortable: true}
|
||||
]);
|
||||
|
||||
this.license = new ObjectDataTableAdapter([this.ecmVersion.license], [
|
||||
{type: 'text', key: 'issuedAt', title: 'Issued At', sortable: true},
|
||||
{type: 'text', key: 'expiresAt', title: 'Expires At', sortable: true},
|
||||
{type: 'text', key: 'remainingDays', title: 'Remaining Days', sortable: true},
|
||||
{type: 'text', key: 'holder', title: 'Holder', sortable: true},
|
||||
{type: 'text', key: 'mode', title: 'Is Cluster Enabled', sortable: true},
|
||||
{type: 'text', key: 'isClusterEnabled', title: 'Is Cluster Enabled', sortable: true},
|
||||
{type: 'text', key: 'isCryptodocEnabled', title: 'Is Cryptodoc Enable', sortable: true}
|
||||
]);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -62,13 +91,11 @@ export class AboutComponent implements OnInit {
|
||||
let regexp = new RegExp('^(ng2-activiti|ng2-alfresco|alfresco-)');
|
||||
|
||||
let alfrescoPackages = Object.keys(response.json().dependencies).filter((val) => {
|
||||
this.logService.log(val);
|
||||
return regexp.test(val);
|
||||
});
|
||||
|
||||
let alfrescoPackagesTableRepresentation = [];
|
||||
alfrescoPackages.forEach((val) => {
|
||||
this.logService.log(response.json().dependencies[val]);
|
||||
alfrescoPackagesTableRepresentation.push({
|
||||
name: val,
|
||||
version: response.json().dependencies[val].version
|
||||
@@ -77,15 +104,13 @@ export class AboutComponent implements OnInit {
|
||||
|
||||
this.gitHubLinkCreation(alfrescoPackagesTableRepresentation);
|
||||
|
||||
this.logService.log(alfrescoPackagesTableRepresentation);
|
||||
|
||||
this.data = new ObjectDataTableAdapter(alfrescoPackagesTableRepresentation, [
|
||||
{type: 'text', key: 'name', title: 'Name', sortable: true},
|
||||
{type: 'text', key: 'version', title: 'Version', sortable: true}
|
||||
]);
|
||||
|
||||
});
|
||||
|
||||
this.configFile = this.appConfig.configFile;
|
||||
this.ecmHost = this.appConfig.get<string>('ecmHost');
|
||||
this.bpmHost = this.appConfig.get<string>('bpmHost');
|
||||
}
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
.activiti-task-list__item:hover {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.task-column {
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.mdl-layout__header {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.list-buttons {
|
||||
text-align: left;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.adf-no-form-container {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
font-family: Muli;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.action-header {
|
||||
border: 1px solid ;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.activiti-demo-grid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.activiti-demo-grid-item {
|
||||
margin: 4px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
|
||||
.activiti-demo-list-buttons {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.activiti-demo-list-buttons-start {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-menu {
|
||||
min-width: 170px;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list {
|
||||
min-width: 510px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-details,
|
||||
.activiti-demo-tasks-start {
|
||||
flex-grow: 1;
|
||||
min-width: 680px;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list >>> .adf-data-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list >>> .adf-data-table tr,
|
||||
.activiti-demo-tasks-list >>> .adf-data-table td {
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list >>> .adf-data-table td {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list >>> .adf-data-table th {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<md-tab-group [(selectedIndex)]="activeTab">
|
||||
<md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
|
||||
<div class="page-content">
|
||||
<div class="activiti-demo-grid">
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-menu">
|
||||
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-menu" fxFlex.gt-md="225px">
|
||||
<div class="activiti-demo-list-buttons">
|
||||
<button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
|
||||
<md-icon>add</md-icon>
|
||||
@@ -12,20 +12,20 @@
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
|
||||
[headingIcon]="'assignment'">
|
||||
<activiti-filters
|
||||
<adf-filters
|
||||
[filterParam]="{name:'MY tasks'}"
|
||||
[appId]="appId"
|
||||
[hasIcon]="false"
|
||||
(filterClick)="onTaskFilterClick($event)"
|
||||
(onSuccess)="onSuccessTaskFilterList($event)"
|
||||
#activitifilter>
|
||||
</activiti-filters>
|
||||
</adf-filters>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
</div>
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-list"
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
|
||||
*ngIf="taskFilter && !isStartTaskMode()">
|
||||
<activiti-tasklist
|
||||
<adf-tasklist
|
||||
[appId]="taskFilter?.appId"
|
||||
[page]="taskPage"
|
||||
[size]="taskPagination.maxItems"
|
||||
@@ -39,7 +39,7 @@
|
||||
(rowClick)="onTaskRowClick($event)"
|
||||
(onSuccess)="onSuccessTaskList($event)"
|
||||
(row-click)="onRowClick($event)"
|
||||
(row-dblclick)="onRowDblClick($event)"
|
||||
(row-dblclick)="onTaskRowDblClick($event)"
|
||||
#activititasklist>
|
||||
<!-- Custom column definition demo -->
|
||||
<!--
|
||||
@@ -48,7 +48,7 @@
|
||||
<data-column key="created" title="Created" class="hidden"></data-column>
|
||||
</data-columns>
|
||||
-->
|
||||
</activiti-tasklist>
|
||||
</adf-tasklist>
|
||||
|
||||
<adf-pagination
|
||||
(changePageNumber)="onChangePageNumber($event)"
|
||||
@@ -59,10 +59,8 @@
|
||||
[supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
|
||||
</adf-pagination>
|
||||
</div>
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()"
|
||||
[class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
|
||||
[class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
|
||||
<activiti-task-details #activitidetails
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
|
||||
<adf-task-details #activitidetails
|
||||
[debugMode]="true"
|
||||
[taskId]="currentTaskId"
|
||||
[fieldValidators]="fieldValidators"
|
||||
@@ -71,7 +69,7 @@
|
||||
(taskCreated)="onTaskCreated($event)"
|
||||
(assignTask)="onAssignTask()"
|
||||
(taskDeleted)="onTaskDeleted($event)">
|
||||
</activiti-task-details>
|
||||
</adf-task-details>
|
||||
<hr>
|
||||
<div *ngIf="currentTaskId">
|
||||
{{'PS-TAB.AUDIT-LOG' | translate}}
|
||||
@@ -92,7 +90,7 @@
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()">
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
|
||||
<adf-start-task
|
||||
[appId]="appId"
|
||||
(success)="onStartTaskSuccess($event)"
|
||||
@@ -105,12 +103,13 @@
|
||||
<md-tab id="processes-header" href="#processes"
|
||||
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
|
||||
<div class="list-buttons">
|
||||
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="activiti-demo-grid-item activiti-demo-processes-menu" fxFlex.gt-md="225px">
|
||||
<div class="activiti-demo-list-buttons">
|
||||
<button
|
||||
color="primary"
|
||||
md-raised-button
|
||||
class="activiti-demo-list-buttons-start"
|
||||
data-automation-id="btn-start-process"
|
||||
(click)="navigateStartProcess()">
|
||||
<md-icon>add</md-icon>
|
||||
@@ -120,18 +119,18 @@
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
|
||||
[headingIcon]="'assessment'">
|
||||
<activiti-process-instance-filters
|
||||
<adf-process-instance-filters
|
||||
[filterParam]="{index: 0}"
|
||||
[appId]="appId"
|
||||
(filterClick)="onProcessFilterClick($event)"
|
||||
(onSuccess)="onSuccessProcessFilterList($event)">
|
||||
</activiti-process-instance-filters>
|
||||
</adf-process-instance-filters>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp"
|
||||
<div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
|
||||
*ngIf="processFilter && !isStartProcessMode()">
|
||||
<activiti-process-instance-list
|
||||
<adf-process-instance-list
|
||||
*ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
|
||||
[processDefinitionKey]="processFilter.filter.processDefinitionKey"
|
||||
[name]="processFilter.filter.name"
|
||||
@@ -139,6 +138,7 @@
|
||||
[sort]="processFilter.filter.sort"
|
||||
[data]="dataProcesses"
|
||||
(rowClick)="onProcessRowClick($event)"
|
||||
(row-dblclick)="onProcessRowDblClick($event)"
|
||||
(onSuccess)="onSuccessProcessList($event)">
|
||||
<!-- Custom column definition demo -->
|
||||
<!--
|
||||
@@ -147,20 +147,18 @@
|
||||
<data-column key="created" title="Created" class="hidden"></data-column>
|
||||
</data-columns>
|
||||
-->
|
||||
</activiti-process-instance-list>
|
||||
</adf-process-instance-list>
|
||||
</div>
|
||||
<div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
|
||||
[class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
|
||||
[class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
|
||||
<activiti-process-instance-details
|
||||
<div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
|
||||
<adf-process-instance-details
|
||||
[processInstanceId]="currentProcessInstanceId"
|
||||
(processCancelled)="processCancelled()"
|
||||
(showProcessDiagram)="onShowProcessDiagram($event)"
|
||||
(taskClick)="onProcessDetailsTaskClick($event)">
|
||||
</activiti-process-instance-details>
|
||||
</adf-process-instance-details>
|
||||
<hr>
|
||||
<div *ngIf="currentProcessInstanceId">
|
||||
{{'PS-TAB.START-PROCESS' | translate}}
|
||||
{{'PS-TAB.AUDIT-LOG' | translate}}
|
||||
<button adf-process-audit
|
||||
[process-id]="currentProcessInstanceId"
|
||||
[download]="true" md-icon-button
|
||||
@@ -179,7 +177,7 @@
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp"
|
||||
<div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
|
||||
*ngIf="isStartProcessMode()">
|
||||
<adf-start-process
|
||||
[appId]="appId"
|
||||
@@ -192,8 +190,8 @@
|
||||
</md-tab>
|
||||
<md-tab id="report-header" href="#report"
|
||||
label="{{'PS-TAB.REPORTS-TAB' | translate}}">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--4-col task-column mdl-shadow--2dp">
|
||||
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="activiti-demo-grid-item activiti-demo-reports-menu" fxFlex.gt-md="300px">
|
||||
<span><h5>Report List</h5></span>
|
||||
<hr>
|
||||
<analytics-report-list
|
||||
@@ -203,8 +201,8 @@
|
||||
#analyticsreportlist>
|
||||
</analytics-report-list>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
|
||||
<activiti-analytics
|
||||
<div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
|
||||
<adf-analytics
|
||||
*ngIf="report"
|
||||
[appId]="appId"
|
||||
[reportId]="report.id"
|
||||
@@ -212,7 +210,7 @@
|
||||
(editReport)="onEditReport($event)"
|
||||
(reportSaved)="onReportSaved($event)"
|
||||
(reportDeleted)="onReportDeleted()">
|
||||
</activiti-analytics>
|
||||
</adf-analytics>
|
||||
<div *ngIf="!report">
|
||||
<span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
|
||||
.adf-no-form-container {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.activiti-demo-grid {
|
||||
|
||||
.activiti-demo-grid-item {
|
||||
margin: 4px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.activiti-demo-list-buttons {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.activiti-demo-list-buttons-start {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activiti-demo-tasks-list.small-pagination,
|
||||
.activiti-demo-processes-list.small-pagination {
|
||||
.adf-pagination {
|
||||
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 8px;
|
||||
|
||||
&__block {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&__range-block.adf-pagination__block:first-child {
|
||||
order: 1;
|
||||
width: 60%;
|
||||
flex: 0 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding-left: 2px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__perpage-block {
|
||||
order: 3;
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 2px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__actualinfo-block {
|
||||
order: 2;
|
||||
width: 40%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 2px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&__controls-block {
|
||||
order: 4;
|
||||
width: 40%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 2px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activiti-demo-list {
|
||||
.adf-data-table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.adf-data-table tr,
|
||||
.adf-data-table td {
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.adf-data-table td {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.adf-data-table th {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
container-widget .grid-list {
|
||||
flex-direction: column;
|
||||
|
||||
.grid-list-item {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,11 +16,14 @@
|
||||
*/
|
||||
|
||||
// tslint:disable-next-line:adf-file-name
|
||||
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
|
||||
import { AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Pagination } from 'alfresco-js-api';
|
||||
import { AnalyticsReportListComponent } from 'ng2-activiti-analytics';
|
||||
import { FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService, FormService } from 'ng2-activiti-form';
|
||||
import {
|
||||
DynamicTableRow, FORM_FIELD_VALIDATORS, FormEvent, FormFieldEvent, FormRenderingService,
|
||||
FormService, ValidateDynamicTableRowEvent
|
||||
} from 'ng2-activiti-form';
|
||||
import {
|
||||
FilterProcessRepresentationModel,
|
||||
ProcessFiltersComponent,
|
||||
@@ -48,15 +51,14 @@ import { Subscription } from 'rxjs/Rx';
|
||||
import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
|
||||
import { DemoFieldValidator } from './demo-field-validator';
|
||||
|
||||
declare var componentHandler;
|
||||
|
||||
const currentProcessIdNew = '__NEW__';
|
||||
const currentTaskIdNew = '__NEW__';
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-demo',
|
||||
selector: 'adf-activiti-demo',
|
||||
templateUrl: './activiti-demo.component.html',
|
||||
styleUrls: ['./activiti-demo.component.css']
|
||||
styleUrls: ['./activiti-demo.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
|
||||
@@ -90,7 +92,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
fileShowed: boolean = false;
|
||||
selectFirstReport: boolean = false;
|
||||
|
||||
private tabs = { tasks : 0 , processes : 1, reports: 2};
|
||||
private tabs = { tasks: 0, processes: 1, reports: 2 };
|
||||
|
||||
content: Blob;
|
||||
contentName: string;
|
||||
@@ -99,14 +101,14 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
currentTaskId: string;
|
||||
currentProcessInstanceId: string;
|
||||
|
||||
taskSchemaColumns: any [] = [];
|
||||
taskSchemaColumns: any[] = [];
|
||||
taskPagination: Pagination = {
|
||||
skipCount: 0,
|
||||
maxItems: 10,
|
||||
totalItems: 0
|
||||
};
|
||||
taskPage: number = 0;
|
||||
processSchemaColumns: any [] = [];
|
||||
processSchemaColumns: any[] = [];
|
||||
|
||||
activeTab: number = this.tabs.tasks; // tasks|processes|reports
|
||||
|
||||
@@ -159,6 +161,17 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
console.log(`Field value changed. Form: ${e.form.id}, Field: ${e.field.id}, Value: ${e.field.value}`);
|
||||
});
|
||||
|
||||
formService.validateDynamicTableRow.subscribe(
|
||||
(e: ValidateDynamicTableRowEvent) => {
|
||||
const row: DynamicTableRow = e.row;
|
||||
if (row && row.value && row.value.name === 'admin') {
|
||||
e.summary.isValid = false;
|
||||
e.summary.text = 'Sorry, wrong value. You cannot use "admin".';
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Uncomment this block to see form event handling in action
|
||||
/*
|
||||
formService.formEvents.subscribe((event: Event) => {
|
||||
@@ -199,13 +212,13 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
ngOnInit() {
|
||||
this.taskListService.tasksList$.subscribe(
|
||||
(tasks) => {
|
||||
this.taskPagination = {count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total};
|
||||
console.log({count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total});
|
||||
this.taskPagination = { count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total };
|
||||
console.log({ count: tasks.data.length, maxItems: this.taskPagination.maxItems, skipCount: this.taskPagination.skipCount, totalItems: tasks.total });
|
||||
}, (err) => {
|
||||
console.log('err');
|
||||
});
|
||||
console.log('err' + err);
|
||||
});
|
||||
|
||||
if (this.router.url.includes('processes') ) {
|
||||
if (this.router.url.includes('processes')) {
|
||||
this.activeTab = this.tabs.processes;
|
||||
}
|
||||
this.sub = this.route.params.subscribe(params => {
|
||||
@@ -225,6 +238,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
|
||||
ngOnDestroy() {
|
||||
this.sub.unsubscribe();
|
||||
this.taskListService.tasksList$.subscribe();
|
||||
}
|
||||
|
||||
onTaskFilterClick(filter: FilterRepresentationModel): void {
|
||||
@@ -277,6 +291,16 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
this.currentTaskId = taskId;
|
||||
}
|
||||
|
||||
onTaskRowDblClick(event: CustomEvent) {
|
||||
const taskId = event.detail.value.obj.id;
|
||||
this.currentTaskId = taskId;
|
||||
}
|
||||
|
||||
onProcessRowDblClick(event: CustomEvent) {
|
||||
const processInstanceId = event.detail.value.obj.id;
|
||||
this.currentProcessInstanceId = processInstanceId;
|
||||
}
|
||||
|
||||
onProcessRowClick(processInstanceId): void {
|
||||
this.currentProcessInstanceId = processInstanceId;
|
||||
}
|
||||
@@ -309,7 +333,7 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
onStartProcessInstance(instance: ProcessInstance): void {
|
||||
this.currentProcessInstanceId = instance.id;
|
||||
this.activitiStartProcess.reset();
|
||||
this.resetProcessFilters();
|
||||
this.activitiprocessfilter.selectRunningFilter();
|
||||
}
|
||||
|
||||
onCancelProcessInstance() {
|
||||
@@ -369,11 +393,6 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
// workaround for MDL issues with dynamic components
|
||||
if (componentHandler) {
|
||||
componentHandler.upgradeAllRegistered();
|
||||
}
|
||||
|
||||
this.loadStencilScriptsInPageFromActiviti();
|
||||
}
|
||||
|
||||
@@ -403,8 +422,10 @@ export class ActivitiDemoComponent implements AfterViewInit, OnDestroy, OnInit {
|
||||
created: event.value.created
|
||||
});
|
||||
this.activitifilter.selectFilter(null);
|
||||
this.taskList.setCustomDataSource([processTaskDataRow]);
|
||||
this.taskList.selectTask(taskId);
|
||||
if (this.taskList) {
|
||||
this.taskList.setCustomDataSource([processTaskDataRow]);
|
||||
this.taskList.selectTask(taskId);
|
||||
}
|
||||
this.currentTaskId = taskId;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
adf-create-process-attachment >>> button {
|
||||
adf-create-process-attachment ::ng-deep button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,18 @@
|
||||
<div class="adf-no-form-container">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="processId"
|
||||
[disabled]="isCompletedProcess()"
|
||||
[showNotificationBar]="false">
|
||||
<adf-process-attachment-list #processAttachList
|
||||
*ngIf="processId"
|
||||
[disabled]="isCompletedProcess()"
|
||||
[processInstanceId]="processId"
|
||||
(attachmentClick)="onAttachmentClick($event)">
|
||||
</adf-process-attachment-list>
|
||||
</adf-upload-drag-area>
|
||||
|
||||
<adf-create-process-attachment
|
||||
*ngIf="!isCompletedProcess()"
|
||||
[processInstanceId]="processId"
|
||||
(success)="onFileUploadComplete($event)">
|
||||
</adf-create-process-attachment>
|
||||
@@ -20,10 +23,10 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="fileShowed">
|
||||
<alfresco-viewer
|
||||
<adf-viewer
|
||||
[(showViewer)]="fileShowed"
|
||||
[blobFile]="content"
|
||||
[displayName]="contentName"
|
||||
[overlayMode]="true">
|
||||
</alfresco-viewer>
|
||||
</adf-viewer>
|
||||
</div>
|
||||
|
||||
@@ -15,8 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
|
||||
import { ProcessAttachmentListComponent, ProcessUploadService } from 'ng2-activiti-processlist';
|
||||
import { ProcessInstance, ProcessService } from 'ng2-activiti-processlist';
|
||||
import { UploadService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
@@ -24,11 +25,11 @@ import { UploadService } from 'ng2-alfresco-core';
|
||||
templateUrl: './activiti-process-attachments.component.html',
|
||||
styleUrls: ['./activiti-process-attachments.component.css'],
|
||||
providers: [
|
||||
{ provide: UploadService, useClass: ProcessUploadService }
|
||||
{provide: UploadService, useClass: ProcessUploadService}
|
||||
]
|
||||
})
|
||||
|
||||
export class ActivitiProcessAttachmentsComponent implements OnInit {
|
||||
export class ActivitiProcessAttachmentsComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
processId: string;
|
||||
@@ -39,15 +40,23 @@ export class ActivitiProcessAttachmentsComponent implements OnInit {
|
||||
fileShowed: boolean = false;
|
||||
content: Blob;
|
||||
contentName: string;
|
||||
processInstance: ProcessInstance;
|
||||
|
||||
constructor(private uploadService: UploadService) {
|
||||
|
||||
constructor(private uploadService: UploadService, private processService: ProcessService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
if (this.processId) {
|
||||
this.processService.getProcess(this.processId).subscribe((processInstance: ProcessInstance) => {
|
||||
this.processInstance = processInstance;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onFileUploadComplete(content: any) {
|
||||
this.processAttachList.add(content);
|
||||
}
|
||||
@@ -58,4 +67,8 @@ export class ActivitiProcessAttachmentsComponent implements OnInit {
|
||||
this.contentName = content.name;
|
||||
}
|
||||
|
||||
isCompletedProcess(): boolean {
|
||||
return this.processInstance && this.processInstance.ended !== undefined && this.processInstance.ended !== null;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<button md-mini-fab (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
|
||||
<activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
|
||||
<adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
adf-create-task-attachment >>> button {
|
||||
adf-create-task-attachment ::ng-deep button {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -3,15 +3,18 @@
|
||||
<div class="adf-no-form-container">
|
||||
<adf-upload-drag-area
|
||||
[parentId]="taskId"
|
||||
[disabled]="isCompletedTask()"
|
||||
[showNotificationBar]="false">
|
||||
<adf-task-attachment-list #taskAttachList
|
||||
*ngIf="taskId"
|
||||
[taskId]="taskId"
|
||||
[disabled]="isCompletedTask()"
|
||||
(attachmentClick)="onAttachmentClick($event)">
|
||||
</adf-task-attachment-list>
|
||||
</adf-upload-drag-area>
|
||||
|
||||
<adf-create-task-attachment
|
||||
*ngIf="!isCompletedTask()"
|
||||
[taskId]="taskId"
|
||||
(success)="onFileUploadComplete($event)">
|
||||
</adf-create-task-attachment>
|
||||
@@ -20,10 +23,10 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="fileShowed">
|
||||
<alfresco-viewer
|
||||
<adf-viewer
|
||||
[(showViewer)]="fileShowed"
|
||||
[blobFile]="content"
|
||||
[displayName]="contentName"
|
||||
[overlayMode]="true">
|
||||
</alfresco-viewer>
|
||||
</adf-viewer>
|
||||
</div>
|
||||
|
||||
@@ -15,8 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
|
||||
import { ProcessUploadService, TaskAttachmentListComponent } from 'ng2-activiti-tasklist';
|
||||
import { ActivitiTaskListService } from 'ng2-activiti-tasklist';
|
||||
import { UploadService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
@@ -28,7 +29,7 @@ import { UploadService } from 'ng2-alfresco-core';
|
||||
]
|
||||
})
|
||||
|
||||
export class ActivitiTaskAttachmentsComponent implements OnInit {
|
||||
export class ActivitiTaskAttachmentsComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
taskId: string;
|
||||
@@ -40,7 +41,10 @@ export class ActivitiTaskAttachmentsComponent implements OnInit {
|
||||
content: Blob;
|
||||
contentName: string;
|
||||
|
||||
constructor(private uploadService: UploadService) {
|
||||
taskDetails: any;
|
||||
|
||||
constructor(private uploadService: UploadService,
|
||||
private activitiTaskList: ActivitiTaskListService) {
|
||||
|
||||
}
|
||||
|
||||
@@ -48,6 +52,15 @@ export class ActivitiTaskAttachmentsComponent implements OnInit {
|
||||
this.uploadService.fileUploadComplete.subscribe(value => this.onFileUploadComplete(value.data));
|
||||
}
|
||||
|
||||
ngOnChanges() {
|
||||
if (this.taskId) {
|
||||
this.activitiTaskList.getTaskDetails(this.taskId).map((res) => res).subscribe(
|
||||
(res: any) => {
|
||||
this.taskDetails = res;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onFileUploadComplete(content: any) {
|
||||
this.taskAttachList.add(content);
|
||||
}
|
||||
@@ -58,4 +71,7 @@ export class ActivitiTaskAttachmentsComponent implements OnInit {
|
||||
this.contentName = content.name;
|
||||
}
|
||||
|
||||
isCompletedTask(): boolean {
|
||||
return this.taskDetails && this.taskDetails.endDate !== undefined && this.taskDetails.endDate !== null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="activiti-form-viewer" *ngIf="nodeId">
|
||||
<activiti-form [nodeId]="nodeId"
|
||||
<adf-form [nodeId]="nodeId"
|
||||
[saveMetadata]="true"
|
||||
[path]="'/Sites/swsdp/documentLibrary'">
|
||||
</activiti-form>
|
||||
</adf-form>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="activiti-form-viewer" *ngIf="taskId">
|
||||
<activiti-form [taskId]="taskId"></activiti-form>
|
||||
<!--<activiti-form [formName]="'activitiForms:patientFolder'"-->
|
||||
<adf-form [taskId]="taskId"></adf-form>
|
||||
<!--<adf-form [formName]="'activitiForms:patientFolder'"-->
|
||||
<!--[saveMetadata]="true"-->
|
||||
<!--[path]="'/Sites/swsdp/documentLibrary'"-->
|
||||
<!--[nameNode]="'test'"></activiti-form>-->
|
||||
<!--<activiti-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
|
||||
<!--[nameNode]="'test'"></adf-form>-->
|
||||
<!--<adf-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
|
||||
<!--[saveMetadata]="true"-->
|
||||
<!--[path]="'/Sites/swsdp/documentLibrary'">-->
|
||||
<!--</activiti-form>-->
|
||||
<!--</adf-form>-->
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
<md-sidenav-container class="adf-nav-container">
|
||||
<md-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
|
||||
<md-nav-list>
|
||||
<a md-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
|
||||
<md-icon mdListIcon>{{link.icon}}</md-icon>
|
||||
<span>{{link.title}}</span>
|
||||
</a>
|
||||
<a md-list-item adf-logout (click)="sidenav.close()">
|
||||
<md-icon mdListIcon>exit_to_app</md-icon>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</md-nav-list>
|
||||
</md-sidenav>
|
||||
|
||||
<md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
|
||||
<adf-userinfo
|
||||
class="adf-app-layout-user-profile"
|
||||
[menuPositionX]="'before'"
|
||||
[menuPositionY]="'above'">
|
||||
</adf-userinfo>
|
||||
|
||||
<span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">ADF Demo Application</span>
|
||||
|
||||
<div class="adf-app-layout-menu-spacer"></div>
|
||||
|
||||
<search-bar fxFlex="0 1 auto"></search-bar>
|
||||
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Content Services</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Process Services</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" md-button data-automation-id="login" href="" routerLink="/login">Login</a>
|
||||
|
||||
<theme-picker></theme-picker>
|
||||
<button md-icon-button [mdMenuTriggerFor]="langMenu">
|
||||
<md-icon>language</md-icon>
|
||||
</button>
|
||||
<md-menu #langMenu="mdMenu">
|
||||
<button md-menu-item (click)="changeLanguage('en')">English</button>
|
||||
<button md-menu-item (click)="changeLanguage('it')">Italian</button>
|
||||
<button md-menu-item (click)="changeLanguage('ru')">Russian</button>
|
||||
</md-menu>
|
||||
|
||||
<button md-icon-button (click)="sidenav.open()">
|
||||
<md-icon>menu</md-icon>
|
||||
</button>
|
||||
</md-toolbar>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
</md-sidenav-container>
|
||||
@@ -0,0 +1,52 @@
|
||||
@mixin adf-app-layout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$minimumAppWidth: 320px;
|
||||
$toolbarHeight: 64px;
|
||||
|
||||
.adf-app-layout {
|
||||
display: block;
|
||||
min-width: $minimumAppWidth;
|
||||
height: 100%;
|
||||
|
||||
.adf-nav-container {
|
||||
display: block;
|
||||
min-width: $minimumAppWidth;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.adf-sidenav-link {
|
||||
&.active {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
&-user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&-menu-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&-toolbar {
|
||||
height: $toolbarHeight;
|
||||
line-height: $toolbarHeight;
|
||||
overflow: hidden;
|
||||
|
||||
md-toolbar-row {
|
||||
height: $toolbarHeight;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-toolbar-link {
|
||||
min-width: 0;
|
||||
line-height: $toolbarHeight;
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0,0,0,.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/*!
|
||||
* @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, ViewEncapsulation } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'app-layout.component.html',
|
||||
styleUrls: ['app-layout.component.scss'],
|
||||
host: {
|
||||
'class': 'adf-app-layout'
|
||||
},
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class AppLayoutComponent {
|
||||
|
||||
links: Array<any> = [
|
||||
{ href: '/home', icon: 'home', title: 'Home' },
|
||||
{ href: '/files', icon: 'folder_open', title: 'Content Services' },
|
||||
{ href: '/activiti', icon: 'device_hub', title: 'Process Services' },
|
||||
{ href: '/login', icon: 'vpn_key', title: 'Login' },
|
||||
{ href: '/dl-custom-sources', icon: 'extension', title: 'DL: Custom Sources' },
|
||||
{ href: '/datatable', icon: 'view_module', title: 'DataTable' },
|
||||
{ href: '/form', icon: 'poll', title: 'Form' },
|
||||
{ href: '/form-list', icon: 'library_books', title: 'Form List' },
|
||||
{ href: '/uploader', icon: 'file_upload', title: 'Uploader' },
|
||||
{ href: '/webscript', icon: 'extension', title: 'Webscript' },
|
||||
{ href: '/tag', icon: 'local_offer', title: 'Tag' },
|
||||
{ href: '/social', icon: 'thumb_up', title: 'Social' },
|
||||
{ href: '/settings', icon: 'settings', title: 'Settings' },
|
||||
{ href: '/about', icon: 'info_outline', title: 'About' }
|
||||
];
|
||||
|
||||
constructor(private translateService: AlfrescoTranslationService) {}
|
||||
|
||||
changeLanguage(lang: string) {
|
||||
this.translateService.use(lang);
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
|
||||
adf-datatable ::ng-deep .custom-row-style.alfresco-datatable__row:focus {
|
||||
outline-offset: -1px;
|
||||
outline-width: 1px;
|
||||
outline-color: green;
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
|
||||
adf-datatable ::ng-deep .custom-row-style.alfresco-datatable__row--selected {
|
||||
color: green;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<ng-container *ngIf="nodeId">
|
||||
<adf-viewer [fileNodeId]="nodeId">
|
||||
<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
|
||||
<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
|
||||
<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
|
||||
</ng-template>
|
||||
</extension-viewer>
|
||||
</adf-viewer>
|
||||
</ng-container>
|
||||
@@ -0,0 +1,53 @@
|
||||
/*!
|
||||
* @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, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { AlfrescoApiService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-file-view',
|
||||
templateUrl: 'file-view.component.html'
|
||||
})
|
||||
export class FileViewComponent implements OnInit {
|
||||
|
||||
nodeId: string = null;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private apiService: AlfrescoApiService) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params.subscribe(params => {
|
||||
const id = params.nodeId;
|
||||
if (id) {
|
||||
this.apiService.getInstance().nodes.getNodeInfo(id).then(
|
||||
(node) => {
|
||||
if (node && node.isFile) {
|
||||
this.nodeId = id;
|
||||
return;
|
||||
}
|
||||
this.router.navigate(['/files', id]);
|
||||
},
|
||||
() => this.router.navigate(['/files', id])
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
.container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error-message--text {
|
||||
color: #d50000;
|
||||
}
|
||||
|
||||
.adf-not-overlay-viewer {
|
||||
height:900px;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable tr.is-selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable tr.document-list__create {
|
||||
background: green !important;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable tr.document-list__disable {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
adf-document-list >>> adf-datatable tr.is-selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -12px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
|
||||
.adf-demo-site-container-style {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<adf-sites-dropdown (change)="getSiteContent($event)">
|
||||
</adf-sites-dropdown>
|
||||
</div>
|
||||
<alfresco-upload-drag-area
|
||||
[parentId]="documentList.currentFolderId"
|
||||
<adf-upload-drag-area
|
||||
[parentId]="getDocumentListCurrentFolderId()"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()">
|
||||
@@ -14,40 +14,42 @@
|
||||
</button>
|
||||
<span class="error-message--text">{{errorMessage}}</span>
|
||||
</div>
|
||||
<adf-toolbar [color]="toolbarColor">
|
||||
<adf-toolbar-title>
|
||||
<adf-breadcrumb *ngIf="!useDropdownBreadcrumb"
|
||||
<adf-toolbar [color]="toolbarColor" class="adf-files-toolbar">
|
||||
<adf-toolbar-title fxFlex="0 1 auto">
|
||||
<adf-breadcrumb fxShow fxHide.lt-sm="true"
|
||||
class="files-breadcrumb"
|
||||
root="Personal Files"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-breadcrumb>
|
||||
<adf-dropdown-breadcrumb *ngIf="useDropdownBreadcrumb"
|
||||
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
|
||||
class="files-breadcrumb"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-dropdown-breadcrumb>
|
||||
</adf-toolbar-title>
|
||||
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
|
||||
|
||||
<button md-icon-button
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<md-icon>create_new_folder</md-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<md-icon>get_app</md-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<md-icon>delete</md-icon>
|
||||
</button>
|
||||
<div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
|
||||
<button md-icon-button
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<md-icon>create_new_folder</md-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<md-icon>get_app</md-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<md-icon>delete</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="themePicker">
|
||||
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="themePicker">
|
||||
<md-icon>format_color_fill</md-icon>
|
||||
</button>
|
||||
|
||||
@@ -58,25 +60,31 @@
|
||||
<button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
|
||||
</md-menu>
|
||||
|
||||
<adf-toolbar-divider></adf-toolbar-divider>
|
||||
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="menu">
|
||||
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
<md-menu #menu="mdMenu">
|
||||
<button md-menu-item>
|
||||
<md-icon>dialpad</md-icon>
|
||||
<span>Redial</span>
|
||||
<button md-menu-item
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<md-icon>create_new_folder</md-icon>
|
||||
<span>New folder</span>
|
||||
</button>
|
||||
<button md-menu-item disabled>
|
||||
<md-icon>voicemail</md-icon>
|
||||
<span>Check voicemail</span>
|
||||
<button md-menu-item
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<md-icon>get_app</md-icon>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
<button md-menu-item>
|
||||
<md-icon>notifications_off</md-icon>
|
||||
<span>Disable alerts</span>
|
||||
<button md-menu-item
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<md-icon>delete</md-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</md-menu>
|
||||
</md-menu>
|
||||
</adf-toolbar>
|
||||
<adf-document-list
|
||||
#documentList
|
||||
@@ -208,134 +216,95 @@
|
||||
</content-action>
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
</alfresco-upload-drag-area>
|
||||
</adf-upload-drag-area>
|
||||
</div>
|
||||
|
||||
<context-menu-holder></context-menu-holder>
|
||||
|
||||
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
|
||||
<div class="adf-content-service-settings">
|
||||
|
||||
<div class="p-10">
|
||||
Selected Nodes:
|
||||
<ul>
|
||||
<li *ngFor="let node of documentList.selection">
|
||||
{{ node.entry.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section *ngIf="!useViewerDialog">
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="useInlineViewer">Use inline viewer (no overlay)</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="useViewerDialog">Use File Viewer dialog</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="useDropdownBreadcrumb">Dropdown breadcrumb</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<h5>Upload</h5>
|
||||
<section *ngIf="acceptedFilesTypeShow">
|
||||
<md-input-container>
|
||||
<input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType" data-automation-id="accepted-files-type">
|
||||
</md-input-container>
|
||||
</section>
|
||||
<div *ngIf="!acceptedFilesTypeShow">
|
||||
<alfresco-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</alfresco-upload-button>
|
||||
<p>Current folder ID: {{ documentList.currentFolderId }}</p>
|
||||
|
||||
<div class="p-10">
|
||||
Selected Nodes:
|
||||
<ul>
|
||||
<li *ngFor="let node of documentList.selection">
|
||||
{{ node.entry.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="acceptedFilesTypeShow">
|
||||
<alfresco-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[acceptedFilesType]="acceptedFilesType"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</alfresco-upload-button>
|
||||
|
||||
<div class="container">
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">Multiselect (with checkboxes)</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
|
||||
</section>
|
||||
|
||||
<h5>Upload</h5>
|
||||
<section *ngIf="acceptedFilesTypeShow">
|
||||
<md-input-container>
|
||||
<input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType" data-automation-id="accepted-files-type">
|
||||
</md-input-container>
|
||||
</section>
|
||||
<div *ngIf="!acceptedFilesTypeShow">
|
||||
<adf-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</adf-upload-button>
|
||||
</div>
|
||||
<div *ngIf="acceptedFilesTypeShow">
|
||||
<adf-upload-button
|
||||
#uploadButton
|
||||
tooltip="Custom tooltip"
|
||||
[disabled]="!enableUpload"
|
||||
data-automation-id="multiple-file-upload"
|
||||
[rootFolderId]="documentList.currentFolderId"
|
||||
[acceptedFilesType]="acceptedFilesType"
|
||||
[multipleFiles]="multipleFileUpload"
|
||||
[uploadFolders]="folderUpload"
|
||||
[versioning]="versioning"
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()"
|
||||
(permissionEvent)="handlePermissionError($event)">
|
||||
</adf-upload-button>
|
||||
</div>
|
||||
<section>
|
||||
<md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="p-10">
|
||||
<p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
|
||||
<md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
||||
<md-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
||||
{{mode.viewValue}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
|
||||
<div class="p-10">
|
||||
<p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
|
||||
<md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
||||
<md-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
||||
{{mode.viewValue}}
|
||||
</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<file-uploading-dialog #fileDialog></file-uploading-dialog>
|
||||
|
||||
<div *ngIf="showViewer">
|
||||
<ng-container *ngIf="!useInlineViewer">
|
||||
<alfresco-viewer
|
||||
[(showViewer)]="showViewer"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
|
||||
<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
|
||||
<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
|
||||
<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
|
||||
</ng-template>
|
||||
</extension-viewer>
|
||||
|
||||
</alfresco-viewer>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="useInlineViewer">
|
||||
<div class="adf-not-overlay-viewer">
|
||||
<alfresco-viewer
|
||||
[(showViewer)]="showViewer"
|
||||
[fileNodeId]="fileNodeId">
|
||||
</alfresco-viewer>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
$minimumDocumentListWidth: 425px;
|
||||
|
||||
.container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.error-message--text {
|
||||
color: #d50000;
|
||||
}
|
||||
|
||||
.adf-not-overlay-viewer {
|
||||
height:900px;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__create {
|
||||
background: green !important;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.document-list__disable {
|
||||
background: red !important;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -12px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
|
||||
.adf-demo-site-container-style {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.adf-content-service-settings {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.adf-files-toolbar {
|
||||
& /deep/ md-toolbar-row {
|
||||
white-space: initial;
|
||||
|
||||
& /deep/ a.adf-breadcrumb-item-anchor {
|
||||
white-space: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $minimumDocumentListWidth) {
|
||||
adf-document-list /deep/ adf-datatable {
|
||||
& /deep/ .adf-data-table-cell--fileSize {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-demo-site-container-style {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
& /deep/ .adf-site-dropdown-list-element {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,25 +27,22 @@ import {
|
||||
import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
|
||||
import { DocumentListComponent, PermissionStyleModel } from 'ng2-alfresco-documentlist';
|
||||
|
||||
import { ViewerService } from 'ng2-alfresco-viewer';
|
||||
const DEFAULT_FOLDER_TO_SHOW = '-my-';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-files-component',
|
||||
templateUrl: './files.component.html',
|
||||
styleUrls: ['./files.component.css']
|
||||
styleUrls: ['./files.component.scss']
|
||||
})
|
||||
export class FilesComponent implements OnInit {
|
||||
// The identifier of a node. You can also use one of these well-known aliases: -my- | -shared- | -root-
|
||||
currentFolderId: string = '-my-';
|
||||
currentFolderId: string = DEFAULT_FOLDER_TO_SHOW;
|
||||
|
||||
errorMessage: string = null;
|
||||
fileNodeId: any;
|
||||
showViewer: boolean = false;
|
||||
|
||||
toolbarColor = 'default';
|
||||
useDropdownBreadcrumb = false;
|
||||
useViewerDialog = true;
|
||||
useInlineViewer = false;
|
||||
|
||||
selectionModes = [
|
||||
{ value: 'none', viewValue: 'None' },
|
||||
@@ -62,9 +59,6 @@ export class FilesComponent implements OnInit {
|
||||
@Input()
|
||||
multipleFileUpload: boolean = false;
|
||||
|
||||
@Input()
|
||||
disableWithNoPermission: boolean = false;
|
||||
|
||||
@Input()
|
||||
folderUpload: boolean = false;
|
||||
|
||||
@@ -92,31 +86,19 @@ export class FilesComponent implements OnInit {
|
||||
private contentService: AlfrescoContentService,
|
||||
private dialog: MdDialog,
|
||||
private translateService: AlfrescoTranslationService,
|
||||
private viewerService: ViewerService,
|
||||
private router: Router,
|
||||
@Optional() private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
showFile(event) {
|
||||
if (this.useViewerDialog) {
|
||||
if (event.value.entry.isFile) {
|
||||
this.viewerService
|
||||
.showViewerForNode(event.value.entry)
|
||||
.then(result => {
|
||||
console.log(result);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (event.value.entry.isFile) {
|
||||
this.fileNodeId = event.value.entry.id;
|
||||
this.showViewer = true;
|
||||
} else {
|
||||
this.showViewer = false;
|
||||
}
|
||||
const entry = event.value.entry;
|
||||
if (entry && entry.isFile) {
|
||||
this.router.navigate(['/files', entry.id, 'view']);
|
||||
}
|
||||
}
|
||||
|
||||
onFolderChange($event) {
|
||||
this.currentFolderId = $event.value.id;
|
||||
this.router.navigate(['/files', $event.value.id]);
|
||||
}
|
||||
|
||||
@@ -136,7 +118,7 @@ export class FilesComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
this.uploadService.fileUploadComplete.debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
|
||||
this.uploadService.fileUploadComplete.asObservable().debounceTime(300).subscribe(value => this.onFileUploadEvent(value));
|
||||
this.uploadService.fileUploadDeleted.subscribe((value) => this.onFileUploadEvent(value));
|
||||
this.contentService.folderCreated.subscribe(value => this.onFolderCreated(value));
|
||||
|
||||
@@ -223,7 +205,11 @@ export class FilesComponent implements OnInit {
|
||||
}
|
||||
|
||||
getSiteContent(site: SiteModel) {
|
||||
this.currentFolderId = site && site.guid ? site.guid : '-my-';
|
||||
this.currentFolderId = site && site.guid ? site.guid : DEFAULT_FOLDER_TO_SHOW;
|
||||
}
|
||||
|
||||
getDocumentListCurrentFolderId() {
|
||||
return this.documentList.currentFolderId || DEFAULT_FOLDER_TO_SHOW;
|
||||
}
|
||||
|
||||
hasSelection(selection: Array<MinimalNodeEntity>): boolean {
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* 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,
|
||||
* 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.
|
||||
|
||||
@@ -66,8 +66,8 @@ export class FormListDemoComponent {
|
||||
onRowDblClick(event: CustomEvent) {
|
||||
let rowForm = event.detail.value.obj;
|
||||
|
||||
this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
|
||||
let form = this.formService.parseForm(definition);
|
||||
this.formService.getFormDefinitionById(rowForm.id).subscribe((formModel) => {
|
||||
let form = this.formService.parseForm(formModel.formDefinition);
|
||||
this.form = form;
|
||||
});
|
||||
|
||||
|
||||
+12
@@ -5,6 +5,18 @@
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
height: 400px;
|
||||
|
||||
h2 {
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-home-card-title {
|
||||
@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
|
||||
@Component({
|
||||
selector: 'home-view',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.css']
|
||||
styleUrls: ['./home.component.scss']
|
||||
})
|
||||
export class HomeComponent {}
|
||||
|
||||
@@ -35,6 +35,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.settings >>> .mat-slide-toggle-thumb-container {
|
||||
.settings ::ng-deep .mat-slide-toggle-thumb-container {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -45,21 +45,22 @@
|
||||
<md-icon>settings</md-icon>
|
||||
</a>
|
||||
|
||||
<alfresco-login #alfrescologin
|
||||
[providers]="providers"
|
||||
[fieldsValidation]="customValidation"
|
||||
[disableCsrf]="disableCsrf"
|
||||
[showLoginActions]="showFooter"
|
||||
[showRememberMe]="showFooter"
|
||||
copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
|
||||
(onSuccess)="onLogin($event)"
|
||||
(onError)="onError($event)">
|
||||
<alfresco-login
|
||||
#alfrescologin
|
||||
[providers]="providers"
|
||||
[fieldsValidation]="customValidation"
|
||||
[disableCsrf]="disableCsrf"
|
||||
[showLoginActions]="showFooter"
|
||||
[showRememberMe]="showFooter"
|
||||
copyrightText="© 2016 Alfresco Software, Inc. All Rights Reserved. (customised text)"
|
||||
(onSuccess)="onLogin($event)"
|
||||
(onError)="onError($event)">
|
||||
<div class="mobile-settings">
|
||||
<p>
|
||||
<md-slide-toggle
|
||||
id="switch1-mobile"
|
||||
[color]="'primary'"
|
||||
(click)="toggleECM()"
|
||||
(change)="toggleECM()"
|
||||
[checked]="isECM">
|
||||
Content Services
|
||||
</md-slide-toggle>
|
||||
@@ -68,7 +69,7 @@
|
||||
<md-slide-toggle
|
||||
id="switch2-mobile"
|
||||
[color]="'primary'"
|
||||
(click)="toggleBPM()"
|
||||
(change)="toggleBPM()"
|
||||
[checked]="isBPM">
|
||||
Process Services
|
||||
</md-slide-toggle>
|
||||
@@ -77,7 +78,7 @@
|
||||
<md-slide-toggle
|
||||
id="switch3-mobile"
|
||||
[color]="'primary'"
|
||||
(click)="toggleCSRF()"
|
||||
(change)="toggleCSRF()"
|
||||
[checked]="!disableCsrf">
|
||||
CSRF
|
||||
</md-slide-toggle>
|
||||
@@ -86,7 +87,7 @@
|
||||
<md-slide-toggle
|
||||
id="switch4-mobile"
|
||||
[color]="'primary'"
|
||||
(click)="toggleFooter()"
|
||||
(change)="toggleFooter()"
|
||||
[checked]="showFooter">
|
||||
Login footer
|
||||
</md-slide-toggle>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<alfresco-search-control *ngIf="isLoggedIn()"
|
||||
<adf-search-control *ngIf="isLoggedIn()"
|
||||
[searchTerm]="searchTerm"
|
||||
[autocomplete]="false"
|
||||
[highlight]="true"
|
||||
(searchSubmit)="onSearchSubmit($event);"
|
||||
(searchChange)="onSearchTermChange($event);"
|
||||
(expand)="onExpandToggle($event);"
|
||||
(fileSelect)="onItemClicked($event)">
|
||||
</alfresco-search-control>
|
||||
</adf-search-control>
|
||||
|
||||
<alfresco-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
|
||||
<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
<md-spinner></md-spinner>
|
||||
</alfresco-viewer>
|
||||
</adf-viewer>
|
||||
|
||||
@@ -64,8 +64,4 @@ export class SearchBarComponent {
|
||||
onSearchTermChange(event) {
|
||||
this.searchTerm = event.value;
|
||||
}
|
||||
|
||||
onExpandToggle(event) {
|
||||
this.expand.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<div class="search-results-container">
|
||||
<h1>Search results</h1>
|
||||
<alfresco-search
|
||||
<div class="adf-search-title">Search results</div>
|
||||
<adf-search
|
||||
[navigate]="false"
|
||||
(nodeDbClick)="nodeDbClick($event)"></alfresco-search>
|
||||
(nodeDbClick)="nodeDbClick($event)"></adf-search>
|
||||
</div>
|
||||
|
||||
<div *ngIf="fileShowed">
|
||||
<alfresco-viewer [(showViewer)]="fileShowed"
|
||||
<adf-viewer [(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
<md-spinner></md-spinner>
|
||||
</alfresco-viewer>
|
||||
</adf-viewer>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
div.search-results-container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
|
||||
.adf-search-title {
|
||||
font-size: 22px;
|
||||
padding: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
:host .col-display-name {
|
||||
min-width: 100px;
|
||||
}
|
||||
:host .col-modified-at, :host .col-modified-by {
|
||||
display: none;
|
||||
}
|
||||
:host div.search-results-container table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -21,28 +21,7 @@ import { Router } from '@angular/router';
|
||||
@Component({
|
||||
selector: 'search-component',
|
||||
templateUrl: './search.component.html',
|
||||
styles: [`
|
||||
:host div.search-results-container {
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
:host h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
:host tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
:host .col-display-name {
|
||||
min-width: 100px;
|
||||
}
|
||||
:host .col-modified-at, :host .col-modified-by {
|
||||
display: none;
|
||||
}
|
||||
:host div.search-results-container table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
`]
|
||||
styleUrls: ['./search.component.scss']
|
||||
})
|
||||
export class SearchComponent {
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
.adf-setting-container {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.adf-setting-card {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-setting-card-padding {
|
||||
width: 50%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
<md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
|
||||
|
||||
<md-input-container class="full-width">
|
||||
<md-icon mdPrefix>link</md-icon>
|
||||
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
|
||||
<input mdInput
|
||||
[formControl]="urlFormControlEcm"
|
||||
data-automation-id="ecmHost"
|
||||
@@ -29,7 +29,7 @@
|
||||
<md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
|
||||
|
||||
<md-input-container class="full-width">
|
||||
<md-icon mdPrefix>link</md-icon>
|
||||
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
|
||||
<input mdInput
|
||||
[formControl]="urlFormControlBpm"
|
||||
data-automation-id="bpmHost"
|
||||
@@ -45,13 +45,13 @@
|
||||
</md-input-container>
|
||||
|
||||
</md-card-content>
|
||||
<md-card-actions>
|
||||
<md-card-actions class="adf-settings-actions">
|
||||
|
||||
<button md-button onclick="window.history.back()" color="primary">
|
||||
{{'SETTINGS.BACK' | translate }}
|
||||
</button>
|
||||
|
||||
<button md-button onclick="window.location.href = '/'" color="primary">
|
||||
<button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
|
||||
{{'SETTINGS.APPLY' | translate }}
|
||||
</button>
|
||||
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
.adf-app-settings {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
.adf-setting-container {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.adf-setting-card {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-setting-card-padding {
|
||||
width: 50%;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.adf-settings-link-icon {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.adf-settings-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -15,53 +15,67 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl, Validators } from '@angular/forms';
|
||||
import { AlfrescoSettingsService, LogService, StorageService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings',
|
||||
templateUrl: 'settings.component.html',
|
||||
styleUrls: ['settings.component.css']
|
||||
host: {
|
||||
'class': 'adf-app-settings'
|
||||
},
|
||||
styleUrls: ['settings.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SettingsComponent {
|
||||
|
||||
HOST_REGEX: string = '^(http|https):\/\/.*[^/]$';
|
||||
|
||||
ecmHost: string;
|
||||
ecmHostTmp: string;
|
||||
bpmHost: string;
|
||||
bpmHostTmp: string;
|
||||
urlFormControlEcm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
|
||||
urlFormControlBpm = new FormControl('', [Validators.required, Validators.pattern(this.HOST_REGEX)]);
|
||||
|
||||
constructor(private settingsService: AlfrescoSettingsService,
|
||||
private storage: StorageService,
|
||||
private logService: LogService) {
|
||||
this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
|
||||
this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
|
||||
this.ecmHostTmp = this.ecmHost = storage.getItem('ecmHost') || this.settingsService.ecmHost;
|
||||
this.bpmHostTmp = this.bpmHost = storage.getItem('bpmHost') || this.settingsService.bpmHost;
|
||||
}
|
||||
|
||||
public onChangeECMHost(event: KeyboardEvent): void {
|
||||
let value = (<HTMLInputElement>event.target).value.trim();
|
||||
let value = (<HTMLInputElement> event.target).value.trim();
|
||||
if (value && this.isValidUrl(value)) {
|
||||
this.logService.info(`ECM host: ${value}`);
|
||||
this.ecmHost = value;
|
||||
this.storage.setItem(`ecmHost`, value);
|
||||
this.ecmHostTmp = value;
|
||||
} else {
|
||||
console.error('Ecm address does not match the pattern');
|
||||
}
|
||||
}
|
||||
|
||||
public onChangeBPMHost(event: KeyboardEvent): void {
|
||||
let value = (<HTMLInputElement>event.target).value.trim();
|
||||
let value = (<HTMLInputElement> event.target).value.trim();
|
||||
if (value && this.isValidUrl(value)) {
|
||||
this.logService.info(`BPM host: ${value}`);
|
||||
this.bpmHost = value;
|
||||
this.storage.setItem(`bpmHost`, value);
|
||||
this.bpmHostTmp = value;
|
||||
} else {
|
||||
console.error('Bpm address does not match the pattern');
|
||||
}
|
||||
}
|
||||
|
||||
public save(event: KeyboardEvent): void {
|
||||
if (this.bpmHost !== this.bpmHostTmp) {
|
||||
this.storage.setItem(`bpmHost`, this.bpmHostTmp);
|
||||
}
|
||||
if (this.ecmHost !== this.ecmHostTmp) {
|
||||
this.storage.setItem(`ecmHost`, this.ecmHostTmp);
|
||||
}
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
isValidUrl(url: string) {
|
||||
return /^(http|https):\/\/.*/.test(url);
|
||||
}
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
|
||||
<div class="adf-tag-example-area">
|
||||
<md-card>
|
||||
<alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
|
||||
<adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
|
||||
</md-card>
|
||||
</div>
|
||||
<div class="adf-tag-example-area">
|
||||
<md-card>
|
||||
<div class="adf-tag-example-title">List Tags Content Services</div>
|
||||
<alfresco-tag-list></alfresco-tag-list>
|
||||
<adf-tag-list></adf-tag-list>
|
||||
</md-card>
|
||||
</div>
|
||||
<div class="adf-tag-example-area">
|
||||
<md-card>
|
||||
<div class="adf-tag-example-title">Tag list By Node ID</div>
|
||||
<alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
|
||||
<adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Injectable} from '@angular/core';
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
/**
|
||||
* Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
|
||||
@@ -35,6 +35,7 @@ function getExistingLinkElementByKey(key: string) {
|
||||
function createLinkElementWithKey(key: string) {
|
||||
const linkEl = document.createElement('link');
|
||||
linkEl.setAttribute('rel', 'stylesheet');
|
||||
linkEl.setAttribute('type', 'text/css');
|
||||
linkEl.classList.add(getClassNameForKey(key));
|
||||
document.head.appendChild(linkEl);
|
||||
return linkEl;
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {ChangeDetectionStrategy, Component, NgModule} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule,
|
||||
MdTooltipModule
|
||||
} from '@angular/material';
|
||||
import {StyleManager} from './style-manager/style-manager';
|
||||
import {DocsSiteTheme, ThemeStorage} from './theme-storage/theme-storage';
|
||||
import { StyleManager } from './style-manager/style-manager';
|
||||
import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
|
||||
|
||||
@Component({
|
||||
selector: 'theme-picker',
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
import { EventEmitter, Injectable } from '@angular/core';
|
||||
|
||||
export interface DocsSiteTheme {
|
||||
href: string;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<label for="script-path"><b>Insert a scriptPath</b></label><br>
|
||||
<input id="script-path" type="text" size="48" [(ngModel)]="scriptPath"><br>
|
||||
<label for="context-root"><b>Insert a contextRoot</b></label><br>
|
||||
<input id="context-root" type="text" size="48" [(ngModel)]="contextRoot"><br>
|
||||
<label for="service-path"><b>Insert a servicePath</b></label><br>
|
||||
<input id="service-path" type="text" size="48" [(ngModel)]="servicePath"><br>
|
||||
<alfresco-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[scriptArgs]="scriptArgs"
|
||||
[contextRoot]="contextRoot"
|
||||
[servicePath]="servicePath"
|
||||
[contentType]="'HTML'"
|
||||
(onSuccess)= "logData($event)">
|
||||
</alfresco-webscript-get>
|
||||
@@ -20,22 +20,7 @@ import { LogService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-webscript-demo',
|
||||
template: `
|
||||
<label for="script-path"><b>Insert a scriptPath</b></label><br>
|
||||
<input id="script-path" type="text" size="48" [(ngModel)]="scriptPath"><br>
|
||||
<label for="context-root"><b>Insert a contextRoot</b></label><br>
|
||||
<input id="context-root" type="text" size="48" [(ngModel)]="contextRoot"><br>
|
||||
<label for="service-path"><b>Insert a servicePath</b></label><br>
|
||||
<input id="service-path" type="text" size="48" [(ngModel)]="servicePath"><br>
|
||||
<alfresco-webscript-get
|
||||
[scriptPath]="scriptPath"
|
||||
[scriptArgs]="scriptArgs"
|
||||
[contextRoot]="contextRoot"
|
||||
[servicePath]="servicePath"
|
||||
[contentType]="'HTML'"
|
||||
(onSuccess)= "logData($event)">
|
||||
</alfresco-webscript-get>
|
||||
`
|
||||
templateUrl: 'webscript.component.html'
|
||||
})
|
||||
export class WebscriptComponent {
|
||||
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
MdInputModule,
|
||||
MdProgressBarModule,
|
||||
MdSelectModule,
|
||||
MdSidenavModule,
|
||||
MdSlideToggleModule
|
||||
} from '@angular/material';
|
||||
|
||||
@@ -29,6 +30,7 @@ const MATERIAL_MODULES = [
|
||||
MdInputModule,
|
||||
MdSelectModule,
|
||||
MdDialogModule,
|
||||
MdSidenavModule,
|
||||
MdProgressBarModule
|
||||
];
|
||||
|
||||
|
||||
@@ -1,10 +1,27 @@
|
||||
/*!
|
||||
* @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.
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
|
||||
import 'core-js/es6';
|
||||
import 'core-js/es6/reflect';
|
||||
import 'core-js/es7/reflect';
|
||||
import 'zone.js/dist/zone';
|
||||
import 'intl';
|
||||
|
||||
require('zone.js/dist/zone'); // IE 8-11
|
||||
require('element.scrollintoviewifneeded-polyfill'); // IE/FF
|
||||
|
||||
if (process.env.ENV === 'production') {
|
||||
|
||||
@@ -29,7 +29,7 @@ export class DebugAppConfigService extends AppConfigService {
|
||||
/** @override */
|
||||
get<T>(key: string): T {
|
||||
if (key === 'ecmHost' || key === 'bpmHost') {
|
||||
return <T>(<any>this.storage.getItem(key) || super.get<T>(key));
|
||||
return <T> (<any> this.storage.getItem(key) || super.get<T>(key));
|
||||
}
|
||||
return super.get<T>(key);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import './components/app-layout/app-layout.component.scss';
|
||||
@import '~ng2-alfresco-core/styles/theming';
|
||||
@import '~ng2-alfresco-core/styles/index';
|
||||
@import '~ng2-activiti-analytics/styles/index';
|
||||
@@ -10,10 +11,16 @@
|
||||
@import '~ng2-alfresco-login/styles/index';
|
||||
@import '~ng2-alfresco-upload/styles/index';
|
||||
@import '~ng2-alfresco-userinfo/styles/index';
|
||||
@import '~ng2-alfresco-search/styles/index';
|
||||
|
||||
|
||||
@include mat-core();
|
||||
|
||||
$custom-typography: mat-typography-config(
|
||||
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif'
|
||||
);
|
||||
@include angular-material-typography($custom-typography);
|
||||
|
||||
$primary: mat-palette($alfresco-accent-orange);
|
||||
$accent: mat-palette($alfresco-accent-purple);
|
||||
$warn: mat-palette($alfresco-warn);
|
||||
@@ -21,6 +28,7 @@ $theme: mat-light-theme($primary, $accent, $warn);
|
||||
|
||||
@include angular-material-theme($theme);
|
||||
|
||||
@include adf-app-layout-theme($theme);
|
||||
@include alfresco-core-theme($theme);
|
||||
@include alfresco-activity-analytics-theme($theme);
|
||||
@include alfresco-activity-diagrams-theme($theme);
|
||||
@@ -32,3 +40,4 @@ $theme: mat-light-theme($primary, $accent, $warn);
|
||||
@include alfresco-login-theme($theme);
|
||||
@include alfresco-upload-theme($theme);
|
||||
@include alfresco-userinfo-theme($theme);
|
||||
@include alfresco-search-theme($theme);
|
||||
|
||||
@@ -1,3 +1,20 @@
|
||||
/*!
|
||||
* @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.
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
|
||||
// Angular
|
||||
@@ -38,12 +55,9 @@ require('script-loader!dialog-polyfill/dialog-polyfill');
|
||||
import 'dialog-polyfill/dialog-polyfill.css';
|
||||
|
||||
// Google Material Design Lite
|
||||
import 'material-design-icons/iconfont/material-icons.css';
|
||||
import 'material-design-lite/dist/material.orange-blue.min.css';
|
||||
import 'material-design-lite/material.js';
|
||||
|
||||
import '../public/css/muli-font.css';
|
||||
|
||||
import 'ng2-activiti-form/stencils/runtime.adf';
|
||||
import 'ng2-activiti-form/stencils/runtime.ng1';
|
||||
|
||||
|
||||
@@ -76,7 +76,7 @@ module.exports = {
|
||||
emitErrors: true,
|
||||
licenseFile: path.resolve(__dirname, '../assets/license_header.txt')
|
||||
},
|
||||
exclude: [/node_modules/, /bundles/, /dist/, /demo/]
|
||||
exclude: [/theme-picker/]
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -98,12 +98,6 @@ module.exports = {
|
||||
from: '**/*.json',
|
||||
to: 'resources/i18n'
|
||||
},
|
||||
{
|
||||
from: 'app.config-dev.json'
|
||||
},
|
||||
{
|
||||
from: 'app.config-prod.json'
|
||||
},
|
||||
{
|
||||
from: 'favicon-96x96.png'
|
||||
},
|
||||
@@ -111,6 +105,22 @@ module.exports = {
|
||||
from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
|
||||
to: 'pdf.worker.js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/web-animations-js/web-animations.min.js',
|
||||
to: 'js/web-animations.min.js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/core-js/client/core.min.js',
|
||||
to: 'js/core.min.js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/custom-event-polyfill/custom-event-polyfill.js',
|
||||
to: 'js/custom-event-polyfill.js'
|
||||
},
|
||||
{
|
||||
from: 'node_modules/intl/dist/Intl.min.js',
|
||||
to: 'js/Intl.min.js'
|
||||
},
|
||||
{
|
||||
context: 'public',
|
||||
from: '',
|
||||
@@ -142,6 +152,15 @@ module.exports = {
|
||||
},
|
||||
pathRewrite: {
|
||||
'^/ecm': ''
|
||||
},
|
||||
secure: false,
|
||||
changeOrigin: true,
|
||||
// workaround for REPO-2260
|
||||
onProxyRes: function (proxyRes, req, res) {
|
||||
const header = proxyRes.headers['www-authenticate'];
|
||||
if (header && header.startsWith('Basic')) {
|
||||
proxyRes.headers['www-authenticate'] = 'x' + header;
|
||||
}
|
||||
}
|
||||
},
|
||||
'/bpm': {
|
||||
@@ -152,6 +171,15 @@ module.exports = {
|
||||
},
|
||||
pathRewrite: {
|
||||
'^/bpm': ''
|
||||
},
|
||||
secure: false,
|
||||
changeOrigin: true,
|
||||
// workaround
|
||||
onProxyRes: function (proxyRes, req, res) {
|
||||
const header = proxyRes.headers['www-authenticate'];
|
||||
if (header && header.startsWith('Basic')) {
|
||||
proxyRes.headers['www-authenticate'] = 'x' + header;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const commonConfig = require('./webpack.common.js');
|
||||
const helpers = require('./helpers');
|
||||
const path = require('path');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
var HappyPack = require('happypack');
|
||||
const HappyPack = require('happypack');
|
||||
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
||||
|
||||
const alfrescoLibs = [
|
||||
@@ -58,7 +58,7 @@ module.exports = webpackMerge(commonConfig, {
|
||||
includePaths: [path.resolve(__dirname, '../../ng2-components/ng2-alfresco-core/styles')]
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -131,7 +131,11 @@ module.exports = webpackMerge(commonConfig, {
|
||||
from: '**/*',
|
||||
to: `assets/${lib}/i18n/`
|
||||
}
|
||||
})
|
||||
}),
|
||||
{
|
||||
from: 'app.config-dev.json',
|
||||
to: 'app.config.json'
|
||||
}
|
||||
]),
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
|
||||
@@ -100,6 +100,10 @@ module.exports = webpackMerge(commonConfig, {
|
||||
context: `node_modules/ng2-alfresco-core/prebuilt-themes/`,
|
||||
from: '**/*.css',
|
||||
to: 'prebuilt-themes'
|
||||
},
|
||||
{
|
||||
from: 'app.config-prod.json',
|
||||
to: 'app.config.json'
|
||||
}
|
||||
]),
|
||||
new webpack.NoEmitOnErrorsPlugin(),
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
const ExtractTextPlugin = require("extract-text-webpack-plugin");
|
||||
const path = require('path');
|
||||
|
||||
const extractScss = new ExtractTextPlugin('../ng2-components/ng2-alfresco-core/prebuilt-themes/[name].css');
|
||||
|
||||
module.exports = {
|
||||
|
||||
entry: {
|
||||
'adf-blue-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-orange.scss',
|
||||
'adf-blue-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-blue-purple.scss',
|
||||
'adf-cyan-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-orange.scss',
|
||||
'adf-cyan-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-cyan-purple.scss',
|
||||
'adf-green-purple': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-purple.scss',
|
||||
'adf-green-orange': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-green-orange.scss',
|
||||
'adf-pink-bluegrey': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-pink-bluegrey.scss',
|
||||
'adf-indigo-pink': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-indigo-pink.scss',
|
||||
'adf-purple-green': '../ng2-components/ng2-alfresco-core/styles/prebuilt/adf-purple-green.scss'
|
||||
},
|
||||
|
||||
output: {
|
||||
filename: '../dist/[name].js'
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.scss$/,
|
||||
use: extractScss.extract([{
|
||||
loader: "raw-loader"
|
||||
}, {
|
||||
loader: "sass-loader"
|
||||
}])
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
extractScss
|
||||
]
|
||||
};
|
||||
@@ -6,20 +6,17 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
|
||||
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
|
||||
<!--[if IE]>
|
||||
<script src=js/shim.min.js></script>
|
||||
<script src=//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js></script>
|
||||
<script src=js/classlist-polyfill.js></script>
|
||||
<script src=js/web-animations.min.js></script>
|
||||
<script src=js/typedarray.js></script>
|
||||
<script src=js/Blob.js></script>
|
||||
<script src=js/core.min.js></script>
|
||||
<script src=js/Intl.min.js></script>
|
||||
<script src=js/classList.js></script>
|
||||
<script src=js/web-animations.min.js></script>
|
||||
<script src=js/formdata.js></script>
|
||||
<script src=https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js></script>
|
||||
<script src=js/es5-shim.min.js></script>
|
||||
<script src=js/es6-shim.min.js></script>
|
||||
<script src=js/system-polyfills.js></script>
|
||||
<![endif]-->
|
||||
<script src=js/typedarray.js></script>
|
||||
<script src=js/custom-event-polyfill.js></script>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
@@ -57,12 +54,6 @@
|
||||
<adf-app>
|
||||
<div id="loader-container" class="loader-container">
|
||||
<div class="loader-item">
|
||||
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate is-upgraded"
|
||||
data-upgraded=",MaterialProgress">
|
||||
<div class="progressbar bar bar1" style="width: 0%;"></div>
|
||||
<div class="bufferbar bar bar2" style="width: 100%;"></div>
|
||||
<div class="auxbar bar bar3" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div id="loader-text" class="loader-text">Loading Demo Shell..</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Generated
-7089
File diff suppressed because it is too large
Load Diff
+40
-36
@@ -1,14 +1,15 @@
|
||||
{
|
||||
"name": "Alfresco-Angular2-Demo",
|
||||
"description": "Demo shell for Alfresco Angular2 components",
|
||||
"version": "1.8.0",
|
||||
"version": "1.9.0",
|
||||
"author": "Alfresco Software, Ltd.",
|
||||
"scripts": {
|
||||
"build": "npm run server-versions && rimraf dist && npm run webpack -- --config config/webpack.prod.js --progress --profile --bail",
|
||||
"build:dev": "npm run server-versions && rimraf dist && npm run webpack -- --config config/webpack.dev.js --progress --profile --bail",
|
||||
"build:dev": "npm run server-versions && rimraf dist && npm run style:dev && npm run webpack -- --config config/webpack.dev.js --progress --profile --bail",
|
||||
"style:dev": "npm run webpack -- --config config/webpack.style.js --progress --profile --bail",
|
||||
"start:dist": "npm run server-versions && wsrv -s dist/ -p 3000 -a 0.0.0.0",
|
||||
"start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress --content-base app/",
|
||||
"start:dev": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
|
||||
"start": "npm run server-versions && npm run webpack-dev-server -- --config config/webpack.prod.js --progress --content-base app/ ",
|
||||
"start:dev": "npm run server-versions && npm run style:dev && npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base ",
|
||||
"test": "rimraf coverage && karma start --single-run",
|
||||
"clean": "npm run clean-build && rimraf dist node_modules typings dist",
|
||||
"clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
|
||||
@@ -55,52 +56,54 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.2.5",
|
||||
"@angular/cdk": "2.0.0-beta.8",
|
||||
"@angular/common": "4.2.5",
|
||||
"@angular/compiler": "4.2.5",
|
||||
"@angular/compiler-cli": "4.2.5",
|
||||
"@angular/core": "4.2.5",
|
||||
"@angular/forms": "4.2.5",
|
||||
"@angular/http": "4.2.5",
|
||||
"@angular/material": "2.0.0-beta.8",
|
||||
"@angular/platform-browser": "4.2.5",
|
||||
"@angular/platform-browser-dynamic": "4.2.5",
|
||||
"@angular/router": "4.2.5",
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/compiler-cli": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/forms": "4.3.6",
|
||||
"@angular/http": "4.3.6",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/platform-browser": "4.3.6",
|
||||
"@angular/platform-browser-dynamic": "4.3.6",
|
||||
"@angular/router": "4.3.6",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.8.0-9feb5d0164d6c5f994df8758e41ed126a8f69db2",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"chart.js": "2.5.0",
|
||||
"core-js": "2.4.1",
|
||||
"custom-event-polyfill": "^0.3.0",
|
||||
"dialog-polyfill": "0.4.7",
|
||||
"element.scrollintoviewifneeded-polyfill": "1.0.1",
|
||||
"intl": "1.2.5",
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
"minimatch": "3.0.4",
|
||||
"moment": "2.15.1",
|
||||
"ng2-3d-editor": "0.0.15",
|
||||
"ng2-activiti-analytics": "1.8.0",
|
||||
"ng2-activiti-diagrams": "1.8.0",
|
||||
"ng2-activiti-form": "1.8.0",
|
||||
"ng2-activiti-processlist": "1.8.0",
|
||||
"ng2-activiti-tasklist": "1.8.0",
|
||||
"ng2-alfresco-core": "1.8.0",
|
||||
"ng2-alfresco-datatable": "1.8.0",
|
||||
"ng2-alfresco-documentlist": "1.8.0",
|
||||
"ng2-alfresco-login": "1.8.0",
|
||||
"ng2-alfresco-search": "1.8.0",
|
||||
"ng2-alfresco-social": "1.8.0",
|
||||
"ng2-alfresco-tag": "1.8.0",
|
||||
"ng2-alfresco-upload": "1.8.0",
|
||||
"ng2-alfresco-userinfo": "1.8.0",
|
||||
"ng2-alfresco-viewer": "1.8.0",
|
||||
"ng2-alfresco-webscript": "1.8.0",
|
||||
"ng2-activiti-analytics": "1.9.0",
|
||||
"ng2-activiti-diagrams": "1.9.0",
|
||||
"ng2-activiti-form": "1.9.0",
|
||||
"ng2-activiti-processlist": "1.9.0",
|
||||
"ng2-activiti-tasklist": "1.9.0",
|
||||
"ng2-alfresco-core": "1.9.0",
|
||||
"ng2-alfresco-datatable": "1.9.0",
|
||||
"ng2-alfresco-documentlist": "1.9.0",
|
||||
"ng2-alfresco-login": "1.9.0",
|
||||
"ng2-alfresco-search": "1.9.0",
|
||||
"ng2-alfresco-social": "1.9.0",
|
||||
"ng2-alfresco-tag": "1.9.0",
|
||||
"ng2-alfresco-upload": "1.9.0",
|
||||
"ng2-alfresco-userinfo": "1.9.0",
|
||||
"ng2-alfresco-viewer": "1.9.0",
|
||||
"ng2-alfresco-webscript": "1.9.0",
|
||||
"ng2-charts": "1.6.0",
|
||||
"pdfjs-dist": "1.5.404",
|
||||
"raphael": "2.2.7",
|
||||
"reflect-metadata": "0.1.9",
|
||||
"rxjs": "5.1.0",
|
||||
"zone.js": "0.8.11"
|
||||
"web-animations-js": "2.3.1",
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
@@ -110,7 +113,7 @@
|
||||
"angular2-template-loader": "0.6.2",
|
||||
"codelyzer": "3.1.2",
|
||||
"copy-webpack-plugin": "4.0.1",
|
||||
"css-loader": "0.26.1",
|
||||
"css-loader": "0.25.0",
|
||||
"extract-text-webpack-plugin": "2.0.0-rc.3",
|
||||
"file-loader": "0.10.0",
|
||||
"fork-ts-checker-webpack-plugin": "0.2.4",
|
||||
@@ -128,6 +131,7 @@
|
||||
"karma-remap-istanbul": "0.6.0",
|
||||
"karma-sourcemap-loader": "0.3.7",
|
||||
"karma-webpack": "2.0.3",
|
||||
"loader-utils": "^1.1.0",
|
||||
"node-sass": "4.5.3",
|
||||
"null-loader": "0.1.1",
|
||||
"raw-loader": "0.5.1",
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
@font-face {
|
||||
font-family: "Muli";
|
||||
src: url(../fonts/Muli-Light.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Muli";
|
||||
src: url(../fonts/Muli-LightItalic.ttf);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Muli";
|
||||
src: url(../fonts/Muli-Regular.ttf);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Muli";
|
||||
src: url(../fonts/Muli-Italic.ttf);
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
html, body {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
margin: 24px 0 16px
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--display-4, .mdl-typography--display-4-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--display-3, .mdl-typography--display-3-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--display-2, .mdl-typography--display-2-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--display-1, .mdl-typography--display-1-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
|
||||
}
|
||||
|
||||
.mdl-typography--headline, .mdl-typography--headline-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--title, .mdl-typography--title-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--subhead, .mdl-typography--subhead-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--body-2-force-preferred-font, .mdl-typography--body-2-force-preferred-font-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-typography--body-1-force-preferred-font, .mdl-typography--body-1-force-preferred-font-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
|
||||
.mdl-typography--caption-force-preferred-font {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif
|
||||
}
|
||||
|
||||
.mdl-typography--caption-force-preferred-font-color-contrast, .mdl-typography--menu {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif
|
||||
}
|
||||
|
||||
.mdl-typography--menu-color-contrast, .mdl-typography--button, .mdl-typography--button-color-contrast {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-badge[data-badge]:after {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-button {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-list__item {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-layout__title, .mdl-layout-title {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-snackbar {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
|
||||
.mdl-snackbar__action {
|
||||
font-family: 'Muli', "Helvetica", "Arial", sans-serif !important;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,240 @@
|
||||
/*
|
||||
* classList.js: Cross-browser full element.classList implementation.
|
||||
* 1.1.20170427
|
||||
*
|
||||
* By Eli Grey, http://eligrey.com
|
||||
* License: Dedicated to the public domain.
|
||||
* See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
|
||||
*/
|
||||
|
||||
/*global self, document, DOMException */
|
||||
|
||||
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
|
||||
|
||||
if ("document" in self) {
|
||||
|
||||
// Full polyfill for browsers with no classList support
|
||||
// Including IE < Edge missing SVGElement.classList
|
||||
if (!("classList" in document.createElement("_"))
|
||||
|| document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
|
||||
|
||||
(function (view) {
|
||||
|
||||
"use strict";
|
||||
|
||||
if (!('Element' in view)) return;
|
||||
|
||||
var
|
||||
classListProp = "classList"
|
||||
, protoProp = "prototype"
|
||||
, elemCtrProto = view.Element[protoProp]
|
||||
, objCtr = Object
|
||||
, strTrim = String[protoProp].trim || function () {
|
||||
return this.replace(/^\s+|\s+$/g, "");
|
||||
}
|
||||
, arrIndexOf = Array[protoProp].indexOf || function (item) {
|
||||
var
|
||||
i = 0
|
||||
, len = this.length
|
||||
;
|
||||
for (; i < len; i++) {
|
||||
if (i in this && this[i] === item) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
// Vendors: please allow content code to instantiate DOMExceptions
|
||||
, DOMEx = function (type, message) {
|
||||
this.name = type;
|
||||
this.code = DOMException[type];
|
||||
this.message = message;
|
||||
}
|
||||
, checkTokenAndGetIndex = function (classList, token) {
|
||||
if (token === "") {
|
||||
throw new DOMEx(
|
||||
"SYNTAX_ERR"
|
||||
, "An invalid or illegal string was specified"
|
||||
);
|
||||
}
|
||||
if (/\s/.test(token)) {
|
||||
throw new DOMEx(
|
||||
"INVALID_CHARACTER_ERR"
|
||||
, "String contains an invalid character"
|
||||
);
|
||||
}
|
||||
return arrIndexOf.call(classList, token);
|
||||
}
|
||||
, ClassList = function (elem) {
|
||||
var
|
||||
trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
|
||||
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
|
||||
, i = 0
|
||||
, len = classes.length
|
||||
;
|
||||
for (; i < len; i++) {
|
||||
this.push(classes[i]);
|
||||
}
|
||||
this._updateClassName = function () {
|
||||
elem.setAttribute("class", this.toString());
|
||||
};
|
||||
}
|
||||
, classListProto = ClassList[protoProp] = []
|
||||
, classListGetter = function () {
|
||||
return new ClassList(this);
|
||||
}
|
||||
;
|
||||
// Most DOMException implementations don't allow calling DOMException's toString()
|
||||
// on non-DOMExceptions. Error's toString() is sufficient here.
|
||||
DOMEx[protoProp] = Error[protoProp];
|
||||
classListProto.item = function (i) {
|
||||
return this[i] || null;
|
||||
};
|
||||
classListProto.contains = function (token) {
|
||||
token += "";
|
||||
return checkTokenAndGetIndex(this, token) !== -1;
|
||||
};
|
||||
classListProto.add = function () {
|
||||
var
|
||||
tokens = arguments
|
||||
, i = 0
|
||||
, l = tokens.length
|
||||
, token
|
||||
, updated = false
|
||||
;
|
||||
do {
|
||||
token = tokens[i] + "";
|
||||
if (checkTokenAndGetIndex(this, token) === -1) {
|
||||
this.push(token);
|
||||
updated = true;
|
||||
}
|
||||
}
|
||||
while (++i < l);
|
||||
|
||||
if (updated) {
|
||||
this._updateClassName();
|
||||
}
|
||||
};
|
||||
classListProto.remove = function () {
|
||||
var
|
||||
tokens = arguments
|
||||
, i = 0
|
||||
, l = tokens.length
|
||||
, token
|
||||
, updated = false
|
||||
, index
|
||||
;
|
||||
do {
|
||||
token = tokens[i] + "";
|
||||
index = checkTokenAndGetIndex(this, token);
|
||||
while (index !== -1) {
|
||||
this.splice(index, 1);
|
||||
updated = true;
|
||||
index = checkTokenAndGetIndex(this, token);
|
||||
}
|
||||
}
|
||||
while (++i < l);
|
||||
|
||||
if (updated) {
|
||||
this._updateClassName();
|
||||
}
|
||||
};
|
||||
classListProto.toggle = function (token, force) {
|
||||
token += "";
|
||||
|
||||
var
|
||||
result = this.contains(token)
|
||||
, method = result ?
|
||||
force !== true && "remove"
|
||||
:
|
||||
force !== false && "add"
|
||||
;
|
||||
|
||||
if (method) {
|
||||
this[method](token);
|
||||
}
|
||||
|
||||
if (force === true || force === false) {
|
||||
return force;
|
||||
} else {
|
||||
return !result;
|
||||
}
|
||||
};
|
||||
classListProto.toString = function () {
|
||||
return this.join(" ");
|
||||
};
|
||||
|
||||
if (objCtr.defineProperty) {
|
||||
var classListPropDesc = {
|
||||
get: classListGetter
|
||||
, enumerable: true
|
||||
, configurable: true
|
||||
};
|
||||
try {
|
||||
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
|
||||
} catch (ex) { // IE 8 doesn't support enumerable:true
|
||||
// adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36
|
||||
// modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected
|
||||
if (ex.number === undefined || ex.number === -0x7FF5EC54) {
|
||||
classListPropDesc.enumerable = false;
|
||||
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
|
||||
}
|
||||
}
|
||||
} else if (objCtr[protoProp].__defineGetter__) {
|
||||
elemCtrProto.__defineGetter__(classListProp, classListGetter);
|
||||
}
|
||||
|
||||
}(self));
|
||||
|
||||
}
|
||||
|
||||
// There is full or partial native classList support, so just check if we need
|
||||
// to normalize the add/remove and toggle APIs.
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var testElement = document.createElement("_");
|
||||
|
||||
testElement.classList.add("c1", "c2");
|
||||
|
||||
// Polyfill for IE 10/11 and Firefox <26, where classList.add and
|
||||
// classList.remove exist but support only one argument at a time.
|
||||
if (!testElement.classList.contains("c2")) {
|
||||
var createMethod = function(method) {
|
||||
var original = DOMTokenList.prototype[method];
|
||||
|
||||
DOMTokenList.prototype[method] = function(token) {
|
||||
var i, len = arguments.length;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
token = arguments[i];
|
||||
original.call(this, token);
|
||||
}
|
||||
};
|
||||
};
|
||||
createMethod('add');
|
||||
createMethod('remove');
|
||||
}
|
||||
|
||||
testElement.classList.toggle("c3", false);
|
||||
|
||||
// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
|
||||
// support the second argument.
|
||||
if (testElement.classList.contains("c3")) {
|
||||
var _toggle = DOMTokenList.prototype.toggle;
|
||||
|
||||
DOMTokenList.prototype.toggle = function(token, force) {
|
||||
if (1 in arguments && !this.contains(token) === !force) {
|
||||
return force;
|
||||
} else {
|
||||
return _toggle.call(this, token);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
testElement = null;
|
||||
}());
|
||||
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
/* Disable minification (remove `.min` from URL path) for more info */
|
||||
|
||||
(function(undefined) {if (!('Symbol' in this && 'iterator' in this.Symbol && !!Array.prototype[Symbol.iterator] && !!Array.prototype.values && (Array.prototype[Symbol.iterator] === Array.prototype.values))) {Object.defineProperty(Array.prototype,"values",{value:Array.prototype[Symbol.iterator],enumerable:!1,writable:!1});}if (!('contains' in String.prototype)) {String.prototype.contains=String.prototype.includes;}var ArrayIterator=function(){var e=function(){var e=function(){return this.length=0,this},t=function(e){if("function"!=typeof e)throw new TypeError(e+" is not a function");return e},_=function(e,n){return this instanceof _?(Object.defineProperties(this,{__list__:{writable:!0,value:e},__context__:{writable:!0,value:n},__nextIndex__:{writable:!0,value:0}}),void(n&&(t(n.on),n.on("_add",this._onAdd.bind(this)),n.on("_delete",this._onDelete.bind(this)),n.on("_clear",this._onClear.bind(this))))):new _(e,n)};return Object.defineProperties(_.prototype,Object.assign({constructor:{value:_,configurable:!0,enumerable:!1,writable:!0},_next:{value:function(){var e;if(this.__list__)return this.__redo__&&(e=this.__redo__.shift(),void 0!==e)?e:this.__nextIndex__<this.__list__.length?this.__nextIndex__++:void this._unBind()},configurable:!0,enumerable:!1,writable:!0},next:{value:function(){return this._createResult(this._next())},configurable:!0,enumerable:!1,writable:!0},_createResult:{value:function(e){return void 0===e?{done:!0,value:void 0}:{done:!1,value:this._resolve(e)}},configurable:!0,enumerable:!1,writable:!0},_resolve:{value:function(e){return this.__list__[e]},configurable:!0,enumerable:!1,writable:!0},_unBind:{value:function(){this.__list__=null,delete this.__redo__,this.__context__&&(this.__context__.off("_add",this._onAdd.bind(this)),this.__context__.off("_delete",this._onDelete.bind(this)),this.__context__.off("_clear",this._onClear.bind(this)),this.__context__=null)},configurable:!0,enumerable:!1,writable:!0},toString:{value:function(){return"[object Iterator]"},configurable:!0,enumerable:!1,writable:!0}},{_onAdd:{value:function(e){if(!(e>=this.__nextIndex__)){if(++this.__nextIndex__,!this.__redo__)return void Object.defineProperty(this,"__redo__",{value:[e],configurable:!0,enumerable:!1,writable:!1});this.__redo__.forEach(function(t,_){t>=e&&(this.__redo__[_]=++t)},this),this.__redo__.push(e)}},configurable:!0,enumerable:!1,writable:!0},_onDelete:{value:function(e){var t;e>=this.__nextIndex__||(--this.__nextIndex__,this.__redo__&&(t=this.__redo__.indexOf(e),t!==-1&&this.__redo__.splice(t,1),this.__redo__.forEach(function(t,_){t>e&&(this.__redo__[_]=--t)},this)))},configurable:!0,enumerable:!1,writable:!0},_onClear:{value:function(){this.__redo__&&e.call(this.__redo__),this.__nextIndex__=0},configurable:!0,enumerable:!1,writable:!0}})),Object.defineProperty(_.prototype,Symbol.iterator,{value:function(){return this},configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(_.prototype,Symbol.toStringTag,{value:"Iterator",configurable:!1,enumerable:!1,writable:!1}),_}(),t=function(_,n){return this instanceof t?(e.call(this,_),n=n?String.prototype.contains.call(n,"key+value")?"key+value":String.prototype.contains.call(n,"key")?"key":"value":"value",void Object.defineProperty(this,"__kind__",{value:n,configurable:!1,enumerable:!1,writable:!1})):new t(_,n)};return Object.setPrototypeOf&&Object.setPrototypeOf(t,e.prototype),t.prototype=Object.create(e.prototype,{constructor:{value:t,configurable:!0,enumerable:!1,writable:!0},_resolve:{value:function(e){return"value"===this.__kind__?this.__list__[e]:"key+value"===this.__kind__?[e,this.__list__[e]]:e},configurable:!0,enumerable:!1,writable:!0},toString:{value:function(){return"[object Array Iterator]"},configurable:!0,enumerable:!1,writable:!0}}),t}();}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
|
||||
@@ -128,7 +128,10 @@
|
||||
"check-decl",
|
||||
"check-operator",
|
||||
"check-separator",
|
||||
"check-type"
|
||||
"check-typecast",
|
||||
"check-type",
|
||||
"check-typecast",
|
||||
"check-module"
|
||||
],
|
||||
"ordered-imports": true,
|
||||
"use-input-property-decorator": true,
|
||||
@@ -136,10 +139,10 @@
|
||||
"use-host-property-decorator": false,
|
||||
"use-life-cycle-interface": true,
|
||||
"use-pipe-transform-interface": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true,
|
||||
"no-access-missing-member": false,
|
||||
"templates-use-public": true,
|
||||
"invoke-injectable": true
|
||||
"invoke-injectable": true,
|
||||
"component-class-suffix": true,
|
||||
"directive-class-suffix": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
module.exports = {
|
||||
"host": "0.0.0.0",
|
||||
"port": 3000,
|
||||
"dir": "./dist",
|
||||
"spa": true,
|
||||
"proxy": {
|
||||
"/ecm/{p*}": {
|
||||
"options": {
|
||||
"uri": "http://0.0.0.0:8080/{p}"
|
||||
}
|
||||
},
|
||||
"/bpm/{p*}": {
|
||||
"options": {
|
||||
"uri": "http://0.0.0.0:9999/{p}"
|
||||
}
|
||||
}
|
||||
},
|
||||
onResHeaders(headers) {
|
||||
if (headers) {
|
||||
const authHeader = headers['www-authenticate'];
|
||||
if (authHeader) {
|
||||
headers['www-authenticate'] = `x${authHeader}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+566
@@ -0,0 +1,566 @@
|
||||
# Component Docs Index
|
||||
|
||||
Below is an index of the documentation for each component library. The [User Guide](#user-guide)
|
||||
section discusses particular techniques in depth. The other sections are references for the ADF
|
||||
components. Items marked with an asterisk (*) do not currently have documentation - the link leads
|
||||
to the appropriate source file.
|
||||
|
||||
## Contents
|
||||
|
||||
- [User Guide](#user-guide)
|
||||
- [ADF Analytics](#adf-analytics)
|
||||
- [ADF Diagrams](#adf-diagrams)
|
||||
- [ADF Form](#adf-form)
|
||||
- [ADF Processlist](#adf-processlist)
|
||||
- [ADF Tasklist](#adf-tasklist)
|
||||
- [ADF Core](#adf-core)
|
||||
- [ADF Datatable](#adf-datatable)
|
||||
- [ADF Documentlist](#adf-documentlist)
|
||||
- [ADF Login](#adf-login)
|
||||
- [ADF Search](#adf-search)
|
||||
- [ADF Social](#adf-social)
|
||||
- [ADF Tag](#adf-tag)
|
||||
- [ADF Upload](#adf-upload)
|
||||
- [ADF Userinfo](#adf-userinfo)
|
||||
- [ADF Viewer](#adf-viewer)
|
||||
- [ADF Webscript](#adf-webscript)
|
||||
|
||||
## User guide
|
||||
|
||||
<!-- guide start -->
|
||||
- [Form Extensibility and Customisation](docs/extensibility.md)
|
||||
- [Form Stencils with Angular 2](docs/stencils.md)
|
||||
- [Theming](docs/theming.md)
|
||||
- [Walkthrough: adding indicators to highlight information about a node](docs/metadata-indicators.md)
|
||||
|
||||
<!-- guide end -->
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Analytics
|
||||
|
||||
Contains the Analytics component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-activiti-analytics/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-activiti-analytics start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Analytics generator component](docs/analytics-generator.component.md)
|
||||
- [Analytics report list component](docs/analytics-report-list.component.md)
|
||||
- [Analytics component](docs/analytics.component.md)
|
||||
- [*Analytics report heat map component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.ts)
|
||||
- [*Analytics report parameters component](ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts)
|
||||
- [*Widget component](ng2-components/ng2-activiti-analytics/src/components/widgets/widget.component.ts)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Analytics service](ng2-components/ng2-activiti-analytics/src/services/analytics.service.ts)
|
||||
|
||||
### Widgets
|
||||
|
||||
- [*Checkbox widget](ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts)
|
||||
- [*Date range widget](ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts)
|
||||
- [*Dropdown widget](ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts)
|
||||
- [*Duration widget](ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts)
|
||||
- [*Number widget](ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts)
|
||||
<!-- ng2-activiti-analytics end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Diagrams
|
||||
|
||||
Contains the Diagram component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-activiti-diagrams/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-activiti-diagrams start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Diagram component](docs/diagram.component.md)
|
||||
- [*Diagram alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-alfresco-publish-task.component.ts)
|
||||
- [*Diagram box publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-box-publish-task.component.ts)
|
||||
- [*Diagram business rule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-business-rule-task.component.ts)
|
||||
- [*Diagram camel task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-camel-task.component.ts)
|
||||
- [*Diagram container service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-container-service-task.component.ts)
|
||||
- [*Diagram google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-google-drive-publish-task.component.ts)
|
||||
- [*Diagram manual task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-manual-task.component.ts)
|
||||
- [*Diagram mule task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-mule-task.component.ts)
|
||||
- [*Diagram receive task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-receive-task.component.ts)
|
||||
- [*Diagram rest call task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-rest-call-task.component.ts)
|
||||
- [*Diagram script task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-script-task.component.ts)
|
||||
- [*Diagram send task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-send-task.component.ts)
|
||||
- [*Diagram service task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-service-task.component.ts)
|
||||
- [*Diagram task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-task.component.ts)
|
||||
- [*Diagram user task component](ng2-components/ng2-activiti-diagrams/src/components/activities/diagram-user-task.component.ts)
|
||||
- [*Diagram boundary event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-boundary-event.component.ts)
|
||||
- [*Diagram throw event component](ng2-components/ng2-activiti-diagrams/src/components/boundary-events/diagram-throw-event.component.ts)
|
||||
- [*Diagram sequence flow component](ng2-components/ng2-activiti-diagrams/src/components/diagram-sequence-flow.component.ts)
|
||||
- [*Diagram end event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-end-event.component.ts)
|
||||
- [*Diagram event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-event.component.ts)
|
||||
- [*Diagram start event component](ng2-components/ng2-activiti-diagrams/src/components/events/diagram-start-event.component.ts)
|
||||
- [*Diagram event gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-event-gateway.component.ts)
|
||||
- [*Diagram exclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-exclusive-gateway.component.ts)
|
||||
- [*Diagram gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-gateway.component.ts)
|
||||
- [*Diagram inclusive gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-inclusive-gateway.component.ts)
|
||||
- [*Diagram parallel gateway component](ng2-components/ng2-activiti-diagrams/src/components/gateways/diagram-parallel-gateway.component.ts)
|
||||
- [*Diagram container icon event component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-container-icon-event.component.ts)
|
||||
- [*Diagram icon alfresco publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-alfresco-publish-task.component.ts)
|
||||
- [*Diagram icon box publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-box-publish-task.component.ts)
|
||||
- [*Diagram icon business rule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-business-rule-task.component.ts)
|
||||
- [*Diagram icon camel task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-camel-task.component.ts)
|
||||
- [*Diagram icon error component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-error.component.ts)
|
||||
- [*Diagram icon google drive publish task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-google-drive-publish-task.component.ts)
|
||||
- [*Diagram icon manual task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-manual-task.component.ts)
|
||||
- [*Diagram icon message component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-message.component.ts)
|
||||
- [*Diagram icon mule task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-mule-task.component.ts)
|
||||
- [*Diagram icon receive task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-receive-task.component.ts)
|
||||
- [*Diagram icon rest call task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-rest-call-task.component.ts)
|
||||
- [*Diagram icon script task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-script-task.component.ts)
|
||||
- [*Diagram icon send task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-send-task.component.ts)
|
||||
- [*Diagram icon service task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-service-task.component.ts)
|
||||
- [*Diagram icon signal component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-signal.component.ts)
|
||||
- [*Diagram icon timer component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-timer.component.ts)
|
||||
- [*Diagram icon user task component](ng2-components/ng2-activiti-diagrams/src/components/icons/diagram-icon-user-task.component.ts)
|
||||
- [*Diagram intermediate catching event component](ng2-components/ng2-activiti-diagrams/src/components/intermediate-catching-events/diagram-intermediate-catching-event.component.ts)
|
||||
- [*Raphael icon alfresco publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-alfresco-publish.component.ts)
|
||||
- [*Raphael icon box publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-box-publish.component.ts)
|
||||
- [*Raphael icon business rule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-business-rule.component.ts)
|
||||
- [*Raphael icon camel component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-camel.component.ts)
|
||||
- [*Raphael icon error component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-error.component.ts)
|
||||
- [*Raphael icon google drive publish component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-google-drive-publish.component.ts)
|
||||
- [*Raphael icon manual component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-manual.component.ts)
|
||||
- [*Raphael icon message component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-message.component.ts)
|
||||
- [*Raphael icon mule component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-mule.component.ts)
|
||||
- [*Raphael icon receive component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-receive.component.ts)
|
||||
- [*Raphael icon rest call component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-rest-call.component.ts)
|
||||
- [*Raphael icon script component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-script.component.ts)
|
||||
- [*Raphael icon send component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-send.component.ts)
|
||||
- [*Raphael icon service component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-service.component.ts)
|
||||
- [*Raphael icon signal component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-signal.component.ts)
|
||||
- [*Raphael icon timer component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-timer.component.ts)
|
||||
- [*Raphael icon user component](ng2-components/ng2-activiti-diagrams/src/components/raphael/icons/raphael-icon-user.component.ts)
|
||||
- [*Raphael circle component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-circle.component.ts)
|
||||
- [*Raphael cross component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-cross.component.ts)
|
||||
- [*Raphael flow arrow component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-flow-arrow.component.ts)
|
||||
- [*Raphael multiline text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-multiline-text.component.ts)
|
||||
- [*Raphael pentagon component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-pentagon.component.ts)
|
||||
- [*Raphael plus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-plus.component.ts)
|
||||
- [*Raphael rect component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rect.component.ts)
|
||||
- [*Raphael rhombus component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-rhombus.component.ts)
|
||||
- [*Raphael text component](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael-text.component.ts)
|
||||
- [*Diagram event subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-event-subprocess.component.ts)
|
||||
- [*Diagram subprocess component](ng2-components/ng2-activiti-diagrams/src/components/structural/diagram-subprocess.component.ts)
|
||||
- [*Diagram lane component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lane.component.ts)
|
||||
- [*Diagram lanes component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-lanes.component.ts)
|
||||
- [*Diagram pool component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pool.component.ts)
|
||||
- [*Diagram pools component](ng2-components/ng2-activiti-diagrams/src/components/swimlanes/diagram-pools.component.ts)
|
||||
- [*Diagram tooltip component](ng2-components/ng2-activiti-diagrams/src/components/tooltip/diagram-tooltip.component.ts)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Raphael service](ng2-components/ng2-activiti-diagrams/src/components/raphael/raphael.service.ts)
|
||||
- [*Diagram color service](ng2-components/ng2-activiti-diagrams/src/services/diagram-color.service.ts)
|
||||
- [*Diagrams service](ng2-components/ng2-activiti-diagrams/src/services/diagrams.service.ts)
|
||||
<!-- ng2-activiti-diagrams end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Form
|
||||
|
||||
Contains the Form component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-activiti-form/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-activiti-form start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Form list component](docs/form-list.component.md)
|
||||
- [Form component](docs/form.component.md)
|
||||
- [*Form field component](ng2-components/ng2-activiti-form/src/components/form-field/form-field.component.ts)
|
||||
- [*Start form component](ng2-components/ng2-activiti-form/src/components/start-form.component.ts)
|
||||
- [*Error component](ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts)
|
||||
- [*Text mask component](ng2-components/ng2-activiti-form/src/components/widgets/text/text-mask.component.ts)
|
||||
- [*Widget component](ng2-components/ng2-activiti-form/src/components/widgets/widget.component.ts)
|
||||
|
||||
### Services
|
||||
|
||||
- [Form service](docs/form.service.md)
|
||||
- [*Activiti alfresco service](ng2-components/ng2-activiti-form/src/services/activiti-alfresco.service.ts)
|
||||
- [*Form rendering service](ng2-components/ng2-activiti-form/src/services/form-rendering.service.ts)
|
||||
- [*Node service](ng2-components/ng2-activiti-form/src/services/node.service.ts)
|
||||
- [*Widget visibility service](ng2-components/ng2-activiti-form/src/services/widget-visibility.service.ts)
|
||||
|
||||
### Widgets
|
||||
|
||||
- [Content widget](docs/content.widget.md)
|
||||
- [*Amount widget](ng2-components/ng2-activiti-form/src/components/widgets/amount/amount.widget.ts)
|
||||
- [*Attach widget](ng2-components/ng2-activiti-form/src/components/widgets/attach/attach.widget.ts)
|
||||
- [*Checkbox widget](ng2-components/ng2-activiti-form/src/components/widgets/checkbox/checkbox.widget.ts)
|
||||
- [*Container widget](ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts)
|
||||
- [*Date widget](ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts)
|
||||
- [*Display text widget](ng2-components/ng2-activiti-form/src/components/widgets/display-text/display-text.widget.ts)
|
||||
- [*Document widget](ng2-components/ng2-activiti-form/src/components/widgets/document/document.widget.ts)
|
||||
- [*Dropdown widget](ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts)
|
||||
- [*Dynamic table widget](ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/dynamic-table.widget.ts)
|
||||
- [*Functional group widget](ng2-components/ng2-activiti-form/src/components/widgets/functional-group/functional-group.widget.ts)
|
||||
- [*Hyperlink widget](ng2-components/ng2-activiti-form/src/components/widgets/hyperlink/hyperlink.widget.ts)
|
||||
- [*Multiline text widget](ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.ts)
|
||||
- [*Number widget](ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.ts)
|
||||
- [*People widget](ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts)
|
||||
- [*Radio buttons widget](ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts)
|
||||
- [*Tabs widget](ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts)
|
||||
- [*Text widget](ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.ts)
|
||||
- [*Typeahead widget](ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.ts)
|
||||
- [*Unknown widget](ng2-components/ng2-activiti-form/src/components/widgets/unknown/unknown.widget.ts)
|
||||
- [*Upload widget](ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.ts)
|
||||
<!-- ng2-activiti-form end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Processlist
|
||||
|
||||
Contains the Processlist component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-activiti-processlist/README.md)
|
||||
for more information about installing and using the source code.
|
||||
|
||||
<!-- ng2-activiti-processlist start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Create process attachment component](docs/create-process-attachment.component.md)
|
||||
- [Process attachment list component](docs/process-attachment-list.component.md)
|
||||
- [Process comments component](docs/process-comments.component.md)
|
||||
- [Process filters component](docs/process-filters.component.md)
|
||||
- [Process instance details component](docs/process-instance-details.component.md)
|
||||
- [Process instance header component](docs/process-instance-header.component.md)
|
||||
- [Process instance tasks component](docs/process-instance-tasks.component.md)
|
||||
- [Processlist component](docs/processlist.component.md)
|
||||
- [Start process component](docs/start-process.component.md)
|
||||
|
||||
### Directives
|
||||
|
||||
- [Process audit directive](docs/process-audit.directive.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Process upload service](ng2-components/ng2-activiti-processlist/src/services/process-upload.service.ts)
|
||||
- [*Process service](ng2-components/ng2-activiti-processlist/src/services/process.service.ts)
|
||||
<!-- ng2-activiti-processlist end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Tasklist
|
||||
|
||||
Contains the Tasklist component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-activiti-tasklist/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-activiti-tasklist start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Apps list component](docs/apps-list.component.md)
|
||||
- [Checklist component](docs/checklist.component.md)
|
||||
- [Comments component](docs/comments.component.md)
|
||||
- [Create task attachment component](docs/create-task-attachment.component.md)
|
||||
- [People search component](docs/people-search.component.md)
|
||||
- [People component](docs/people.component.md)
|
||||
- [Start task component](docs/start-task.component.md)
|
||||
- [Task attachment list component](docs/task-attachment-list.component.md)
|
||||
- [Task details component](docs/task-details.component.md)
|
||||
- [Task filters component](docs/task-filters.component.md)
|
||||
- [Task header component](docs/task-header.component.md)
|
||||
- [Tasklist component](docs/tasklist.component.md)
|
||||
- [*Comment list component](ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.ts)
|
||||
- [*People list component](ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts)
|
||||
|
||||
### Directives
|
||||
|
||||
- [Task audit directive](docs/task-audit.directive.md)
|
||||
- [*No task detail template directive](ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.directive.ts)
|
||||
|
||||
### Models
|
||||
|
||||
- [Task details model](docs/task-details.model.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Process upload service](ng2-components/ng2-activiti-tasklist/src/services/process-upload.service.ts)
|
||||
- [*Tasklist service](ng2-components/ng2-activiti-tasklist/src/services/tasklist.service.ts)
|
||||
<!-- ng2-activiti-tasklist end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Core
|
||||
|
||||
Contains a variety of components, directives and other classes used throughout ADF. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-core/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-core start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Accordion group component](docs/accordion-group.component.md)
|
||||
- [Accordion component](docs/accordion.component.md)
|
||||
- [Data column component](docs/data-column.component.md)
|
||||
- [Info drawer layout component](docs/info-drawer-layout.component.md)
|
||||
- [Info drawer component](docs/info-drawer.component.md)
|
||||
- [Pagination component](docs/pagination.component.md)
|
||||
- [Toolbar divider component](docs/toolbar-divider.component.md)
|
||||
- [Toolbar title component](docs/toolbar-title.component.md)
|
||||
- [Toolbar component](docs/toolbar.component.md)
|
||||
- [Card view component](docs/card-view.component.md)
|
||||
- [*Infinite pagination component](ng2-components/ng2-alfresco-core/src/components/pagination/infinite-pagination.component.ts)
|
||||
|
||||
### Directives
|
||||
|
||||
- [Context menu directive](docs/context-menu.directive.md)
|
||||
- [Logout directive](docs/logout.directive.md)
|
||||
- [Node permission directive](docs/node-permission.directive.md)
|
||||
- [Upload directive](docs/upload.directive.md)
|
||||
- [*Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts)
|
||||
- [*Mdl textfield directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts)
|
||||
- [*Mdl upgrade element directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-upgrade-element.directive.ts)
|
||||
- [*Card view content proxy directive](ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
|
||||
- [*Highlight directive](ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts)
|
||||
|
||||
### Services
|
||||
|
||||
- [Alfresco api service](docs/alfresco-api.service.md)
|
||||
- [App config service](docs/app-config.service.md)
|
||||
- [Authentication service](docs/authentication.service.md)
|
||||
- [Card view update service](docs/card-view-update.service.md)
|
||||
- [Notification service](docs/notification.service.md)
|
||||
- [Renditions service](docs/renditions.service.md)
|
||||
- [Translation service](docs/translation.service.md)
|
||||
- [Upload service](docs/upload.service.md)
|
||||
- [User preferences service](docs/user-preferences.service.md)
|
||||
- [*Context menu service](ng2-components/ng2-alfresco-core/src/components/context-menu/context-menu.service.ts)
|
||||
- [*Alfresco content service](ng2-components/ng2-alfresco-core/src/services/alfresco-content.service.ts)
|
||||
- [*Alfresco settings service](ng2-components/ng2-alfresco-core/src/services/alfresco-settings.service.ts)
|
||||
- [*Auth guard bpm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-bpm.service.ts)
|
||||
- [*Auth guard ecm service](ng2-components/ng2-alfresco-core/src/services/auth-guard-ecm.service.ts)
|
||||
- [*Auth guard service](ng2-components/ng2-alfresco-core/src/services/auth-guard.service.ts)
|
||||
- [*Content service](ng2-components/ng2-alfresco-core/src/services/content.service.ts)
|
||||
- [*Cookie service](ng2-components/ng2-alfresco-core/src/services/cookie.service.ts)
|
||||
- [*Deleted nodes api service](ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
|
||||
- [*Discovery api service](ng2-components/ng2-alfresco-core/src/services/discovery-api.service.ts)
|
||||
- [*Favorites api service](ng2-components/ng2-alfresco-core/src/services/favorites-api.service.ts)
|
||||
- [*Highlight transform service](ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
|
||||
- [*Log service](ng2-components/ng2-alfresco-core/src/services/log.service.ts)
|
||||
- [*Nodes api service](ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
|
||||
- [*Page title service](ng2-components/ng2-alfresco-core/src/services/page-title.service.ts)
|
||||
- [*People content service](ng2-components/ng2-alfresco-core/src/services/people-content.service.ts)
|
||||
- [*People process service](ng2-components/ng2-alfresco-core/src/services/people-process.service.ts)
|
||||
- [*Search api service](ng2-components/ng2-alfresco-core/src/services/search-api.service.ts)
|
||||
- [*Search service](ng2-components/ng2-alfresco-core/src/services/search.service.ts)
|
||||
- [*Shared links api service](ng2-components/ng2-alfresco-core/src/services/shared-links-api.service.ts)
|
||||
- [*Sites api service](ng2-components/ng2-alfresco-core/src/services/sites-api.service.ts)
|
||||
- [*Storage service](ng2-components/ng2-alfresco-core/src/services/storage.service.ts)
|
||||
- [*Thumbnail service](ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts)
|
||||
- [*Translate loader service](ng2-components/ng2-alfresco-core/src/services/translate-loader.service.ts)
|
||||
<!-- ng2-alfresco-core end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Datatable
|
||||
|
||||
Contains the Datatable component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-datatable/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-datatable start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Datatable component](docs/datatable.component.md)
|
||||
- [*Datatable cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable-cell.component.ts)
|
||||
- [*Date cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/date-cell.component.ts)
|
||||
- [*Filesize cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/filesize-cell.component.ts)
|
||||
- [*Location cell component](ng2-components/ng2-alfresco-datatable/src/components/datatable/location-cell.component.ts)
|
||||
<!-- ng2-alfresco-datatable end -->
|
||||
|
||||
### Other classes and interfaces
|
||||
|
||||
- [DataTableAdapter interface](docs/DataTableAdapter.md)
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Documentlist
|
||||
|
||||
Contains the Document List component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-documentlist/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-documentlist start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Breadcrumb component](docs/breadcrumb.component.md)
|
||||
- [Dropdown breadcrumb component](docs/dropdown-breadcrumb.component.md)
|
||||
- [Content action component](docs/content-action.component.md)
|
||||
- [Document list component](docs/document-list.component.md)
|
||||
- [Sites dropdown component](docs/sites-dropdown.component.md)
|
||||
- [*Content node selector component](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.component.ts)
|
||||
|
||||
### Models
|
||||
|
||||
- [Permissions style model](docs/permissions-style.model.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [Document actions service](docs/document-actions.service.md)
|
||||
- [Folder actions service](docs/folder-actions.service.md)
|
||||
- [*Content node selector service](ng2-components/ng2-alfresco-documentlist/src/components/content-node-selector/content-node-selector.service.ts)
|
||||
- [*Document list service](ng2-components/ng2-alfresco-documentlist/src/services/document-list.service.ts)
|
||||
- [*Node actions service](ng2-components/ng2-alfresco-documentlist/src/services/node-actions.service.ts)
|
||||
<!-- ng2-alfresco-documentlist end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Login
|
||||
|
||||
Contains the Login component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-login/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-login start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Login component](docs/login.component.md)
|
||||
|
||||
### Directives
|
||||
|
||||
- [*Login footer directive](ng2-components/ng2-alfresco-login/src/directives/login-footer.directive.ts)
|
||||
- [*Login header directive](ng2-components/ng2-alfresco-login/src/directives/login-header.directive.ts)
|
||||
<!-- ng2-alfresco-login end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Search
|
||||
|
||||
Contains the Search component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-search/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-search start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Search control component](docs/search-control.component.md)
|
||||
- [Search component](docs/search.component.md)
|
||||
- [*Search autocomplete component](ng2-components/ng2-alfresco-search/src/components/search-autocomplete.component.ts)
|
||||
<!-- ng2-alfresco-search end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Social
|
||||
|
||||
Contains components for adding likes and ratings to items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-social/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-social start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Like component](docs/like.component.md)
|
||||
- [Rating component](docs/rating.component.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Rating service](ng2-components/ng2-alfresco-social/src/services/rating.service.ts)
|
||||
<!-- ng2-alfresco-social end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Tag
|
||||
|
||||
Contains components for adding tags to documents. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-tag/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-tag start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Tag actions component](docs/tag-actions.component.md)
|
||||
- [Tag list component](docs/tag-list.component.md)
|
||||
- [Tag node list component](docs/tag-node-list.component.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Tag service](ng2-components/ng2-alfresco-tag/src/services/tag.service.ts)
|
||||
<!-- ng2-alfresco-tag end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Upload
|
||||
|
||||
Contains components for uploading files to Content Services. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-upload/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-upload start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [File uploading dialog component](docs/file-uploading-dialog.component.md)
|
||||
- [Upload button component](docs/upload-button.component.md)
|
||||
- [Upload drag area component](docs/upload-drag-area.component.md)
|
||||
- [*File uploading list row component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list-row.component.ts)
|
||||
- [*File uploading list component](ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.ts)
|
||||
|
||||
### Directives
|
||||
|
||||
- [*File draggable directive](ng2-components/ng2-alfresco-upload/src/directives/file-draggable.directive.ts)
|
||||
<!-- ng2-alfresco-upload end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Userinfo
|
||||
|
||||
Contains the User Info component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-userinfo/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-userinfo start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [User info component](docs/user-info.component.md)
|
||||
|
||||
### Services
|
||||
|
||||
- [*Bpm user service](ng2-components/ng2-alfresco-userinfo/src/services/bpm-user.service.ts)
|
||||
- [*Ecm user service](ng2-components/ng2-alfresco-userinfo/src/services/ecm-user.service.ts)
|
||||
<!-- ng2-alfresco-userinfo end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Viewer
|
||||
|
||||
Contains the Viewer component and other related items. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-viewer/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-viewer start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Viewer component](docs/viewer.component.md)
|
||||
- [*ImgViewer component](ng2-components/ng2-alfresco-viewer/src/components/imgViewer.component.ts)
|
||||
- [*MediaPlayer component](ng2-components/ng2-alfresco-viewer/src/components/mediaPlayer.component.ts)
|
||||
- [*PdfViewer component](ng2-components/ng2-alfresco-viewer/src/components/pdfViewer.component.ts)
|
||||
- [*TxtViewer component](ng2-components/ng2-alfresco-viewer/src/components/txtViewer.component.ts)
|
||||
- [*Unknown format component](ng2-components/ng2-alfresco-viewer/src/components/unknown-format/unknown-format.component.ts)
|
||||
|
||||
### Directives
|
||||
|
||||
- [*Extension viewer directive](ng2-components/ng2-alfresco-viewer/src/directives/extension-viewer.directive.ts)
|
||||
<!-- ng2-alfresco-viewer end -->
|
||||
|
||||
[(Back to Contents)](#contents)
|
||||
|
||||
## ADF Webscript
|
||||
|
||||
Contains the Webscript component. See the library's
|
||||
[README file](ng2-components/ng2-alfresco-webscript/README.md)
|
||||
for more information about installing and using the source code.
|
||||
<!-- ng2-alfresco-webscript start -->
|
||||
|
||||
### Components
|
||||
|
||||
- [Webscript component](docs/webscript.component.md)
|
||||
<!-- ng2-alfresco-webscript end -->
|
||||
@@ -0,0 +1,166 @@
|
||||
# DataTableAdapter interface
|
||||
|
||||
Defines how table data is supplied to [DataTable](datatable.component.md)
|
||||
and [Tasklist](tasklist.component.md) components.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Properties](#properties)
|
||||
- [Methods](#methods)
|
||||
- [Details](#details)
|
||||
* [Columns and rows](#columns-and-rows)
|
||||
* [ObjectDataTableAdapter](#objectdatatableadapter)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| selectedRow | DataRow | The data for the currently selected row. |
|
||||
|
||||
## Methods
|
||||
|
||||
`getRows(): Array<DataRow>;`<br/>
|
||||
`setRows(rows: Array<DataRow>): void;`<br/>
|
||||
Get/set the values for display in the table using an array of rows.
|
||||
|
||||
`getColumns(): Array<DataColumn>;`<br/>
|
||||
`setColumns(columns: Array<DataColumn>): void;`<br/>
|
||||
Get/set an array of column specifications.
|
||||
|
||||
`getValue(row: DataRow, col: DataColumn): any;`<br/>
|
||||
Get the data value from a specific table cell.
|
||||
|
||||
`getSorting(): DataSorting;`
|
||||
`setSorting(sorting: DataSorting): void;`
|
||||
Get/set the sorting key and direction (ascending or descending).
|
||||
|
||||
`sort(key?: string, direction?: string): void;`
|
||||
Sort the table with a specified key and direction (ascending or descending).
|
||||
|
||||
|
||||
## Details
|
||||
|
||||
You can implement DataTableAdapter in your own class to display your data with the [DataTable](datatable.component.md)
|
||||
and [Tasklist](tasklist.component.md) components.
|
||||
This interface (along with other interfaces for column and row data) hides the details of your class from the caller, so you can store your data internally however you like. The DataTable library implements the interface in the [ObjectDataTableAdapter](#objectdatatableadapter) class which is the standard adapter for the Datatable component.
|
||||
|
||||
The basic idea of DataTableAdapter is that the caller can request your class to return an array of column
|
||||
definition objects. Each of these objects specifies the unique key, name, type and other properties of a single column.
|
||||
|
||||
The caller can also request the data values for the table as an array of row objects. The caller accesses the data from a row using a `getValue` method that returns the data from a specified column. This column is identified by the unique key that was set during the column definition.
|
||||
|
||||
The data-hiding works the other way around when the caller needs to set data in the DataTableAdapter class - the internal
|
||||
details of the caller's storage are hidden by the column and row interfaces. When the `setColumns` and `setRows` methods are
|
||||
called on the adapter, it can simply query the column/row objects it receives and then store the data in its own format.
|
||||
|
||||
### Columns and rows
|
||||
|
||||
Columns are defined by the DataColumn interface:
|
||||
|
||||
```ts
|
||||
interface DataColumn {
|
||||
key: string;
|
||||
type: string;
|
||||
format?: string;
|
||||
sortable?: boolean;
|
||||
title?: string;
|
||||
srTitle?: string;
|
||||
cssClass?: string;
|
||||
template?: TemplateRef<any>;
|
||||
formatTooltip?: Function;
|
||||
}
|
||||
```
|
||||
|
||||
An array of these objects is passed to your object when the `setColumns` method is called. The `key` property is used to identify columns and so each column's key should be unique. The `type` string can have a value of 'text', 'image' or 'date'.
|
||||
|
||||
An array of DataRow objects is passed to your object when the `setRows` method is called:
|
||||
|
||||
```ts
|
||||
interface DataRow {
|
||||
isSelected: boolean;
|
||||
isDropTarget?: boolean;
|
||||
cssClass?: string;
|
||||
hasValue(key: string): boolean;
|
||||
getValue(key: string): any;
|
||||
}
|
||||
```
|
||||
|
||||
Each row contains a set of values. An item in the set is retrieved by passing its key (specified in the column description) to the `getValue` method. As a result, the row does not need to store its data items in any particular order or format as long as it can retrieve the right item using its key.
|
||||
|
||||
### ObjectDataTableAdapter
|
||||
|
||||
The DataTable library provides a implementation of DataTableAdapter, called
|
||||
[ObjectDataTableAdapter](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts). This is a simple adapter that binds to object arrays and turns object fields into columns:
|
||||
|
||||
```ts
|
||||
let data = new ObjectDataTableAdapter(
|
||||
// Row data
|
||||
[
|
||||
{ id: 1, name: 'Name 1' },
|
||||
{ id: 2, name: 'Name 2' }
|
||||
],
|
||||
// Column schema
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
|
||||
If you don't specify the column array then the constructor will infer the layout of the columns from
|
||||
the structure of the row objects. The field names ('id' and 'name' in the example below) will be used
|
||||
for both the `key` and `title` properties of the columns:
|
||||
|
||||
```ts
|
||||
let data = [
|
||||
{ id: 2, name: 'abs' },
|
||||
{ id: 1, name: 'xyz' }
|
||||
];
|
||||
|
||||
let schema = ObjectDataTableAdapter.generateSchema(data);
|
||||
|
||||
/*Auto generated column schema:
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
sortable: false
|
||||
}
|
||||
]
|
||||
*/
|
||||
|
||||
```
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Datatable component](datatable.component.md)
|
||||
- [Tasklist component](tasklist.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,64 @@
|
||||
# Accordion Group component
|
||||
|
||||
Adds a collapsible panel to an [accordion menu](accordion.component.md).
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
|
||||
<my-list></my-list>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
```
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
export class MyComponent implements OnInit {
|
||||
|
||||
titleHeading: string;
|
||||
|
||||
constructor() {
|
||||
this.titleHeading = 'My Group';
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| heading | string | Title heading for the group. |
|
||||
| isSelected | boolean | Is this group currently selected? |
|
||||
| headingIcon | string | The material design icon. |
|
||||
| hasAccordionIcon | boolean | Should the (expanded) accordion icon be shown? Defaults to true |
|
||||
|
||||
## Details
|
||||
|
||||
Place one or more accordion groups within an [Accordion component](accordion.component.md) to define
|
||||
a menu.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Accordion component](accordion.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,91 @@
|
||||
# Accordion Component
|
||||
|
||||
Creates a collapsible accordion menu.
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
* [Example](#example)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-accordion>
|
||||
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
|
||||
<my-list></my-list>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
```
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
export class MyComponent implements OnInit {
|
||||
|
||||
titleHeading: string;
|
||||
|
||||
constructor() {
|
||||
this.titleHeading = 'My Group';
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| heading | string | The header title. |
|
||||
| isSelected | boolean | Define if the accordion group is selected or not. |
|
||||
| headingIcon | string | The material design icon. |
|
||||
| hasAccordionIcon | boolean | Define if the accordion (expand) icon needs to be shown or not, the default value is true |
|
||||
|
||||
## Details
|
||||
|
||||
An accordion menu contains several panels of content, only one of which is visible at any time. The
|
||||
hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
|
||||
while the visible panel fills the remaining space in the menu.
|
||||
|
||||
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to define the panels and set their
|
||||
properties (title, selection status, etc).
|
||||
|
||||
### Example
|
||||
|
||||
You can use an accordion menu to wrap a [process filter](process-filters.component.md), as shown in
|
||||
the following example:
|
||||
|
||||
```html
|
||||
<adf-accordion>
|
||||
<adf-accordion-group
|
||||
[heading]="'Processes'"
|
||||
[isSelected]="true"
|
||||
[headingIcon]="'assessment'">
|
||||
<adf-process-instance-filters
|
||||
[appId]="appId"
|
||||
(filterClick)="onProcessFilterClick($event)"
|
||||
(onSuccess)="onSuccessProcessFilterList($event)">
|
||||
</adf-process-instance-filters>
|
||||
</adf-accordion-group>
|
||||
</adf-accordion>
|
||||
```
|
||||
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Accordion group component](accordion-group.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,45 @@
|
||||
# Alfresco Api Service
|
||||
|
||||
Provides access to initialized **AlfrescoJSApi** instance.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
export class MyComponent implements OnInit {
|
||||
|
||||
constructor(private apiService: AlfrescoApiService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
let nodeId = 'some-node-id';
|
||||
let params = {};
|
||||
this.apiService.getInstance().nodes
|
||||
.getNodeChildren(nodeId, params)
|
||||
.then(result => console.log(result));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
**Note for developers**: _the TypeScript declaration files for Alfresco JS API
|
||||
are still under development and some Alfresco APIs may not be accessed
|
||||
via your favourite IDE's intellisense or TypeScript compiler.
|
||||
In case of any TypeScript type check errors you can still call any supported
|
||||
Alfresco JS api by casting the instance to `any` type like the following:_
|
||||
|
||||
```ts
|
||||
let api: any = this.apiService.getInstance();
|
||||
api.nodes.addNode('-root-', body, {});
|
||||
```
|
||||
@@ -0,0 +1,38 @@
|
||||
# Analytics Generator Component
|
||||
|
||||
The component generates and shows the charts
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-analytics-generator
|
||||
[reportId]="reportId"
|
||||
[reportParamQuery]="reportParamQuery">
|
||||
</adf-analytics>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | -- |
|
||||
| reportId | string | The report id |
|
||||
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | Raised when the charts are loaded |
|
||||
| onError | Raised when an error occurs during the loading |
|
||||
@@ -0,0 +1,39 @@
|
||||
# Activiti Analytics List Component
|
||||
|
||||
The component shows the list of all the available reports
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<analytics-report-list
|
||||
[layoutType]="'LIST'">
|
||||
</analytics-report-list>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Required | Default | Description |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| appId | string | optional | | The application id |
|
||||
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value|
|
||||
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default|
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | The event is emitted when the report list is loaded |
|
||||
| onError | The event is emitted when an error occurs during the loading |
|
||||
| reportClick | The event is emitted when the report in the list is selected |
|
||||
@@ -0,0 +1,53 @@
|
||||
# Activiti Analytics Component
|
||||
|
||||
The component shows the charts related to the reportId passed as input
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-analytics
|
||||
[appId]="1001"
|
||||
[reportId]="2006">
|
||||
</adf-analytics>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| appId | string | The application id |
|
||||
| reportId | string | The report id |
|
||||
| hideParameters | boolean | Toggle the analytics parameters |
|
||||
|
||||
You can also hide chart parameters UI by setting the `hideParameters` to `true`:
|
||||
|
||||
```html
|
||||
<adf-analytics
|
||||
[appId]="appId"
|
||||
[reportId]="reportId"
|
||||
[hideParameters]="true">
|
||||
</adf-analytics>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | The event is emitted when the report parameters are loaded |
|
||||
| onError | The event is emitted when an error occurs during the loading |
|
||||
| reportSaved | The event is emitted when a report is saved |
|
||||
| reportDeleted | The event is emitted when a report is deleted |
|
||||
@@ -0,0 +1,107 @@
|
||||
# AppConfigService
|
||||
|
||||
Supports app configuration settings, stored server side.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Details](#details)
|
||||
* [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Details
|
||||
|
||||
The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
|
||||
|
||||
You may need this service when deploying your ADF-based application to production servers.
|
||||
|
||||
There can be more than one server running web apps with different settings, like different addresses for Alfresco Content/Process services.
|
||||
|
||||
Or there is a need to change global settings for all the clients.
|
||||
|
||||
The service is already pre-configured to look for the "app.config.json" file in the application root address.
|
||||
|
||||
That allows deploying ADF-based web applications to multiple servers together with different settings files, for example having development, staging or production environments.
|
||||
|
||||
Example of the default settings file content:
|
||||
|
||||
**app.config.json**
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://localhost:3000/ecm",
|
||||
"bpmHost": "http://localhost:3000/bpm",
|
||||
"application": {
|
||||
"name": "Alfresco"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Please note that settings above are default ones coming with the server.
|
||||
You can override the values in your custom `app.config.json` file if needed.
|
||||
|
||||
You can also change the path or name of the configuration file when importing the CoreModule in your main application.
|
||||
|
||||
```ts
|
||||
...
|
||||
@NgModule({
|
||||
imports: [
|
||||
...
|
||||
CoreModule.forRoot({
|
||||
appConfigFile: 'app.production.config.json'
|
||||
})
|
||||
],
|
||||
...
|
||||
}
|
||||
export class AppModule { }
|
||||
```
|
||||
|
||||
Below is a simple example of using the AppConfigService in practice.
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
import { AppConfigService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({...})
|
||||
export class AppComponent {
|
||||
|
||||
constructor(appConfig: AppConfigService) {
|
||||
|
||||
// get nested properties by the path
|
||||
console.log(appConfig.get('application.name'));
|
||||
|
||||
// use generics for type safety
|
||||
let version: number = appConfig.get<number>('version');
|
||||
console.log(version);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Your custom components can also benefit from the `AppConfigService`,
|
||||
you can put an unlimited number of settings and optionally a nested JSON hierarchy.
|
||||
|
||||
### Variable substitution in configuration strings
|
||||
|
||||
The `AppConfigService` also supports a limited set of variable substitutions to greatly simplify certain scenarios.
|
||||
|
||||
```json
|
||||
{
|
||||
"ecmHost": "http://{hostname}:{port}/ecm",
|
||||
"bpmHost": "http://{hostname}:{port}/bpm",
|
||||
"application": {
|
||||
"name": "Alfresco"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The supported variables are:
|
||||
|
||||
| Variable name | Runtime value |
|
||||
| --- | --- |
|
||||
| hostname | `location.hostname` |
|
||||
| port | `location.port` |
|
||||
@@ -0,0 +1,70 @@
|
||||
# Activiti Apps Component
|
||||
|
||||
Shows all available apps.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
* [How filter the activiti apps](#how-filter-the-activiti-apps)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-apps
|
||||
[layoutType]="'GRID'">
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
|
||||
| filtersAppId | Object | Provide a way to filter the apps to show. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| appClick | Raised when an app entry is clicked |
|
||||
|
||||
## Details
|
||||
|
||||
### How filter the activiti apps
|
||||
|
||||
If you want to show some specific apps you can specify them through the filtersAppId parameters
|
||||
|
||||
```html
|
||||
<adf-apps
|
||||
[filtersAppId]="'[
|
||||
{defaultAppId: 'tasks'},
|
||||
{deploymentId: '15037'},
|
||||
{name : 'my app name'}]'">
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be shown.
|
||||
|
||||
|
||||
|
||||
You can use inside the filter one of the following property
|
||||
|
||||
```json
|
||||
{
|
||||
"defaultAppId": "string",
|
||||
"deploymentId": "string",
|
||||
"name": "string",
|
||||
"id": "number",
|
||||
"modelId": "number",
|
||||
"tenantId": "number"
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,48 @@
|
||||
# Authentication Service
|
||||
|
||||
Provides authentication for use with the Login component.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
import { AuthenticationService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({...})
|
||||
export class AppComponent {
|
||||
constructor(authService: AuthenticationService) {
|
||||
this.AuthenticationService.login('admin', 'admin').subscribe(
|
||||
token => {
|
||||
console.log(token);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onLogin | Raised when user logs in |
|
||||
| onLogout | Raised when user logs out |
|
||||
|
||||
## Details
|
||||
|
||||
The authentication service is used inside the [login component](../ng2-components/ng2-alfresco-login/README.md) and is possible to find there an example of how to use it.
|
||||
@@ -0,0 +1,37 @@
|
||||
# Breadcrumb Component
|
||||
|
||||
Indicates the current position within a navigation hierarchy.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-breadcrumb
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-breadcrumb>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| target | DocumentListComponent | (optional) DocumentList component to operate with. Upon clicks will instruct the given component to update. |
|
||||
| folderNode | [MinimalNodeEntryEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) | Active node, builds UI based on `folderNode.path.elements` collection. |
|
||||
| root | string | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use i18n resource key for the property value. |
|
||||
| rootId | string | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Returned Type | Description |
|
||||
| --- | --- | --- |
|
||||
| navigate | [PathElementEntity](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PathElementEntity.md) | emitted when user clicks on a breadcrumb |
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Dropdown breadcrumb component](dropdown-breadcrumb.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,141 @@
|
||||
# Card View Update service
|
||||
|
||||
Reports edits and clicks within fields of a [Card View component](card-view.component.md).
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Details](#details)
|
||||
* [Responding to updates](#responding-to-updates)
|
||||
* [Responding to clicks](#responding-to-clicks)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Details
|
||||
|
||||
You can use the Card View Update service to respond to edits and clicks within items on
|
||||
a card view. This might involve updating application data to reflect the changes made to
|
||||
the view or could simply be a matter of highlighting a clicked item.
|
||||
|
||||
The service is injected into a component using a constructor parameter, which also
|
||||
creates a corresponding property in the object:
|
||||
|
||||
```ts
|
||||
properties: any;
|
||||
|
||||
constructor(private cardViewUpdateService: CardViewUpdateService) {
|
||||
|
||||
this.properties = [
|
||||
new CardViewTextItemModel({
|
||||
label: 'Name',
|
||||
value: 'Kirk',
|
||||
key: 'name',
|
||||
default: 'No name entered',
|
||||
multiline: false,
|
||||
editable: true,
|
||||
clickable: true
|
||||
}),
|
||||
new CardViewTextItemModel({
|
||||
label: 'Rank',
|
||||
value: 'Captain',
|
||||
key: 'rank',
|
||||
default: 'No rank entered',
|
||||
multiline: false,
|
||||
editable: true,
|
||||
clickable: true
|
||||
}),
|
||||
new CardViewTextItemModel({
|
||||
label: 'Ship',
|
||||
value: 'Enterprise',
|
||||
key: 'ship',
|
||||
default: 'No ship entered',
|
||||
multiline: false,
|
||||
editable: true,
|
||||
clickable: true
|
||||
})
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
The constructor here also sets the `CardViewTextItemModel` instances that define the layout of the
|
||||
card view (see the [Card View component](card-view.component.md) for further information
|
||||
about this). The model objects and the `key` property are used to identify which item has been clicked
|
||||
or updated when an event occurs.
|
||||
|
||||
You must "subscribe" to the service in order to be informed about clicks and updates. You can do this by
|
||||
registering your own functions with the service's `itemUpdated$` and `itemClicked$` events
|
||||
(place this code in the `ngOnInit`
|
||||
[lifecycle hook](https://angular.io/guide/lifecycle-hooks#oninit) rather than the constructor):
|
||||
|
||||
```ts
|
||||
ngOnInit() {
|
||||
this.cardViewUpdateService.itemUpdated$.subscribe(this.respondToCardUpdate.bind(this));
|
||||
this.cardViewUpdateService.itemClicked$.subscribe(this.respondToCardClick.bind(this));
|
||||
}
|
||||
```
|
||||
|
||||
With the subscriptions in place, `respondToCardUpdate` and `respondToCardClick` will now be
|
||||
called after updates and clicks, respectively.
|
||||
|
||||
### Responding to updates
|
||||
|
||||
The update function is passed a parameter of type `UpdateNotification`:
|
||||
|
||||
```ts
|
||||
export interface UpdateNotification {
|
||||
target: any;
|
||||
changed: any;
|
||||
}
|
||||
```
|
||||
|
||||
Here, `target` contains the `CardViewTextItemModel` that was used to initialize
|
||||
the field in question (in practice, this might be a `CardViewDateItemModel` or `CardViewMapItemModel` if
|
||||
the card layout includes these objects). The `changed` property contains an object with a single property:
|
||||
|
||||
```ts
|
||||
{ keyValue: 'Value after editing' }
|
||||
```
|
||||
|
||||
Here, `keyValue` is actually the value of the `key` field specified when the item was initialized. So
|
||||
in our example, if the third item was edited from 'Enterprise' to 'Shuttle Craft', the object would be:
|
||||
|
||||
```ts
|
||||
{ ship: 'Shuttle Craft' }
|
||||
```
|
||||
|
||||
The complete code for `respondToCardUpdate` might look something like the following:
|
||||
|
||||
```ts
|
||||
respondToCardUpdate(un: UpdateNotification) {
|
||||
this.updateMessage = un.target.label + ' changed to ' + un.changed[un.target.key];
|
||||
}
|
||||
```
|
||||
|
||||
Note that the function will only be called if the `editable` property of the model object is set to true
|
||||
for this item. Also, the `editable` value of all items will be overridden if `editable` is set to false
|
||||
on the [Card View component](card-view.component.md) itself.
|
||||
|
||||
### Responding to clicks
|
||||
|
||||
The click function is passed a `ClickNotification` object, which is similar to `UpdateNotification` described above,
|
||||
but without the `changed` property. Use the `target` property to identify the item that was clicked:
|
||||
|
||||
```ts
|
||||
respondToCardClick(cn: ClickNotification) {
|
||||
this.clickMessage = cn.target.label + ' was just clicked';
|
||||
}
|
||||
```
|
||||
|
||||
Note that this function will only be called if the `clickable` property of the model object is set to true
|
||||
for this item.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Card view component](card-view.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,250 @@
|
||||
# Card View component
|
||||
|
||||
Displays a configurable property list renderer.
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
* [Editing](#editing)
|
||||
* [Defining properties](#defining-properties)
|
||||
+ [Card Text Item](#card-text-item)
|
||||
+ [Card Map Item](#card-map-item)
|
||||
+ [Card Date Item](#card-date-item)
|
||||
* [Defining your custom card Item](#defining-your-custom-card-item)
|
||||
+ [1. Define the model for the custom type](#1-define-the-model-for-the-custom-type)
|
||||
+ [2. Define the component for the custom type](#2-define-the-component-for-the-custom-type)
|
||||
+ [3. Add you custom component to your module's entryComponents list](#3-add-you-custom-component-to-your-modules-entrycomponents-list)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-card-view
|
||||
[properties]="[{label: 'My Label', value: 'My value'}]"
|
||||
[editable]="false">
|
||||
</adf-card-view>
|
||||
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| properties | [CardViewItem](#cardviewitem)[] | (**required**) The custom view to render |
|
||||
| editable | boolean | If the component editable or not |
|
||||
|
||||
## Details
|
||||
|
||||
You define the property list, the CardViewComponent does the rest. Each property represents a card view item (a row) in the card view component. At the time of writing two different kind of card view item (property type) is supported out of the box ([text](#card-text-item) item and [date](#card-date-item) item) but you can define your own custom types as well.
|
||||
|
||||
### Editing
|
||||
|
||||
The card view can optionally allow its properties to be edited. You can control the editing of the properties in two level.
|
||||
- **global level** - *via the editable parameter of the card-view.component*
|
||||
- **property level** - *in each property via the editable attribute*
|
||||
|
||||
If you set the global editable parameter to false, no properties can be edited regardless of what is set inside the property.
|
||||
|
||||
See the [Card View Update service](card-view-update.service.md) page for details on how to use the service
|
||||
to respond to clicks and edits in a card view. You can use this, for example, to save the edits within your
|
||||
application or to highlight a clicked item.
|
||||
|
||||
### Defining properties
|
||||
|
||||
Properties is an array of models which one by one implements the CardViewItem interface.
|
||||
|
||||
```js
|
||||
export interface CardViewItem {
|
||||
label: string;
|
||||
value: any;
|
||||
key: string;
|
||||
default?: any;
|
||||
type: string;
|
||||
displayValue: string;
|
||||
editable?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
At the moment three models are defined out of the box:
|
||||
|
||||
- **CardViewTextItemModel** - *for text items*
|
||||
- **CardViewMapItemModel** - *for map items*
|
||||
- **CardViewDateItemModel** - *for date items*
|
||||
|
||||
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
|
||||
|
||||
```js
|
||||
this.properties = [
|
||||
new CardViewTextItemModel({
|
||||
label: 'Name',
|
||||
value: 'Spock',
|
||||
key: 'name',
|
||||
default: 'default bar' ,
|
||||
multiline: false
|
||||
}),
|
||||
new CardViewMapItemModel({
|
||||
label: 'My map',
|
||||
value: new Map([['999', 'My Value']]),
|
||||
key: 'map',
|
||||
default: 'default map value' ,
|
||||
clickable: true
|
||||
}),
|
||||
new CardViewDateItemModel({
|
||||
label: 'Birth of date',
|
||||
value: someDate,
|
||||
key: 'birth-of-date',
|
||||
default: new Date(),
|
||||
format: '<any format that momentjs accepts>',
|
||||
editable: true
|
||||
}),
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
#### Card Text Item
|
||||
|
||||
CardViewTextItemModel is a property type for text properties.
|
||||
|
||||
```js
|
||||
const textItemProperty = new CardViewTextItemModel(options);
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| label* | string | --- | The label to render |
|
||||
| value* | any | --- | The original value |
|
||||
| key* | string | --- | the key of the property. Have an important role when editing the property. |
|
||||
| default | any | --- | The default value to render in case the value is empty |
|
||||
| displayValue* | string | --- | The value to render |
|
||||
| editable | boolean | false | Whether the property editable or not |
|
||||
| clickable | boolean | false | Whether the property clickable or not |
|
||||
| multiline | string | false | Single or multiline text |
|
||||
|
||||
#### Card Map Item
|
||||
|
||||
CardViewMapItemModel is a property type for map properties.
|
||||
|
||||
```js
|
||||
const mapItemProperty = new CardViewMapItemModel(options);
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| label* | string | --- | The label to render |
|
||||
| value* | Map | --- | A map that contains the key value pairs |
|
||||
| key* | string | --- | the key of the property. Have an important role when editing the property. |
|
||||
| default | any | --- | The default value to render in case the value is empty |
|
||||
| displayValue* | string | --- | The value to render |
|
||||
| clickable | boolean | false | Whether the property clickable or not |
|
||||
|
||||
#### Card Date Item
|
||||
|
||||
CardViewDateItemModel is a property type for date properties.
|
||||
|
||||
```js
|
||||
const dateItemProperty = new CardViewDateItemModel(options);
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| label* | string | --- | The label to render |
|
||||
| value* | any | --- | The original value |
|
||||
| key* | string | --- | the key of the property. Have an important role when editing the property. |
|
||||
| default | any | --- | The default value to render in case the value is empty |
|
||||
| displayValue* | string | --- | The value to render |
|
||||
| editable | boolean | false | Whether the property editable or not |
|
||||
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
|
||||
|
||||
### Defining your custom card Item
|
||||
|
||||
Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type.
|
||||
|
||||
Let's consider you want to have a **stardate** type to display Captain Picard's birthday (47457.1). For this, you need to do the following steps.
|
||||
|
||||
#### 1. Define the model for the custom type
|
||||
|
||||
Your model has to extend the CardViewBaseItemModel and implement the CardViewItem interface.
|
||||
*(You can check how the CardViewTextItemModel is implemented for further guidance.)*
|
||||
|
||||
```js
|
||||
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem {
|
||||
type: string = 'star-date';
|
||||
|
||||
get displayValue() {
|
||||
return this.convertToStarDate(this.value) || this.default;
|
||||
}
|
||||
|
||||
private convertToStarDate(starTimeStamp: number): string {
|
||||
// Do the magic
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The most important part of this model is the value of the **type** attribute. This is how the Card View component will be able to recognise which component is needed to render it dynamically.
|
||||
|
||||
The type is a **hyphen-separated-lowercase-words** string (just like how I wrote it). This will be converted to a PascalCase (or UpperCamelCase) string to find the right component. In our case the Card View component will look for the CardView**StarDate**ItemComponent.
|
||||
|
||||
#### 2. Define the component for the custom type
|
||||
|
||||
As discussed in the previous step the only important thing here is the naming of your component class ( **CardViewStarDateItemComponent**). Since the selector is not used in this case, you can give any selector name to it, but it makes sense to follow the angular standards.
|
||||
|
||||
```js
|
||||
@Component({
|
||||
selector: 'card-view-stardateitem' // For example
|
||||
...
|
||||
})
|
||||
export class CardViewStarDateItemComponent {
|
||||
@Input()
|
||||
property: CardViewStarDateItemModel;
|
||||
|
||||
@Input()
|
||||
editable: boolean;
|
||||
|
||||
constructor(private cardViewUpdateService: CardViewUpdateService) {}
|
||||
|
||||
isEditble() {
|
||||
return this.editable && this.property.editable;
|
||||
}
|
||||
|
||||
showStarDatePicker() {
|
||||
...
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
To make your component editable, you can have a look on either the CardViewTextItemComponent' or on the CardViewDateItemComponent's source.
|
||||
|
||||
#### 3. Add you custom component to your module's entryComponents list
|
||||
|
||||
For Angular to be able to load your custom component dynamically, you have to register your component in your modules entryComponents.
|
||||
|
||||
```js
|
||||
@NgModule({
|
||||
imports: [...],
|
||||
declarations: [
|
||||
CardViewStarDateItemComponent
|
||||
],
|
||||
entryComponents: [
|
||||
CardViewStarDateItemComponent
|
||||
],
|
||||
exports: [...]
|
||||
})
|
||||
export class MyModule {}
|
||||
```
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Card view update service](card-view-update.service.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,32 @@
|
||||
# Activiti Checklist Component
|
||||
|
||||
Shows the checklist task functionality.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-checklist
|
||||
[readOnly]="false"
|
||||
[taskId]="taskId"
|
||||
[assignee]="taskAssignee.id"
|
||||
</adf-checklist>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. |
|
||||
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
||||
| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
|
||||
@@ -0,0 +1,39 @@
|
||||
# ADF Comments Component
|
||||
|
||||
Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-comments
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-comments>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| taskId | string | The numeric ID of the task |
|
||||
| readOnly | boolean | The boolean flag |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| error | Raised when an error occurs while displaying/adding a comment |
|
||||
@@ -0,0 +1,264 @@
|
||||
# Content Action component
|
||||
|
||||
Adds options to a Document List actions menu for a particular content type.
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
* [Built-in action examples](#built-in-action-examples)
|
||||
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler)
|
||||
+ [Download](#download)
|
||||
+ [Copy and move](#copy-and-move)
|
||||
* [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
|
||||
* [Customizing built-in actions](#customizing-built-in-actions)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<!-- system handler -->
|
||||
<content-action
|
||||
icon="content_copy"
|
||||
target="document"
|
||||
title="copy"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
handler="copy">
|
||||
</content-action>
|
||||
|
||||
<!-- custom handler -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="Custom action"
|
||||
(execute)="myCustomAction1($event)">
|
||||
</content-action>
|
||||
|
||||
<!-- combined handler -->
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete with additional custom callback"
|
||||
handler="delete"
|
||||
permission="delete"
|
||||
(execute)="myCustomActionAfterDelete($event)">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyView {
|
||||
// ...
|
||||
|
||||
myCustomAction1(event) {
|
||||
let entry = event.value.entry;
|
||||
alert(`Custom document action for ${entry.name}`);
|
||||
}
|
||||
|
||||
myCustomActionAfterDelete(event) {
|
||||
let entry = event.value.entry;
|
||||
alert(`Custom callback after delete system action for ${entry.name}`);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `target` | string | | "document" or "folder" |
|
||||
| `title` | string | | The title of the action as shown in the menu |
|
||||
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
|
||||
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
|
||||
| `permission` | string | | The name of the permission |
|
||||
| `disabled` | boolean | | Is the menu item disabled?
|
||||
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Handler | Description |
|
||||
| --- | --- | --- |
|
||||
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
|
||||
| `permissionEvent` | All | Emitted when a permission error happens |
|
||||
| `success` | copy, move, delete | Emitted on successful action with the success string message |
|
||||
| `error` | copy, move | Emitted on unsuccessful action with the error event |
|
||||
|
||||
## Details
|
||||
|
||||
The document actions are rendered on a dropdown menu for each items of content. You can use the
|
||||
`target` property to choose whether the action applies to folders or documents.
|
||||
|
||||
A number of built-in actions are defined to handle common use cases:
|
||||
|
||||
- **Download** (document)
|
||||
- **Copy** (document, folder)
|
||||
- **Move** (document, folder)
|
||||
- **Delete** (document, folder)
|
||||
|
||||
You can use one of the built-in handlers by assigning its name to the `handler` property.
|
||||
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
|
||||
will trigger the same action.) You can also add your own handler by implementing the
|
||||
`execute` event. Note that you can use *both* a built-in handler and your own `execute`
|
||||
function in the same action.
|
||||
|
||||
### Built-in action examples
|
||||
|
||||
#### Delete - System handler combined with custom handler
|
||||
|
||||
If you specify both `handler="delete"` and your own custom handler with
|
||||
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after a delete completes
|
||||
successfully. A delete operation is considered successful if there are no permission or
|
||||
network-related errors for the delete request. You can avoid permission errors simply by disabling
|
||||
an item for users who don't have permission to use it (set `disableWithNoPermission="true"`).
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
disableWithNoPermission="true"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can also implement the `permissionEvent` to handle permission errors
|
||||
(to show the user a notification, for example). Subscribe to this event from your component
|
||||
and use the [Notification service](notification.service.md) to show a message.
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Delete"
|
||||
permission="delete"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="delete">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
export class MyComponent {
|
||||
|
||||
onPermissionsFailed(event: any) {
|
||||
this.notificationService.openSnackMessage(`you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Download
|
||||
|
||||
This action simply starts a download of the corresponding document file.
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
target="document"
|
||||
title="Download"
|
||||
handler="download">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### Copy and move
|
||||
|
||||
These actions show the destination chooser dialog for copy and move actions. By default,
|
||||
the destination chooser lists all the folders of the subject item's parent. However, it won't
|
||||
allow the item being copied/moved to be the destination if it is itself a folder.
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<content-actions>
|
||||
|
||||
<content-action
|
||||
icon="content_copy"
|
||||
target="document"
|
||||
title="copy"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
(error)="onContentActionError($event)"
|
||||
(success)="onContentActionSuccess($event)"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="copy">
|
||||
</content-action>
|
||||
|
||||
<content-action
|
||||
icon="redo"
|
||||
target="folder"
|
||||
title="move"
|
||||
permission="update"
|
||||
[disableWithNoPermission]="true"
|
||||
(error)="onContentActionError($event)"
|
||||
(success)="onContentActionSuccess($event)"
|
||||
(permissionEvent)="onPermissionsFailed($event)"
|
||||
handler="move">
|
||||
</content-action>
|
||||
|
||||
</content-actions>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
### Error, Permission and Success callbacks
|
||||
|
||||
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
|
||||
|
||||
- The error handler callback gets the error object which was raised
|
||||
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
|
||||
- The permissionEvent callback is the same as described above with the delete action
|
||||
|
||||
|
||||
|
||||
### Customizing built-in actions
|
||||
|
||||
The built-in actions are defined in the [Document Actions service](document-actions.service.md) and
|
||||
[Folder Actions service](folder-actions.service.md) but you can register new actions with these services
|
||||
and override the default implementations. See the doc pages for
|
||||
[Document Actions service](document-actions.service.md) and [Folder Actions service](folder-actions.service.md)
|
||||
for details and examples.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Document actions service](document-actions.service.md)
|
||||
- [Folder actions service](folder-actions.service.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,37 @@
|
||||
# Activiti Content Component
|
||||
|
||||
The component shows the content preview.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-content
|
||||
[contentId]="'1001'">
|
||||
</adf-content>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
The recommended set of properties can be found in the following table:
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| contentId | string | | The content id to show. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| contentClick | Invoked when the content is clicked. |
|
||||
@@ -0,0 +1,50 @@
|
||||
# Context Menu directive
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Details](#details)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<my-component [context-menu]="menuItems"></my-component>
|
||||
<context-menu-holder></context-menu-holder>
|
||||
```
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
export class MyComponent implements OnInit {
|
||||
|
||||
menuItems: any[];
|
||||
|
||||
constructor() {
|
||||
this.menuItems = [
|
||||
{ title: 'Item 1', subject: new Subject() },
|
||||
{ title: 'Item 2', subject: new Subject() },
|
||||
{ title: 'Item 3', subject: new Subject() }
|
||||
];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.menuItems.forEach(l => l.subject.subscribe(item => this.commandCallback(item)));
|
||||
}
|
||||
|
||||
commandCallback(item) {
|
||||
alert(`Executing ${item.title} command.`);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
See **Demo Shell** or **DocumentList** implementation for more details and use cases.
|
||||
@@ -0,0 +1,40 @@
|
||||
# Create Process Attachment component
|
||||
|
||||
Displays Upload Component(Drag and Click) to upload the attachment to a specified process instance
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-create-process-attachment
|
||||
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
|
||||
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
|
||||
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
|
||||
</adf-create-process-attachment>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| processInstanceId | string | (**required**): The ID of the process instance to display |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
|
||||
| success | Raised when the attachment created/uploaded successfully from within the component |
|
||||
@@ -0,0 +1,40 @@
|
||||
# Create Task Attachment Component
|
||||
|
||||
Displays Upload Component(Drag and Click) to upload the attachment to a specified task
|
||||
|
||||
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-create-task-attachment
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
|
||||
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
|
||||
</adf-create-task-attachment>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| taskId | string | (**required**): The numeric ID of the task to display |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
|
||||
| success | Raised when the attachment created/uploaded successfully from within the component |
|
||||
@@ -0,0 +1,299 @@
|
||||
# DataColumn Component
|
||||
|
||||
Defines column properties for DataTable, Tasklist, Document List and other components.
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
- [Details](#details)
|
||||
* [Automatic column header translation](#automatic-column-header-translation)
|
||||
* [Custom tooltips](#custom-tooltips)
|
||||
* [Column Template](#column-template)
|
||||
* [Styling Techniques](#styling-techniques)
|
||||
+ [Custom icons for selected rows](#custom-icons-for-selected-rows)
|
||||
+ [Hiding columns on small screens](#hiding-columns-on-small-screens)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-datatable [data]="data">
|
||||
<data-columns>
|
||||
<data-column key="icon" type="image" [sortable]="false"></data-column>
|
||||
<data-column key="id" title="Id"></data-column>
|
||||
<data-column key="createdOn" title="Created"></data-column>
|
||||
<data-column key="name" title="Name" class="full-width name-column"></data-column>
|
||||
<data-column key="createdBy.name" title="Created By"></data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
|
||||
| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
|
||||
| format | string | | Value format (if supported by components), for example format of the date |
|
||||
| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
|
||||
| title | string | | Display title of the column, typically used for column headers. You can use the i18n resouce key to get it translated automatically. |
|
||||
| template | `TemplateRef` | | Custom column template |
|
||||
| sr-title | string | | Screen reader title, used for accessibility purposes |
|
||||
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
||||
| formatTooltip | Function | | Custom tooltip formatter function. |
|
||||
|
||||
## Details
|
||||
|
||||
### Automatic column header translation
|
||||
|
||||
You can use i18n resource keys with DataColumn `title` property.
|
||||
The component will automatically check the corresponding i18n resources and fetch corresponding value.
|
||||
|
||||
```html
|
||||
<data-column
|
||||
key="name"
|
||||
title="MY.RESOURCE.KEY">
|
||||
</data-column>
|
||||
```
|
||||
|
||||
This feature is optional. Regular text either plain or converted via the `translate` pipe will still be working as it was before.
|
||||
|
||||
### Custom tooltips
|
||||
|
||||
You can create custom tooltips for the table cells by providing a `formatTooltip` property with a tooltip formatter function when declaring a data column.
|
||||
|
||||
```html
|
||||
<data-column
|
||||
title="Name"
|
||||
key="name"
|
||||
[formatTooltip]="getNodeNameTooltip"
|
||||
class="full-width ellipsis-cell">
|
||||
</data-column>
|
||||
```
|
||||
|
||||
And the code in this case will be similar to the following:
|
||||
|
||||
```ts
|
||||
import { DataColumn, DataRow } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({...})
|
||||
export class MyComponent {
|
||||
...
|
||||
|
||||
getNodeNameTooltip(row: DataRow, col: DataColumn): string {
|
||||
if (row) {
|
||||
return row.getValue('name');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
To disable the tooltip your function can return `null` or an empty string.
|
||||
|
||||
### Column Template
|
||||
|
||||
You can provide custom column/cell templates that may contain other Angular components or HTML elements:
|
||||
|
||||
Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. |
|
||||
| row | [DataRow](DataTableAdapter.md) | Current data row instance. |
|
||||
| col | [DataColumn](DataTableAdapter.md) | Current data column instance. |
|
||||
|
||||
You can use all three properties to gain full access to underlying data from within your custom templates.
|
||||
In order to wire HTML templates with the data context you will need defining a variable that is bound to `$implicit` like shown below:
|
||||
|
||||
```html
|
||||
<ng-template let-context="$implicit">
|
||||
<!-- template body -->
|
||||
</ng-template>
|
||||
```
|
||||
|
||||
The format of naming is `let-VARIABLE_NAME="$implicit"` where `VARIABLE_NAME` is the name of the variable you want to bind template data context to.
|
||||
|
||||
Getting a cell value from the underlying DataTableAdapter:
|
||||
|
||||
```ts
|
||||
context.data.getValue(entry.row, entry.col);
|
||||
```
|
||||
|
||||
You can retrieve all property values for underlying node, including nested properties (via property paths):
|
||||
|
||||
```ts
|
||||
context.row.getValue('name')
|
||||
context.row.getValue('createdByUser.displayName')
|
||||
```
|
||||
|
||||
You may want using **row** api to get raw value access.
|
||||
|
||||
```html
|
||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||
<ng-template let-context="$implicit">
|
||||
<span>Hi! {{context.row.getValue('createdByUser.displayName')}}</span>
|
||||
<span>Hi! {{context.row.getValue('name')}}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
Use **data** api to get values with post-processing, like datetime/icon conversion._
|
||||
|
||||
In the Example below we will prepend `Hi!` to each file and folder name in the list:
|
||||
|
||||
```html
|
||||
<data-column title="Name" key="name" sortable="true" class="full-width ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
In the Example below we will integrate the [adf-tag-node-list](tag-node-list.component.md) component
|
||||
with the document list.
|
||||
|
||||
```html
|
||||
<data-column
|
||||
title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
|
||||
key="id"
|
||||
sortable="true"
|
||||
class="full-width ellipsis-cell">
|
||||
<ng-template let-entry="$implicit">
|
||||
<adf-tag-node-list [nodeId]="entry.data.getValue(entry.row, entry.col)"></adf-tag-node-list>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Styling Techniques
|
||||
|
||||
You can add a custom CSS class to a column using its `class` property. This is useful for
|
||||
many purposes - some examples are given below.
|
||||
|
||||
#### Custom icons for selected rows
|
||||
|
||||
Custom styling can be used to change the look and feel of the icon for the selected rows.
|
||||
|
||||
Let's start by assigning an "image-table-cell" class to the thumbnail column:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
|
||||
<data-column
|
||||
key="$thumbnail"
|
||||
type="image"
|
||||
[sortable]="false"
|
||||
class="image-table-cell">
|
||||
</data-column>
|
||||
|
||||
...
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
Now your application can define styles to change the content of the column based on conditions such as the selection state:
|
||||
|
||||
```css
|
||||
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
adf-document-list ::ng-deep adf-datatable tr.is-selected .image-table-cell::before {
|
||||
content: "\E876"; /* "done" */
|
||||
font-family: "Material Icons";
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: -14px;
|
||||
border-radius: 100%;
|
||||
background: #00bcd4;
|
||||
}
|
||||
```
|
||||
|
||||
Once your application starts you should see the following icon for each selected row:
|
||||
|
||||
|
||||
|
||||
#### Hiding columns on small screens
|
||||
|
||||
You can hide columns on small screens using custom CSS rules:
|
||||
|
||||
```css
|
||||
@media all and (max-width: 768px) {
|
||||
|
||||
alfresco-document-list ::ng-deep th.desktop-only .cell-value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
alfresco-document-list ::ng-deep td.desktop-only .cell-value {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now you can declare columns and assign `desktop-only` class where needed:
|
||||
|
||||
```html
|
||||
<adf-document-list ...>
|
||||
<data-columns>
|
||||
|
||||
<!-- always visible columns -->
|
||||
|
||||
<data-column key="$thumbnail" type="image"></data-column>
|
||||
<data-column
|
||||
title="Name"
|
||||
key="name"
|
||||
class="full-width ellipsis-cell">
|
||||
</data-column>
|
||||
|
||||
<!-- desktop-only columns -->
|
||||
|
||||
<data-column
|
||||
title="Created by"
|
||||
key="createdByUser.displayName"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
<data-column
|
||||
title="Created on"
|
||||
key="createdAt"
|
||||
type="date"
|
||||
format="medium"
|
||||
class="desktop-only">
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
**Desktop View**
|
||||
|
||||
|
||||
|
||||
**Mobile View**
|
||||
|
||||
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Document list component](document-list.component.md)
|
||||
- [Datatable component](datatable.component.md)
|
||||
- [Tasklist component](tasklist.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,472 @@
|
||||
# DataTable component
|
||||
|
||||
Displays data as a table with customizable columns and presentation.
|
||||
|
||||
|
||||
|
||||
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
- [Details](#details)
|
||||
* [Supplying data for the table](#supplying-data-for-the-table)
|
||||
* [Customizing columns](#customizing-columns)
|
||||
* [DataTable DOM Events](#datatable-dom-events)
|
||||
* [Custom Empty content template](#custom-empty-content-template)
|
||||
* [Loading content template](#loading-content-template)
|
||||
* [Events](#events-1)
|
||||
+ [row-keyup DOM event](#row-keyup-dom-event)
|
||||
+ [rowClick event](#rowclick-event)
|
||||
+ [rowDblClick event](#rowdblclick-event)
|
||||
+ [showRowContextMenu event](#showrowcontextmenu-event)
|
||||
+ [showRowActionsMenu event](#showrowactionsmenu-event)
|
||||
+ [executeRowAction event](#executerowaction-event)
|
||||
- [See also](#see-also)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic usage
|
||||
|
||||
**app.component.html**
|
||||
|
||||
```html
|
||||
<adf-datatable
|
||||
[data]="data">
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
**app.component.ts**
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({...})
|
||||
export class DataTableDemo {
|
||||
data: ObjectDataTableAdapter;
|
||||
|
||||
constructor() {
|
||||
this.data = new ObjectDataTableAdapter(
|
||||
// data
|
||||
[
|
||||
{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}
|
||||
],
|
||||
// schema
|
||||
[
|
||||
{
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
cssClass: 'full-width',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
You can also use HTML-based schema declaration like shown below:
|
||||
|
||||
```html
|
||||
<adf-datatable [data]="data">
|
||||
<data-columns>
|
||||
<data-column key="icon" type="image" [sortable]="false"></data-column>
|
||||
<data-column key="id" title="Id"></data-column>
|
||||
<data-column key="createdOn" title="Created"></data-column>
|
||||
<data-column key="name" title="Name" class="full-width name-column"></data-column>
|
||||
<data-column key="createdBy.name" title="Created By"></data-column>
|
||||
</data-columns>
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({...})
|
||||
export class DataTableDemo {
|
||||
data: ObjectDataTableAdapter;
|
||||
|
||||
constructor() {
|
||||
this.data = new ObjectDataTableAdapter(
|
||||
// data
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Name 1',
|
||||
createdBy : { name: 'user'},
|
||||
createdOn: 123,
|
||||
icon: 'http://example.com/img.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Name 2',
|
||||
createdBy : { name: 'user 2'},
|
||||
createdOn: 123,
|
||||
icon: 'http://example.com/img.png'
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
|
||||
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
|
||||
| rowStyleClass | string | | The CSS class to apply to every row |
|
||||
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
|
||||
| rows | Object[] | [] | The rows that the datatable should show |
|
||||
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
|
||||
| actions | boolean | false | Toggles data actions column |
|
||||
| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
|
||||
| fallbackThumbnail | string | | Fallback image for row where thumbnail is missing|
|
||||
| contextMenu | boolean | false | Toggles custom context menu for the component |
|
||||
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
|
||||
| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
|
||||
| showHeader | boolean | true | Toggles header visibility |
|
||||
| selection | DataRow[] | [] | Contains selected rows |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description
|
||||
| --- | --- |
|
||||
| [rowClick](#rowclick-event) | Emitted when user clicks the row |
|
||||
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
|
||||
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
|
||||
| [showRowActionsMenu](#showrowactionsmenu-event) | Emitted before actions menu is displayed for a row |
|
||||
| [executeRowAction](#executerowaction-event) | Emitted when row action is executed by user |
|
||||
|
||||
## Details
|
||||
|
||||
### Supplying data for the table
|
||||
|
||||
The column layout and row data are supplied to the table using an object that implements the
|
||||
DataTableAdapter interface. This interface hides the internal details of the class that provides
|
||||
the data, which gives a lot of flexibility in how the data can be stored and accessed. The DataTable
|
||||
library includes a standard adapter class called ObjectDataTableAdapter that is useful for many
|
||||
common uses. See the [DataTableAdapter](DataTableAdapter.md) for full details about the interface and
|
||||
the ObjectDataTableAdapter class.
|
||||
|
||||
### Customizing columns
|
||||
|
||||
You can define custom HTML templates for columns and also add tooltips, automatic column title translation and other features. See the DataColumn component page for more information.
|
||||
|
||||
### DataTable DOM Events
|
||||
|
||||
Below are the DOM events raised by DataTable component.
|
||||
These events bubble up the component tree and can be handled by any parent component.
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| row-click | Raised when user clicks a row |
|
||||
| row-dblclick | Raised when user double-clicks a row |
|
||||
| row-select | Raised after user selects a row |
|
||||
| row-unselect | Raised after user unselects a row |
|
||||
| row-keyup | Raised on the 'keyup' event for the focused row. |
|
||||
|
||||
For example:
|
||||
|
||||
```html
|
||||
<root-component (row-click)="onRowClick($event)">
|
||||
<child-component>
|
||||
<adf-datatable></adf-datatable>
|
||||
</child-component>
|
||||
</root-component>
|
||||
```
|
||||
|
||||
```ts
|
||||
onRowClick(event) {
|
||||
console.log(event);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Custom Empty content template
|
||||
|
||||
You can add a template that will be shown when there are no results in your datatable:
|
||||
|
||||
```html
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[actions]="contentActions"
|
||||
[multiselect]="multiselect"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
(rowClick)="onRowClick($event)"
|
||||
(rowDblClick)="onRowDblClick($event)">
|
||||
|
||||
|
||||
<no-content-template>
|
||||
<!--Add your custom empty template here-->
|
||||
<ng-template>
|
||||
<h1>Sorry, no content</h1>
|
||||
</ng-template>
|
||||
</no-content-template>
|
||||
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can use the empty list component if you want to show the default ADF empty template.
|
||||
|
||||
You can use any HTML layout or Angular component as a content of the empty template section by using the special `<adf-empty-list-header>, <adf-empty-list-body>, <adf-empty-list-footer>` elements:
|
||||
|
||||
```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>
|
||||
<adf-empty-list-header>"'My custom Header'"</adf-empty-list-header>
|
||||
<adf-empty-list-body>"'My custom body'"</adf-empty-list-body>
|
||||
<adf-empty-list-footer>"'My custom footer'"</adf-empty-list-footer>
|
||||
<ng-content>"'HTML Layout'"</ng-content>
|
||||
</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 |
|
||||
|
||||
|
||||
|
||||
### Loading content template
|
||||
|
||||
You can add a template that will be shown during the loading of your data:
|
||||
|
||||
```html
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[actions]="contentActions"
|
||||
[multiselect]="multiselect"
|
||||
[loading]=isLoading()"
|
||||
(showRowContextMenu)="onShowRowContextMenu($event)"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
(rowClick)="onRowClick($event)"
|
||||
(rowDblClick)="onRowDblClick($event)">
|
||||
|
||||
<loading-content-template>
|
||||
<ng-template>
|
||||
<!--Add your custom loading template here-->
|
||||
<md-progress-spinner
|
||||
class="adf-document-list-loading-margin"
|
||||
[color]="'primary'"
|
||||
[mode]="'indeterminate'">
|
||||
</md-progress-spinner>
|
||||
</ng-template>
|
||||
</loading-content-template>
|
||||
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
```js
|
||||
isLoading(): boolean {
|
||||
//your custom logic to identify if you are in a loading state
|
||||
}
|
||||
```
|
||||
|
||||
Note: the `<loading-content-template>` and `<no-content-template>` can be used together
|
||||
|
||||
### Events
|
||||
|
||||
#### row-keyup DOM event
|
||||
|
||||
Raised on the 'keyup' event for the focused row.
|
||||
|
||||
This is an instance of the `CustomEvent` with the `details` property containing the following object:
|
||||
|
||||
```ts
|
||||
row: DataRow,
|
||||
keyboardEvent: KeyboardEvent,
|
||||
sender: any
|
||||
```
|
||||
|
||||
#### rowClick event
|
||||
|
||||
Emitted when user clicks a row.
|
||||
|
||||
Event properties:
|
||||
|
||||
```ts
|
||||
sender: any // DataTable instance
|
||||
value: DataRow, // row clicked
|
||||
event: Event // original HTML DOM event
|
||||
```
|
||||
|
||||
Handler example:
|
||||
|
||||
```ts
|
||||
onRowClicked(event: DataRowEvent) {
|
||||
console.log(event.value);
|
||||
}
|
||||
```
|
||||
|
||||
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||
|
||||
#### rowDblClick event
|
||||
|
||||
Emitted when user double-clicks a row.
|
||||
|
||||
Event properties:
|
||||
|
||||
```ts
|
||||
sender: any // DataTable instance
|
||||
value: DataRow, // row clicked
|
||||
event: Event // original HTML DOM event
|
||||
```
|
||||
|
||||
Handler example:
|
||||
|
||||
```ts
|
||||
onRowDblClicked(event: DataRowEvent) {
|
||||
console.log(event.value);
|
||||
}
|
||||
```
|
||||
|
||||
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||
|
||||
#### showRowContextMenu event
|
||||
|
||||
Emitted before context menu is displayed for a row.
|
||||
|
||||
Note that DataTable itself does not populate context menu items,
|
||||
you can provide all necessary content via handler.
|
||||
|
||||
Event properties:
|
||||
|
||||
```ts
|
||||
value: {
|
||||
row: DataRow,
|
||||
col: DataColumn,
|
||||
actions: []
|
||||
}
|
||||
```
|
||||
|
||||
Handler example:
|
||||
|
||||
```ts
|
||||
onShowRowContextMenu(event: DataCellEvent) {
|
||||
event.value.actions = [
|
||||
{ ... },
|
||||
{ ... }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||
|
||||
DataTable will automatically render provided menu items.
|
||||
|
||||
See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
documentation for more details on context actions format and behaviour.
|
||||
|
||||
#### showRowActionsMenu event
|
||||
|
||||
Emitted before actions menu is displayed for a row.
|
||||
Requires `actions` property to be set to `true`.
|
||||
|
||||
Event properties:
|
||||
|
||||
```ts
|
||||
value: {
|
||||
row: DataRow,
|
||||
action: any
|
||||
}
|
||||
```
|
||||
|
||||
Note that DataTable itself does not populate action menu items,
|
||||
you can provide all necessary content via handler.
|
||||
|
||||
This event is cancellable, you can use `event.preventDefault()` to prevent default behaviour.
|
||||
|
||||
#### executeRowAction event
|
||||
|
||||
Emitted when a row action is executed by the user.
|
||||
|
||||
Usually accompanies `showRowActionsMenu` event.
|
||||
DataTable itself does not execute actions but provides support for external
|
||||
integration. If there were actions provided with `showRowActionsMenu` event
|
||||
then `executeRowAction` will be automatically executed when user clicks
|
||||
corresponding menu item.
|
||||
|
||||
```html
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[multiselect]="multiselect"
|
||||
[actions]="true"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)">
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
```ts
|
||||
import { DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
|
||||
|
||||
onShowRowActionsMenu(event: DataCellEvent) {
|
||||
let myAction = {
|
||||
title: 'Hello'
|
||||
// your custom metadata needed for onExecuteRowAction
|
||||
};
|
||||
event.value.actions = [
|
||||
myAction
|
||||
];
|
||||
}
|
||||
|
||||
onExecuteRowAction(event: DataRowActionEvent) {
|
||||
let args = event.value;
|
||||
console.log(args.row);
|
||||
console.log(args.action);
|
||||
window.alert(`My custom action: ${args.action.title}`);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Developers are allowed to use any payloads as row actions.
|
||||
The only requirement for the objects is having `title` property.
|
||||
|
||||
Once corresponding action is clicked in the dropdown menu DataTable invokes `executeRowAction` event
|
||||
where you can handle the process, inspect the action payload and all custom properties defined earlier,
|
||||
and do corresponding actions.
|
||||
|
||||
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||
<!-- seealso start -->
|
||||
## See also
|
||||
|
||||
- [Data column component](data-column.component.md)
|
||||
- [Pagination component](pagination.component.md)
|
||||
- [DataTableAdapter](DataTableAdapter.md)
|
||||
- [Document list component](document-list.component.md)
|
||||
<!-- seealso end -->
|
||||
@@ -0,0 +1,49 @@
|
||||
# Activiti Diagram Component
|
||||
|
||||
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
||||
|
||||
<!-- toc -->
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
* [Properties](#properties)
|
||||
* [Events](#events)
|
||||
|
||||
<!-- tocstop -->
|
||||
|
||||
<!-- markdown-toc end -->
|
||||
|
||||
## Basic Usage
|
||||
|
||||
This component shows the diagram of a process.
|
||||
|
||||
```html
|
||||
<adf-diagram
|
||||
[processDefinitionId]="processDefinitionId">
|
||||
</adf-diagram>
|
||||
```
|
||||
|
||||
The below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).
|
||||
|
||||
```html
|
||||
<adf-diagram
|
||||
[processInstanceId]="processInstanceId">
|
||||
</adf-diagram>
|
||||
```
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | -- |
|
||||
| metricPercentages | any | The array that contains the percentage of time for each element |
|
||||
| processInstanceId | any | |
|
||||
| metricColor | any | The array that contains the color for each element |
|
||||
| metricType | any | The string that specifies the metric type |
|
||||
| width | number | |
|
||||
| height | number | |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| onSuccess | Raised when the diagrams elements are loaded |
|
||||
| onError | Raised when an error occurs during loading |
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user