From 2e1a702fe19355420d29666d0fc3e591c2793c44 Mon Sep 17 00:00:00 2001 From: Vladimir Shakhov Date: Thu, 29 Jun 2017 12:41:52 +0700 Subject: [PATCH] #28 dynamic forms wip --- .../vm-creation/data/vm-creation-filter.service.ts | 6 +++++- src/app/vm/vm-creation/form/field.service.ts | 13 ++++++++++--- src/app/vm/vm-creation/test/test.component.ts | 14 +++++++++++--- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/app/vm/vm-creation/data/vm-creation-filter.service.ts b/src/app/vm/vm-creation/data/vm-creation-filter.service.ts index ddc3c00c5e..3d970f4306 100644 --- a/src/app/vm/vm-creation/data/vm-creation-filter.service.ts +++ b/src/app/vm/vm-creation/data/vm-creation-filter.service.ts @@ -1,8 +1,12 @@ +import { FormGroup } from '@angular/forms'; import { VmCreationData } from './vm-creation-data'; export class VmCreationFilterService { - public filter(data: VmCreationData): VmCreationData { + public filter(data: VmCreationData, form: FormGroup): VmCreationData { + if (form.controls.zone.value.name === 'US1.HighIO') { + data.serviceOfferings = [data.serviceOfferings[0]]; + } return data; } } diff --git a/src/app/vm/vm-creation/form/field.service.ts b/src/app/vm/vm-creation/form/field.service.ts index 35b03dd827..6794ce202f 100644 --- a/src/app/vm/vm-creation/form/field.service.ts +++ b/src/app/vm/vm-creation/form/field.service.ts @@ -4,11 +4,12 @@ import { TextField } from './fields/text-field'; import { SelectField } from './fields/select-field'; import { AutocompleteField } from './fields/autocomplete-field'; import { VmCreationData } from '../data/vm-creation-data'; +import { FormGroup } from '@angular/forms'; @Injectable() export class FieldService { - public getFields(data: VmCreationData): Array> { + public getFields(data: VmCreationData, form?: FormGroup): Array> { const state = data.getInitialState(); let fields: Array> = [ new TextField({ @@ -22,14 +23,14 @@ export class FieldService { key: 'zone', label: 'Zone', value: state.zone, - options: data.zones.map(zone => ({ key: zone, value: zone.name })), + options: form && data.zones.map(zone => ({ key: zone, value: zone.name })), order: 2 }), new SelectField({ key: 'serviceOffering', label: 'Service offering', value: state.serviceOffering, - options: data.serviceOfferings.map(offering => ({ key: offering, value: offering.name })), + options: form && data.serviceOfferings.map(offering => ({ key: offering, value: offering.name })), order: 3 }), new SelectField({ @@ -48,6 +49,12 @@ export class FieldService { }) ]; + fields = fields.map(field => { + if (form && form.controls && form.controls[field.key] && form.controls[field.key].value) { + field.value = form.controls[field.key].value; + } + return field; + }); return fields.sort((a, b) => a.order - b.order); } } diff --git a/src/app/vm/vm-creation/test/test.component.ts b/src/app/vm/vm-creation/test/test.component.ts index 5b29de7c6a..c4b7354cad 100644 --- a/src/app/vm/vm-creation/test/test.component.ts +++ b/src/app/vm/vm-creation/test/test.component.ts @@ -6,6 +6,7 @@ import { BaseField } from '../form/fields/base-field'; import { VmCreationData } from '../data/vm-creation-data'; import { VmCreationService } from '../vm-creation.service'; import { VmCreationFilterService } from '../data/vm-creation-filter.service'; +import isEqual = require('lodash/isEqual'); @Component({ @@ -30,11 +31,18 @@ export class TestComponent implements OnInit { } public subscribeToFormChanges(form: FormGroup): void { + this.fields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data, form), form); const changes = Object.values(form.controls).map(control => control.valueChanges); - Observable.merge(...changes).subscribe(_ => this.updateFields()); + Observable.merge(...changes).subscribe(_ => this.updateFields(form)); } - private updateFields(): void { - this.fields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data)); + private updateFields(form: FormGroup): void { + const newFields = this.fieldService.getFields(this.vmCreationFilterService.filter(this.data, form), form); + newFields.forEach(newField => { + const oldField = this.fields.find(field => field.key === newField.key); + if (!isEqual(oldField, newField)) { + this.fields = newFields; + } + }); } }