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-914] Form List Component (#2023)

Browse Source 
Form List Component
This commit is contained in:
Maurizio Vitale
2017-07-03 15:53:15 +01:00
committed by Eugenio Romano
parent 033939615d
commit 2e03ef3548
13 changed files with 246 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,32 +1,9 @@
<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>
<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>

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

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormModel, FormService } from 'ng2-activiti-form';
import { DemoForm } from './demo-form';
import { ActivitiForm } from 'ng2-activiti-form';
@@ -29,17 +29,18 @@ declare var componentHandler;
'form-demo.component.css'
]
})
export class FormDemoComponent implements OnInit, AfterViewInit {
export class FormDemoComponent implements OnInit {
@ViewChild(ActivitiForm)
activitiForm: ActivitiForm;
formList: any [] = [];
form: FormModel;
activeTab: string = 'demo';
formId: string;
storedData: any = {};
restoredData: any = {};
formToLoadName: string = null;
showError: boolean = false;
constructor(private formService: FormService) {
formService.executeOutcome.subscribe(e => {
@@ -49,10 +50,7 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
let formDefinitionJSON: any = DemoForm.getDefinition();
let form = this.formService.parseForm(formDefinitionJSON);
console.log(form);
this.form = form;
this.formList.push({ name: 'Demo Form Definition', lastUpdatedByFullName: 'Demo Name User', lastUpdated: '2017-06-23T13:20:30.754+0000', isFake: true });
}
ngAfterViewInit() {
@@ -62,16 +60,24 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
}
}
changeToStoreForm() {
this.activeTab = 'store';
this.showError = false;
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);
}
changeToDemoForm() {
this.activeTab = 'demo';
let formDefinitionJSON: any = DemoForm.getDefinition();
let demoForm = this.formService.parseForm(formDefinitionJSON);
this.form = demoForm;
isEmptyForm() {
return this.form === null || this.form === undefined;
}
store() {
@@ -82,11 +88,6 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
this.restoredData = null;
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
}
clone(objToCopyFrom, objToCopyTo) {
for (let attribute in objToCopyFrom) {
if (objToCopyFrom.hasOwnProperty(attribute)) {
@@ -96,27 +97,9 @@ export class FormDemoComponent implements OnInit, AfterViewInit {
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;
}
);
}
restore() {
this.restoredData = this.storedData;
this.storedData = {};
}
}