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
|
||||
* Copyright 2016 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
@@ -17,6 +17,343 @@
|
||||
|
||||
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 {
|
||||
return {
|
||||
'id': 3003,
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
.form-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.store-form-container{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,32 @@
|
||||
<div class="form-container">
|
||||
<activiti-form [form]="form">
|
||||
</activiti-form>
|
||||
<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">
|
||||
<activiti-form [form]="form">
|
||||
</activiti-form>
|
||||
</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.
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
|
||||
import { FormModel, FormService } from 'ng2-activiti-form';
|
||||
import { DemoForm } from './demo-form';
|
||||
import { ActivitiForm } from 'ng2-activiti-form';
|
||||
|
||||
declare var componentHandler;
|
||||
|
||||
@Component({
|
||||
selector: 'form-demo',
|
||||
@@ -26,9 +29,17 @@ import { DemoForm } from './demo-form';
|
||||
'form-demo.component.css'
|
||||
]
|
||||
})
|
||||
export class FormDemoComponent implements OnInit {
|
||||
export class FormDemoComponent implements OnInit, AfterViewInit {
|
||||
|
||||
@ViewChild(ActivitiForm)
|
||||
activitiForm: ActivitiForm;
|
||||
|
||||
form: FormModel;
|
||||
activeTab: string = 'demo';
|
||||
storedData: any = {};
|
||||
restoredData: any = {};
|
||||
formToLoadName: string = null;
|
||||
showError: boolean = false;
|
||||
|
||||
constructor(private formService: FormService) {
|
||||
formService.executeOutcome.subscribe(e => {
|
||||
@@ -43,4 +54,69 @@ export class FormDemoComponent implements OnInit {
|
||||
console.log(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;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user