mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1731] update material2 beta12 e angular2 4.4.5 (#2475)
* update material2 beta12 update angular2 4.4.5 * fix changed version js-api * update types hammerjs * fix test * clean old doc * fix pagination test * fix test * missing update packages * fix <mat-form-field> for select box * start task component test
This commit is contained in:
Eugenio Romano
committed by
Denys Vuika
Denys Vuika
parent
9663971256
commit
fcb292c849
@@ -1,15 +1,15 @@
|
||||
<div class="about-container">
|
||||
<h3>Server settings</h3>
|
||||
<md-list>
|
||||
<mat-list>
|
||||
<small>The values below are taken from the AppConfigService and loaded from the '{{ configFile }}' file.</small>
|
||||
<md-list-item>
|
||||
<h4 md-line> Alfresco Process Services URL: {{ bpmHost }}</h4>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item>
|
||||
<h4 md-line>Alfresco Content Services URL: {{ ecmHost }}</h4>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<mat-list-item>
|
||||
<h4 matLine> Alfresco Process Services URL: {{ bpmHost }}</h4>
|
||||
</mat-list-item>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-list-item>
|
||||
<h4 matLine>Alfresco Content Services URL: {{ ecmHost }}</h4>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
<h3>Product Versions</h3>
|
||||
<div *ngIf="bpmVersion">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<md-tab-group [(selectedIndex)]="activeTab">
|
||||
<md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
|
||||
<mat-tab-group [(selectedIndex)]="activeTab">
|
||||
<mat-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
|
||||
<div class="page-content">
|
||||
<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>
|
||||
<button color="primary" mat-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>{{'PS-TAB.START-TASK' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -77,18 +77,18 @@
|
||||
adf-task-audit
|
||||
[task-id]="currentTaskId"
|
||||
[download]="true"
|
||||
md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
|
||||
<md-icon>assignment_ind</md-icon>
|
||||
mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)">
|
||||
<mat-icon>assignment_ind</mat-icon>
|
||||
</button>
|
||||
<hr>
|
||||
</div>
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<activiti-task-attachments
|
||||
[taskId]="currentTaskId">
|
||||
</activiti-task-attachments>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
|
||||
<adf-start-task
|
||||
@@ -99,8 +99,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab id="processes-header" href="#processes"
|
||||
</mat-tab>
|
||||
<mat-tab id="processes-header" href="#processes"
|
||||
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
|
||||
<div class="page-content">
|
||||
<div class="activiti-demo-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
@@ -108,11 +108,11 @@
|
||||
<div class="activiti-demo-list-buttons">
|
||||
<button
|
||||
color="primary"
|
||||
md-raised-button
|
||||
mat-raised-button
|
||||
class="activiti-demo-list-buttons-start"
|
||||
data-automation-id="btn-start-process"
|
||||
(click)="navigateStartProcess()">
|
||||
<md-icon>add</md-icon>
|
||||
<mat-icon>add</mat-icon>
|
||||
<span>{{'PS-TAB.START-PROCESS' | translate}}</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -161,21 +161,21 @@
|
||||
{{'PS-TAB.AUDIT-LOG' | translate}}
|
||||
<button adf-process-audit
|
||||
[process-id]="currentProcessInstanceId"
|
||||
[download]="true" md-icon-button
|
||||
[download]="true" mat-icon-button
|
||||
[format]="'pdf'"
|
||||
(clicked)="onAuditClick($event)"
|
||||
(error)="onAuditError($event)">
|
||||
<md-icon>assignment_ind</md-icon>
|
||||
<mat-icon>assignment_ind</mat-icon>
|
||||
</button>
|
||||
<hr>
|
||||
</div>
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<activiti-process-attachments
|
||||
[processId]="currentProcessInstanceId">
|
||||
</activiti-process-attachments>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="activiti-demo-grid-item activiti-demo-processes-start" fxFlex.gt-md="1 1 auto"
|
||||
*ngIf="isStartProcessMode()">
|
||||
@@ -187,8 +187,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-tab>
|
||||
<md-tab id="report-header" href="#report"
|
||||
</mat-tab>
|
||||
<mat-tab id="report-header" href="#report"
|
||||
label="{{'PS-TAB.REPORTS-TAB' | translate}}">
|
||||
<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">
|
||||
@@ -216,8 +216,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<div *ngIf="fileShowed">
|
||||
<alfresco-viewer
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div>
|
||||
<button md-mini-fab (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
|
||||
<button mat-mini-fab (click)="onClickBack()" ><mat-icon>keyboard_backspace</mat-icon></button>
|
||||
<adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<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>
|
||||
<mat-sidenav-container class="adf-nav-container">
|
||||
<mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
|
||||
<mat-nav-list>
|
||||
<a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
|
||||
<mat-icon matListIcon>{{link.icon}}</mat-icon>
|
||||
<span>{{link.title | translate }}</span>
|
||||
</a>
|
||||
<a md-list-item adf-logout (click)="sidenav.close()">
|
||||
<md-icon mdListIcon>exit_to_app</md-icon>
|
||||
<a mat-list-item adf-logout (click)="sidenav.close()">
|
||||
<mat-icon matListIcon>exit_to_app</mat-icon>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</md-nav-list>
|
||||
</md-sidenav>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
|
||||
<md-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
|
||||
<mat-toolbar color="primary" class="adf-app-layout-toolbar" md-no-ink>
|
||||
<adf-userinfo
|
||||
class="adf-app-layout-user-profile"
|
||||
[menuPositionX]="'before'"
|
||||
@@ -25,25 +25,25 @@
|
||||
|
||||
<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 }">{{'APP_LAYOUT.HOME' | translate }}</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 }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</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 }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</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>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-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 mat-icon-button [matMenuTriggerFor]="langMenu">
|
||||
<mat-icon>language</mat-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>
|
||||
<mat-menu #langMenu="matMenu">
|
||||
<button mat-menu-item (click)="changeLanguage('en')">English</button>
|
||||
<button mat-menu-item (click)="changeLanguage('it')">Italian</button>
|
||||
<button mat-menu-item (click)="changeLanguage('ru')">Russian</button>
|
||||
</mat-menu>
|
||||
|
||||
<button md-icon-button (click)="sidenav.open()">
|
||||
<md-icon>menu</md-icon>
|
||||
<button mat-icon-button (click)="sidenav.open()">
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
</md-toolbar>
|
||||
</mat-toolbar>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
</md-sidenav-container>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
line-height: $toolbarHeight;
|
||||
overflow: hidden;
|
||||
|
||||
md-toolbar-row {
|
||||
mat-toolbar-row {
|
||||
height: $toolbarHeight;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
(executeRowAction)="onExecuteRowAction($event)"
|
||||
(row-click)="onRowClick($event)"
|
||||
(row-dblclick)="onRowDblClick($event)">
|
||||
<!-- HTML column definition demo -->
|
||||
<!-- HTML column definition demo -->
|
||||
<!--
|
||||
<data-columns>
|
||||
<data-column type="image" key="icon" [sortable]="false"></data-column>
|
||||
@@ -22,20 +22,22 @@
|
||||
</alfresco-datatable>
|
||||
</div>
|
||||
<div class="p-10" data-automation-id="multiselect">
|
||||
<md-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</md-checkbox>
|
||||
<mat-checkbox [(ngModel)]="multiselect">{{ 'DATATABLE.MULTISELECT'| translate }}</mat-checkbox>
|
||||
</div>
|
||||
<div class="p-10">
|
||||
<p>{{ 'DATATABLE.MULTISELECT_DESCRIPTION'| translate }}</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>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
||||
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
||||
{{mode.viewValue}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="p-10">
|
||||
<button md-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
|
||||
<button md-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
|
||||
<button md-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
|
||||
<button md-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
|
||||
<button md-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
|
||||
<button mat-raised-button (click)="reset()">{{ 'DATATABLE.RESET_DEFAULT'| translate }}</button>
|
||||
<button mat-raised-button (click)="addRow()">{{ 'DATATABLE.ADD_ROW'| translate }}</button>
|
||||
<button mat-raised-button (click)="replaceRows()">{{ 'DATATABLE.REPLACE_ROWS'| translate }}</button>
|
||||
<button mat-raised-button (click)="replaceColumns()">{{ 'DATATABLE.REPLACE_COLUMNS'| translate }}</button>
|
||||
<button mat-raised-button (click)="getRowForNode()">{{ 'DATATABLE.LOAD_NODE'| translate }}</button>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
<adf-toolbar>
|
||||
<adf-toolbar-title>
|
||||
<md-select [(ngModel)]="selectedSource">
|
||||
<md-option *ngFor="let source of sources" [value]="source.value">
|
||||
{{ source.title }}
|
||||
</md-option>
|
||||
</md-select>
|
||||
<mat-form-field>
|
||||
<mat-select [(ngModel)]="selectedSource">
|
||||
<mat-option *ngFor="let source of sources" [value]="source.value">
|
||||
{{ source.title }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</adf-toolbar-title>
|
||||
|
||||
<div fxFlex="0 1 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
|
||||
<button md-icon-button
|
||||
(restore)="documentList.reload()"
|
||||
[disabled]="!documentList.selection.length"
|
||||
*ngIf="selectedSource === '-trashcan-'"
|
||||
location="/files"
|
||||
[adf-restore]="documentList.selection">
|
||||
<md-icon>restore</md-icon>
|
||||
<button mat-icon-button
|
||||
(restore)="documentList.reload()"
|
||||
[disabled]="!documentList.selection.length"
|
||||
*ngIf="selectedSource === '-trashcan-'"
|
||||
location="/files"
|
||||
[adf-restore]="documentList.selection">
|
||||
<mat-icon>restore</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</adf-toolbar>
|
||||
|
||||
@@ -9,105 +9,105 @@
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()">
|
||||
<div *ngIf="errorMessage" class="error-message">
|
||||
<button (click)="resetError()" md-icon-button>
|
||||
<md-icon>highlight_off</md-icon>
|
||||
<button (click)="resetError()" mat-icon-button>
|
||||
<mat-icon>highlight_off</mat-icon>
|
||||
</button>
|
||||
<span class="error-message--text">{{errorMessage}}</span>
|
||||
</div>
|
||||
<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">
|
||||
class="files-breadcrumb"
|
||||
root="Personal Files"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-breadcrumb>
|
||||
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
|
||||
class="files-breadcrumb"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
class="files-breadcrumb"
|
||||
[target]="documentList"
|
||||
[folderNode]="documentList.folderNode">
|
||||
</adf-dropdown-breadcrumb>
|
||||
</adf-toolbar-title>
|
||||
|
||||
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
|
||||
|
||||
<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 mat-icon-button
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<md-icon>get_app</md-icon>
|
||||
<button mat-icon-button
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<mat-icon>get_app</mat-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
<button mat-icon-button
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<md-icon>delete</md-icon>
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
<button md-icon-button
|
||||
#favorite="adfFavorite"
|
||||
(toggle)="documentList.reload()"
|
||||
[adf-node-favorite]="documentList.selection">
|
||||
<md-icon>
|
||||
<button mat-icon-button
|
||||
#favorite="adfFavorite"
|
||||
(toggle)="documentList.reload()"
|
||||
[adf-node-favorite]="documentList.selection">
|
||||
<mat-icon>
|
||||
{{ favorite.hasFavorites() ? 'star' :'star_border' }}
|
||||
</md-icon>
|
||||
</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="themePicker">
|
||||
<md-icon>format_color_fill</md-icon>
|
||||
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
|
||||
<mat-icon>format_color_fill</mat-icon>
|
||||
</button>
|
||||
|
||||
<md-menu #themePicker="mdMenu">
|
||||
<button md-menu-item (click)="toolbarColor = 'default'">Default</button>
|
||||
<button md-menu-item (click)="toolbarColor = 'primary'">Primary</button>
|
||||
<button md-menu-item (click)="toolbarColor = 'accent'">Accent</button>
|
||||
<button md-menu-item (click)="toolbarColor = 'warn'">Warn</button>
|
||||
</md-menu>
|
||||
<mat-menu #themePicker="matMenu">
|
||||
<button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
|
||||
<button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
|
||||
</mat-menu>
|
||||
|
||||
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
|
||||
|
||||
<button fxFlex="0 0 auto" md-icon-button [mdMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
|
||||
<md-icon>more_vert</md-icon>
|
||||
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
<md-menu #menu="mdMenu">
|
||||
<button md-menu-item
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<md-icon>create_new_folder</md-icon>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item
|
||||
(click)="onCreateFolderClicked($event)">
|
||||
<mat-icon>create_new_folder</mat-icon>
|
||||
<span>New folder</span>
|
||||
</button>
|
||||
<button md-menu-item
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<md-icon>get_app</md-icon>
|
||||
<button mat-menu-item
|
||||
[disabled]="!hasSelection(documentList.selection)"
|
||||
title="Download"
|
||||
(click)="downloadNodes(documentList.selection)">
|
||||
<mat-icon>get_app</mat-icon>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
<button md-menu-item
|
||||
<button mat-menu-item
|
||||
adf-node-permission="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<md-icon>delete</md-icon>
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</md-menu>
|
||||
</mat-menu>
|
||||
</adf-toolbar>
|
||||
<adf-document-list
|
||||
#documentList
|
||||
[permissionsStyle]="permissionsStyle"
|
||||
[currentFolderId]="currentFolderId"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[allowDropFiles]="true"
|
||||
[selectionMode]="selectionMode"
|
||||
[multiselect]="multiselect"
|
||||
(error)="onNavigationError($event)"
|
||||
(success)="resetError()"
|
||||
(preview)="showFile($event)"
|
||||
(folderChange)="onFolderChange($event)"
|
||||
(permissionError)="handlePermissionError($event)">
|
||||
#documentList
|
||||
[permissionsStyle]="permissionsStyle"
|
||||
[currentFolderId]="currentFolderId"
|
||||
[contextMenuActions]="true"
|
||||
[contentActions]="true"
|
||||
[allowDropFiles]="true"
|
||||
[selectionMode]="selectionMode"
|
||||
[multiselect]="multiselect"
|
||||
(error)="onNavigationError($event)"
|
||||
(success)="resetError()"
|
||||
(preview)="showFile($event)"
|
||||
(folderChange)="onFolderChange($event)"
|
||||
(permissionError)="handlePermissionError($event)">
|
||||
<data-columns>
|
||||
<data-column
|
||||
key="$thumbnail"
|
||||
@@ -244,30 +244,41 @@
|
||||
|
||||
<div class="container">
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' | translate}}</md-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}</md-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
|
||||
{{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' | translate}}</md-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' | translate}}</md-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
|
||||
translate}}
|
||||
</mat-slide-toggle>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<md-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' | translate}}</md-slide-toggle>
|
||||
<mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
|
||||
translate}}
|
||||
</mat-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>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"
|
||||
data-automation-id="accepted-files-type">
|
||||
</mat-form-field>
|
||||
</section>
|
||||
<div *ngIf="!acceptedFilesTypeShow">
|
||||
<adf-upload-button
|
||||
@@ -301,9 +312,9 @@
|
||||
</adf-upload-button>
|
||||
</div>
|
||||
<section>
|
||||
<md-checkbox [(ngModel)]="enableUpload">
|
||||
<mat-checkbox [(ngModel)]="enableUpload">
|
||||
{{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
|
||||
</md-checkbox>
|
||||
</mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -311,11 +322,13 @@
|
||||
<p>
|
||||
{{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
|
||||
</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>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
|
||||
<mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
|
||||
{{mode.viewValue}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { ChangeDetectorRef, Component, Input, OnInit, Optional, ViewChild } from '@angular/core';
|
||||
import { MdDialog } from '@angular/material';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { MinimalNodeEntity } from 'alfresco-js-api';
|
||||
import {
|
||||
@@ -84,7 +84,7 @@ export class FilesComponent implements OnInit {
|
||||
private notificationService: NotificationService,
|
||||
private uploadService: UploadService,
|
||||
private contentService: AlfrescoContentService,
|
||||
private dialog: MdDialog,
|
||||
private dialog: MatDialog,
|
||||
private translateService: AlfrescoTranslationService,
|
||||
private router: Router,
|
||||
@Optional() private route: ActivatedRoute,
|
||||
|
||||
@@ -4,5 +4,5 @@
|
||||
<adf-form [form]="form" [data]="restoredData">
|
||||
</adf-form>
|
||||
</div>
|
||||
<button md-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
|
||||
<button md-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
|
||||
<button mat-button (click)="store()" color="primary">{{'FORM-LIST.STORE' | translate }}</button>
|
||||
<button mat-button (click)="restore()" color="primary">{{'FORM-LIST.RESTORE' | translate }}</button>
|
||||
|
||||
@@ -1,187 +1,187 @@
|
||||
<!-- DOCUMENT LIST-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/files">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/files">
|
||||
<h2 >
|
||||
<md-icon>dvr</md-icon>
|
||||
<mat-icon>dvr</mat-icon>
|
||||
<span class="adf-home-card__text">DocumentList - Content Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Demonstrates multiple Alfresco Content Services components used together to display the files of your Content Services instance:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>dvr</md-icon>
|
||||
<mat-icon>dvr</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Document List</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>file_upload</md-icon>
|
||||
<mat-icon>file_upload</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Upload</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_module</md-icon>
|
||||
<mat-icon>view_module</mat-icon>
|
||||
<span class="adf-home-feature-list__text">DataTable</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!-- Process Services-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/activiti">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/activiti">
|
||||
<h2 >
|
||||
<md-icon>apps</md-icon>
|
||||
<mat-icon>apps</mat-icon>
|
||||
<span class="adf-home-card__text">Process Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Demonstrates multiple Alfresco Process Services components used together to show your Process Services process and tasks:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_module</md-icon>
|
||||
<mat-icon>view_module</mat-icon>
|
||||
<span class="adf-home-feature-list__text">App List</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_headline</md-icon>
|
||||
<mat-icon>view_headline</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Task List</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_headline</md-icon>
|
||||
<mat-icon>view_headline</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Process List</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_quilt</md-icon>
|
||||
<mat-icon>view_quilt</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Form</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>pie_chart</md-icon>
|
||||
<mat-icon>pie_chart</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Analytics</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
|
||||
<a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
|
||||
</li>
|
||||
<li>
|
||||
<md-icon>view_module</md-icon>
|
||||
<mat-icon>view_module</mat-icon>
|
||||
<span class="adf-home-feature-list__text">DataTable</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
|
||||
<!-- DATATABLE-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/datatable">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/datatable">
|
||||
<h2 >
|
||||
<md-icon>view_module</md-icon>
|
||||
<mat-icon>view_module</mat-icon>
|
||||
<span class="adf-home-card__text">DataTable - Content Services & Process Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Basic table component:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- UPLOADER-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/uploader">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/uploader">
|
||||
<h2 >
|
||||
<md-icon>file_upload</md-icon>
|
||||
<mat-icon>file_upload</mat-icon>
|
||||
<span class="adf-home-card__text">Uploader - Content Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Basic table uploader component for the Content Services & Process Services:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- LOGIN-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/login">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/login">
|
||||
<h2 >
|
||||
<md-icon>account_circle</md-icon>
|
||||
<mat-icon>account_circle</mat-icon>
|
||||
<span class="adf-home-card__text">Login - Content Services & Process Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Login component for the Content Services and Process Services:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- WEBSCRIPT-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/webscript">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/webscript">
|
||||
<h2 >
|
||||
<md-icon>extension</md-icon>
|
||||
<mat-icon>extension</mat-icon>
|
||||
<span class="adf-home-card__text">Webscript - Content Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Displays and creates webscripts in your Content Services instance:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with the Rest Api and core services</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- TAG-->
|
||||
<md-card class="adf-home-card">
|
||||
<md-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/tag">
|
||||
<mat-card class="adf-home-card">
|
||||
<mat-card-title class="adf-home-card-title adf-primary-background-color" routerLink="/tag">
|
||||
<h2 >
|
||||
<md-icon>local_offer</md-icon>
|
||||
<mat-icon>local_offer</mat-icon>
|
||||
<span class="adf-home-card__text">Tag - Content Services</span>
|
||||
</h2>
|
||||
</md-card-title>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
<mat-card-content>
|
||||
Displays and adds tags to the node of your Content Services instance:
|
||||
<ul class="adf-home-feature-list">
|
||||
<li>
|
||||
<md-icon>brightness_1</md-icon>
|
||||
<mat-icon>brightness_1</mat-icon>
|
||||
<span class="adf-home-feature-list__text">Communication with Rest</span>
|
||||
<a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
|
||||
</li>
|
||||
</ul>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@@ -2,47 +2,47 @@
|
||||
|
||||
<div class="settings">
|
||||
<p class="toggle">
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch1"
|
||||
[color]="'primary'"
|
||||
(change)="toggleECM()"
|
||||
[checked]="isECM">
|
||||
{{ 'LOGIN.CONTENT_SERVICES'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch2"
|
||||
[color]="'primary'"
|
||||
(change)="toggleBPM()"
|
||||
[checked]="isBPM">
|
||||
{{ 'LOGIN.PROCESS_SERVICES'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch3"
|
||||
[color]="'primary'"
|
||||
(change)="toggleCSRF()"
|
||||
[checked]="!disableCsrf">
|
||||
CSRF
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p class="toggle">
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch4"
|
||||
[color]="'primary'"
|
||||
(change)="toggleFooter()"
|
||||
[checked]="showFooter">
|
||||
{{ 'LOGIN.LOGIN_FOOTER'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!--SETTING BUTTON-->
|
||||
|
||||
<a md-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
|
||||
<md-icon>settings</md-icon>
|
||||
<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" >
|
||||
<mat-icon>settings</mat-icon>
|
||||
</a>
|
||||
|
||||
<alfresco-login
|
||||
@@ -57,40 +57,40 @@
|
||||
(onError)="onError($event)">
|
||||
<div class="mobile-settings">
|
||||
<p>
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch1-mobile"
|
||||
[color]="'primary'"
|
||||
(change)="toggleECM()"
|
||||
[checked]="isECM">
|
||||
{{ 'LOGIN.CONTENT_SERVICES'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p>
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch2-mobile"
|
||||
[color]="'primary'"
|
||||
(change)="toggleBPM()"
|
||||
[checked]="isBPM">
|
||||
{{ 'LOGIN.PROCESS_SERVICES'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p>
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch3-mobile"
|
||||
[color]="'primary'"
|
||||
(change)="toggleCSRF()"
|
||||
[checked]="!disableCsrf">
|
||||
CSRF
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
<p>
|
||||
<md-slide-toggle
|
||||
<mat-slide-toggle
|
||||
id="switch4-mobile"
|
||||
[color]="'primary'"
|
||||
(change)="toggleFooter()"
|
||||
[checked]="showFooter">
|
||||
{{ 'LOGIN.LOGIN_FOOTER'| translate }}
|
||||
</md-slide-toggle>
|
||||
</mat-slide-toggle>
|
||||
</p>
|
||||
</div>
|
||||
</alfresco-login>
|
||||
|
||||
@@ -10,5 +10,5 @@
|
||||
<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
<md-spinner></md-spinner>
|
||||
<mat-spinner></mat-spinner>
|
||||
</adf-viewer>
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
<adf-viewer [(showViewer)]="fileShowed"
|
||||
[fileNodeId]="fileNodeId"
|
||||
[overlayMode]="true">
|
||||
<md-spinner></md-spinner>
|
||||
<mat-spinner></mat-spinner>
|
||||
</adf-viewer>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<div class="adf-setting-container">
|
||||
<div class="adf-setting-card-padding"></div>
|
||||
<md-toolbar color="primary" >
|
||||
<mat-toolbar color="primary" >
|
||||
<h3>{{'SETTINGS.TITLE' | translate}}</h3>
|
||||
</md-toolbar>
|
||||
</mat-toolbar>
|
||||
|
||||
<md-card class="adf-setting-card">
|
||||
<md-card-content>
|
||||
<mat-card class="adf-setting-card">
|
||||
<mat-card-content>
|
||||
|
||||
<md-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</md-card-subtitle>
|
||||
<mat-card-subtitle>{{'SETTINGS.CS-HOST' | translate }}</mat-card-subtitle>
|
||||
|
||||
<md-input-container class="full-width">
|
||||
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
|
||||
<input mdInput
|
||||
<mat-form-field class="full-width">
|
||||
<mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
|
||||
<input matInput
|
||||
[formControl]="urlFormControlEcm"
|
||||
data-automation-id="ecmHost"
|
||||
type="text"
|
||||
@@ -20,17 +20,17 @@
|
||||
id="ecmHost"
|
||||
value="{{ecmHost}}"
|
||||
placeholder="http(s)://host|ip:port(/path)">
|
||||
<md-error *ngIf="urlFormControlEcm.hasError('pattern')">
|
||||
<mat-error *ngIf="urlFormControlEcm.hasError('pattern')">
|
||||
{{ 'SETTINGS.NOT_VALID'| translate }}
|
||||
</md-error>
|
||||
</md-input-container>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
<p>
|
||||
<p>
|
||||
<md-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</md-card-subtitle>
|
||||
<mat-card-subtitle>{{'SETTINGS.BP-HOST' | translate }}</mat-card-subtitle>
|
||||
|
||||
<md-input-container class="full-width">
|
||||
<md-icon class="adf-settings-link-icon" mdPrefix>link</md-icon>
|
||||
<input mdInput
|
||||
<mat-form-field class="full-width">
|
||||
<mat-icon class="adf-settings-link-icon" matPrefix>link</mat-icon>
|
||||
<input matInput
|
||||
[formControl]="urlFormControlBpm"
|
||||
data-automation-id="bpmHost"
|
||||
type="text"
|
||||
@@ -39,23 +39,23 @@
|
||||
id="bpmHost"
|
||||
value="{{bpmHost}}"
|
||||
placeholder="http(s)://host|ip:port(/path)">
|
||||
<md-error *ngIf="urlFormControlBpm.hasError('pattern')">
|
||||
<mat-error *ngIf="urlFormControlBpm.hasError('pattern')">
|
||||
{{ 'SETTINGS.NOT_VALID'| translate }}
|
||||
</md-error>
|
||||
</md-input-container>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
</md-card-content>
|
||||
<md-card-actions class="adf-settings-actions">
|
||||
</mat-card-content>
|
||||
<mat-card-actions class="adf-settings-actions">
|
||||
|
||||
<button md-button onclick="window.history.back()" color="primary">
|
||||
<button mat-button onclick="window.history.back()" color="primary">
|
||||
{{'SETTINGS.BACK' | translate }}
|
||||
</button>
|
||||
|
||||
<button md-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
|
||||
<button mat-raised-button (click)="save($event)" [disabled]="urlFormControlBpm.hasError('pattern') || urlFormControlEcm.hasError('pattern')" color="primary">
|
||||
{{'SETTINGS.APPLY' | translate }}
|
||||
</button>
|
||||
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
<div class="adf-setting-card-padding"></div>
|
||||
</div>
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
|
||||
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
|
||||
<md-card>
|
||||
<mat-card>
|
||||
<div class="adf-social-title">
|
||||
{{'SOCIAL.LIKE' | translate }}
|
||||
</div>
|
||||
<adf-like [nodeId]="nodeId"></adf-like>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="adf-social-example-area" fxFlex.gt-md="1 1 auto">
|
||||
<md-card>
|
||||
<mat-card>
|
||||
<div class="adf-social-title">
|
||||
{{'SOCIAL.RATING' | translate }}
|
||||
</div>
|
||||
<adf-rating [nodeId]="nodeId"></adf-rating>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,24 +2,24 @@
|
||||
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
|
||||
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
|
||||
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
|
||||
<md-card>
|
||||
<mat-card>
|
||||
<adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
|
||||
<md-card>
|
||||
<mat-card>
|
||||
<div class="adf-tag-example-title">
|
||||
{{'TAG.LIST' | translate }}
|
||||
</div>
|
||||
<adf-tag-list></adf-tag-list>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="adf-tag-example-area" fxFlex.gt-md="1 1 auto">
|
||||
<md-card>
|
||||
<mat-card>
|
||||
<div class="adf-tag-example-title">
|
||||
{{'TAG.NODE_LIST' | translate }}
|
||||
</div>
|
||||
<adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.docs-theme-picker-menu .md-menu-content {
|
||||
.docs-theme-picker-menu .mat-menu-content {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.docs-theme-picker-menu [md-menu-item] {
|
||||
.docs-theme-picker-menu [mat-menu-item] {
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<button md-icon-button [md-menu-trigger-for]="themeMenu" mdTooltip="Select a theme!">
|
||||
<md-icon>format_color_fill</md-icon>
|
||||
<button mat-icon-button [mat-menu-trigger-for]="themeMenu" matTooltip="Select a theme!">
|
||||
<mat-icon>format_color_fill</mat-icon>
|
||||
</button>
|
||||
|
||||
<md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
|
||||
<md-list-item *ngFor="let theme of themes" md-menu-item (click)="installTheme(theme)" >
|
||||
<md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
|
||||
<mat-menu class="docs-theme-picker-menu" #themeMenu="matMenu" x-position="before">
|
||||
<mat-list-item *ngFor="let theme of themes" mat-menu-item (click)="installTheme(theme)" >
|
||||
<mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
|
||||
[style.background]="theme.primary"
|
||||
*ngIf="currentTheme === theme">check_circle
|
||||
</md-icon>
|
||||
<md-icon md-list-icon [mdTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
|
||||
</mat-icon>
|
||||
<mat-icon mat-list-icon [matTooltip]="theme.name" class="docs-theme-chosen-icon" [style.color]="theme.accent"
|
||||
[style.background]="theme.primary"
|
||||
*ngIf="currentTheme !== theme">invert_colors
|
||||
</md-icon>
|
||||
</mat-icon>
|
||||
{{theme.name}}
|
||||
</md-list-item>
|
||||
</md-menu>
|
||||
</mat-list-item>
|
||||
</mat-menu>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule,
|
||||
MdTooltipModule
|
||||
MatButtonModule, MatGridListModule, MatIconModule, MatMenuModule,
|
||||
MatTooltipModule
|
||||
} from '@angular/material';
|
||||
import { StyleManager } from './style-manager/style-manager';
|
||||
import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';
|
||||
@@ -116,11 +116,11 @@ export class ThemePickerComponent {
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
MdButtonModule,
|
||||
MdIconModule,
|
||||
MdMenuModule,
|
||||
MdGridListModule,
|
||||
MdTooltipModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatMenuModule,
|
||||
MatGridListModule,
|
||||
MatTooltipModule,
|
||||
CommonModule
|
||||
],
|
||||
exports: [ThemePickerComponent],
|
||||
|
||||
@@ -17,21 +17,21 @@
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MdDialogModule,
|
||||
MdInputModule,
|
||||
MdProgressBarModule,
|
||||
MdSelectModule,
|
||||
MdSidenavModule,
|
||||
MdSlideToggleModule
|
||||
MatDialogModule,
|
||||
MatInputModule,
|
||||
MatProgressBarModule,
|
||||
MatSelectModule,
|
||||
MatSidenavModule,
|
||||
MatSlideToggleModule
|
||||
} from '@angular/material';
|
||||
|
||||
const MATERIAL_MODULES = [
|
||||
MdSlideToggleModule,
|
||||
MdInputModule,
|
||||
MdSelectModule,
|
||||
MdDialogModule,
|
||||
MdSidenavModule,
|
||||
MdProgressBarModule
|
||||
MatSlideToggleModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
MatDialogModule,
|
||||
MatSidenavModule,
|
||||
MatProgressBarModule
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@@ -56,19 +56,19 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@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/animations": "4.4.5",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "4.4.5",
|
||||
"@angular/compiler": "4.4.5",
|
||||
"@angular/compiler-cli": "4.4.5",
|
||||
"@angular/core": "4.4.5",
|
||||
"@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",
|
||||
"@angular/forms": "4.4.5",
|
||||
"@angular/http": "4.4.5",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "4.4.5",
|
||||
"@angular/platform-browser-dynamic": "4.4.5",
|
||||
"@angular/router": "4.4.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"chart.js": "2.5.0",
|
||||
@@ -106,7 +106,7 @@
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "2.5.35",
|
||||
"@types/node": "6.0.45",
|
||||
"adf-tslint-rules": "0.0.3",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
@@ -32,17 +32,17 @@
|
||||
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@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",
|
||||
"@angular/animations": "4.4.5",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "4.4.5",
|
||||
"@angular/compiler": "4.4.5",
|
||||
"@angular/core": "4.4.5",
|
||||
"@angular/forms": "4.4.5",
|
||||
"@angular/http": "4.4.5",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "4.4.5",
|
||||
"@angular/platform-browser-dynamic": "4.4.5",
|
||||
"@angular/router": "4.4.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"chart.js": "2.5.0",
|
||||
@@ -59,7 +59,7 @@
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "2.5.35",
|
||||
"@types/node": "6.0.45",
|
||||
"adf-tslint-rules": "0.0.3",
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div *ngIf="reports">
|
||||
<div class="report-icons">
|
||||
<button md-icon-button
|
||||
<button mat-icon-button
|
||||
*ngFor="let report of reports; let idx = index"
|
||||
[mdTooltip]="report.title"
|
||||
[matTooltip]="report.title"
|
||||
[color]="isCurrent(idx) ? 'primary' : null"
|
||||
(click)="selectCurrent(idx)">
|
||||
<md-icon>{{report.icon}}</md-icon>
|
||||
<mat-icon>{{report.icon}}</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="clear-both"> </div>
|
||||
@@ -84,12 +84,12 @@
|
||||
<h4>{{report.title}}</h4>
|
||||
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
|
||||
<div *ngIf="report.hasDatasets()">
|
||||
<md-checkbox
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
[id]="'stacked-id'"
|
||||
[checked]="report.options.scales.xAxes[0].stacked"
|
||||
[(ngModel)]="report.options.scales.xAxes[0].stacked"
|
||||
(change)="refresh(report)">Stacked</md-checkbox>
|
||||
(change)="refresh(report)">Stacked</mat-checkbox>
|
||||
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="report.datasets"
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
<div class="adf-analytics-report-list menu-container">
|
||||
<md-nav-list *ngIf="isList()">
|
||||
<md-list-item
|
||||
<mat-nav-list *ngIf="isList()">
|
||||
<mat-list-item
|
||||
class="activiti-filters__entry"
|
||||
(click)="selectReport(report)"
|
||||
*ngFor="let report of reports; let idx = index"
|
||||
[class.active]="currentReport === report">
|
||||
<span [attr.id]="'report-list-' + idx" class="activiti-filters__label">
|
||||
<md-icon md-list-icon
|
||||
<mat-icon mat-list-icon
|
||||
[attr.data-automation-id]="report.name + '_filter'"
|
||||
class="activiti-filters__entry-icon">assignment</md-icon>
|
||||
class="activiti-filters__entry-icon">assignment</mat-icon>
|
||||
<span class="text">{{report.name}}</span>
|
||||
</span>
|
||||
</md-list-item>
|
||||
</md-nav-list>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
<div class="adf-report-card-grids" *ngIf="isGrid()">
|
||||
<md-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
|
||||
<mat-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
|
||||
<div class="adf-report-card-logo logo">
|
||||
<md-icon class="adf-report-card-logo-icon">equalizer</md-icon>
|
||||
<mat-icon class="adf-report-card-logo-icon">equalizer</mat-icon>
|
||||
</div>
|
||||
<div md-card-title class="adf-report-card-title">
|
||||
<div mat-card-title class="adf-report-card-title">
|
||||
<h1 class="application-title">{{report.name}}</h1>
|
||||
</div>
|
||||
<div md-card-content class="adf-report-card-content">
|
||||
<div mat-card-content class="adf-report-card-content">
|
||||
<p>{{report.description}}</p>
|
||||
</div>
|
||||
<div md-card-actions class="adf-report-card-actions">
|
||||
<md-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</md-icon>
|
||||
<div mat-card-actions class="adf-report-card-actions">
|
||||
<mat-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</mat-icon>
|
||||
</div>
|
||||
</md-card>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<adf-toolbar>
|
||||
<adf-toolbar-title class="adf-report-title-container">
|
||||
<div *ngIf="isEditable">
|
||||
<md-input-container class="adf-full-width-input">
|
||||
<mat-form-field class="adf-full-width-input">
|
||||
<input
|
||||
mdInput
|
||||
matInput
|
||||
type="text"
|
||||
class="adf-edit-report-title"
|
||||
id="reportName"
|
||||
@@ -18,30 +18,30 @@
|
||||
(blur)="editTitle($event)"
|
||||
(keyup.enter)="editTitle($event)"
|
||||
/>
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
|
||||
<md-icon class="adf-report-icon" >mode_edit</md-icon>
|
||||
<mat-icon class="adf-report-icon" >mode_edit</mat-icon>
|
||||
<h4>{{reportParameters.name}}</h4>
|
||||
</div>
|
||||
</adf-toolbar-title>
|
||||
<div *ngIf="!isEditable">
|
||||
<button md-button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
|
||||
<button mat-button matTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
|
||||
(click)="toggleParameters()">
|
||||
<md-icon>settings</md-icon>
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
<button md-button id="delete-button" (click)="deleteReport(reportId)"
|
||||
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
|
||||
<md-icon>delete</md-icon>
|
||||
<button mat-button id="delete-button" (click)="deleteReport(reportId)"
|
||||
matTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
<span *ngIf="isFormValid()">
|
||||
<button md-button id="export-button" (click)="showDialog('Export')"
|
||||
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
|
||||
<md-icon>file_download</md-icon>
|
||||
<button mat-button id="export-button" (click)="showDialog('Export')"
|
||||
matTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
|
||||
<mat-icon>file_download</mat-icon>
|
||||
</button>
|
||||
<button md-button id="save-button" (click)="showDialog('Save')"
|
||||
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
|
||||
<md-icon>save</md-icon>
|
||||
<button mat-button id="save-button" (click)="showDialog('Save')"
|
||||
matTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
@@ -102,30 +102,30 @@
|
||||
</div>
|
||||
<ng-template #reportNameDialog>
|
||||
<div id="report-dialog" class="adf-report-dialog">
|
||||
<h5 md-dialog-title id="report-dialog-title">{{action}} report</h5>
|
||||
<div md-dialog-content>
|
||||
<h5 matDialogTitle id="report-dialog-title">{{action}} report</h5>
|
||||
<div mat-dialog-content>
|
||||
<div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
|
||||
{{'DIALOG.SAVE_MESSAGE' | translate}}
|
||||
</div>
|
||||
<div class="save-export-input">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
<mat-form-field class="example-full-width" floatPlaceholder="always">
|
||||
<input matInput
|
||||
type="text"
|
||||
id="repName"
|
||||
placeholder="Report Name"
|
||||
[value]="reportName"
|
||||
[(ngModel)]="reportName"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div md-dialog-actions>
|
||||
<button md-button
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button
|
||||
color="accent"
|
||||
type="button"
|
||||
id="close-dialog-button"
|
||||
(click)="closeDialog()">Close</button>
|
||||
<button md-button
|
||||
<button mat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
id="action-dialog-button"
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
}
|
||||
|
||||
.adf-report-dialog {
|
||||
.mat-input-container {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ import {
|
||||
ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MdDialog } from '@angular/material';
|
||||
import { MatDialog } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
|
||||
import { ContentService, LogService } from 'ng2-alfresco-core';
|
||||
@@ -105,7 +105,7 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
private formBuilder: FormBuilder,
|
||||
private logService: LogService,
|
||||
private contentService: ContentService,
|
||||
private dialog: MdDialog) {
|
||||
private dialog: MatDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div [formGroup]="formGroup">
|
||||
<md-checkbox
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="{{controllerName}}"
|
||||
[id]="field.id"
|
||||
[checked]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</md-checkbox>
|
||||
(ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</mat-checkbox>
|
||||
</div>
|
||||
@@ -7,48 +7,48 @@
|
||||
{{'DATE-WIDGET.MESSAGES.START-DATE-REQUIRED' | translate}}
|
||||
</small>
|
||||
|
||||
<md-grid-list cols="2" rowHeight="80px">
|
||||
<md-grid-tile>
|
||||
<md-input-container>
|
||||
<mat-grid-list cols="2" rowHeight="80px">
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input
|
||||
mdInput
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
formControlName="startDate"
|
||||
[mdDatepicker]="startDate"
|
||||
[matDatepicker]="startDate"
|
||||
[value]="startDatePicker"
|
||||
(keydown)="true"
|
||||
(dateChange)="onGroupValueChanged()"
|
||||
placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
|
||||
id="startDate_id"
|
||||
required>
|
||||
<md-datepicker-toggle mdSuffix [for]="startDate" ></md-datepicker-toggle>
|
||||
</md-input-container>
|
||||
<md-datepicker
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate" ></mat-datepicker-toggle>
|
||||
</mat-form-field>
|
||||
<mat-datepicker
|
||||
#startDate
|
||||
[touchUi]="true">
|
||||
</md-datepicker>
|
||||
</md-grid-tile>
|
||||
<md-grid-tile>
|
||||
<md-input-container>
|
||||
</mat-datepicker>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field>
|
||||
<input
|
||||
mdInput
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
formControlName="endDate"
|
||||
[mdDatepicker]="endDate"
|
||||
[matDatepicker]="endDate"
|
||||
[value]="endDatePicker"
|
||||
(keydown)="true"
|
||||
(dateChange)="onGroupValueChanged()"
|
||||
placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
|
||||
id="endDate_id"
|
||||
required>
|
||||
<md-datepicker-toggle mdSuffix [for]="endDate" ></md-datepicker-toggle>
|
||||
</md-input-container>
|
||||
<md-datepicker
|
||||
<mat-datepicker-toggle matSuffix [for]="endDate" ></mat-datepicker-toggle>
|
||||
</mat-form-field>
|
||||
<mat-datepicker
|
||||
#endDate
|
||||
[touchUi]="true">
|
||||
</md-datepicker>
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
</mat-datepicker>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</div>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
|
||||
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
|
||||
@@ -27,7 +27,7 @@ import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
|
||||
templateUrl: './date-range.widget.html',
|
||||
providers: [
|
||||
{provide: DateAdapter, useClass: MomentDateAdapter},
|
||||
{provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
{provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
styleUrls: ['./date-range.widget.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="adf-duration-widget-grid">
|
||||
<div class="adf-duration-widget-cell">
|
||||
<div class="adf-number-widget">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
<mat-form-field class="example-full-width" floatPlaceholder="always">
|
||||
<input matInput
|
||||
placeholder="{{field.nameKey | translate}}"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
@@ -10,7 +10,7 @@
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="calculateDuration()">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="adf-duration-widget-cell">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
.adf-number-widget {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-container {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="adf-number-widget" [formGroup]="formGroup">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
<mat-form-field class="example-full-width" floatPlaceholder="always">
|
||||
<input matInput
|
||||
placeholder="{{field.nameKey | translate}}"
|
||||
formControlName="{{controllerName}}"
|
||||
type="text"
|
||||
@@ -9,5 +9,5 @@
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.adf-number-widget {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-container {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -17,28 +17,28 @@
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCheckboxModule,
|
||||
MdDatepickerModule,
|
||||
MdGridListModule,
|
||||
MdIconModule,
|
||||
MdInputModule,
|
||||
MdListModule,
|
||||
MdNativeDateModule,
|
||||
MdTooltipModule
|
||||
MatButtonModule,
|
||||
MatCheckboxModule,
|
||||
MatDatepickerModule,
|
||||
MatGridListModule,
|
||||
MatIconModule,
|
||||
MatInputModule,
|
||||
MatListModule,
|
||||
MatNativeDateModule,
|
||||
MatTooltipModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
return [
|
||||
MdButtonModule,
|
||||
MdInputModule,
|
||||
MdIconModule,
|
||||
MdTooltipModule,
|
||||
MdNativeDateModule,
|
||||
MdDatepickerModule,
|
||||
MdCheckboxModule,
|
||||
MdListModule,
|
||||
MdGridListModule
|
||||
MatButtonModule,
|
||||
MatInputModule,
|
||||
MatIconModule,
|
||||
MatTooltipModule,
|
||||
MatNativeDateModule,
|
||||
MatDatepickerModule,
|
||||
MatCheckboxModule,
|
||||
MatListModule,
|
||||
MatGridListModule
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -28,17 +28,17 @@
|
||||
"url": "https://github.com/Alfresco/alfresco-ng2-components/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@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",
|
||||
"@angular/animations": "4.4.5",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "4.4.5",
|
||||
"@angular/compiler": "4.4.5",
|
||||
"@angular/core": "4.4.5",
|
||||
"@angular/forms": "4.4.5",
|
||||
"@angular/http": "4.4.5",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "4.4.5",
|
||||
"@angular/platform-browser-dynamic": "4.4.5",
|
||||
"@angular/router": "4.4.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"core-js": "2.4.1",
|
||||
@@ -51,7 +51,7 @@
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "2.5.35",
|
||||
"@types/node": "6.0.45",
|
||||
"adf-tslint-rules": "0.0.3",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
@@ -1,261 +0,0 @@
|
||||
# Form Extensibility and Customisation
|
||||
|
||||
_Note: it is assumed you are familiar with Alfresco Activiti form definition structure._
|
||||
|
||||
- How components and widgets are rendered on a Form
|
||||
- Replacing default form widgets with custom components
|
||||
- Replacing custom stencils with custom components
|
||||
|
||||
|
||||
|
||||
## How components and widgets are rendered on a Form
|
||||
|
||||
All form field editors (aka widgets) on a Form are rendered by means of `FormFieldComponent`
|
||||
that takes an instance of a `FormFieldModel`:
|
||||
|
||||
```html
|
||||
<form-field [field]="field"></form-field>
|
||||
```
|
||||
|
||||
This component depends on `FormRenderingService` service to map `FormFieldModel` to UI component
|
||||
based on field type or metadata information.
|
||||
|
||||
### Component type resolvers
|
||||
|
||||
`FormRenderingService` maps field types to corresponding instances exposing `ComponentTypeResolver` interface:
|
||||
|
||||
```ts
|
||||
export interface ComponentTypeResolver {
|
||||
(field: FormFieldModel): Type<{}>;
|
||||
}
|
||||
```
|
||||
|
||||
Typically a `ComponentTypeResolver` is a function that takes `FormFieldModel` and returns corresponding component type.
|
||||
It can be either a predefined component type or a dynamically evaluated based on field properties and metadata.
|
||||
|
||||
#### Static component mapping
|
||||
|
||||
You can (re)map fields like in the following:
|
||||
|
||||
```ts
|
||||
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
|
||||
formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
||||
```
|
||||
|
||||
or simply:
|
||||
|
||||
```ts
|
||||
formRenderingService.setComponentTypeResolver('text', () => CustomWidgetComponent, true);
|
||||
```
|
||||
|
||||
#### Dynamic component mapping
|
||||
|
||||
Alternatively your resolver may return different component types based on `FormFieldModel` state and condition:
|
||||
|
||||
```ts
|
||||
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
|
||||
if (field) {
|
||||
let params = field.params;
|
||||
}
|
||||
return UnknownWidgetComponent;
|
||||
};
|
||||
formRenderingService.setComponentTypeResolver('text', customResolver, true);
|
||||
```
|
||||
|
||||
### Default component mappings
|
||||
|
||||
Stencil Name | Field Type | Component Type |
|
||||
| --- | --- | --- |
|
||||
| Text | text | TextWidgetComponent |
|
||||
| Number | integer | NumberWidgetComponent |
|
||||
| Multi-line text | multi-line-text | MultilineTextWidgetComponentComponent |
|
||||
| Checkbox | boolean | CheckboxWidgetComponent |
|
||||
| Dropdown | dropdown | DropdownWidgetComponent |
|
||||
| Date | date | DateWidgetComponent |
|
||||
| Amount | amount | AmountWidgetComponent |
|
||||
| Radio buttons | radio-buttons | RadioButtonsWidgetComponent |
|
||||
| Hyperlink | hyperlink | HyperlinkWidgetComponent |
|
||||
| Display value | readonly | DisplayValueWidgetComponent |
|
||||
| Display text | readonly-text | DisplayTextWidgetComponentComponent |
|
||||
| Typeahead | typeahead | TypeaheadWidgetComponent |
|
||||
| People | people | PeopleWidgetComponent |
|
||||
| Group of people | functional-group | FunctionalGroupWidgetComponent |
|
||||
| Dynamic table | dynamic-table | DynamicTableWidgetComponent |
|
||||
| N/A | container | ContainerWidgetComponent (layout component) |
|
||||
| Header | group | ContainerWidgetComponent |
|
||||
| Attach | upload | AttachWidgetComponent or UploadWidgetComponent (based on metadata) |
|
||||
| N/A | N/A | UnknownWidgetComponent |
|
||||
|
||||
|
||||
|
||||
## Replacing default form widgets with custom components
|
||||
|
||||
This is a short walkthrough on replacing a standard `Text` widget with a custom component for all Alfresco Activiti forms
|
||||
rendered within `<activiti-form>` component.
|
||||
|
||||
First let's create a simple Alfresco Activiti form with `Text` widgets:
|
||||
|
||||
|
||||
|
||||
Every custom widget must inherit `WidgetComponent` class in order to function properly:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from 'ng2-activiti-form';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-editor',
|
||||
template: `
|
||||
<div style="color: red">Look, I'm a custom editor!</div>
|
||||
`
|
||||
})
|
||||
export class CustomEditorComponent extends WidgetComponent {}
|
||||
```
|
||||
|
||||
Now you will need to add it to the application module or any custom module that is imported into the application one:
|
||||
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CustomEditorComponent } from './custom-editor.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ CustomEditorComponent ],
|
||||
exports: [ CustomEditorComponent ],
|
||||
entryComponents: [ CustomEditorComponent ]
|
||||
})
|
||||
export class CustomEditorsModule {}
|
||||
```
|
||||
|
||||
Every custom widget should be added into all three module collections: `declarations`, `exports` and `entryComponents`.
|
||||
|
||||
If you decided to store custom widgets in a separate dedicated module (and optionally as separate redistributable library)
|
||||
don't forget to import it into your main application one:
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
imports: [
|
||||
// ...
|
||||
CustomEditorsModule
|
||||
// ...
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import `FormRenderingService` in any of your Views and override default mapping similar to the following:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { CustomEditorComponent } from './custom-editor.component';
|
||||
|
||||
@Component({...})
|
||||
export class MyView {
|
||||
|
||||
constructor(formRenderingService: FormRenderingService) {
|
||||
formRenderingService.setComponentTypeResolver('text', () => CustomEditorComponent, true);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
At runtime it should look similar to the following:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Replacing custom stencils with custom components
|
||||
|
||||
This is a short walkthrough on rendering custom Alfresco Activiti stencils by means of custom Angular 2 components.
|
||||
|
||||
### Creating custom stencil
|
||||
|
||||
First let's create a basic stencil and call it `Custom Stencil 01`:
|
||||
|
||||
|
||||
|
||||
_Note the `internal identifier` value as it will become a `field type` value when corresponding form is rendered._
|
||||
|
||||
Next put some simple html layout for `Form runtime template` and `Form editor template` fields:
|
||||
|
||||
```html
|
||||
<div style="color: blue">Custom activiti stencil</div>
|
||||
```
|
||||
|
||||
Now you are ready to design a test form based on your custom stencil:
|
||||
|
||||
|
||||
|
||||
Once wired with a new task it should look like the following within Alfresco Activiti web application:
|
||||
|
||||
|
||||
|
||||
### Creating custom widget
|
||||
|
||||
If you load previously created task into ADF `<activiti-form>` component you will see something like the following:
|
||||
|
||||
|
||||
|
||||
Let's create an Angular 2 component to render missing content:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { WidgetComponent } from 'ng2-activiti-form';
|
||||
|
||||
@Component({
|
||||
selector: 'custom-stencil-01',
|
||||
template: `<div style="color: green">ADF version of custom Activiti stencil</div>`
|
||||
})
|
||||
export class CustomStencil01 extends WidgetComponent {}
|
||||
```
|
||||
|
||||
Put it inside custom module:
|
||||
|
||||
```ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CustomStencil01 } from './custom-stencil-01.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ CustomStencil01 ],
|
||||
exports: [ CustomStencil01 ],
|
||||
entryComponents: [ CustomStencil01 ]
|
||||
})
|
||||
export class CustomEditorsModule {}
|
||||
```
|
||||
|
||||
And import into your Application Module
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
imports: [
|
||||
// ...
|
||||
CustomEditorsModule
|
||||
// ...
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
Now you can import `FormRenderingService` in any of your Views and provide new mapping:
|
||||
|
||||
```ts
|
||||
import { Component } from '@angular/core';
|
||||
import { CustomStencil01 } from './custom-stencil-01.component';
|
||||
|
||||
@Component({...})
|
||||
export class MyView {
|
||||
|
||||
constructor(formRenderingService: FormRenderingService) {
|
||||
formRenderingService.setComponentTypeResolver('custom_stencil_01', () => CustomStencil01, true);
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
At runtime you should now see your custom Angular 2 component rendered in place of the stencils:
|
||||
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
# Form Stencils with Angular 2
|
||||
|
||||
Form component provides basic support for custom stencils created with Activiti stencil editor.
|
||||
|
||||
## Installing
|
||||
|
||||
Configuring support for stencils requires the following configuration for your `index.html` file:
|
||||
|
||||
```html
|
||||
<!-- Stencils integration -->
|
||||
<script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
|
||||
<script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
|
||||
<script src="http://<activiti-app-root>/app/rest/script-files/controllers"></script>
|
||||
```
|
||||
|
||||
Where `<activiti-app-root>` should be replaced with a valid url pointing to your Activiti installation, for example:
|
||||
|
||||
```html
|
||||
<script src="http://localhost:9999/activiti-app/app/rest/script-files/controllers"></script>
|
||||
```
|
||||
- `/app/rest/script-files/controllers`
|
||||
provides all stencil controllers stored within Activiti
|
||||
|
||||
- `runtime.ng1.js`
|
||||
provides a compatibility layer for controllers created with Angular 1
|
||||
(this is to avoid runtime errors when loading Angular 1 code into `<activiti-form>` component)
|
||||
|
||||
- `runtime.adf.js`
|
||||
provides API for stencil management and registration,
|
||||
i.e. mapping html templates with corresponding controller classes
|
||||
|
||||
## Creating new stencil
|
||||
|
||||
Create a new stencil and add a new item called `ng2 component 01`.
|
||||
|
||||
The internal identifier in this case should be `ng2_component_01`.
|
||||
This value will be used as field type when form gets rendered.
|
||||
|
||||
## Form runtime template
|
||||
|
||||
This should be a valid Angular 2 component template that you want to render in `<activiti-form>` component:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div>Angular2 Component</div>
|
||||
<div>Created by: {{name}}</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Form editor template
|
||||
|
||||
This can be any html layout to be rendered as a component placeholder in Activiti Form Designer.
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div style="color: blue">
|
||||
Angular2 Component 01
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom component controller
|
||||
|
||||
This field should contain JavaScript code for Angular 2 component class.
|
||||
|
||||
_Note: If you are using TypeScript then you should be putting transpiled JavaScript code here,
|
||||
you can try official [TypeScript playground](http://www.typescriptlang.org/play/)
|
||||
to see how TS code gets transpiled into JS._
|
||||
|
||||
### JavaScript code
|
||||
|
||||
```js
|
||||
var SampleClass1 = (function () {
|
||||
function SampleClass1() {
|
||||
this.name = 'Denys';
|
||||
console.log('ng2_component_01 ctor');
|
||||
}
|
||||
SampleClass1.prototype.ngOnInit = function () {
|
||||
console.log('OnInit called');
|
||||
};
|
||||
return SampleClass1;
|
||||
}());
|
||||
```
|
||||
|
||||
### TypeScript code
|
||||
|
||||
The TypeScript version of the code above is:
|
||||
|
||||
```ts
|
||||
import { OnInit } from '@angular/core';
|
||||
|
||||
class SampleClass1 implements OnInit {
|
||||
|
||||
constructor() {
|
||||
console.log('ctor called');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log('OnInit called');
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Mapping template with component class
|
||||
|
||||
In order to map **form runtime template** with the corresponding component class
|
||||
you will need to register both parts with `adf.registerComponent(identifier, class)` api:
|
||||
|
||||
```js
|
||||
if (adf) {
|
||||
adf.registerComponent('ng2_component_01', SampleClass1);
|
||||
}
|
||||
```
|
||||
|
||||
### Final result
|
||||
|
||||
```js
|
||||
var SampleClass1 = (function () {
|
||||
function SampleClass1() {
|
||||
this.name = 'Denys';
|
||||
console.log('ng2_component_01 ctor');
|
||||
}
|
||||
SampleClass1.prototype.ngOnInit = function () {
|
||||
console.log('OnInit called');
|
||||
};
|
||||
return SampleClass1;
|
||||
}());
|
||||
|
||||
if (adf) {
|
||||
adf.registerComponent('ng2_component_01', SampleClass1);
|
||||
}
|
||||
```
|
||||
|
||||
## Runtime result
|
||||
|
||||
When rendered on the form this stencil item should look like the following:
|
||||
|
||||
```html
|
||||
Angular2 Component
|
||||
Created by: Denys
|
||||
```
|
||||
|
||||
ADF Form component will automatically assemble and compile a valid Angular 2 component on the fly.
|
||||
@@ -35,17 +35,17 @@
|
||||
"activiti"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@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",
|
||||
"@angular/animations": "4.4.5",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "4.4.5",
|
||||
"@angular/compiler": "4.4.5",
|
||||
"@angular/core": "4.4.5",
|
||||
"@angular/forms": "4.4.5",
|
||||
"@angular/http": "4.4.5",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "4.4.5",
|
||||
"@angular/platform-browser-dynamic": "4.4.5",
|
||||
"@angular/router": "4.4.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"core-js": "2.4.1",
|
||||
@@ -58,7 +58,7 @@
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "2.5.35",
|
||||
"@types/node": "6.0.45",
|
||||
"adf-tslint-rules": "0.0.3",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdInputModule } from '@angular/material';
|
||||
import { MatInputModule } from '@angular/material';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ErrorWidgetComponent } from '../widgets/error/error.component';
|
||||
import { FormRenderingService } from './../../services/form-rendering.service';
|
||||
@@ -38,7 +38,7 @@ describe('FormFieldComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [CoreModule,
|
||||
MdInputModule
|
||||
MatInputModule
|
||||
],
|
||||
declarations: [
|
||||
FormFieldComponent,
|
||||
|
||||
@@ -3,22 +3,22 @@
|
||||
</ng-content>
|
||||
</div>
|
||||
<div *ngIf="hasForm()" class="{{form.className}}">
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-title>
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h4 *ngIf="isTitleEnabled()">
|
||||
<div *ngIf="showRefreshButton" class="adf-form-reload-button">
|
||||
<button md-icon-button (click)="onRefreshClicked()">
|
||||
<md-icon>refresh</md-icon>
|
||||
<button mat-icon-button (click)="onRefreshClicked()">
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<md-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</md-icon>
|
||||
<mat-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</mat-icon>
|
||||
<span>{{form.taskName}}</span>
|
||||
|
||||
</h4>
|
||||
</md-card-title>
|
||||
</md-card-header>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div *ngIf="form.hasTabs()">
|
||||
<tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
|
||||
</div>
|
||||
@@ -28,25 +28,25 @@
|
||||
<form-field [field]="field.field"></form-field>
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
<md-card-actions *ngIf="form.hasOutcomes()">
|
||||
</mat-card-content>
|
||||
<mat-card-actions *ngIf="form.hasOutcomes()">
|
||||
<!--[class.mdl-button--colored]="!outcome.isSystem"-->
|
||||
<button *ngFor="let outcome of form.outcomes"
|
||||
md-button
|
||||
mat-button
|
||||
[disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
|
||||
(click)="onOutcomeClicked(outcome, $event)">
|
||||
{{outcome.name | uppercase}}
|
||||
</button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
<!--
|
||||
For debugging and data visualisation purposes,
|
||||
will be removed during future revisions
|
||||
-->
|
||||
<div *ngIf="showDebugButton" class="adf-form-debug-container">
|
||||
<md-slide-toggle [(ngModel)]="debugMode">Debug mode</md-slide-toggle>
|
||||
<mat-slide-toggle [(ngModel)]="debugMode">Debug mode</mat-slide-toggle>
|
||||
<div *ngIf="debugMode && hasForm()">
|
||||
<h4>Values</h4>
|
||||
<pre>{{form.values | json}}</pre>
|
||||
|
||||
@@ -106,9 +106,9 @@ describe('FormComponent UI and visibiltiy', () => {
|
||||
expect(dropdown).toBeDefined();
|
||||
expect(dropdown).not.toBeNull();
|
||||
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
|
||||
|
||||
expect(optOne[0].nativeElement.innerText).toEqual('united kingdom');
|
||||
expect(optTwo[0].nativeElement.innerText).toEqual('italy');
|
||||
|
||||
@@ -17,23 +17,23 @@
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MD_PLACEHOLDER_GLOBAL_OPTIONS, MdAutocompleteModule, MdButtonModule, MdCardModule,
|
||||
MdCheckboxModule, MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule,
|
||||
MdListModule, MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule,
|
||||
MdTabsModule
|
||||
MAT_PLACEHOLDER_GLOBAL_OPTIONS, MatAutocompleteModule, MatButtonModule, MatCardModule,
|
||||
MatCheckboxModule, MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule,
|
||||
MatListModule, MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule,
|
||||
MatTabsModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
return [
|
||||
MdAutocompleteModule, MdButtonModule, MdCardModule, MdCheckboxModule,
|
||||
MdDatepickerModule, MdGridListModule, MdIconModule, MdInputModule, MdListModule,
|
||||
MdOptionModule, MdRadioModule, MdSelectModule, MdSlideToggleModule, MdTableModule, MdTabsModule
|
||||
MatAutocompleteModule, MatButtonModule, MatCardModule, MatCheckboxModule,
|
||||
MatDatepickerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule,
|
||||
MatOptionModule, MatRadioModule, MatSelectModule, MatSlideToggleModule, MatTableModule, MatTabsModule
|
||||
];
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{provide: MD_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'never' }}
|
||||
{provide: MAT_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'never' }}
|
||||
],
|
||||
imports: modules(),
|
||||
exports: modules()
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="adf-start-form-container" *ngIf="hasForm()">
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<md-card-title>
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h2 *ngIf="isTitleEnabled()" class="mdl-card__title-text">{{form.taskName}}</h2>
|
||||
</md-card-title>
|
||||
</md-card-header>
|
||||
<md-card-content>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div *ngIf="form.hasTabs()">
|
||||
<tabs-widget [tabs]="form.tabs" (formTabChanged)="checkVisibility($event);"></tabs-widget>
|
||||
</div>
|
||||
@@ -15,23 +15,23 @@
|
||||
<form-field [field]="field.field"></form-field>
|
||||
</div>
|
||||
</div>
|
||||
</md-card-content>
|
||||
<md-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
|
||||
</mat-card-content>
|
||||
<mat-card-content class="adf-start-form-actions" *ngIf="showOutcomeButtons && form.hasOutcomes()" #outcomesContainer>
|
||||
<ng-content select="[form-custom-button]"></ng-content>
|
||||
<button *ngFor="let outcome of form.outcomes"
|
||||
md-button
|
||||
mat-button
|
||||
[disabled]="!isOutcomeButtonEnabled(outcome)"
|
||||
[class.mdl-button--colored]="!outcome.isSystem"
|
||||
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
|
||||
(click)="onOutcomeClicked(outcome, $event)">
|
||||
{{outcome.name}}
|
||||
</button>
|
||||
</md-card-content>
|
||||
<md-card-actions *ngIf="showRefreshButton">
|
||||
<button md-button
|
||||
</mat-card-content>
|
||||
<mat-card-actions *ngIf="showRefreshButton">
|
||||
<button mat-button
|
||||
(click)="onRefreshClicked()">
|
||||
<md-icon>refresh</md-icon>
|
||||
<mat-icon>refresh</mat-icon>
|
||||
</button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
@@ -235,7 +235,7 @@ describe('ActivitiStartForm', () => {
|
||||
const formFields = component.form.getFormFields();
|
||||
const labelField = formFields.find(field => field.id === 'mockTypeDropDown');
|
||||
const dropDownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>md-select .mat-select-trigger');
|
||||
const selectElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget>mat-select .mat-select-trigger');
|
||||
selectElement.click();
|
||||
expect(selectElement).toBeDefined();
|
||||
expect(dropDownWidget).toBeDefined();
|
||||
@@ -365,8 +365,8 @@ describe('ActivitiStartForm', () => {
|
||||
component.ngOnChanges({ processDefinitionId: new SimpleChange(exampleId1, exampleId2, true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
const titleIcon = fixture.debugElement.nativeElement.querySelector('md-card-title>md-icon');
|
||||
const titleElement = fixture.debugElement.nativeElement.querySelector('md-card-title>h2');
|
||||
const titleIcon = fixture.debugElement.nativeElement.querySelector('mat-card-title>mat-icon');
|
||||
const titleElement = fixture.debugElement.nativeElement.querySelector('mat-card-title>h2');
|
||||
const actionButtons = fixture.debugElement.nativeElement.querySelectorAll('.mat-button');
|
||||
expect(titleIcon).toBeDefined();
|
||||
expect(titleElement).toBeDefined();
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="adf-amount-widget__container adf-amount-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<md-input-container floatPlaceholder="never" class="adf-amount-widget__input">
|
||||
<mat-form-field floatPlaceholder="never" class="adf-amount-widget__input">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<span mdPrefix class="adf-amount-widget__prefix-spacing"> {{currency }}</span>
|
||||
<input mdInput
|
||||
<span matPrefix class="adf-amount-widget__prefix-spacing"> {{currency }}</span>
|
||||
<input matInput
|
||||
class="adf-amount-widget"
|
||||
type="text"
|
||||
[id]="field.id"
|
||||
@@ -12,7 +12,7 @@
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdInputModule } from '@angular/material';
|
||||
import { MatInputModule } from '@angular/material';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiAlfrescoContentService } from '../../../services/activiti-alfresco.service';
|
||||
import { ErrorWidgetComponent } from '../error/error.component';
|
||||
@@ -34,7 +34,7 @@ describe('AmountWidgetComponent', () => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreModule,
|
||||
MdInputModule
|
||||
MatInputModule
|
||||
],
|
||||
declarations: [
|
||||
AmountWidgetComponent,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div [ngClass]="field.className">
|
||||
<md-checkbox
|
||||
<mat-checkbox
|
||||
[id]="field.id"
|
||||
color="primary"
|
||||
[required]="field.required"
|
||||
@@ -8,5 +8,5 @@
|
||||
(change)="onChange()">
|
||||
{{field.name}}
|
||||
<span *ngIf="field.required">*</span>
|
||||
</md-checkbox>
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<h4 class="container-widget__header-text" id="container-header"
|
||||
[class.collapsible]="content?.isCollapsible()">
|
||||
<button *ngIf="content?.isCollapsible()"
|
||||
md-icon-button
|
||||
mat-icon-button
|
||||
class="mdl-button--icon"
|
||||
(click)="onExpanderClicked()">
|
||||
<md-icon>{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</md-icon>
|
||||
<mat-icon>{{ content?.isExpanded ? 'expand_less' : 'expand_more' }}</mat-icon>
|
||||
</button>
|
||||
<span (click)="onExpanderClicked()" id="container-header-label">{{content.name}}</span>
|
||||
</h4>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
md-input-container {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<md-card class="adf-content-container" *ngIf="content">
|
||||
<md-card-content *ngIf="showDocumentContent">
|
||||
<mat-card class="adf-content-container" *ngIf="content">
|
||||
<mat-card-content *ngIf="showDocumentContent">
|
||||
<div *ngIf="content.isThumbnailSupported()" >
|
||||
<img id="thumbnailPreview" class="adf-img-upload-widget" [src]="content.thumbnailUrl" alt="{{content.name}}">
|
||||
</div>
|
||||
@@ -9,14 +9,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-card__supporting-text upload-widget__content-text">{{content.name}}</div>
|
||||
</md-card-content>
|
||||
</mat-card-content>
|
||||
|
||||
<md-card-actions>
|
||||
<button md-icon-button id="view" (click)="openViewer(content)">
|
||||
<md-icon class="md-24">zoom_in</md-icon>
|
||||
<mat-card-actions>
|
||||
<button mat-icon-button id="view" (click)="openViewer(content)">
|
||||
<mat-icon class="mat-24">zoom_in</mat-icon>
|
||||
</button>
|
||||
<button md-icon-button id="download" (click)="download(content)">
|
||||
<md-icon class="md-24">file_download</md-icon>
|
||||
<button mat-icon-button id="download" (click)="download(content)">
|
||||
<mat-icon class="mat-24">file_download</mat-icon>
|
||||
</button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { DebugElement, SimpleChange } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdTabsModule } from '@angular/material';
|
||||
import { MatTabsModule } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { AlfrescoTranslationService, ContentService, CoreModule } from 'ng2-alfresco-core';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
@@ -65,7 +65,7 @@ describe('ContentWidgetComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
MdTabsModule,
|
||||
MatTabsModule,
|
||||
CoreModule
|
||||
],
|
||||
declarations: [
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="{{field.className}}" *ngIf="field?.isVisible" id="data-widget" [class.adf-invalid]="!field.isValid || field.validationSummary.message">
|
||||
<md-input-container class="adf-date-widget">
|
||||
<mat-form-field class="adf-date-widget">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
[id]="field.id"
|
||||
[mdDatepicker]="datePicker"
|
||||
[matDatepicker]="datePicker"
|
||||
[(value)]="displayDate"
|
||||
[required]="isRequired()"
|
||||
[disabled]="field.readOnly"
|
||||
@@ -12,10 +12,10 @@
|
||||
(focusout)="onDateChanged($event.srcElement.value)"
|
||||
(dateChange)="onDateChanged($event)"
|
||||
placeholder="{{field.placeholder}}">
|
||||
<md-datepicker-toggle mdSuffix [for]="datePicker" [disabled]="field.readOnly" ></md-datepicker-toggle>
|
||||
</md-input-container>
|
||||
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
<md-datepicker #datePicker [touchUi]="true" [startAt]="startAt" ></md-datepicker>
|
||||
<mat-datepicker #datePicker [touchUi]="true" [startAt]="startAt" ></mat-datepicker>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/* tslint:disable:component-selector */
|
||||
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
|
||||
@@ -29,7 +29,7 @@ import { baseHost , WidgetComponent } from './../widget.component';
|
||||
selector: 'date-widget',
|
||||
providers: [
|
||||
{provide: DateAdapter, useClass: MomentDateAdapter},
|
||||
{provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
{provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
templateUrl: './date.widget.html',
|
||||
styleUrls: ['./date.widget.scss'],
|
||||
host: baseHost,
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
<div class="adf-dropdown-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" *ngIf="field?.isVisible">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<md-select class="adf-select"
|
||||
[id]="field.id"
|
||||
[(ngModel)]="field.value"
|
||||
[disabled]="field.readOnly"
|
||||
(ngModelChange)="checkVisibility(field)">
|
||||
<md-option *ngFor="let opt of field.options"
|
||||
[value]="getOptionValue(opt, field.value)"
|
||||
[id]="opt.id">{{opt.name}}</md-option>
|
||||
<md-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</md-option>
|
||||
</md-select>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
<mat-form-field>
|
||||
<mat-select class="adf-select"
|
||||
[id]="field.id"
|
||||
[(ngModel)]="field.value"
|
||||
[disabled]="field.readOnly"
|
||||
(ngModelChange)="checkVisibility(field)">
|
||||
<mat-option *ngFor="let opt of field.options"
|
||||
[value]="getOptionValue(opt, field.value)"
|
||||
[id]="opt.id">{{opt.name}}
|
||||
</mat-option>
|
||||
<mat-option id="readonlyOption" *ngIf="isReadOnlyType()" [value]="field.value">{{field.value}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
|
||||
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -153,9 +153,9 @@ describe('DropdownWidgetComponent', () => {
|
||||
|
||||
openSelect();
|
||||
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
|
||||
|
||||
expect(optOne).not.toBeNull();
|
||||
expect(optTwo).not.toBeNull();
|
||||
@@ -236,9 +236,9 @@ describe('DropdownWidgetComponent', () => {
|
||||
|
||||
openSelect();
|
||||
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
|
||||
|
||||
expect(optOne).not.toBeNull();
|
||||
expect(optTwo).not.toBeNull();
|
||||
|
||||
@@ -25,31 +25,31 @@
|
||||
</div>
|
||||
|
||||
<div *ngIf="!readOnly">
|
||||
<button md-button
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="moveSelectionUp()">
|
||||
<md-icon>arrow_upward</md-icon>
|
||||
<mat-icon>arrow_upward</mat-icon>
|
||||
</button>
|
||||
<button md-button
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="moveSelectionDown()">
|
||||
<md-icon>arrow_downward</md-icon>
|
||||
<mat-icon>arrow_downward</mat-icon>
|
||||
</button>
|
||||
<button md-button
|
||||
<button mat-button
|
||||
[disabled]="field.readOnly"
|
||||
id="{{content.id}}-add-row"
|
||||
(click)="addNewRow()">
|
||||
<md-icon>add_circle_outline</md-icon>
|
||||
<mat-icon>add_circle_outline</mat-icon>
|
||||
</button>
|
||||
<button md-button
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="deleteSelection()">
|
||||
<md-icon>remove_circle_outline</md-icon>
|
||||
<mat-icon>remove_circle_outline</mat-icon>
|
||||
</button>
|
||||
<button md-button
|
||||
<button mat-button
|
||||
[disabled]="!hasSelection()"
|
||||
(click)="editSelection()">
|
||||
<md-icon>edit</md-icon>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<label [attr.for]="column.id">
|
||||
<md-checkbox
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
[id]="column.id"
|
||||
[checked]="table.getCellValue(row, column)"
|
||||
@@ -7,5 +7,5 @@
|
||||
[disabled]="!column.editable"
|
||||
(change)="onValueChanged(row, column, $event)">
|
||||
<span class="adf-checkbox-label">{{column.name}}</span>
|
||||
</md-checkbox>
|
||||
</mat-checkbox>
|
||||
</label>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<div>
|
||||
<md-input-container class="adf-date-editor">
|
||||
<mat-form-field class="adf-date-editor">
|
||||
<label [attr.for]="column.id">{{column.name}} (d-M-yyyy)</label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
id="dateInput"
|
||||
type="text"
|
||||
[mdDatepicker]="datePicker"
|
||||
[matDatepicker]="datePicker"
|
||||
[value]="value"
|
||||
[id]="column.id"
|
||||
[required]="column.required"
|
||||
[disabled]="!column.editable"
|
||||
(focusout)="onDateChanged($event.srcElement.value)">
|
||||
<md-datepicker-toggle *ngIf="column.editable" mdSuffix [for]="datePicker" class="adf-date-editor-button" ></md-datepicker-toggle>
|
||||
</md-input-container>
|
||||
<md-datepicker #datePicker (dateChange)="onDateChanged($event)" [touchUi]="true"></md-datepicker>
|
||||
<mat-datepicker-toggle *ngIf="column.editable" matSuffix [for]="datePicker" class="adf-date-editor-button" ></mat-datepicker-toggle>
|
||||
</mat-form-field>
|
||||
<mat-datepicker #datePicker (dateChange)="onDateChanged($event)" [touchUi]="true"></mat-datepicker>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
/* tslint:disable:component-selector */
|
||||
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
|
||||
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { Moment } from 'moment';
|
||||
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
|
||||
@@ -29,7 +29,7 @@ import { DynamicTableColumn, DynamicTableModel, DynamicTableRow } from './../../
|
||||
templateUrl: './date.editor.html',
|
||||
providers: [
|
||||
{provide: DateAdapter, useClass: MomentDateAdapter},
|
||||
{provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
{provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
|
||||
styleUrls: ['./date.editor.scss']
|
||||
})
|
||||
export class DateEditorComponent implements OnInit {
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
<div class="dropdown-editor">
|
||||
<label [attr.for]="column.id">{{column.name}}</label>
|
||||
<md-select
|
||||
floatPlaceholder="never"
|
||||
class="adf-dropdown-editor-select"
|
||||
[id]="column.id"
|
||||
[(ngModel)]="value"
|
||||
[required]="column.required"
|
||||
[disabled]="!column.editable"
|
||||
(change)="onValueChanged(row, column, $event)">
|
||||
<md-option></md-option>
|
||||
<md-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</md-option>
|
||||
</md-select>
|
||||
<mat-form-field>
|
||||
<mat-select
|
||||
floatPlaceholder="never"
|
||||
class="adf-dropdown-editor-select"
|
||||
[id]="column.id"
|
||||
[(ngModel)]="value"
|
||||
[required]="column.required"
|
||||
[disabled]="!column.editable"
|
||||
(change)="onValueChanged(row, column, $event)">
|
||||
<mat-option></mat-option>
|
||||
<mat-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -246,9 +246,9 @@ describe('DropdownEditorComponent', () => {
|
||||
|
||||
openSelect();
|
||||
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
|
||||
|
||||
expect(optOne).not.toBeNull();
|
||||
expect(optTwo).not.toBeNull();
|
||||
@@ -294,9 +294,9 @@ describe('DropdownEditorComponent', () => {
|
||||
|
||||
openSelect();
|
||||
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="md-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="md-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="md-option-3"]'));
|
||||
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
|
||||
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
|
||||
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
|
||||
|
||||
expect(optOne).not.toBeNull();
|
||||
expect(optTwo).not.toBeNull();
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
<error-widget [error]="validationSummary.text"></error-widget>
|
||||
<div>
|
||||
<button md-button (click)="onCancelChanges()">Cancel</button>
|
||||
<button md-button (click)="onSaveChanges()">Save</button>
|
||||
<button mat-button (click)="onCancelChanges()">Cancel</button>
|
||||
<button mat-button (click)="onSaveChanges()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<div class="adf-text-editor">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label [attr.for]="column.id">{{displayName}}</label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
type="text"
|
||||
[value]="table.getCellValue(row, column)"
|
||||
(keyup)="onValueChanged(row, column, $event)"
|
||||
[required]="column.required"
|
||||
[disabled]="!column.editable"
|
||||
[id]="column.id">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="adf-group-widget {{field.className}}"
|
||||
[class.is-dirty]="value"
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" id="functional-group-div" *ngIf="field.isVisible">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
[id]="field.id"
|
||||
@@ -11,16 +11,16 @@
|
||||
(keyup)="onKeyUp($event)"
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}"
|
||||
[mdAutocomplete]="auto">
|
||||
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
|
||||
<md-option *ngFor="let item of groups"
|
||||
[matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
|
||||
<mat-option *ngFor="let item of groups"
|
||||
[id]="field.id +'-'+item.id"
|
||||
(click)="onItemClick(item, $event)" [value]="item">
|
||||
<span>{{item.name}}</span>
|
||||
</md-option>
|
||||
</md-autocomplete>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="adf-multiline-text-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<md-input-container floatPlaceholder="never">
|
||||
<mat-form-field floatPlaceholder="never">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<textarea mdInput class="adf-input"
|
||||
md-autosize
|
||||
<textarea matInput class="adf-input"
|
||||
matTextareaAutosize
|
||||
type="text"
|
||||
rows="3"
|
||||
[id]="field.id"
|
||||
@@ -13,7 +13,7 @@
|
||||
[disabled]="field.readOnly || readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
</textarea>
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
<div *ngIf="field.maxLength > 0" class="adf-multiline-word-counter">
|
||||
<span>{{field?.value?.length || 0}}/{{field.maxLength}}</span>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="adf-textfield adf-number-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
@@ -13,7 +13,7 @@
|
||||
(ngModelChange)="checkVisibility(field)"
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
id="people-widget-content"
|
||||
*ngIf="field.isVisible">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<input #inputValue
|
||||
mdInput
|
||||
matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
[id]="field.id"
|
||||
@@ -15,9 +15,9 @@
|
||||
(keyup)="onKeyUp($event)"
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}"
|
||||
[mdAutocomplete]="auto">
|
||||
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
|
||||
<md-option *ngFor="let user of users; let i = index" [value]="user">
|
||||
[matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)" [displayWith]="getDisplayName">
|
||||
<mat-option *ngFor="let user of users; let i = index" [value]="user">
|
||||
<div class="adf-people-widget-row" id="adf-people-widget-user-{{i}}">
|
||||
<div class="adf-people-widget-pic">
|
||||
{{getInitialUserName(user.firstName, user.lastName)}}
|
||||
@@ -28,9 +28,9 @@
|
||||
</div>
|
||||
<span class="adf-people-label-name">{{getDisplayName(user)}}</span>
|
||||
</div>
|
||||
</md-option>
|
||||
</md-autocomplete>
|
||||
</md-input-container>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id" *ngIf="field?.isVisible">
|
||||
<div class="adf-radio-button-container">
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<md-radio-group class="adf-radio-group" [(ngModel)]="field.value">
|
||||
<md-radio-button
|
||||
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value">
|
||||
<mat-radio-button
|
||||
[id]="field.id + '-' + opt.id"
|
||||
[name]="field.id"
|
||||
[value]="opt.id"
|
||||
@@ -13,8 +13,8 @@
|
||||
color="primary"
|
||||
class="adf-radio-button" *ngFor="let opt of field.options" >
|
||||
{{opt.name}}
|
||||
</md-radio-button>
|
||||
</md-radio-group>
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
<error-widget [error]="field.validationSummary" ></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
|
||||
<md-tab-group>
|
||||
<md-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
|
||||
<mat-tab-group>
|
||||
<mat-tab *ngFor="let tab of visibleTabs" [label]="tab.title">
|
||||
<div *ngFor="let field of tab.fields">
|
||||
<form-field [field]="field.field"></form-field>
|
||||
</div>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="adf-textfield adf-text-widget {{field.className}}"
|
||||
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<input mdInput
|
||||
<input matInput
|
||||
class="adf-input"
|
||||
type="text"
|
||||
[id]="field.id"
|
||||
@@ -13,7 +13,7 @@
|
||||
[disabled]="field.readOnly || readOnly"
|
||||
[textMask]="{mask: mask, isReversed: isMaskReversed}"
|
||||
placeholder="{{field.placeholder}}">
|
||||
</md-input-container>
|
||||
</mat-form-field>
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
</div>
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
[class.adf-invalid]="!field.isValid"
|
||||
[class.adf-readonly]="field.readOnly"
|
||||
id="typehead-div" *ngIf="field.isVisible">
|
||||
<md-input-container>
|
||||
<mat-form-field>
|
||||
<label class="adf-label" [attr.for]="field.id">{{field.name}}</label>
|
||||
<input mdInput class="adf-input"
|
||||
<input matInput class="adf-input"
|
||||
type="text"
|
||||
[id]="field.id"
|
||||
[(ngModel)]="value"
|
||||
@@ -14,13 +14,13 @@
|
||||
(keyup)="onKeyUp($event)"
|
||||
[disabled]="field.readOnly"
|
||||
placeholder="{{field.placeholder}}"
|
||||
[mdAutocomplete]="auto">
|
||||
<md-autocomplete #auto="mdAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
|
||||
<md-option *ngFor="let item of options" [value]="item">
|
||||
[matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
|
||||
<mat-option *ngFor="let item of options" [value]="item">
|
||||
<span [id]="field.name+'_option_'+item.id">{{item.name}}</span>
|
||||
</md-option>
|
||||
</md-autocomplete>
|
||||
</md-input-container>
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
|
||||
<error-widget [error]="field.validationSummary"></error-widget>
|
||||
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
|
||||
|
||||
@@ -378,9 +378,9 @@ describe('TypeaheadWidgetComponent', () => {
|
||||
typeaheadWidgetComponent.onKeyUp(keyboardEvent);
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="md-option-1"]'))).toBeDefined();
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="md-option-2"]'))).toBeDefined();
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="md-option-3"]'))).toBeDefined();
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'))).toBeDefined();
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'))).toBeDefined();
|
||||
expect(fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'))).toBeDefined();
|
||||
});
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -24,12 +24,12 @@ import { baseHost , WidgetComponent } from './../widget.component';
|
||||
@Component({
|
||||
selector: 'unknown-widget',
|
||||
template: `
|
||||
<md-list class="adf-unknown-widget">
|
||||
<md-list-item>
|
||||
<md-icon class="md-24">error_outline</md-icon>
|
||||
<mat-list class="adf-unknown-widget">
|
||||
<mat-list-item>
|
||||
<mat-icon class="mat-24">error_outline</mat-icon>
|
||||
<span class="adf-unknown-text">Unknown type: {{field.type}}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
|
||||
`,
|
||||
styleUrls: ['./unknown.widget.scss'],
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
<label class="adf-label" [attr.for]="field.id" >{{field.name}}<span *ngIf="isRequired()">*</span></label>
|
||||
<div class="adf-upload-widget-container">
|
||||
<div>
|
||||
<md-list *ngIf="hasFile">
|
||||
<md-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
|
||||
<img md-list-icon class="adf-upload-widget__icon"
|
||||
<mat-list *ngIf="hasFile">
|
||||
<mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
|
||||
<img mat-list-icon class="adf-upload-widget__icon"
|
||||
[id]="'file-'+file.id+'-icon'"
|
||||
[src]="getIcon(file.mimeType)"
|
||||
[alt]="mimeTypeIcon"
|
||||
@@ -14,12 +14,12 @@
|
||||
(keyup.enter)="fileClicked(file)"
|
||||
role="button"
|
||||
tabindex="0"/>
|
||||
<span md-line id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" class="adf-file">{{decode(file.name)}}</span>
|
||||
<button *ngIf="!field.readOnly" md-icon-button [id]="'file-'+file.id+'-remove'" (click)="reset(file);" (keyup.enter)="reset(file);">
|
||||
<md-icon class="md-24">highlight_off</md-icon>
|
||||
<span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" role="button" tabindex="0" class="adf-file">{{decode(file.name)}}</span>
|
||||
<button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'" (click)="reset(file);" (keyup.enter)="reset(file);">
|
||||
<mat-icon class="mat-24">highlight_off</mat-icon>
|
||||
</button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
<input *ngIf="!hasFile"
|
||||
#file
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
@@ -17,12 +17,12 @@
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
MdChipsModule,
|
||||
MdInputModule,
|
||||
MdProgressSpinnerModule,
|
||||
MdSelectModule
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatChipsModule,
|
||||
MatInputModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatSelectModule
|
||||
} from '@angular/material';
|
||||
import { ActivitiFormModule } from 'ng2-activiti-form';
|
||||
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
@@ -122,12 +122,12 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
|
||||
DataTableModule,
|
||||
ActivitiFormModule,
|
||||
ActivitiTaskListModule,
|
||||
MdProgressSpinnerModule,
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
MdInputModule,
|
||||
MdChipsModule,
|
||||
MdSelectModule
|
||||
MatProgressSpinnerModule,
|
||||
MatButtonModule,
|
||||
MatCardModule,
|
||||
MatInputModule,
|
||||
MatChipsModule,
|
||||
MatSelectModule
|
||||
],
|
||||
declarations: [
|
||||
...ACTIVITI_PROCESSLIST_DIRECTIVES
|
||||
|
||||
@@ -34,18 +34,18 @@
|
||||
"alfresco"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/animations": "4.3.6",
|
||||
"@angular/cdk": "2.0.0-beta.10",
|
||||
"@angular/common": "4.3.6",
|
||||
"@angular/compiler": "4.3.6",
|
||||
"@angular/core": "4.3.6",
|
||||
"@angular/forms": "4.3.6",
|
||||
"@angular/http": "4.3.6",
|
||||
"@angular/material": "2.0.0-beta.10",
|
||||
"@angular/animations": "4.4.5",
|
||||
"@angular/cdk": "2.0.0-beta.12",
|
||||
"@angular/common": "4.4.5",
|
||||
"@angular/compiler": "4.4.5",
|
||||
"@angular/core": "4.4.5",
|
||||
"@angular/flex-layout": "2.0.0-beta.9",
|
||||
"@angular/platform-browser": "4.3.6",
|
||||
"@angular/platform-browser-dynamic": "4.3.6",
|
||||
"@angular/router": "4.3.6",
|
||||
"@angular/forms": "4.4.5",
|
||||
"@angular/http": "4.4.5",
|
||||
"@angular/material": "2.0.0-beta.12",
|
||||
"@angular/platform-browser": "4.4.5",
|
||||
"@angular/platform-browser-dynamic": "4.4.5",
|
||||
"@angular/router": "4.4.5",
|
||||
"@ngx-translate/core": "7.0.0",
|
||||
"alfresco-js-api": "1.9.0",
|
||||
"core-js": "2.4.1",
|
||||
@@ -61,7 +61,7 @@
|
||||
"zone.js": "0.8.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/hammerjs": "2.0.34",
|
||||
"@types/hammerjs": "2.0.35",
|
||||
"@types/jasmine": "2.5.35",
|
||||
"@types/node": "6.0.45",
|
||||
"adf-tslint-rules": "0.0.3",
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<button
|
||||
id="add_new_process_content_button"
|
||||
color="primary"
|
||||
md-button
|
||||
md-raised-button
|
||||
md-icon-button
|
||||
mat-button
|
||||
mat-raised-button
|
||||
mat-icon-button
|
||||
class="adf-create-attachment"
|
||||
[adf-upload]="true"
|
||||
mode="['click']"
|
||||
[multiple]="true"
|
||||
(upload-files)="onFileUpload($event)">
|
||||
<md-icon>add</md-icon>
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
|
||||
@@ -21,8 +21,8 @@
|
||||
<loading-content-template>
|
||||
<ng-template>
|
||||
<!--Add your custom loading template here-->
|
||||
<md-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
|
||||
</md-progress-spinner>
|
||||
<mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'">
|
||||
</mat-progress-spinner>
|
||||
</ng-template>
|
||||
</loading-content-template>
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { NgZone, SimpleChange } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdProgressSpinnerModule } from '@angular/material';
|
||||
import { MatProgressSpinnerModule } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { ActivitiContentService } from 'ng2-activiti-form';
|
||||
@@ -45,7 +45,7 @@ describe('ProcessAttachmentListComponent', () => {
|
||||
imports: [
|
||||
CoreModule,
|
||||
DataTableModule,
|
||||
MdProgressSpinnerModule
|
||||
MatProgressSpinnerModule
|
||||
],
|
||||
declarations: [
|
||||
ProcessAttachmentListComponent
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { MdInputModule } from '@angular/material';
|
||||
import { MatInputModule } from '@angular/material';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import {
|
||||
@@ -45,7 +45,7 @@ describe('ActivitiProcessInstanceComments', () => {
|
||||
imports: [
|
||||
CoreModule,
|
||||
DataTableModule,
|
||||
MdInputModule
|
||||
MatInputModule
|
||||
],
|
||||
declarations: [
|
||||
ProcessCommentsComponent,
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="menu-container">
|
||||
<md-list>
|
||||
<md-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
<mat-list>
|
||||
<mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
|
||||
class="adf-filters__entry" [class.active]="currentFilter === filter">
|
||||
<md-icon *ngIf="hasIcon" mdListIcon class="adf-filters__entry-icon">assignment</md-icon>
|
||||
<span mdLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<mat-icon *ngIf="hasIcon" matListIcon class="adf-filters__entry-icon">assignment</mat-icon>
|
||||
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
|
||||
<md-card *ngIf="processInstanceDetails">
|
||||
<md-card-header>
|
||||
<md-card-title>{{ getProcessNameOrDescription('medium') }}</md-card-title>
|
||||
</md-card-header>
|
||||
<md-card-content>
|
||||
<mat-card *ngIf="processInstanceDetails">
|
||||
<mat-card-header>
|
||||
<mat-card-title>{{ getProcessNameOrDescription('medium') }}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<adf-process-instance-header
|
||||
[processInstance]="processInstanceDetails"
|
||||
(showProcessDiagram)="onShowProcessDiagram($event)">
|
||||
</adf-process-instance-header>
|
||||
|
||||
<button class="adf-in-medias-res-button" md-button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
|
||||
<button class="adf-in-medias-res-button" mat-button id="show-diagram-button" type="button" mat-button mat-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
|
||||
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<adf-process-instance-tasks
|
||||
[processInstanceDetails]="processInstanceDetails"
|
||||
(taskClick)="onTaskClicked($event)">
|
||||
</adf-process-instance-tasks>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<div data-automation-id="header-status" *ngIf="isRunning()" class="adf-in-medias-res-button">
|
||||
<button md-button type="button" (click)="cancelProcess()">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
|
||||
<button mat-button type="button" (click)="cancelProcess()">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<adf-process-instance-comments #activiticomments
|
||||
[readOnly]="false"
|
||||
[processInstanceId]="processInstanceDetails.id">
|
||||
</adf-process-instance-comments>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<md-card *ngIf="processInstance" class="adf-card-container">
|
||||
<md-card-content>
|
||||
<mat-card *ngIf="processInstance" class="adf-card-container">
|
||||
<mat-card-content>
|
||||
<adf-card-view [properties]="properties"></adf-card-view>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user