inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +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 2d33aaec17
commit ac9b660e83
10 changed files with 251 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo-shell-ng2/app.config-dev.json
View File

@ -3,5 +3,21 @@
"bpmHost": "http://{hostname}:{port}/bpm",
"application": {
"name": "Alfresco"
},
"activiti": {
"rest": {
"fields": [
{
"processId": "0",
"taskId": "7501",
"fieldId": "label10",
"values": [
{ "id": "f1", "name": "Field 1" },
{ "id": "f2", "name": "Field 2" },
{ "id": "f3", "name": "Field 3" }
]
}
]
}
}
}

1
demo-shell-ng2/app/app.component.html
View File

@ -21,6 +21,7 @@
<a class="mdl-navigation__link" data-automation-id="files" href="" routerLink="/files">DocumentList</a>
<a class="mdl-navigation__link" data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
<a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form">Form</a>
<a class="mdl-navigation__link" data-automation-id="form" href="" routerLink="/form-list">Form List</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
<a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
</nav>

5
demo-shell-ng2/app/app.module.ts
View File

@ -44,6 +44,8 @@ import { ChartsModule } from 'ng2-charts';
import { CreateFolderDialog } from './dialogs/create-folder.dialog';
import { DebugAppConfigService } from './services/debug-app-config.service';
import { FormListDemoComponent } from './components/form/form-list-demo.component';
import {
HomeComponent,
DataTableDemoComponent,
@ -115,7 +117,8 @@ if (process.env.ENV === 'production') {
FormNodeViewer,
CreateFolderDialog,
SettingsComponent,
FormDemoComponent
FormDemoComponent,
FormListDemoComponent
],
providers: [
{ provide: AppConfigService, useClass: DebugAppConfigService }

4
demo-shell-ng2/app/app.routes.ts
View File

@ -39,6 +39,7 @@ import {
} from './components/index';
import { UploadButtonComponent } from 'ng2-alfresco-upload';
import { FormListDemoComponent } from './components/form/form-list-demo.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginDemoComponent },
@ -132,7 +133,8 @@ export const appRoutes: Routes = [
},
{ path: 'about', component: AboutComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'form', component: FormDemoComponent }
{ path: 'form', component: FormDemoComponent },
{ path: 'form-list', component: FormListDemoComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

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 = {};
}
}

83
demo-shell-ng2/app/services/in-memory-form.service.ts Normal file
View File

@ -0,0 +1,83 @@
/*!
* @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 { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { AlfrescoApiService, LogService } from 'ng2-alfresco-core';
import { FormService, EcmModelService, FormFieldOption } from 'ng2-activiti-form';
import { AppConfigService } from 'ng2-alfresco-core';
interface ActivitiData {
rest: {
fields: Array<{
processId?: string,
taskId?: string,
fieldId?: string,
values?: Array<{
id: string,
name: string
}>
}>
};
}
@Injectable()
export class InMemoryFormService extends FormService {
private data: ActivitiData;
constructor(appConfig: AppConfigService,
ecmModelService: EcmModelService,
apiService: AlfrescoApiService,
logService: LogService) {
super(ecmModelService, apiService, logService);
this.data = appConfig.get<ActivitiData>('activiti');
}
/** @override */
getRestFieldValues(taskId: string, fieldId: string): Observable<FormFieldOption[]> {
// Uncomment this to use original call
// return super.getRestFieldValues(taskId, fieldId);
console.log(`getRestFieldValues: ${taskId} => ${fieldId}`);
return new Observable<FormFieldOption[]>(observer => {
let field = this.data.rest.fields.find(
f => f.taskId === taskId && f.fieldId === fieldId
);
let values: FormFieldOption[] = field.values || [];
console.log(values);
observer.next(values);
});
}
/** @override */
getRestFieldValuesByProcessId(processDefinitionId: string, fieldId: string): Observable<any> {
// Uncomment this to use original call
// return super.getRestFieldValuesByProcessId(processDefinitionId, fieldId);
console.log(`getRestFieldValuesByProcessId: ${processDefinitionId} => ${fieldId}`);
return new Observable<FormFieldOption[]>(observer => {
let field = this.data.rest.fields.find(
f => f.processId === processDefinitionId && f.fieldId === fieldId
);
let values: FormFieldOption[] = field.values || [];
console.log(values);
observer.next(values);
});
}
}

34
ng2-components/ng2-activiti-form/src/services/form.service.ts
View File

@ -100,15 +100,27 @@ export class FormService {
stencilSet: 0
};
return Observable.fromPromise(this.apiService.getInstance().activiti.modelsApi.createModel(dataModel));
return Observable.fromPromise(
this.apiService.getInstance().activiti.modelsApi.createModel(dataModel)
);
}
saveForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
return Observable.fromPromise(
this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel)
);
}
/**
* @deprecated in 1.7.0, use saveForm API instead
* Add Fileds to A form
* @returns {Observable<any>}
*/
addFieldsToAForm(formId: string, formModel: FormDefinitionModel): Observable<any> {
return Observable.fromPromise(this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel));
console.log('addFieldsToAForm is deprecated in 1.7.0, use saveForm API instead');
return Observable.fromPromise(
this.apiService.getInstance().activiti.editorApi.saveForm(formId, formModel)
);
}
/**
@ -121,12 +133,12 @@ export class FormService {
};
return Observable.fromPromise(
this.apiService.getInstance().activiti.modelsApi.getModels(opts))
.map(function (forms: any) {
return forms.data.find(formdata => formdata.name === name);
})
.catch(err => this.handleError(err)
);
this.apiService.getInstance().activiti.modelsApi.getModels(opts)
)
.map(function (forms: any) {
return forms.data.find(formdata => formdata.name === name);
})
.catch(err => this.handleError(err));
}
/**
@ -139,10 +151,8 @@ export class FormService {
};
return Observable.fromPromise(
this.apiService.getInstance().activiti.modelsApi.getModels(opts))
.map((response: any) => <any[]> response.data || [])
.catch(err => this.handleError(err));
this.apiService.getInstance().activiti.modelsApi.getModels(opts)
);
}
/**