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-2255] fixed loading for form loading data (#3032)

Browse Source 
* [ADF-2255] fixed loading for form loading data

* [ADF-2255] fix wrong placeholder

* [ADF-2255] fixed and added test for new value retrieving form

* [ADF-2255] fixed test on validation
This commit is contained in:
Vito 2018-03-06 10:01:49 +00:00 committed by Eugenio Romano
parent 6aca2a2761
commit 169403bbae
15 changed files with 480 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo-shell/resources/i18n/en.json
View File

@ -26,6 +26,7 @@
"DATATABLE_LAZY": "Datatable (Lazy)",
"FORM": "Form",
"FORM_LIST": "Form List",
"FORM_LOADING": "Form Loading",
"UPLOADER": "Uploader",
"WEBSCRIPT": "Webscript",
"TAG": "Tag",
@ -126,6 +127,13 @@
"STORE": "Store",
"RESTORE": "Restore"
},
"FORM-LOADING": {
"FORM_DATA" : "Form Data",
"FORM_DATA_MESSAGE": "Type values to populate the form",
"TYPEAHEAD_PLACEHOLDER": "Typeahead",
"RADIO_PLACEHOLDER": "Radio Button",
"SELECT_PLACEHOLDER": "DropDown"
},
"LOGIN": {
"CONTENT_SERVICES": "Content Services",
"PROCESS_SERVICES": "Process Services",

4
demo-shell/src/app/app.module.ts
View File

@ -20,6 +20,7 @@ import { SearchExtendedComponent } from './components/search/search-extended.com
import { AboutComponent } from './components/about/about.component';
import { FormComponent } from './components/form/form.component';
import { FormListComponent } from './components/form/form-list.component';
import { FormLoadingComponent } from './components/form/form-loading.component';
import { CustomSourcesComponent } from './components/files/custom-sources.component';
import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
@ -92,7 +93,8 @@ import { SharedLinkViewComponent } from './components/shared-link-view/shared-li
TaskAttachmentsComponent,
ProcessAttachmentsComponent,
OverlayViewerComponent,
SharedLinkViewComponent
SharedLinkViewComponent,
FormLoadingComponent
],
providers: [
{ provide: AppConfigService, useClass: DebugAppConfigService },

2
demo-shell/src/app/app.routes.ts
View File

@ -45,6 +45,7 @@ import { CustomSourcesComponent } from './components/files/custom-sources.compon
import { FormListComponent } from './components/form/form-list.component';
import { OverlayViewerComponent } from './components/overlay-viewer/overlay-viewer.component';
import { SharedLinkViewComponent } from './components/shared-link-view/shared-link-view.component';
import { FormLoadingComponent } from './components/form/form-loading.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@ -167,6 +168,7 @@ export const appRoutes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'form', component: FormComponent },
{ path: 'form-list', component: FormListComponent },
{ path: 'form-loading', component: FormLoadingComponent },
{
path: 'overlay-viewer',
component: OverlayViewerComponent,

1
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@ -38,6 +38,7 @@ export class AppLayoutComponent {
{ href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },
{ href: '/form', icon: 'poll', title: 'APP_LAYOUT.FORM' },
{ href: '/form-list', icon: 'library_books', title: 'APP_LAYOUT.FORM_LIST' },
{ href: '/form-loading', icon: 'cached', title: 'APP_LAYOUT.FORM_LOADING' },
{ href: '/uploader', icon: 'file_upload', title: 'APP_LAYOUT.UPLOADER' },
{ href: '/webscript', icon: 'extension', title: 'APP_LAYOUT.WEBSCRIPT' },
{ href: '/tag', icon: 'local_offer', title: 'APP_LAYOUT.TAG' },

271
demo-shell/src/app/components/form/demo-form.ts
View File

@ -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.
@ -1450,4 +1450,271 @@ export class DemoForm {
};
}
static getSimpleFormDefinition(): any {
return {
'id': 1001,
'name': 'SIMPLE_FORM_EXAMPLE',
'description': '',
'version': 1,
'lastUpdatedBy': 2,
'lastUpdatedByFullName': 'Test01 01Test',
'lastUpdated': '2018-02-26T17:44:04.543+0000',
'stencilSetId': 0,
'referenceId': null,
'taskId': '9999',
'formDefinition': {
'tabs': [],
'fields': [
{
'fieldType': 'ContainerRepresentation',
'id': '1519666726245',
'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': 'typeahedField',
'name': 'TypeahedField',
'type': 'typeahead',
'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': 'https://jsonplaceholder.typicode.com/users',
'restResponsePath': null,
'restIdProperty': 'id',
'restLabelProperty': 'name',
'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': 'radioButton',
'name': 'RadioButtons',
'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': '1519666735185',
'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': 'selectBox',
'name': 'SelectBox',
'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': 'manual',
'hasEmptyValue': true,
'options': [
{
'id': 'empty',
'name': 'Choose one...'
},
{
'id': 'option_1',
'name': '1'
},
{
'id': 'option_2',
'name': '2'
},
{
'id': 'option_3',
'name': '3'
}
],
'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': []
}
}
],
'outcomes': [],
'javascriptEvents': [],
'className': '',
'style': '',
'customFieldTemplates': {},
'metadata': {},
'variables': [],
'customFieldsValueInfo': {},
'gridsterForm': false
}
};
}
}

