inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-850] example on using in-memory form data (#2037)

Browse Source 
* stub for custom form service

* demo polishing

- use in-memory formService only for the corresponding demo page 'Form'
- support for mocking rest field values
- demo of the typeahead data mocked

* load data from app config

* fix lint errors

* separate Form and Form List demos
This commit is contained in:
Denys Vuika
2017-07-04 16:58:55 +01:00
committed by Eugenio Romano
parent 3524b76793
commit d7bc86239f
10 changed files with 251 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell-ng2/app/components/form/form-demo.component.css
View File

@@ -1,8 +1,3 @@
.form-container {
padding: 10px;
}
.store-form-container{
width: 80%;
height: 80%;
}

7
demo-shell-ng2/app/components/form/form-demo.component.html
View File

@@ -1,9 +1,4 @@
<adf-form-list [forms]="formList"
(row-dblclick)="onRowDblClick($event)">
</adf-form-list>
<div class="form-container" *ngIf="!isEmptyForm()">
<div class="form-container">
<activiti-form [form]="form" [data]="restoredData">
</activiti-form>
</div>
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>

75
demo-shell-ng2/app/components/form/form-demo.component.ts
View File

@@ -15,34 +15,25 @@
* limitations under the License.
*/
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, Inject, OnInit } from '@angular/core';
import { FormModel, FormService } from 'ng2-activiti-form';
import { InMemoryFormService } from '../../services/in-memory-form.service';
import { DemoForm } from './demo-form';
import { ActivitiForm } from 'ng2-activiti-form';
declare var componentHandler;
@Component({
selector: 'form-demo',
templateUrl: 'form-demo.component.html',
styleUrls: [
'form-demo.component.css'
styleUrls: [ 'form-demo.component.css' ],
providers: [
{ provide: FormService, useClass: InMemoryFormService }
]
})
export class FormDemoComponent implements OnInit {
@ViewChild(ActivitiForm)
activitiForm: ActivitiForm;
formList: any [] = [];
form: FormModel;
formId: string;
storedData: any = {};
restoredData: any = {};
constructor(private formService: FormService) {
constructor(@Inject(FormService) private formService: InMemoryFormService) {
// Prevent default outcome actions
formService.executeOutcome.subscribe(e => {
e.preventDefault();
console.log(e.outcome);
@@ -50,56 +41,8 @@ export class FormDemoComponent implements OnInit {
}
ngOnInit() {
this.formList.push({ name: 'Demo Form Definition', lastUpdatedByFullName: 'Demo Name User', lastUpdated: '2017-06-23T13:20:30.754+0000', isFake: true });
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
onRowDblClick(event: CustomEvent) {
let rowForm = event.detail.value.obj;
if (rowForm.isFake) {
let formDefinitionJSON: any = DemoForm.getDefinition();
let form = this.formService.parseForm(formDefinitionJSON);
this.form = form;
} else {
this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
let form = this.formService.parseForm(definition);
this.form = form;
});
}
console.log(rowForm);
}
isEmptyForm() {
return this.form === null || this.form === undefined;
}
store() {
this.clone(this.activitiForm.form.values, this.storedData);
console.log('DATA SAVED');
console.log(this.storedData);
console.log('DATA SAVED');
this.restoredData = null;
}
clone(objToCopyFrom, objToCopyTo) {
for (let attribute in objToCopyFrom) {
if (objToCopyFrom.hasOwnProperty(attribute)) {
objToCopyTo[attribute] = objToCopyFrom[attribute];
}
}
return objToCopyTo;
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
let formDefinitionJSON: any = DemoForm.getDefinition();
this.form = this.formService.parseForm(formDefinitionJSON);
}
}

112
demo-shell-ng2/app/components/form/form-list-demo.component.ts Normal file
View File

@@ -0,0 +1,112 @@
/*!
* @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, ViewChild } from '@angular/core';
import { FormModel, FormService } from 'ng2-activiti-form';
import { ActivitiForm } from 'ng2-activiti-form';
declare var componentHandler;
@Component({
selector: 'form-list-demo',
template: `
<adf-form-list [forms]="formList" (row-dblclick)="onRowDblClick($event)">
</adf-form-list>
<div class="form-container" *ngIf="!isEmptyForm()">
<activiti-form [form]="form" [data]="restoredData">
</activiti-form>
</div>
<button class="mdl-button mdl-js-button" (click)="store()">STORE</button>
<button class="mdl-button mdl-js-button" (click)="restore()">RESTORE</button>
`,
styles: [`
.form-container {
padding: 10px;
}
.store-form-container{
width: 80%;
height: 80%;
}
`]
})
export class FormListDemoComponent {
@ViewChild(ActivitiForm)
activitiForm: ActivitiForm;
formList: any [] = [];
form: FormModel;
formId: string;
storedData: any = {};
restoredData: any = {};
constructor(private formService: FormService) {
// Prevent default outcome actions
formService.executeOutcome.subscribe(e => {
e.preventDefault();
console.log(e.outcome);
});
}
ngAfterViewInit() {
// workaround for MDL issues with dynamic components
if (componentHandler) {
componentHandler.upgradeAllRegistered();
}
}
onRowDblClick(event: CustomEvent) {
let rowForm = event.detail.value.obj;
this.formService.getFormDefinitionById(rowForm.id).subscribe((definition) => {
let form = this.formService.parseForm(definition);
this.form = form;
});
console.log(rowForm);
}
isEmptyForm() {
return this.form === null || this.form === undefined;
}
store() {
this.clone(this.activitiForm.form.values, this.storedData);
console.log('DATA SAVED');
console.log(this.storedData);
console.log('DATA SAVED');
this.restoredData = null;
}
clone(objToCopyFrom, objToCopyTo) {
for (let attribute in objToCopyFrom) {
if (objToCopyFrom.hasOwnProperty(attribute)) {
objToCopyTo[attribute] = objToCopyFrom[attribute];
}
}
return objToCopyTo;
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
}
}