mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1247] Remove MDL from processlist package (#2329)
* Removing mdl stuff * Further mdl removal * Further mdl removal * Removing mdl is finished
This commit is contained in:
Popovics András
committed by
Eugenio Romano
Eugenio Romano
parent
d26c755d0d
commit
17f8dc92e8
@@ -19,9 +19,11 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
MdChipsModule,
|
||||
MdInputModule,
|
||||
MdProgressSpinnerModule,
|
||||
MdSelectModule } from '@angular/material';
|
||||
MdSelectModule
|
||||
} from '@angular/material';
|
||||
import { ActivitiFormModule } from 'ng2-activiti-form';
|
||||
import { ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
import { CardViewUpdateService, CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
|
||||
@@ -35,7 +37,6 @@ import { ProcessFiltersComponent } from './src/components/process-filters.compon
|
||||
import { ProcessInstanceDetailsComponent } from './src/components/process-instance-details.component';
|
||||
import { ProcessInstanceHeaderComponent } from './src/components/process-instance-header.component';
|
||||
import { ProcessInstanceTasksComponent } from './src/components/process-instance-tasks.component';
|
||||
import { ProcessInstanceVariablesComponent } from './src/components/process-instance-variables.component';
|
||||
import { ProcessInstanceListComponent } from './src/components/processlist.component';
|
||||
import { StartProcessInstanceComponent } from './src/components/start-process.component';
|
||||
export {ProcessAttachmentListComponent} from './src/components/process-attachment-list.component';
|
||||
@@ -45,7 +46,6 @@ export {ProcessInstanceDetailsComponent} from './src/components/process-instance
|
||||
export {ProcessAuditDirective} from './src/components/process-audit.directive';
|
||||
export {ProcessInstanceHeaderComponent} from './src/components/process-instance-header.component';
|
||||
export {ProcessInstanceTasksComponent} from './src/components/process-instance-tasks.component';
|
||||
export {ProcessInstanceVariablesComponent} from './src/components/process-instance-variables.component';
|
||||
export {ProcessInstanceListComponent} from './src/components/processlist.component';
|
||||
export {StartProcessInstanceComponent} from './src/components/start-process.component';
|
||||
|
||||
@@ -69,7 +69,6 @@ import {ProcessFiltersComponent as ActivitiProcessFilters } from './src/componen
|
||||
import {ProcessInstanceDetailsComponent as ActivitiProcessInstanceDetails } from './src/components/process-instance-details.component';
|
||||
import {ProcessInstanceHeaderComponent as ActivitiProcessInstanceHeader } from './src/components/process-instance-header.component';
|
||||
import {ProcessInstanceTasksComponent as ActivitiProcessInstanceTasks } from './src/components/process-instance-tasks.component';
|
||||
import {ProcessInstanceVariablesComponent as ActivitiProcessInstanceVariables } from './src/components/process-instance-variables.component';
|
||||
import {ProcessInstanceListComponent as ActivitiProcessInstanceListComponent } from './src/components/processlist.component';
|
||||
import {StartProcessInstanceComponent as ActivitiStartProcessInstance } from './src/components/start-process.component';
|
||||
import {ProcessService as ActivitiProcessService } from './src/services/process.service';
|
||||
@@ -80,7 +79,6 @@ export {ProcessFiltersComponent as ActivitiProcessFilters} from './src/component
|
||||
export {ProcessInstanceDetailsComponent as ActivitiProcessInstanceDetails} from './src/components/process-instance-details.component';
|
||||
export {ProcessInstanceHeaderComponent as ActivitiProcessInstanceHeader} from './src/components/process-instance-header.component';
|
||||
export {ProcessInstanceTasksComponent as ActivitiProcessInstanceTasks} from './src/components/process-instance-tasks.component';
|
||||
export {ProcessInstanceVariablesComponent as ActivitiProcessInstanceVariables} from './src/components/process-instance-variables.component';
|
||||
export {ProcessInstanceListComponent as ActivitiProcessInstanceListComponent} from './src/components/processlist.component';
|
||||
export {StartProcessInstanceComponent as ActivitiStartProcessInstance} from './src/components/start-process.component';
|
||||
export {ProcessService as ActivitiProcessService} from './src/services/process.service';
|
||||
@@ -92,7 +90,6 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
|
||||
ProcessAuditDirective,
|
||||
ProcessInstanceHeaderComponent,
|
||||
ProcessInstanceTasksComponent,
|
||||
ProcessInstanceVariablesComponent,
|
||||
ProcessCommentsComponent,
|
||||
StartProcessInstanceComponent,
|
||||
ProcessAttachmentListComponent,
|
||||
@@ -103,7 +100,6 @@ export const ACTIVITI_PROCESSLIST_DIRECTIVES: [any] = [
|
||||
ActivitiProcessFilters,
|
||||
ActivitiProcessInstanceHeader,
|
||||
ActivitiProcessInstanceTasks,
|
||||
ActivitiProcessInstanceVariables,
|
||||
ActivitiProcessComments,
|
||||
ActivitiProcessInstanceDetails,
|
||||
ActivitiStartProcessInstance,
|
||||
@@ -130,6 +126,7 @@ export const ACTIVITI_PROCESSLIST_PROVIDERS: [any] = [
|
||||
MdButtonModule,
|
||||
MdCardModule,
|
||||
MdInputModule,
|
||||
MdChipsModule,
|
||||
MdSelectModule
|
||||
],
|
||||
declarations: [
|
||||
|
||||
@@ -7,11 +7,6 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.activiti-label.mdl-badge[data-badge]:after {
|
||||
right: -27px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.activiti-label + .icon {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
@@ -15,3 +15,7 @@
|
||||
transform: translate(0, -50%);
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.adf-in-medias-res-button {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,37 @@
|
||||
<div *ngIf="!processInstanceDetails">{{ 'DETAILS.MESSAGES.NONE'|translate }}</div>
|
||||
<div *ngIf="processInstanceDetails">
|
||||
<h2 class="mdl-card__title-text">{{ getProcessNameOrDescription('medium') }}</h2>
|
||||
<adf-process-instance-header
|
||||
[processInstance]="processInstanceDetails"
|
||||
(showProcessDiagram)="onShowProcessDiagram($event)">
|
||||
</adf-process-instance-header>
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<button id="show-diagram-button" type="button" md-button md-raised-button [disabled]="isDiagramDisabled()" (click)="onShowProcessDiagram(processInstanceId)">{{ 'DETAILS.BUTTON.SHOW_DIAGRAM' | translate }}</button>
|
||||
</div>
|
||||
<div class="mdl-card mdl-shadow--2dp activiti-process-container">
|
||||
<div class="mdl-cell mdl-cell--12-col">
|
||||
<adf-process-instance-tasks
|
||||
[processInstanceDetails]="processInstanceDetails"
|
||||
(taskClick)="onTaskClicked($event)">
|
||||
</adf-process-instance-tasks>
|
||||
<md-card *ngIf="processInstanceDetails">
|
||||
<md-card-header>
|
||||
<md-card-title>{{ getProcessNameOrDescription('medium') }}</md-card-title>
|
||||
</md-card-header>
|
||||
<md-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>
|
||||
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<adf-process-instance-tasks
|
||||
[processInstanceDetails]="processInstanceDetails"
|
||||
(taskClick)="onTaskClicked($event)">
|
||||
</adf-process-instance-tasks>
|
||||
</md-card-content>
|
||||
</md-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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--4-col" data-automation-id="header-status" *ngIf="isRunning()">
|
||||
<button type="button" (click)="cancelProcess()" class="mdl-button">{{ 'DETAILS.BUTTON.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<adf-process-instance-comments #activiticomments
|
||||
[readOnly]="!isRunning()"
|
||||
[processInstanceId]="processInstanceDetails.id">
|
||||
</adf-process-instance-comments>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<md-card>
|
||||
<md-card-content>
|
||||
<adf-process-instance-comments #activiticomments
|
||||
[readOnly]="!isRunning()"
|
||||
[processInstanceId]="processInstanceDetails.id">
|
||||
</adf-process-instance-comments>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
|
||||
@@ -88,7 +88,7 @@ describe('ProcessInstanceDetailsComponent', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
|
||||
let headerEl: DebugElement = fixture.debugElement.query(By.css('.mat-card-title '));
|
||||
expect(headerEl).not.toBeNull();
|
||||
expect(headerEl.nativeElement.innerText).toBe('Process 123');
|
||||
});
|
||||
@@ -100,7 +100,7 @@ describe('ProcessInstanceDetailsComponent', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': new SimpleChange(null, '123', true) });
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let headerEl: DebugElement = fixture.debugElement.query(By.css('h2'));
|
||||
let headerEl: DebugElement = fixture.debugElement.query(By.css('.mat-card-title '));
|
||||
expect(headerEl).not.toBeNull();
|
||||
expect(headerEl.nativeElement.innerText).toBe('My Process - Nov 10, 2016, 3:37:30 AM');
|
||||
});
|
||||
|
||||
@@ -7,9 +7,20 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.activiti-label.mdl-badge[data-badge]:after {
|
||||
right: -27px;
|
||||
top: -2px;
|
||||
.adf-process-badge {
|
||||
pointer-events: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.adf-chip-label {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.activiti-label + .icon {
|
||||
@@ -32,9 +43,20 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mdl-dialog__content.form__size {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
.adf-start-process-dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.adf-start-process-dialog-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.adf-start-process-dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<div *ngIf="showRefreshButton" class="process-tasks-refresh" >
|
||||
<button (click)="onRefreshClicked()" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
|
||||
<i class="material-icons">refresh</i>
|
||||
<button md-icon-button (click)="onRefreshClicked()">
|
||||
<md-icon class="md-24" aria-label="Refresh">refresh</md-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ACTIVE FORM -->
|
||||
|
||||
<span class="activiti-label mdl-badge"
|
||||
[attr.data-badge]="activeTasks?.length">{{ 'DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
|
||||
<md-chip-list>
|
||||
<span class="adf-chip-label">{{ 'DETAILS.LABELS.TASKS_ACTIVE'|translate }}</span>
|
||||
<md-chip class="adf-process-badge" color="accent" selected="true">{{activeTasks?.length}}</md-chip>
|
||||
</md-chip-list>
|
||||
|
||||
<div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks">
|
||||
<ul class='mdl-list'>
|
||||
<li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of activeTasks">
|
||||
<span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
|
||||
<i class="material-icons mdl-list__item-icon">assignment</i>
|
||||
<span>{{task.name || 'Nameless task'}}</span>
|
||||
<span class="mdl-list__item-sub-title">
|
||||
<md-list>
|
||||
<md-list-item class="process-tasks__task-item" *ngFor="let task of activeTasks" (click)="clickTask($event, task)">
|
||||
<md-icon md-list-icon>assignment</md-icon>
|
||||
<h3 md-line>{{task.name || 'Nameless task'}}</h3>
|
||||
<span md-line>
|
||||
{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<!-- START FORM -->
|
||||
@@ -34,52 +34,52 @@
|
||||
|
||||
<!--IF START TASK COMPLETED -->
|
||||
<div class="menu-container">
|
||||
<ul class='mdl-list'>
|
||||
<li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item">
|
||||
<span class="mdl-list__item-primary-content" (click)="clickStartTask($event)">
|
||||
<i class="material-icons mdl-list__item-icon">assignment</i>
|
||||
<span>{{ 'DETAILS.LABELS.START_FORM'|translate }}</span>
|
||||
<span class="mdl-list__item-sub-title">
|
||||
{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
|
||||
</span>
|
||||
<md-list>
|
||||
<md-list-item class="process-tasks__task-item" (click)="clickStartTask($event)">
|
||||
<md-icon md-list-icon>assignment</md-icon>
|
||||
<h3 md-line>{{ 'DETAILS.LABELS.START_FORM'|translate }}</h3>
|
||||
<span md-line>
|
||||
{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COMPLETED FORM -->
|
||||
<span class="activiti-label mdl-badge"
|
||||
[attr.data-badge]="completedTasks?.length">{{ 'DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
|
||||
<md-chip-list>
|
||||
<span class="adf-chip-label">{{ 'DETAILS.LABELS.TASKS_COMPLETED'|translate }}</span>
|
||||
<md-chip class="adf-process-badge" color="accent" selected="true">{{completedTasks?.length}}</md-chip>
|
||||
</md-chip-list>
|
||||
|
||||
<div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks">
|
||||
<ul class='mdl-list'>
|
||||
<li class="mdl-list__item mdl-list__item--two-line process-tasks__task-item" *ngFor="let task of completedTasks">
|
||||
<span class="mdl-list__item-primary-content" (click)="clickTask($event, task)">
|
||||
<i class="material-icons mdl-list__item-icon">assignment</i>
|
||||
<span>{{task.name || 'Nameless task'}}</span>
|
||||
<span class="mdl-list__item-sub-title">
|
||||
{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
|
||||
</span>
|
||||
<md-list>
|
||||
<md-list-item class="process-tasks__task-item" *ngFor="let task of completedTasks" (click)="clickTask($event, task)">
|
||||
<md-icon md-list-icon>assignment</md-icon>
|
||||
<h3 md-line>{{task.name || 'Nameless task'}}</h3>
|
||||
<span md-line>
|
||||
{{ 'DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div *ngIf="completedTasks?.length === 0" data-automation-id="completed-tasks-none" class="no-results">
|
||||
{{ 'DETAILS.TASKS.NO_COMPLETED' | translate }}
|
||||
</div>
|
||||
|
||||
<dialog *ngIf="hasStartFormDefined()" class="mdl-dialog task-details-dialog" #startDialog>
|
||||
<h4 class="mdl-dialog__title">{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
|
||||
<div class="mdl-dialog__content form__size">
|
||||
<adf-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
|
||||
[showRefreshButton]="false" [readOnlyForm]="true"
|
||||
(formContentClicked)='onFormContentClick($event)'>
|
||||
</adf-start-form>
|
||||
<ng-template *ngIf="hasStartFormDefined()" #startDialog>
|
||||
<div id="adf-start-process-dialog" class="adf-start-process-dialog">
|
||||
<h4 md-dialog-title>{{ 'DETAILS.LABELS.START_FORM'|translate }}</h4>
|
||||
<div md-dialog-content class="adf-start-process-dialog-content">
|
||||
<adf-start-form [processId]="processId" [processDefinitionId]="processInstanceDetails?.processDefinitionId"
|
||||
[showRefreshButton]="false" [readOnlyForm]="true"
|
||||
(formContentClicked)='onFormContentClick($event)'>
|
||||
</adf-start-form>
|
||||
</div>
|
||||
<div md-dialog-actions class="adf-start-process-dialog-actions">
|
||||
<button md-button type="button" (click)="closeSartDialog()">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" (click)="closeSartDialog()" class="mdl-button close">{{ 'DETAILS.TASKS.TASK_CLOSE' | translate }}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</ng-template>
|
||||
|
||||
@@ -112,7 +112,7 @@ describe('ProcessInstanceTasksComponent', () => {
|
||||
component.ngOnChanges({ 'processInstanceDetails': change });
|
||||
let listEl = fixture.debugElement.query(By.css('[data-automation-id="active-tasks"]'));
|
||||
expect(listEl).not.toBeNull();
|
||||
expect(listEl.queryAll(By.css('li')).length).toBe(1);
|
||||
expect(listEl.queryAll(By.css('md-list-item')).length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -124,7 +124,7 @@ describe('ProcessInstanceTasksComponent', () => {
|
||||
fixture.detectChanges();
|
||||
let listEl = fixture.debugElement.query(By.css('[data-automation-id="completed-tasks"]'));
|
||||
expect(listEl).not.toBeNull();
|
||||
expect(listEl.queryAll(By.css('li')).length).toBe(1);
|
||||
expect(listEl.queryAll(By.css('md-list-item')).length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -17,14 +17,13 @@
|
||||
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||
import { MdDialog } from '@angular/material';
|
||||
import { TaskDetailsEvent, TaskDetailsModel } from 'ng2-activiti-tasklist';
|
||||
import { LogService } from 'ng2-alfresco-core';
|
||||
import { Observable, Observer } from 'rxjs/Rx';
|
||||
import { ProcessInstance } from '../models/process-instance.model';
|
||||
import { ProcessService } from './../services/process.service';
|
||||
|
||||
declare let dialogPolyfill: any;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-process-instance-tasks, activiti-process-instance-tasks',
|
||||
templateUrl: './process-instance-tasks.component.html',
|
||||
@@ -53,8 +52,8 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
|
||||
message: string;
|
||||
processId: string;
|
||||
|
||||
@ViewChild('dialog')
|
||||
dialog: any;
|
||||
// @ViewChild('dialog')
|
||||
// dialog: any;
|
||||
|
||||
@ViewChild('startDialog')
|
||||
startDialog: any;
|
||||
@@ -66,7 +65,8 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
|
||||
taskClick: EventEmitter<TaskDetailsEvent> = new EventEmitter<TaskDetailsEvent>();
|
||||
|
||||
constructor(private activitiProcess: ProcessService,
|
||||
private logService: LogService) {
|
||||
private logService: LogService,
|
||||
private dialog: MdDialog) {
|
||||
this.task$ = new Observable<TaskDetailsModel>(observer => this.taskObserver = observer).share();
|
||||
this.completedTask$ = new Observable<TaskDetailsModel>(observer => this.completedTaskObserver = observer).share();
|
||||
}
|
||||
@@ -161,19 +161,11 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
showStartDialog() {
|
||||
if (!this.startDialog.nativeElement.showModal) {
|
||||
dialogPolyfill.registerDialog(this.startDialog.nativeElement);
|
||||
}
|
||||
|
||||
if (this.startDialog) {
|
||||
this.startDialog.nativeElement.showModal();
|
||||
}
|
||||
this.dialog.open(this.startDialog, { height: '500px', width: '700px' });
|
||||
}
|
||||
|
||||
closeSartDialog() {
|
||||
if (this.startDialog) {
|
||||
this.startDialog.nativeElement.close();
|
||||
}
|
||||
this.dialog.closeAll();
|
||||
}
|
||||
|
||||
onRefreshClicked() {
|
||||
@@ -181,8 +173,6 @@ export class ProcessInstanceTasksComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
onFormContentClick() {
|
||||
if (this.startDialog) {
|
||||
this.startDialog.nativeElement.close();
|
||||
}
|
||||
this.closeSartDialog();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
.adf-variable-list-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
|
||||
.no-content-message {
|
||||
font-family: Muli;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
opacity: 0.54;
|
||||
color: #000;
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
<div id="setVariableBtn" (click)="showAddDialog()" class="icon material-icons">add</div>
|
||||
<div class="mdl-tooltip" for="setVariableBtn">
|
||||
{{ 'DETAILS.VARIABLES.BUTTON.ADD' |translate }}
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[actions]="true"
|
||||
[loading]="isLoading"
|
||||
(showRowActionsMenu)="onShowRowActionsMenu($event)"
|
||||
(executeRowAction)="onExecuteRowAction($event)">
|
||||
<loading-content-template>
|
||||
<ng-template>
|
||||
<!--Add your custom loading template here-->
|
||||
<md-spinner
|
||||
class="adf-variable-list-loading-margin"
|
||||
[color]="'primary'"
|
||||
[mode]="'indeterminate'">
|
||||
</md-spinner>
|
||||
</ng-template>
|
||||
</loading-content-template>
|
||||
<no-content-template>
|
||||
<!--Add your custom empty template here-->
|
||||
<ng-template>
|
||||
<div class="no-content-message">
|
||||
{{ 'DETAILS.VARIABLES.NONE' | translate }}
|
||||
</div>
|
||||
</ng-template>
|
||||
</no-content-template>
|
||||
</adf-datatable>
|
||||
</div>
|
||||
|
||||
<dialog class="mdl-dialog add-dialog" #addDialog>
|
||||
<h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ADD_DIALOG.TITLE' |translate }}</h4>
|
||||
<div class="mdl-dialog__content">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label class="mdl-textfield__label" for="addVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="addVariableName" />
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label class="mdl-textfield__label" for="addVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="addVariableValue" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" (click)="add()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
|
||||
<button type="button" (click)="closeAddDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
<dialog class="mdl-dialog edit-dialog" #editDialog>
|
||||
<h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.EDIT_DIALOG.TITLE' |translate }}</h4>
|
||||
<div class="mdl-dialog__content">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label class="mdl-textfield__label" for="editVariableName">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.NAME' |translate }}</label>
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableName" [readonly]="true" />
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label class="mdl-textfield__label" for="editVariableValue">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.VALUE' |translate }}</label>
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableValue" id="editVariableValue" />
|
||||
</div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||
<label class="mdl-textfield__label" for="editVariableScope">{{ 'DETAILS.VARIABLES.ADD_DIALOG.LABEL.SCOPE' |translate }}</label>
|
||||
<input class="mdl-textfield__input" type="text" [(ngModel)]="variableName" id="editVariableScope" [readonly]="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" (click)="edit()" class="mdl-button">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.SET' |translate }}</button>
|
||||
<button type="button" (click)="closeEditDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.CANCEL' |translate }}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
|
||||
<dialog class="mdl-dialog error-dialog" #errorDialog>
|
||||
<h4 class="mdl-dialog__title">{{ 'DETAILS.VARIABLES.ERROR_DIALOG.TITLE' |translate }}</h4>
|
||||
<div class="mdl-dialog__content">
|
||||
<p>{{ 'DETAILS.VARIABLES.ERROR_DIALOG.DESCRIPTION' |translate }}</p>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" (click)="closeErrorDialog()" class="mdl-button close">{{ 'DETAILS.VARIABLES.DIALOG.BUTTON.OK' |translate }}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
@@ -1,352 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { DebugElement, SimpleChange } from '@angular/core';
|
||||
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
|
||||
import { MdProgressSpinnerModule } from '@angular/material';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
|
||||
import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
|
||||
import { DataTableModule, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
|
||||
import { TranslationMock } from './../assets/translation.service.mock';
|
||||
import { ProcessService } from './../services/process.service';
|
||||
import { ProcessInstanceVariablesComponent } from './process-instance-variables.component';
|
||||
|
||||
describe('ProcessInstanceVariablesComponent', () => {
|
||||
|
||||
let componentHandler: any;
|
||||
let service: ProcessService;
|
||||
let component: ProcessInstanceVariablesComponent;
|
||||
let fixture: ComponentFixture<ProcessInstanceVariablesComponent>;
|
||||
let getVariablesSpy: jasmine.Spy;
|
||||
let createOrUpdateProcessInstanceVariablesSpy: jasmine.Spy;
|
||||
let deleteProcessInstanceVariableSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [
|
||||
CoreModule.forRoot(),
|
||||
DataTableModule.forRoot(),
|
||||
MdProgressSpinnerModule
|
||||
],
|
||||
declarations: [
|
||||
ProcessInstanceVariablesComponent
|
||||
],
|
||||
providers: [
|
||||
{ provide: AlfrescoTranslationService, useClass: TranslationMock },
|
||||
ProcessService
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
fixture = TestBed.createComponent(ProcessInstanceVariablesComponent);
|
||||
component = fixture.componentInstance;
|
||||
service = fixture.debugElement.injector.get(ProcessService);
|
||||
|
||||
getVariablesSpy = spyOn(service, 'getProcessInstanceVariables').and.returnValue(Observable.of([{
|
||||
name: 'var1',
|
||||
value: 'Test1'
|
||||
}, {
|
||||
name: 'var2',
|
||||
value: 'Test2'
|
||||
}, {
|
||||
name: 'var3',
|
||||
value: 'Test3'
|
||||
}]));
|
||||
createOrUpdateProcessInstanceVariablesSpy = spyOn(service, 'createOrUpdateProcessInstanceVariables').and.returnValue(Observable.of({id: 123, message: 'Test'}));
|
||||
deleteProcessInstanceVariableSpy = spyOn(service, 'deleteProcessInstanceVariable').and.returnValue(Observable.of());
|
||||
|
||||
componentHandler = jasmine.createSpyObj('componentHandler', [
|
||||
'upgradeAllRegistered',
|
||||
'upgradeElement'
|
||||
]);
|
||||
window['componentHandler'] = componentHandler;
|
||||
});
|
||||
|
||||
it('should load variables when processInstanceId specified', () => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
expect(getVariablesSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs loading variables', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
getVariablesSpy.and.returnValue(Observable.throw({}));
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should not fetch variables when no processInstanceId is specified', () => {
|
||||
fixture.detectChanges();
|
||||
expect(getVariablesSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should use the default schemaColumn as default', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.data.getColumns()).toBeDefined();
|
||||
expect(component.data.getColumns().length).toEqual(3);
|
||||
});
|
||||
|
||||
it('should use the schemaColumn passed in input', () => {
|
||||
component.data = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[
|
||||
{type: 'text', key: 'fake-id', title: 'Name'}
|
||||
]
|
||||
);
|
||||
|
||||
fixture.detectChanges();
|
||||
expect(component.data.getColumns()).toBeDefined();
|
||||
expect(component.data.getColumns().length).toEqual(1);
|
||||
});
|
||||
|
||||
it('should display list when the process has variables', fakeAsync(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
tick();
|
||||
let datatable: DebugElement = fixture.debugElement.query(By.css('adf-datatable'));
|
||||
expect(datatable).not.toBeNull();
|
||||
}));
|
||||
|
||||
it('should display correct number of data table rows when the process has variables', fakeAsync(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
tick();
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.queryAll(By.css('tbody tr')).length).toBe(3);
|
||||
}));
|
||||
|
||||
describe('change detection', () => {
|
||||
|
||||
let change = new SimpleChange('123', '456', true);
|
||||
let nullChange = new SimpleChange('123', null, true);
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
getVariablesSpy.calls.reset();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should fetch new variables when processInstanceId changed', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': change });
|
||||
expect(getVariablesSpy).toHaveBeenCalledWith('456');
|
||||
});
|
||||
|
||||
it('should NOT fetch new variables when empty changeset made', () => {
|
||||
component.ngOnChanges({});
|
||||
expect(getVariablesSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should NOT fetch new variables when processInstanceId changed to null', () => {
|
||||
component.ngOnChanges({ 'processInstanceId': nullChange });
|
||||
expect(getVariablesSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Add variable', () => {
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
}));
|
||||
|
||||
it('should display a dialog to the user when the Add button clicked', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
|
||||
let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
|
||||
component.showAddDialog();
|
||||
expect(showSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call service to add a variable', () => {
|
||||
component.showAddDialog();
|
||||
component.variableName = 'Test var';
|
||||
component.variableValue = 'Test 222';
|
||||
component.add();
|
||||
let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
|
||||
let sentProcessId = serviceArgs[0];
|
||||
let sentProcesses = serviceArgs[1];
|
||||
expect(serviceArgs.length).toBe(2);
|
||||
expect(sentProcessId).toBe('123');
|
||||
expect(sentProcesses.length).toBe(1);
|
||||
expect(sentProcesses[0].name).toBe('Test var');
|
||||
expect(sentProcesses[0].value).toBe('Test 222');
|
||||
expect(sentProcesses[0].scope).toBe('global');
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs adding the variable', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
|
||||
component.showAddDialog();
|
||||
component.variableName = 'Test var';
|
||||
component.variableValue = 'Test 222';
|
||||
component.add();
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should close add dialog when close button clicked', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.add-dialog')).nativeElement;
|
||||
let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
|
||||
component.showAddDialog();
|
||||
component.closeAddDialog();
|
||||
expect(closeSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Edit variable', () => {
|
||||
|
||||
let fakeVariable = {
|
||||
name: 'fakeVar',
|
||||
value: 'my value 4',
|
||||
scope: 'global'
|
||||
};
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
}));
|
||||
|
||||
it('should display a dialog to the user when the Edit action clicked', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
|
||||
let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
|
||||
component.onExecuteRowAction({
|
||||
args: {
|
||||
row: new ObjectDataRow(fakeVariable),
|
||||
action: {
|
||||
id: 'edit'
|
||||
}
|
||||
}
|
||||
});
|
||||
expect(showSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call service to edit a variable', () => {
|
||||
component.showEditDialog(new ObjectDataRow(fakeVariable));
|
||||
component.variableValue = 'Test 222';
|
||||
component.edit();
|
||||
let serviceArgs = createOrUpdateProcessInstanceVariablesSpy.calls.mostRecent().args;
|
||||
let sentProcessId = serviceArgs[0];
|
||||
let sentProcesses = serviceArgs[1];
|
||||
expect(serviceArgs.length).toBe(2);
|
||||
expect(sentProcessId).toBe('123');
|
||||
expect(sentProcesses.length).toBe(1);
|
||||
expect(sentProcesses[0].name).toBe(fakeVariable.name);
|
||||
expect(sentProcesses[0].value).toBe('Test 222');
|
||||
expect(sentProcesses[0].scope).toBe(fakeVariable.scope);
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs editing the variable', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
createOrUpdateProcessInstanceVariablesSpy.and.returnValue(Observable.throw({}));
|
||||
component.showEditDialog(new ObjectDataRow(fakeVariable));
|
||||
component.variableName = 'Test var';
|
||||
component.variableValue = 'Test 222';
|
||||
component.edit();
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should close edit dialog when close button clicked', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.edit-dialog')).nativeElement;
|
||||
let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
|
||||
component.showEditDialog(new ObjectDataRow(fakeVariable));
|
||||
component.closeEditDialog();
|
||||
expect(closeSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Delete variable', () => {
|
||||
|
||||
let fakeVariable = {
|
||||
name: 'fakeVar',
|
||||
value: 'my value 4',
|
||||
scope: 'global'
|
||||
};
|
||||
|
||||
let deleteAction = {
|
||||
id: 'delete'
|
||||
};
|
||||
|
||||
beforeEach(async(() => {
|
||||
component.processInstanceId = '123';
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable();
|
||||
}));
|
||||
|
||||
it('should call service to delete the variable', () => {
|
||||
component.variableValue = 'Test 222';
|
||||
component.onExecuteRowAction({
|
||||
args: {
|
||||
row: new ObjectDataRow(fakeVariable),
|
||||
action: deleteAction
|
||||
}
|
||||
});
|
||||
let serviceArgs = deleteProcessInstanceVariableSpy.calls.mostRecent().args;
|
||||
let sentProcessId = serviceArgs[0];
|
||||
let sentVariableName = serviceArgs[1];
|
||||
expect(serviceArgs.length).toBe(2);
|
||||
expect(sentProcessId).toBe('123');
|
||||
expect(sentVariableName).toBe(fakeVariable.name);
|
||||
});
|
||||
|
||||
it('should emit an error when an error occurs deleting the variable', () => {
|
||||
let emitSpy = spyOn(component.error, 'emit');
|
||||
deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
|
||||
component.onExecuteRowAction({
|
||||
args: {
|
||||
row: new ObjectDataRow(fakeVariable),
|
||||
action: deleteAction
|
||||
}
|
||||
});
|
||||
expect(emitSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should display error dialog when an error is triggered', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
|
||||
let showSpy: jasmine.Spy = spyOn(dialogEl, 'showModal');
|
||||
deleteProcessInstanceVariableSpy.and.returnValue(Observable.throw({}));
|
||||
component.onExecuteRowAction({
|
||||
args: {
|
||||
row: new ObjectDataRow(fakeVariable),
|
||||
action: deleteAction
|
||||
}
|
||||
});
|
||||
expect(showSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should close error dialog when close button clicked', () => {
|
||||
let dialogEl = fixture.debugElement.query(By.css('.mdl-dialog.error-dialog')).nativeElement;
|
||||
let closeSpy: jasmine.Spy = spyOn(dialogEl, 'close');
|
||||
component.showErrorDialog();
|
||||
component.closeErrorDialog();
|
||||
expect(closeSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,270 +0,0 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, DebugElement, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
|
||||
|
||||
import { DataCellEvent, DataTableAdapter, ObjectDataRow, ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
|
||||
import { ProcessInstanceVariable } from './../models/process-instance-variable.model';
|
||||
import { ProcessService } from './../services/process.service';
|
||||
|
||||
declare let dialogPolyfill: any;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-process-instance-variables, activiti-process-instance-variables',
|
||||
templateUrl: './process-instance-variables.component.html',
|
||||
styleUrls: ['./process-instance-variables.component.css'],
|
||||
providers: [ProcessService]
|
||||
})
|
||||
export class ProcessInstanceVariablesComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
processInstanceId: string;
|
||||
|
||||
@Input()
|
||||
data: DataTableAdapter;
|
||||
|
||||
@Output()
|
||||
error: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
@ViewChild('addDialog')
|
||||
addDialog: DebugElement;
|
||||
|
||||
@ViewChild('editDialog')
|
||||
editDialog: DebugElement;
|
||||
|
||||
@ViewChild('errorDialog')
|
||||
errorDialog: DebugElement;
|
||||
|
||||
private defaultSchemaColumn: any[] = [
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'value', title: 'Value', sortable: true},
|
||||
{type: 'text', key: 'scope', title: 'Scope', sortable: true}
|
||||
];
|
||||
|
||||
variableName: string;
|
||||
variableValue: string;
|
||||
variableScope: string;
|
||||
|
||||
isLoading: boolean = true;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param translate Translation service
|
||||
* @param activitiProcess Process service
|
||||
*/
|
||||
constructor(private activitiProcess: ProcessService) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (!this.data) {
|
||||
this.data = this.initDefaultSchemaColumns();
|
||||
}
|
||||
if (this.processInstanceId) {
|
||||
this.getProcessInstanceVariables(this.processInstanceId);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
let processInstanceId = changes['processInstanceId'];
|
||||
if (processInstanceId) {
|
||||
if (processInstanceId.currentValue) {
|
||||
this.getProcessInstanceVariables(processInstanceId.currentValue);
|
||||
} else {
|
||||
this.resetVariables();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the list is empty
|
||||
* @returns {ObjectDataTableAdapter|boolean}
|
||||
*/
|
||||
isListEmpty(): boolean {
|
||||
return this.data === undefined ||
|
||||
(this.data && this.data.getRows() && this.data.getRows().length === 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return an initDefaultSchemaColumns instance with the default Schema Column
|
||||
* @returns {ObjectDataTableAdapter}
|
||||
*/
|
||||
private initDefaultSchemaColumns(): ObjectDataTableAdapter {
|
||||
return new ObjectDataTableAdapter(
|
||||
[],
|
||||
this.defaultSchemaColumn
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create an array of ObjectDataRow
|
||||
* @param instances
|
||||
* @returns {ObjectDataRow[]}
|
||||
*/
|
||||
private createDataRow(instances: ProcessInstanceVariable[]): ObjectDataRow[] {
|
||||
let instancesRows: ObjectDataRow[] = [];
|
||||
instances.forEach((row) => {
|
||||
instancesRows.push(new ObjectDataRow({
|
||||
name: row.name,
|
||||
value: row.value,
|
||||
scope: row.scope
|
||||
}));
|
||||
});
|
||||
return instancesRows;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the instances list
|
||||
*
|
||||
* @param instances
|
||||
*/
|
||||
private renderInstances(instances: any[]) {
|
||||
this.data.setRows(instances);
|
||||
}
|
||||
|
||||
private getProcessInstanceVariables(processInstanceId: string) {
|
||||
if (processInstanceId) {
|
||||
this.isLoading = true;
|
||||
this.activitiProcess.getProcessInstanceVariables(processInstanceId).subscribe(
|
||||
(res: ProcessInstanceVariable[]) => {
|
||||
let instancesRow = this.createDataRow(res);
|
||||
this.renderInstances(instancesRow);
|
||||
this.isLoading = false;
|
||||
},
|
||||
(err) => {
|
||||
this.error.emit(err);
|
||||
this.isLoading = false;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.resetVariables();
|
||||
}
|
||||
}
|
||||
|
||||
private resetVariables() {
|
||||
if (this.data) {
|
||||
this.data.setRows([]);
|
||||
}
|
||||
}
|
||||
|
||||
private polyfillDialog(dialog: DebugElement) {
|
||||
if (!dialog.nativeElement.showModal) {
|
||||
dialogPolyfill.registerDialog(dialog.nativeElement);
|
||||
}
|
||||
}
|
||||
|
||||
public showAddDialog() {
|
||||
this.resetForm();
|
||||
this.polyfillDialog(this.addDialog);
|
||||
this.addDialog.nativeElement.showModal();
|
||||
}
|
||||
|
||||
public showEditDialog(row: ObjectDataRow) {
|
||||
this.variableName = row.getValue('name');
|
||||
this.variableValue = row.getValue('value');
|
||||
this.variableScope = row.getValue('scope');
|
||||
this.polyfillDialog(this.editDialog);
|
||||
this.editDialog.nativeElement.showModal();
|
||||
}
|
||||
|
||||
public showErrorDialog() {
|
||||
this.polyfillDialog(this.errorDialog);
|
||||
this.errorDialog.nativeElement.showModal();
|
||||
}
|
||||
|
||||
public add() {
|
||||
this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
|
||||
name: this.variableName,
|
||||
value: this.variableValue,
|
||||
scope: this.variableScope
|
||||
})]).subscribe(
|
||||
(res: ProcessInstanceVariable[]) => {
|
||||
this.getProcessInstanceVariables(this.processInstanceId);
|
||||
this.resetForm();
|
||||
},
|
||||
(err) => {
|
||||
this.showErrorDialog();
|
||||
this.error.emit(err);
|
||||
}
|
||||
);
|
||||
this.closeAddDialog();
|
||||
}
|
||||
|
||||
public edit() {
|
||||
this.activitiProcess.createOrUpdateProcessInstanceVariables(this.processInstanceId, [new ProcessInstanceVariable({
|
||||
name: this.variableName,
|
||||
value: this.variableValue,
|
||||
scope: this.variableScope
|
||||
})]).subscribe(
|
||||
(res: ProcessInstanceVariable[]) => {
|
||||
this.getProcessInstanceVariables(this.processInstanceId);
|
||||
this.resetForm();
|
||||
},
|
||||
(err) => {
|
||||
this.showErrorDialog();
|
||||
this.error.emit(err);
|
||||
}
|
||||
);
|
||||
this.closeEditDialog();
|
||||
}
|
||||
|
||||
public closeAddDialog() {
|
||||
this.addDialog.nativeElement.close();
|
||||
}
|
||||
|
||||
public closeEditDialog() {
|
||||
this.editDialog.nativeElement.close();
|
||||
}
|
||||
|
||||
public closeErrorDialog() {
|
||||
this.errorDialog.nativeElement.close();
|
||||
}
|
||||
|
||||
private resetForm() {
|
||||
this.variableName = '';
|
||||
this.variableValue = '';
|
||||
this.variableScope = 'global';
|
||||
}
|
||||
|
||||
private onDeleteVariable(row: ObjectDataRow) {
|
||||
this.activitiProcess.deleteProcessInstanceVariable(this.processInstanceId, row.getValue('name')).subscribe(() => {
|
||||
this.getProcessInstanceVariables(this.processInstanceId);
|
||||
},
|
||||
(err) => {
|
||||
this.showErrorDialog();
|
||||
this.error.emit(err);
|
||||
});
|
||||
}
|
||||
|
||||
onExecuteRowAction(event) {
|
||||
let row: ObjectDataRow = event.args.row;
|
||||
let action = event.args.action;
|
||||
if (action && action.id === 'delete') {
|
||||
this.onDeleteVariable(row);
|
||||
}
|
||||
if (action && action.id === 'edit') {
|
||||
this.showEditDialog(row);
|
||||
}
|
||||
}
|
||||
|
||||
onShowRowActionsMenu(event: DataCellEvent) {
|
||||
event.value.actions = [
|
||||
{ id: 'delete', title: 'Delete' },
|
||||
{ id: 'edit', title: 'Edit' }
|
||||
];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user