54
demo-shell/src/app/components/form/fake-form.service.ts Normal file
View File

@ -0,0 +1,54 @@
/*!
* @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 { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import {
AppConfigService, AlfrescoApiService, EcmModelService, LogService, FormService, FormOutcomeEvent
} from '@alfresco/adf-core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class FakeFormService extends FormService {
executeOutcome = new Subject<FormOutcomeEvent>();
constructor(appConfig: AppConfigService,
ecmModelService: EcmModelService,
apiService: AlfrescoApiService,
protected logService: LogService) {
super(ecmModelService, apiService, logService);
}
public getRestFieldValues(taskId: string, fieldId: string): Observable<any> {
if (fieldId === 'typeahedField') {
return Observable.of([
{ 'id': '1', 'name': 'Leanne Graham' },
{ 'id': '2', 'name': 'Ervin Howell' },
{ 'id': '3', 'name': 'Clementine Bauch' },
{ 'id': '4', 'name': 'Patricia Lebsack' },
{ 'id': '5', 'name': 'Chelsey Dietrich' },
{ 'id': '6', 'name': 'Mrs. Dennis Schulist' },
{ 'id': '7', 'name': 'Kurtis Weissnat' },
{ 'id': '8', 'name': 'Nicholas Runolfsdottir V' },
{ 'id': '9', 'name': 'Glenna Reichert' },
{ 'id': '10', 'name': 'Clementina DuBuque' }]);
} else {
return super.getRestFieldValues(taskId, fieldId);
}
}
}

41
demo-shell/src/app/components/form/form-loading.component.html Normal file
View File

@ -0,0 +1,41 @@
<div class="form-container">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
{{'FORM-LOADING.FORM_DATA' | translate}}
</mat-panel-title>
<mat-panel-description>
{{'FORM-LOADING.FORM_DATA_MESSAGE' | translate}}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item>
<mat-form-field>
<input matInput
placeholder="{{'FORM-LOADING.TYPEAHEAD_PLACEHOLDER' | translate}}"
[(ngModel)]="typeaheadFieldValue">
</mat-form-field>
</mat-list-item>
<mat-list-item>
<mat-form-field>
<input matInput
placeholder="{{'FORM-LOADING.SELECT_PLACEHOLDER' | translate}}"
[(ngModel)]="selectFieldValue">
</mat-form-field>
</mat-list-item>
<mat-list-item>
<mat-form-field>
<input matInput
placeholder="{{'FORM-LOADING.RADIO_PLACEHOLDER' | translate}}"
[(ngModel)]="radioButtonFieldValue">
</mat-form-field>
</mat-list-item>
</mat-list>
<button mat-button color="primary" (click)="onLoadButtonClicked()">Load</button>
</mat-expansion-panel>
</mat-accordion>
<mat-divider></mat-divider>
<adf-form [showRefreshButton]="false" [form]="form" [data]="formattedData">
</adf-form>
</div>

3
demo-shell/src/app/components/form/form-loading.component.scss Normal file
View File

@ -0,0 +1,3 @@
.form-container {
padding: 10px;
}

60
demo-shell/src/app/components/form/form-loading.component.ts Normal file
View File

@ -0,0 +1,60 @@
/*!
* @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, Inject, OnInit } from '@angular/core';
import { FormModel, FormService, FormOutcomeEvent } from '@alfresco/adf-core';
import { InMemoryFormService } from '../../services/in-memory-form.service';
import { DemoForm } from './demo-form';
import { FakeFormService } from './fake-form.service';
@Component({
selector: 'app-form-loading',
templateUrl: 'form-loading.component.html',
styleUrls: ['form-loading.component.scss'],
providers: [
{ provide: FormService, useClass: FakeFormService },
]
})
export class FormLoadingComponent implements OnInit {
form: FormModel;
typeaheadFieldValue = '';
selectFieldValue = '';
radioButtonFieldValue = '';
formattedData = {};
constructor(@Inject(FormService) private formService: InMemoryFormService) {
formService.executeOutcome.subscribe((formOutcomeEvent: FormOutcomeEvent) => {
formOutcomeEvent.preventDefault();
});
}
ngOnInit() {
this.formattedData = {};
const formDefinitionJSON: any = DemoForm.getSimpleFormDefinition();
this.form = this.formService.parseForm(formDefinitionJSON);
}
onLoadButtonClicked() {
this.formattedData = {
'typeahedField': this.typeaheadFieldValue,
'selectBox': this.selectFieldValue,
'radioButton': this.radioButtonFieldValue
};
}
}

30
lib/core/form/components/form.component.spec.ts
View File

@ -822,14 +822,14 @@ describe('FormComponent', () => {
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();
expect(radioField.value).toBe('option_1');
let formValues: any = {};
formValues.label = {
id: 'option_1',
name: 'test1'
id: 'option_2',
name: 'test2'
};
formValues.raduio = { id: 'option_1', name: 'Option 1' };
formValues.raduio = { id: 'option_2', name: 'Option 2' };
let change = new SimpleChange(null, formValues, false);
formComponent.data = formValues;
formComponent.ngOnChanges({ 'data': change });
@ -837,7 +837,25 @@ describe('FormComponent', () => {
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');
expect(labelField.value).toBe('option_2');
expect(radioField.value).toBe('option_2');
});
it('should refresh radio buttons value when id is given to data', () => {
formComponent.form = new FormModel(fakeForm);
let formFields = formComponent.form.getFormFields();
let radioFieldById = formFields.find(field => field.id === 'raduio');
expect(radioFieldById.value).toBe('option_2');
let formValues: any = {};
formValues.raduio = 'option_3';
let change = new SimpleChange(null, formValues, false);
formComponent.data = formValues;
formComponent.ngOnChanges({ 'data': change });
formFields = formComponent.form.getFormFields();
radioFieldById = formFields.find(field => field.id === 'raduio');
expect(radioFieldById.value).toBe('option_3');
});
});

2
lib/core/form/components/widgets/core/form-field-validator.spec.ts
View File

@ -82,9 +82,9 @@ describe('FormFieldValidator', () => {
let field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.RADIO_BUTTONS,
required: true,
value: 'one',
options: [{ id: 'two', name: 'two' }]
});
field.value = 'one';
expect(validator.validate(field)).toBeFalsy();
});

12
lib/core/form/components/widgets/core/form-field.model.spec.ts
View File

@ -266,8 +266,8 @@ describe('FormFieldModel', () => {
let field = new FormFieldModel(new FormModel(), {
type: FormFieldTypes.RADIO_BUTTONS,
options: [
{id: 'opt1', value: 'Option 1'},
{id: 'opt2', value: 'Option 2'}
{id: 'opt1', name: 'Option 1'},
{id: 'opt2', name: 'Option 2'}
],
value: 'opt2'
});
@ -319,8 +319,8 @@ describe('FormFieldModel', () => {
id: 'radio-1',
type: FormFieldTypes.RADIO_BUTTONS,
options: [
{id: 'opt1', value: 'Option 1'},
{id: 'opt2', value: 'Option 2'}
{id: 'opt1', name: 'Option 1'},
{id: 'opt2', name: 'Option 2'}
]
});
@ -334,8 +334,8 @@ describe('FormFieldModel', () => {
id: 'radio-2',
type: FormFieldTypes.RADIO_BUTTONS,
options: [
{id: 'opt1', value: 'Option 1'},
{id: 'opt2', value: 'Option 2'}
{id: 'opt1', name: 'Option 1'},
{id: 'opt2', name: 'Option 2'}
]
});

9
lib/core/form/components/widgets/core/form-field.model.ts
View File

@ -298,6 +298,8 @@ export class FormFieldModel extends FormWidgetModel {
let emptyOption = json.options[0];
if (value === '' || value === emptyOption.id || value === emptyOption.name) {
value = emptyOption.id;
} else if (value.id && value.name) {
value = value.id;
}
}
}
@ -311,9 +313,12 @@ export class FormFieldModel extends FormWidgetModel {
// Activiti has a bug with default radio button value where initial selection passed as `name` value
// so try resolving current one with a fallback to first entry via name or id
// TODO: needs to be reported and fixed at Activiti side
let entry: FormFieldOption[] = this.options.filter(opt => opt.id === value || opt.name === value);
let entry: FormFieldOption[] = this.options.filter(opt =>
opt.id === value || opt.name === value || (value && (opt.id === value.id || opt.name === value.name)));
if (entry.length > 0) {
value = entry[0].id;
} else {
value = this.options[0] ? this.options[0].id : json.value;
}
}
@ -376,7 +381,7 @@ export class FormFieldModel extends FormWidgetModel {
}
break;
case FormFieldTypes.TYPEAHEAD:
let taEntry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
let taEntry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value || opt.name === this.value);
if (taEntry.length > 0) {
this.form.values[this.id] = taEntry[0];
} else if (this.options.length > 0) {

4
lib/core/form/components/widgets/core/form.model.ts
View File

@ -268,10 +268,6 @@ export class FormModel {
if (data[field.id]) {
field.json.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;
}
}
}
}

2
lib/core/form/components/widgets/typeahead/typeahead.widget.ts
View File

@ -67,7 +67,7 @@ export class TypeaheadWidgetComponent extends WidgetComponent implements OnInit
let fieldValue = this.field.value;
if (fieldValue) {
let toSelect = options.find(item => item.id === fieldValue);
let toSelect = options.find(item => item.id === fieldValue || item.name.toLocaleLowerCase() === fieldValue.toLocaleLowerCase());
if (toSelect) {
this.value = toSelect.name;
}