#1113 - Fix for show values on completed form

This commit is contained in:
Vito Albano
2016-11-23 01:58:30 +00:00
committed by Mario Romano
parent 98f3cc25f8
commit 424511d1f6
15 changed files with 261 additions and 73 deletions

View File

@@ -5,7 +5,7 @@
class="mdl-checkbox__input"
[checked]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="checkVisibility(field)"
(ngModelChange)="onChange()"
[disabled]="field.readOnly">
<span class="mdl-checkbox__label">{{field.name}}</span>
</label>

View File

@@ -17,6 +17,7 @@
import { Component } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
@Component({
moduleId: module.id,
@@ -25,4 +26,12 @@ import { WidgetComponent } from './../widget.component';
})
export class CheckboxWidget extends WidgetComponent {
constructor(private visibilityService: WidgetVisibilityService) {
super();
}
onChange() {
this.visibilityService.refreshVisibility(this.field.form);
}
}

View File

@@ -168,7 +168,7 @@ describe('FormFieldModel', () => {
]
});
field.value = 'Option 2';
field.value = 'opt2';
expect(form.values['dropdown-2']).toEqual(field.options[1]);
});

View File

@@ -270,7 +270,7 @@ export class FormFieldModel extends FormWidgetModel {
if (this.value === 'empty' || this.value === '') {
this.form.values[this.id] = {};
} else {
let entry: FormFieldOption[] = this.options.filter(opt => opt.name === this.value);
let entry: FormFieldOption[] = this.options.filter(opt => opt.id === this.value);
if (entry.length > 0) {
this.form.values[this.id] = entry[0];
}

View File

@@ -24,6 +24,7 @@ export * from './form-widget.model';
export * from './form-field.model';
export * from './form.model';
export * from './container.model';
export * from './container-column.model';
export * from './tab.model';
export * from './form-outcome.model';
export * from './form-outcome-event.model';

View File

@@ -1,6 +1,6 @@
<div [ngSwitch]="fieldType" class="display-value-widget">
<div *ngSwitchCase="'boolean'">
<label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id">
<label class="mdl-checkbox mdl-js-checkbox" [attr.for]="field.id" *ngIf="field?.isVisible">
<input type="checkbox"
[attr.id]="field.id"
[checked]="field.value"
@@ -11,36 +11,41 @@
</label>
</div>
<div *ngSwitchCase="'text'"
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
<input class="mdl-textfield__input"
class="mdl-textfield mdl-js-textfield text-widget">
<label *ngIf="field?.isVisible" [attr.for]="field.id">{{field.name}}</label>
<input
*ngIf="field?.isVisible"
class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[value]="value"
disabled>
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
</div>
<div *ngSwitchCase="'multi-line-text'"
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget">
class="mdl-textfield mdl-js-textfield multiline-text-widget">
<textarea class="mdl-textfield__input"
type="text"
rows= "3"
rows="3"
[value]="value"
[attr.id]="field.id"
disabled>
disabled
*ngIf="field?.isVisible">
</textarea>
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
<label *ngIf="field?.isVisible" class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
</div>
<div *ngSwitchCase="'hyperlink'" class="hyperlink-widget">
<div>
<span>{{field.name}}</span>
</div>
<div>
<a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
<div *ngIf="field?.isVisible">
<div>
<span>{{field.name}}</span>
</div>
<div>
<a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>
</div>
</div>
</div>
<div *ngSwitchCase="'dynamic-table'">
<div class="display-value-widget__dynamic-table">
<div class="is-disabled">{{field.name}}</div>
<div class="display-value-widget__dynamic-table" *ngIf="field?.isVisible">
<div>{{field.name}}</div>
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
@@ -62,7 +67,7 @@
</div>
</div>
<div *ngSwitchCase="'upload'">
<div class="upload-widget">
<div class="upload-widget" *ngIf="field?.isVisible">
<label class="upload-widget__label" [attr.for]="field.id">{{field.name}}</label>
<div>
<i *ngIf="hasFile" class="material-icons upload-widget__icon">attachment</i>
@@ -71,14 +76,15 @@
</div>
</div>
<div *ngSwitchDefault
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
<input class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[value]="value"
(ngModelChange)="checkVisibility(field)"
disabled>
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
class="mdl-textfield mdl-js-textfield text-widget is-disabled is-dirty is-upgraded">
<label *ngIf="field?.isVisible" [attr.for]="field.id">{{field.name}}</label>
<input
*ngIf="field?.isVisible"
class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[value]="value"
disabled>
</div>
</div>

View File

@@ -25,15 +25,18 @@ import { FormFieldModel } from './../core/form-field.model';
import { FormFieldTypes } from '../core/form-field-types';
import { FormModel } from '../core/form.model';
import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
describe('DisplayValueWidget', () => {
let widget: DisplayValueWidget;
let formService: FormService;
let visibilityService: WidgetVisibilityService;
beforeEach(() => {
formService = new FormService(null, null);
widget = new DisplayValueWidget(formService);
visibilityService = new WidgetVisibilityService(null, null, null);
widget = new DisplayValueWidget(formService, visibilityService);
});
it('should require field to setup default value', () => {
@@ -686,7 +689,8 @@ describe('DisplayValueWidget', () => {
declarations: [DisplayValueWidget],
providers: [
EcmModelService,
FormService
FormService,
WidgetVisibilityService
]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(DisplayValueWidget);

View File

@@ -15,12 +15,13 @@
* limitations under the License.
*/
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { FormFieldTypes } from '../core/form-field-types';
import { FormService } from '../../../services/form.service';
import { FormFieldOption } from './../core/form-field-option';
import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
@Component({
moduleId: module.id,
@@ -28,7 +29,7 @@ import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-
templateUrl: './display-value.widget.html',
styleUrls: ['./display-value.widget.css']
})
export class DisplayValueWidget extends WidgetComponent implements OnInit {
export class DisplayValueWidget extends WidgetComponent implements OnInit, AfterViewChecked {
value: any;
fieldType: string;
@@ -45,14 +46,14 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
// upload/attach
hasFile: boolean = false;
constructor(private formService: FormService) {
constructor(private formService: FormService,
private visibilityService: WidgetVisibilityService) {
super();
}
ngOnInit() {
if (this.field) {
this.value = this.field.value;
if (this.field.params) {
let originalField = this.field.params['field'];
if (originalField && originalField.type) {
@@ -123,7 +124,7 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
this.visibleColumns = this.columns.filter(col => col.visible);
}
if (json.value) {
this.rows = json.value.map(obj => <DynamicTableRow> {selected: false, value: obj});
this.rows = json.value.map(obj => <DynamicTableRow> { selected: false, value: obj });
}
break;
default:
@@ -135,6 +136,10 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
}
}
ngAfterViewChecked() {
this.visibilityService.refreshVisibility(this.field.form);
}
loadRadioButtonValue() {
let options = this.field.options || [];
let toSelect = options.find(item => item.id === this.field.value);
@@ -146,10 +151,10 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
}
loadRestFieldValue() {
if (this.field.form.processDefinitionId) {
this.getValuesByProcessDefinitionId();
} else {
if (this.field.form.taskId) {
this.getValuesByTaskId();
} else {
this.getValuesByProcessDefinitionId();
}
}
@@ -163,11 +168,13 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
(result: FormFieldOption[]) => {
let options = result || [];
let toSelect = options.find(item => item.id === this.field.value);
this.field.options = options;
if (toSelect) {
this.value = toSelect.name;
} else {
this.value = this.field.value;
}
this.visibilityService.refreshEntityVisibility(this.field);
},
error => {
console.log(error);
@@ -183,11 +190,13 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit {
(result: FormFieldOption[]) => {
let options = result || [];
let toSelect = options.find(item => item.id === this.field.value);
this.field.options = options;
if (toSelect) {
this.value = toSelect.name;
} else {
this.value = this.field.value;
}
this.visibilityService.refreshEntityVisibility(this.field);
},
error => {
console.log(error);

View File

@@ -84,7 +84,7 @@ export class DropdownWidget extends WidgetComponent implements OnInit {
getOptionValue(option: FormFieldOption): string {
let optionValue: string = '';
if (option.id === 'empty') {
if (option.id === 'empty' || option.name !== this.field.value) {
optionValue = option.id;
} else {
optionValue = option.name;

View File

@@ -1,5 +1,5 @@
<div class="dynamic-table-widget"
[class.dynamic-table-widget__invalid]="!isValid()">
[class.dynamic-table-widget__invalid]="!isValid()" *ngIf="field?.isVisible">
<div class="dynamic-table-widget__label">{{content.name}}</div>
<div *ngIf="!editMode">

View File

@@ -18,15 +18,18 @@
import { DynamicTableWidget } from './dynamic-table.widget';
import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './dynamic-table.widget.model';
import { FormModel, FormFieldTypes } from './../core/index';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
describe('DynamicTableWidget', () => {
let widget: DynamicTableWidget;
let table: DynamicTableModel;
let visibilityService: WidgetVisibilityService;
beforeEach(() => {
table = new DynamicTableModel(null);
widget = new DynamicTableWidget(null);
visibilityService = new WidgetVisibilityService(null, null, null);
widget = new DynamicTableWidget(null, visibilityService);
widget.content = table;
});
@@ -92,8 +95,8 @@ describe('DynamicTableWidget', () => {
});
it('should move selection down', () => {
let row1 = <DynamicTableRow> { };
let row2 = <DynamicTableRow> { };
let row1 = <DynamicTableRow> {};
let row2 = <DynamicTableRow> {};
widget.content.rows.push(...[row1, row2]);
widget.content.selectedRow = row1;
@@ -248,5 +251,124 @@ describe('DynamicTableWidget', () => {
let actual = widget.getCellValue(row, column);
expect(actual).toBe('GBP 100');
});
/*
describe('when template is ready', () => {
let dynamicTableWidget: DynamicTableWidget;
let fixture: ComponentFixture<DynamicTableWidget>;
let element: HTMLElement;
let componentHandler;
let stubFormService;
beforeEach(async(() => {
componentHandler = jasmine.createSpyObj('componentHandler', ['upgradeAllRegistered', 'upgradeElement']);
window['componentHandler'] = componentHandler;
TestBed.configureTestingModule({
imports: [CoreModule],
declarations: [DynamicTableWidget],
providers: [EcmModelService]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(DropdownEditorComponent);
dropDownEditorComponent = fixture.componentInstance;
element = fixture.nativeElement;
});
}));
afterEach(() => {
fixture.destroy();
TestBed.resetTestingModule();
});
describe('and dropdown is populated via taskId', () => {
beforeEach(async(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValuesColumn').and.returnValue(Observable.of(fakeOptionList));
row = <DynamicTableRow> { value: { dropdown: 'one' } };
column = <DynamicTableColumn> {
id: 'column-id',
optionType: 'rest',
options: [
<DynamicTableColumnOption> { id: '1', name: 'one' },
<DynamicTableColumnOption> { id: '2', name: 'two' }
]
};
form = new FormModel({ taskId: '<task-id>' });
dynamicTable = new DynamicTableModel(form, null);
dynamicTable.field = new FormFieldModel(form, { id: '<field-id>' });
dynamicTable.rows.push(row);
dynamicTable.columns.push(column);
dropDownEditorComponent.table = dynamicTable;
dropDownEditorComponent.column = column;
dropDownEditorComponent.row = row;
dropDownEditorComponent.table.field = new FormFieldModel(form, {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown',
readOnly: 'false',
restUrl: 'fake-rest-url'
});
dropDownEditorComponent.table.field.isVisible = true;
fixture.detectChanges();
}));
it('should show visible dropdown widget', async(() => {
expect(element.querySelector('#column-id')).toBeDefined();
expect(element.querySelector('#column-id')).not.toBeNull();
expect(element.querySelector('#opt_1')).not.toBeNull();
expect(element.querySelector('#opt_2')).not.toBeNull();
expect(element.querySelector('#opt_3')).not.toBeNull();
}));
});
describe('and dropdown is populated via processDefinitionId', () => {
beforeEach(async(() => {
stubFormService = fixture.debugElement.injector.get(FormService);
spyOn(stubFormService, 'getRestFieldValuesColumnByProcessId').and.returnValue(Observable.of(fakeOptionList));
row = <DynamicTableRow> { value: { dropdown: 'one' } };
column = <DynamicTableColumn> {
id: 'column-id',
optionType: 'rest',
options: [
<DynamicTableColumnOption> { id: '1', name: 'one' },
<DynamicTableColumnOption> { id: '2', name: 'two' }
]
};
form = new FormModel({ processDefinitionId: '<proc-id>' });
dynamicTable = new DynamicTableModel(form, null);
dynamicTable.field = new FormFieldModel(form, { id: '<field-id>' });
dynamicTable.rows.push(row);
dynamicTable.columns.push(column);
dropDownEditorComponent.table = dynamicTable;
dropDownEditorComponent.column = column;
dropDownEditorComponent.row = row;
dropDownEditorComponent.table.field = new FormFieldModel(form, {
id: 'dropdown-id',
name: 'date-name',
type: 'dropdown',
readOnly: 'false',
restUrl: 'fake-rest-url'
});
dropDownEditorComponent.table.field.isVisible = true;
fixture.detectChanges();
}));
it('should show visible dropdown widget', async(() => {
expect(element.querySelector('#column-id')).toBeDefined();
expect(element.querySelector('#column-id')).not.toBeNull();
expect(element.querySelector('#opt_1')).not.toBeNull();
expect(element.querySelector('#opt_2')).not.toBeNull();
expect(element.querySelector('#opt_3')).not.toBeNull();
}));
it('should show visible dropdown widget', async(() => {
expect(element.querySelector('#column-id')).toBeDefined();
expect(element.querySelector('#column-id')).not.toBeNull();
expect(element.querySelector('#opt_1')).not.toBeNull();
expect(element.querySelector('#opt_2')).not.toBeNull();
expect(element.querySelector('#opt_3')).not.toBeNull();
}));
});
});*/
});

View File

@@ -18,6 +18,7 @@
import { Component, ElementRef, OnInit } from '@angular/core';
import { WidgetComponent } from './../widget.component';
import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './dynamic-table.widget.model';
import { WidgetVisibilityService } from '../../../services/widget-visibility.service';
@Component({
moduleId: module.id,
@@ -34,13 +35,15 @@ export class DynamicTableWidget extends WidgetComponent implements OnInit {
editMode: boolean = false;
editRow: DynamicTableRow = null;
constructor(private elementRef: ElementRef) {
constructor(private elementRef: ElementRef,
private visibilityService: WidgetVisibilityService) {
super();
}
ngOnInit() {
if (this.field) {
this.content = new DynamicTableModel(this.field.form, this.field.json);
this.visibilityService.refreshVisibility(this.field.form);
}
}

View File

@@ -57,7 +57,6 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
(result: FormFieldOption[]) => {
let options = result || [];
this.field.options = options;
this.field.updateForm();
let fieldValue = this.field.value;
if (fieldValue) {
@@ -66,6 +65,8 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
this.value = toSelect.name;
}
}
this.field.updateForm();
this.visibilityService.refreshEntityVisibility(this.field);
},
this.handleError
);
@@ -81,7 +82,6 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
(result: FormFieldOption[]) => {
let options = result || [];
this.field.options = options;
this.field.updateForm();
let fieldValue = this.field.value;
if (fieldValue) {
@@ -90,6 +90,8 @@ export class TypeaheadWidget extends WidgetComponent implements OnInit {
this.value = toSelect.name;
}
}
this.field.updateForm();
this.visibilityService.refreshEntityVisibility(this.field);
},
this.handleError
);

View File

@@ -28,6 +28,7 @@ import { AlfrescoSettingsService, AlfrescoAuthenticationService, AlfrescoApiServ
import { TaskProcessVariableModel } from '../models/task-process-variable.model';
import { WidgetVisibilityModel } from '../models/widget-visibility.model';
import { FormModel, FormFieldModel, TabModel, ContainerModel, FormFieldTypes } from '../components/widgets/core/index';
import { FormService } from './form.service';
declare let jasmine: any;
@@ -43,7 +44,8 @@ describe('WidgetVisibilityService', () => {
AlfrescoSettingsService,
AlfrescoAuthenticationService,
AlfrescoApiService,
WidgetVisibilityService
WidgetVisibilityService,
FormService
]
});
service = TestBed.get(WidgetVisibilityService);
@@ -537,7 +539,7 @@ describe('WidgetVisibilityService', () => {
});
it('should determine visibility for dropdown on label condition', () => {
let dropdownValue = service.getDropDownName(formTest.values, 'dropdown_LABEL');
let dropdownValue = service.getFieldValue(formTest.values, 'dropdown_LABEL');
expect(dropdownValue).not.toBeNull();
expect(dropdownValue).toBeDefined();
@@ -545,7 +547,7 @@ describe('WidgetVisibilityService', () => {
});
it('should be able to get the value for a dropdown filtered with Label', () => {
let dropdownValue = service.getValue(formTest.values, 'dropdown_LABEL');
let dropdownValue = service.getFieldValue(formTest.values, 'dropdown_LABEL');
expect(dropdownValue).not.toBeNull();
expect(dropdownValue).toBeDefined();
@@ -553,7 +555,7 @@ describe('WidgetVisibilityService', () => {
});
it('should be able to get the value for a standard field', () => {
let dropdownValue = service.getValue(formTest.values, 'test_2');
let dropdownValue = service.getFieldValue(formTest.values, 'test_2');
expect(dropdownValue).not.toBeNull();
expect(dropdownValue).toBeDefined();

View File

@@ -19,7 +19,13 @@ import { Injectable } from '@angular/core';
import { Response, Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { FormModel, FormFieldModel, TabModel } from '../components/widgets/core/index';
import {
FormModel,
FormFieldModel,
TabModel,
ContainerModel,
ContainerColumnModel
} from '../components/widgets/core/index';
import { WidgetVisibilityModel } from '../models/widget-visibility.model';
import { TaskProcessVariableModel } from '../models/task-process-variable.model';
@@ -96,45 +102,70 @@ export class WidgetVisibilityService {
}
getFormValue(form: FormModel, field: string) {
let value = this.getValue(form.values, field);
value = value && value.id ? value.id : value;
let value = this.getFieldValue(form.values, field);
return value ? value : this.searchForm(form, field);
}
getValue(values: any, fieldName: string) {
return this.getFieldValue(values, fieldName) ||
this.getDropDownName(values, fieldName);
}
getFieldValue(valueList: any, fieldName: string) {
return valueList[fieldName];
}
getDropDownName(valueList: any, fieldName: string) {
let dropDownFilterByName;
let dropDownFilterByName, valueFound = '';
if (fieldName && fieldName.indexOf('_LABEL') > 0) {
dropDownFilterByName = fieldName.substring(0, fieldName.length - 6);
if (valueList[dropDownFilterByName]) {
valueFound = valueList[dropDownFilterByName].name;
}
} else if (valueList[fieldName] && valueList[fieldName].id) {
valueFound = valueList[fieldName].id;
} else {
valueFound = valueList[fieldName];
}
return ( dropDownFilterByName && valueList[dropDownFilterByName] ) ?
valueList[dropDownFilterByName].name : dropDownFilterByName;
return valueFound;
}
searchForm(form: FormModel, name: string) {
let fieldValue = '';
form.json.fields.forEach(columns => {
for (let i in columns.fields) {
if (columns.fields.hasOwnProperty(i)) {
let field = columns.fields[i].find(field => field.id === name);
if (field) {
fieldValue = field.value;
form.fields.forEach((containerModel: ContainerModel) => {
containerModel.field.columns.forEach((containerColumnModel: ContainerColumnModel) => {
let fieldFound = containerColumnModel.fields.find(field => this.findFieldByValue(field, name));
if (fieldFound) {
if (name.indexOf('_LABEL') > 0) {
if (fieldFound.value && fieldFound.value.name) {
fieldValue = fieldFound.value.name;
} else if (fieldFound.options) {
let option = fieldFound.options.find(option => option.id === fieldFound.value);
if (option) {
fieldValue = option.name;
} else {
fieldValue = fieldFound.value;
}
}
} else if (fieldFound.value && fieldFound.value && fieldFound.value.id) {
fieldValue = fieldFound.value.id;
} else {
fieldValue = fieldFound.value;
}
}
}
);
});
});
return fieldValue;
}
findFieldByValue(field: FormFieldModel, fieldToFind: string) {
let isFound = false;
switch (field.fieldType) {
case 'RestFieldRepresentation' :
if (fieldToFind.indexOf('_LABEL') > 0) {
isFound = (fieldToFind.substring(0, fieldToFind.length - 6) === field.name);
} else {
isFound = (field.name === fieldToFind);
}
break;
default:
isFound = (field.name === fieldToFind);
break;
}
return isFound;
}
getVariableValue(form: FormModel, name: string, processVarList: TaskProcessVariableModel[]) {
return this.getFormVariableValue(form, name) ||
this.getProcessVariableValue(name, processVarList);
@@ -221,5 +252,4 @@ export class WidgetVisibilityService {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}