mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
[ADF-907] - Form reacts to data added in input (#2016)
* [ADF-907] Enable activiti form to react on value data changes * [ADF-907] - Form reacts to data added in input] * [ADF - 907] added mock json for form * [ADF-907] added new event of the form to the event list * [ADF - 907] Added return column to README * [ADF - 907] Added return column to README
This commit is contained in:
Vito
Eugenio Romano
@@ -2,14 +2,14 @@
|
|||||||
* @license
|
* @license
|
||||||
* Copyright 2016 Alfresco Software, Ltd.
|
* Copyright 2016 Alfresco Software, Ltd.
|
||||||
*
|
*
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||||
* you may not use this file except in compliance with the License.
|
* you may not use this file except in compliance with the License.
|
||||||
* You may obtain a copy of the License at
|
* You may obtain a copy of the License at
|
||||||
*
|
*
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*
|
*
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
@@ -17,6 +17,343 @@
|
|||||||
|
|
||||||
export class DemoForm {
|
export class DemoForm {
|
||||||
|
|
||||||
|
static getEasyForm(): any {
|
||||||
|
return {
|
||||||
|
'id': 1001,
|
||||||
|
'name': 'ISSUE_FORM',
|
||||||
|
'processDefinitionId': 'ISSUE_APP:1:2504',
|
||||||
|
'processDefinitionName': 'ISSUE_APP',
|
||||||
|
'processDefinitionKey': 'ISSUE_APP',
|
||||||
|
'taskId': '2510',
|
||||||
|
'taskDefinitionKey': 'sid-F67A2996-1684-4774-855A-4591490081FD',
|
||||||
|
'tabs': [],
|
||||||
|
'fields': [
|
||||||
|
{
|
||||||
|
'fieldType': 'ContainerRepresentation',
|
||||||
|
'id': '1498212398417',
|
||||||
|
'name': 'Label',
|
||||||
|
'type': 'container',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': false,
|
||||||
|
'options': null,
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': null,
|
||||||
|
'className': null,
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'sizeX': 2,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'numberOfColumns': 2,
|
||||||
|
'fields': {
|
||||||
|
'1': [
|
||||||
|
{
|
||||||
|
'fieldType': 'RestFieldRepresentation',
|
||||||
|
'id': 'label',
|
||||||
|
'name': 'Label',
|
||||||
|
'type': 'dropdown',
|
||||||
|
'value': 'Choose one...',
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': true,
|
||||||
|
'options': [
|
||||||
|
{
|
||||||
|
'id': 'empty',
|
||||||
|
'name': 'Choose one...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'option_1',
|
||||||
|
'name': 'test1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'option_2',
|
||||||
|
'name': 'test2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'option_3',
|
||||||
|
'name': 'test3'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': null,
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 2
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null,
|
||||||
|
'endpoint': null,
|
||||||
|
'requestHeaders': null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'fieldType': 'FormFieldRepresentation',
|
||||||
|
'id': 'Date',
|
||||||
|
'name': 'Date',
|
||||||
|
'type': 'date',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': null,
|
||||||
|
'options': null,
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': 'tab1',
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 2
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'fieldType': 'FormFieldRepresentation',
|
||||||
|
'id': 'label5',
|
||||||
|
'name': 'Label5',
|
||||||
|
'type': 'boolean',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': null,
|
||||||
|
'options': null,
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': 'tab1',
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 1
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'fieldType': 'FormFieldRepresentation',
|
||||||
|
'id': 'label6',
|
||||||
|
'name': 'Label6',
|
||||||
|
'type': 'boolean',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': null,
|
||||||
|
'options': null,
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': 'tab1',
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 1
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'fieldType': 'FormFieldRepresentation',
|
||||||
|
'id': 'label4',
|
||||||
|
'name': 'Label4',
|
||||||
|
'type': 'integer',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPattern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': null,
|
||||||
|
'options': null,
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': 'tab1',
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 2
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'fieldType': 'RestFieldRepresentation',
|
||||||
|
'id': 'label12',
|
||||||
|
'name': 'Label12',
|
||||||
|
'type': 'radio-buttons',
|
||||||
|
'value': null,
|
||||||
|
'required': false,
|
||||||
|
'readOnly': false,
|
||||||
|
'overrideId': false,
|
||||||
|
'colspan': 1,
|
||||||
|
'placeholder': null,
|
||||||
|
'minLength': 0,
|
||||||
|
'maxLength': 0,
|
||||||
|
'minValue': null,
|
||||||
|
'maxValue': null,
|
||||||
|
'regexPatt§12212ern': null,
|
||||||
|
'optionType': null,
|
||||||
|
'hasEmptyValue': null,
|
||||||
|
'options': [
|
||||||
|
{
|
||||||
|
'id': 'option_1',
|
||||||
|
'name': 'Option 1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id': 'option_2',
|
||||||
|
'name': 'Option 2'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'restUrl': null,
|
||||||
|
'restResponsePath': null,
|
||||||
|
'restIdProperty': null,
|
||||||
|
'restLabelProperty': null,
|
||||||
|
'tab': 'tab1',
|
||||||
|
'className': null,
|
||||||
|
'params': {
|
||||||
|
'existingColspan': 1,
|
||||||
|
'maxColspan': 2
|
||||||
|
},
|
||||||
|
'dateDisplayFormat': null,
|
||||||
|
'layout': {
|
||||||
|
'row': -1,
|
||||||
|
'column': -1,
|
||||||
|
'colspan': 1
|
||||||
|
},
|
||||||
|
'sizeX': 1,
|
||||||
|
'sizeY': 1,
|
||||||
|
'row': -1,
|
||||||
|
'col': -1,
|
||||||
|
'visibilityCondition': null,
|
||||||
|
'endpoint': null,
|
||||||
|
'requestHeaders': null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
'outcomes': [],
|
||||||
|
'javascriptEvents': [],
|
||||||
|
'className': '',
|
||||||
|
'style': '',
|
||||||
|
'customFieldTemplates': {},
|
||||||
|
'metadata': {},
|
||||||
|
'variables': [],
|
||||||
|
'customFieldsValueInfo': {},
|
||||||
|
'gridsterForm': false,
|
||||||
|
'globalDateFormat': 'D-M-YYYY'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
static getDefinition(): any {
|
static getDefinition(): any {
|
||||||
return {
|
return {
|
||||||
'id': 3003,
|
'id': 3003,
|
||||||
|
|||||||
@@ -1,3 +1,8 @@
|
|||||||
.form-container {
|
.form-container {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.store-form-container{
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,32 @@
|
|||||||
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||||
|
<header class="mdl-layout__header">
|
||||||
|
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
|
||||||
|
<a id="demo-form" href="#demo" class="mdl-layout__tab" [class.is-active]="activeTab === 'demo'" (click)="changeToDemoForm()">DEMO</a>
|
||||||
|
<a id="store-form" href="#store" class="mdl-layout__tab" [class.is-active]="activeTab === 'processes'" (click)="changeToStoreForm()">STORE</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="mdl-layout__content activiti">
|
||||||
|
<section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'demo'" id="demo">
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<activiti-form [form]="form">
|
<activiti-form [form]="form">
|
||||||
</activiti-form>
|
</activiti-form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="mdl-layout__tab-panel" [class.is-active]="activeTab === 'store'" id="store">
|
||||||
|
<span>FORM NAME TO VISUALIZE</span>
|
||||||
|
<input [(ngModel)]="formToLoadName" class="mdl-textfield__input" type="text" (ngModelChange)="loadForm()">
|
||||||
|
<div *ngIf="formToLoadName && formToLoadName !== '' " class="store-form-container">
|
||||||
|
<activiti-form [form]="form" [data]="restoredData" #storeForm>
|
||||||
|
</activiti-form>
|
||||||
|
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
|
||||||
|
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span> Please create in APS the form with the name you entered</span>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="showError">
|
||||||
|
<span> Form Name not valid or form not present</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -15,9 +15,12 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
|
||||||
import { FormModel, FormService } from 'ng2-activiti-form';
|
import { FormModel, FormService } from 'ng2-activiti-form';
|
||||||
import { DemoForm } from './demo-form';
|
import { DemoForm } from './demo-form';
|
||||||
|
import { ActivitiForm } from 'ng2-activiti-form';
|
||||||
|
|
||||||
|
declare var componentHandler;
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'form-demo',
|
selector: 'form-demo',
|
||||||
@@ -26,9 +29,17 @@ import { DemoForm } from './demo-form';
|
|||||||
'form-demo.component.css'
|
'form-demo.component.css'
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
export class FormDemoComponent implements OnInit {
|
export class FormDemoComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
|
@ViewChild(ActivitiForm)
|
||||||
|
activitiForm: ActivitiForm;
|
||||||
|
|
||||||
form: FormModel;
|
form: FormModel;
|
||||||
|
activeTab: string = 'demo';
|
||||||
|
storedData: any = {};
|
||||||
|
restoredData: any = {};
|
||||||
|
formToLoadName: string = null;
|
||||||
|
showError: boolean = false;
|
||||||
|
|
||||||
constructor(private formService: FormService) {
|
constructor(private formService: FormService) {
|
||||||
formService.executeOutcome.subscribe(e => {
|
formService.executeOutcome.subscribe(e => {
|
||||||
@@ -43,4 +54,69 @@ export class FormDemoComponent implements OnInit {
|
|||||||
console.log(form);
|
console.log(form);
|
||||||
this.form = form;
|
this.form = form;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
// workaround for MDL issues with dynamic components
|
||||||
|
if (componentHandler) {
|
||||||
|
componentHandler.upgradeAllRegistered();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
changeToStoreForm() {
|
||||||
|
this.activeTab = 'store';
|
||||||
|
this.showError = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
changeToDemoForm() {
|
||||||
|
this.activeTab = 'demo';
|
||||||
|
let formDefinitionJSON: any = DemoForm.getDefinition();
|
||||||
|
let demoForm = this.formService.parseForm(formDefinitionJSON);
|
||||||
|
this.form = demoForm;
|
||||||
|
}
|
||||||
|
|
||||||
|
store() {
|
||||||
|
this.clone(this.activitiForm.form.values, this.storedData);
|
||||||
|
console.log('DATA SAVED');
|
||||||
|
console.log(this.storedData);
|
||||||
|
console.log('DATA SAVED');
|
||||||
|
this.restoredData = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
restore() {
|
||||||
|
this.restoredData = this.storedData;
|
||||||
|
this.storedData = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
clone(objToCopyFrom, objToCopyTo) {
|
||||||
|
for (let attribute in objToCopyFrom) {
|
||||||
|
if (objToCopyFrom.hasOwnProperty(attribute)) {
|
||||||
|
objToCopyTo[attribute] = objToCopyFrom[attribute];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return objToCopyTo;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadForm() {
|
||||||
|
if (this.formToLoadName) {
|
||||||
|
this.showError = false;
|
||||||
|
this.formService
|
||||||
|
.getFormDefinitionByName(this.formToLoadName)
|
||||||
|
.debounceTime(7000)
|
||||||
|
.subscribe(
|
||||||
|
id => {
|
||||||
|
this.formService.getFormDefinitionById(id).subscribe(
|
||||||
|
form => {
|
||||||
|
this.form = this.formService.parseForm((form);
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
this.showError = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
this.showError = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -174,13 +174,14 @@ The recommended set of properties can be found in the following table:
|
|||||||
|
|
||||||
### Events
|
### Events
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Return Type | Description |
|
||||||
| --- | --- |
|
| --- | --- | --- |
|
||||||
| formLoaded | Invoked when form is loaded or reloaded. |
|
| formLoaded | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is loaded or reloaded. |
|
||||||
| formSaved | Invoked when form is submitted with `Save` or custom outcomes. |
|
| formSaved | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Save` or custom outcomes. |
|
||||||
| formCompleted | Invoked when form is submitted with `Complete` outcome. |
|
| formCompleted | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form is submitted with `Complete` outcome. |
|
||||||
| executeOutcome | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
| formDataRefreshed | [FormModel](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form.model.ts) | Invoked when form values are refreshed due a data property change |
|
||||||
| onError | Invoked at any error |
|
| executeOutcome | [FormOutcomeEvent](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-activiti-form/src/components/widgets/core/form-outcome-event.model.ts) | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
||||||
|
| onError | any | Invoked at any error |
|
||||||
|
|
||||||
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
|
All `form*` events receive an instance of the `FormModel` as event argument for ease of development:
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,275 @@
|
|||||||
|
/*!
|
||||||
|
* @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.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export let fakeForm = {
|
||||||
|
id: 1001,
|
||||||
|
name: 'ISSUE_FORM',
|
||||||
|
processDefinitionId: 'ISSUE_APP:1:2504',
|
||||||
|
processDefinitionName: 'ISSUE_APP',
|
||||||
|
processDefinitionKey: 'ISSUE_APP',
|
||||||
|
taskId: '7506',
|
||||||
|
taskDefinitionKey: 'sid-F67A2996-1684-4774-855A-4591490081FD',
|
||||||
|
tabs: [],
|
||||||
|
fields: [
|
||||||
|
{
|
||||||
|
fieldType: 'ContainerRepresentation',
|
||||||
|
id: '1498212398417',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
value: null,
|
||||||
|
required: false,
|
||||||
|
readOnly: false,
|
||||||
|
overrideId: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
regexPattern: null,
|
||||||
|
optionType: null,
|
||||||
|
hasEmptyValue: null,
|
||||||
|
options: null,
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
tab: null,
|
||||||
|
className: null,
|
||||||
|
dateDisplayFormat: null,
|
||||||
|
layout: null,
|
||||||
|
sizeX: 2,
|
||||||
|
sizeY: 1,
|
||||||
|
row: -1,
|
||||||
|
col: -1,
|
||||||
|
visibilityCondition: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
1: [
|
||||||
|
{
|
||||||
|
fieldType: 'RestFieldRepresentation',
|
||||||
|
id: 'label',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'dropdown',
|
||||||
|
value: 'Choose one...',
|
||||||
|
required: false,
|
||||||
|
readOnly: false,
|
||||||
|
overrideId: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
regexPattern: null,
|
||||||
|
optionType: null,
|
||||||
|
hasEmptyValue: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
id: 'empty',
|
||||||
|
name: 'Choose one...'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'option_1',
|
||||||
|
name: 'test1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'option_2',
|
||||||
|
name: 'test2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'option_3',
|
||||||
|
name: 'test3'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
tab: null,
|
||||||
|
className: null,
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 2
|
||||||
|
},
|
||||||
|
dateDisplayFormat: null,
|
||||||
|
layout: {
|
||||||
|
row: -1,
|
||||||
|
column: -1,
|
||||||
|
colspan: 1
|
||||||
|
},
|
||||||
|
sizeX: 1,
|
||||||
|
sizeY: 1,
|
||||||
|
row: -1,
|
||||||
|
col: -1,
|
||||||
|
visibilityCondition: null,
|
||||||
|
endpoint: null,
|
||||||
|
requestHeaders: null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
2: [
|
||||||
|
{
|
||||||
|
fieldType: 'RestFieldRepresentation',
|
||||||
|
id: 'raduio',
|
||||||
|
name: 'raduio',
|
||||||
|
type: 'radio-buttons',
|
||||||
|
value: null,
|
||||||
|
required: false,
|
||||||
|
readOnly: false,
|
||||||
|
overrideId: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
regexPattern: null,
|
||||||
|
optionType: null,
|
||||||
|
hasEmptyValue: null,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
id: 'option_1',
|
||||||
|
name: 'Option 1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'option_2',
|
||||||
|
name: 'Option 2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'option_3',
|
||||||
|
name: 'Option 3'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
tab: null,
|
||||||
|
className: null,
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 1
|
||||||
|
},
|
||||||
|
dateDisplayFormat: null,
|
||||||
|
layout: {
|
||||||
|
row: -1,
|
||||||
|
column: -1,
|
||||||
|
colspan: 1
|
||||||
|
},
|
||||||
|
sizeX: 1,
|
||||||
|
sizeY: 2,
|
||||||
|
row: -1,
|
||||||
|
col: -1,
|
||||||
|
visibilityCondition: null,
|
||||||
|
endpoint: null,
|
||||||
|
requestHeaders: null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldType: 'ContainerRepresentation',
|
||||||
|
id: '1498212413062',
|
||||||
|
name: 'Label',
|
||||||
|
type: 'container',
|
||||||
|
value: null,
|
||||||
|
required: false,
|
||||||
|
readOnly: false,
|
||||||
|
overrideId: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
regexPattern: null,
|
||||||
|
optionType: null,
|
||||||
|
hasEmptyValue: null,
|
||||||
|
options: null,
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
tab: null,
|
||||||
|
className: null,
|
||||||
|
dateDisplayFormat: null,
|
||||||
|
layout: null,
|
||||||
|
sizeX: 2,
|
||||||
|
sizeY: 1,
|
||||||
|
row: -1,
|
||||||
|
col: -1,
|
||||||
|
visibilityCondition: null,
|
||||||
|
numberOfColumns: 2,
|
||||||
|
fields: {
|
||||||
|
1: [
|
||||||
|
{
|
||||||
|
fieldType: 'FormFieldRepresentation',
|
||||||
|
id: 'date',
|
||||||
|
name: 'date',
|
||||||
|
type: 'date',
|
||||||
|
value: null,
|
||||||
|
required: false,
|
||||||
|
readOnly: false,
|
||||||
|
overrideId: false,
|
||||||
|
colspan: 1,
|
||||||
|
placeholder: null,
|
||||||
|
minLength: 0,
|
||||||
|
maxLength: 0,
|
||||||
|
minValue: null,
|
||||||
|
maxValue: null,
|
||||||
|
regexPattern: null,
|
||||||
|
optionType: null,
|
||||||
|
hasEmptyValue: null,
|
||||||
|
options: null,
|
||||||
|
restUrl: null,
|
||||||
|
restResponsePath: null,
|
||||||
|
restIdProperty: null,
|
||||||
|
restLabelProperty: null,
|
||||||
|
tab: null,
|
||||||
|
className: null,
|
||||||
|
params: {
|
||||||
|
existingColspan: 1,
|
||||||
|
maxColspan: 2
|
||||||
|
},
|
||||||
|
dateDisplayFormat: null,
|
||||||
|
layout: {
|
||||||
|
row: -1,
|
||||||
|
column: -1,
|
||||||
|
colspan: 1
|
||||||
|
},
|
||||||
|
sizeX: 1,
|
||||||
|
sizeY: 1,
|
||||||
|
row: -1,
|
||||||
|
col: -1,
|
||||||
|
visibilityCondition: null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
2: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
outcomes: [],
|
||||||
|
javascriptEvents: [],
|
||||||
|
className: '',
|
||||||
|
style: '',
|
||||||
|
customFieldTemplates: {},
|
||||||
|
metadata: {},
|
||||||
|
variables: [],
|
||||||
|
customFieldsValueInfo: {},
|
||||||
|
gridsterForm: false,
|
||||||
|
globalDateFormat: 'D-M-YYYY'
|
||||||
|
};
|
||||||
@@ -23,6 +23,7 @@ import { FormModel, FormOutcomeModel, FormFieldModel, FormOutcomeEvent, FormFiel
|
|||||||
import { FormService } from './../services/form.service';
|
import { FormService } from './../services/form.service';
|
||||||
import { WidgetVisibilityService } from './../services/widget-visibility.service';
|
import { WidgetVisibilityService } from './../services/widget-visibility.service';
|
||||||
import { NodeService } from './../services/node.service';
|
import { NodeService } from './../services/node.service';
|
||||||
|
import { fakeForm } from '../assets/activiti-form.component.mock';
|
||||||
|
|
||||||
describe('ActivitiForm', () => {
|
describe('ActivitiForm', () => {
|
||||||
|
|
||||||
@@ -814,4 +815,30 @@ describe('ActivitiForm', () => {
|
|||||||
formComponent.onOutcomeClicked(outcome);
|
formComponent.onOutcomeClicked(outcome);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should refresh form values when data is changed', () => {
|
||||||
|
formComponent.form = new FormModel(fakeForm);
|
||||||
|
let formFields = formComponent.form.getFormFields();
|
||||||
|
|
||||||
|
let labelField = formFields.find(field => field.id === 'label');
|
||||||
|
let radioField = formFields.find(field => field.id === 'raduio');
|
||||||
|
expect(labelField.value).toBe('empty');
|
||||||
|
expect(radioField.value).toBeNull();
|
||||||
|
|
||||||
|
let formValues: any = {};
|
||||||
|
formValues.label = {
|
||||||
|
id: 'option_1',
|
||||||
|
name: 'test1'
|
||||||
|
};
|
||||||
|
formValues.raduio = { id: 'option_1', name: 'Option 1' };
|
||||||
|
let change = new SimpleChange(null, formValues, false);
|
||||||
|
formComponent.data = formValues;
|
||||||
|
formComponent.ngOnChanges({ 'data': change });
|
||||||
|
|
||||||
|
formFields = formComponent.form.getFormFields();
|
||||||
|
labelField = formFields.find(field => field.id === 'label');
|
||||||
|
radioField = formFields.find(field => field.id === 'raduio');
|
||||||
|
expect(labelField.value).toBe('option_1');
|
||||||
|
expect(radioField.value).toBe('option_1');
|
||||||
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -100,6 +100,9 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
|
|||||||
@Output()
|
@Output()
|
||||||
formLoaded: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
formLoaded: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
formDataRefreshed: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||||
|
|
||||||
@Output()
|
@Output()
|
||||||
executeOutcome: EventEmitter<FormOutcomeEvent> = new EventEmitter<FormOutcomeEvent>();
|
executeOutcome: EventEmitter<FormOutcomeEvent> = new EventEmitter<FormOutcomeEvent>();
|
||||||
|
|
||||||
@@ -202,6 +205,12 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
|
|||||||
this.loadFormForEcmNode();
|
this.loadFormForEcmNode();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let data = changes['data'];
|
||||||
|
if (data && data.currentValue) {
|
||||||
|
this.refreshFormData();
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -424,6 +433,12 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private refreshFormData() {
|
||||||
|
this.form = new FormModel(this.form.json, this.data, this.readOnly, this.formService);
|
||||||
|
this.onFormLoaded(this.form);
|
||||||
|
this.onFormDataRefreshed(this.form);
|
||||||
|
}
|
||||||
|
|
||||||
private loadFormForEcmNode(): void {
|
private loadFormForEcmNode(): void {
|
||||||
this.nodeService.getNodeMetadata(this.nodeId).subscribe(data => {
|
this.nodeService.getNodeMetadata(this.nodeId).subscribe(data => {
|
||||||
this.data = data.metadata;
|
this.data = data.metadata;
|
||||||
@@ -471,6 +486,11 @@ export class ActivitiForm implements OnInit, AfterViewChecked, OnChanges {
|
|||||||
this.formService.formLoaded.next(new FormEvent(form));
|
this.formService.formLoaded.next(new FormEvent(form));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected onFormDataRefreshed(form: FormModel) {
|
||||||
|
this.formDataRefreshed.emit(form);
|
||||||
|
this.formService.formDataRefreshed.next(new FormEvent(form));
|
||||||
|
}
|
||||||
|
|
||||||
protected onTaskSaved(form: FormModel) {
|
protected onTaskSaved(form: FormModel) {
|
||||||
this.formSaved.emit(form);
|
this.formSaved.emit(form);
|
||||||
this.formService.taskSaved.next(new FormEvent(form));
|
this.formService.taskSaved.next(new FormEvent(form));
|
||||||
|
|||||||
@@ -203,7 +203,11 @@ export class FormModel {
|
|||||||
for (let field of this.getFormFields()) {
|
for (let field of this.getFormFields()) {
|
||||||
if (data[field.id]) {
|
if (data[field.id]) {
|
||||||
field.json.value = data[field.id];
|
field.json.value = data[field.id];
|
||||||
field.value = data[field.id];
|
field.value = field.parseValue(field.json);
|
||||||
|
if (field.type === FormFieldTypes.DROPDOWN ||
|
||||||
|
field.type === FormFieldTypes.RADIO_BUTTONS) {
|
||||||
|
field.value = data[field.id].id;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ export class FormService {
|
|||||||
static GENERIC_ERROR_MESSAGE: string = 'Server error';
|
static GENERIC_ERROR_MESSAGE: string = 'Server error';
|
||||||
|
|
||||||
formLoaded: Subject<FormEvent> = new Subject<FormEvent>();
|
formLoaded: Subject<FormEvent> = new Subject<FormEvent>();
|
||||||
|
formDataRefreshed: Subject<FormEvent> = new Subject<FormEvent>();
|
||||||
formFieldValueChanged: Subject<FormFieldEvent> = new Subject<FormFieldEvent>();
|
formFieldValueChanged: Subject<FormFieldEvent> = new Subject<FormFieldEvent>();
|
||||||
formEvents: Subject<Event> = new Subject<Event>();
|
formEvents: Subject<Event> = new Subject<Event>();
|
||||||
taskCompleted: Subject<FormEvent> = new Subject<FormEvent>();
|
taskCompleted: Subject<FormEvent> = new Subject<FormEvent>();
|
||||||
|
|||||||
Reference in New Issue
Block a user