From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../dynamic-inputs/dynamic-inputs.component.ts | 80 ++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.component.ts (limited to 'vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.component.ts') diff --git a/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.component.ts b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.component.ts new file mode 100644 index 000000000..921c923df --- /dev/null +++ b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.component.ts @@ -0,0 +1,80 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {DynamicInput, DynamicMultiSelect, DynamicNumber, DynamicSelect} from "../../shared/models/dynamicInput"; + +@Component({ + selector: 'dynamic-inputs', + templateUrl: './dynamic-inputs.html', + styleUrls: ['./dynamic-inputs.scss'] +}) + +export class DynamicInputsComponent implements OnInit{ + @Input() public list:any[] = []; + @Input() public group: FormGroup; + + private dynamicList:DynamicInput[] = []; + + isDynamicNumber(item: any): item is DynamicNumber { + return item; + } + + buildValidators(item: DynamicInput) { + let validatorArr = []; + item.maxLength && validatorArr.push(Validators.maxLength(item.maxLength)); + item.minLength && validatorArr.push(Validators.minLength(item.minLength)); + if(this.isDynamicNumber(item)) { + item.max && validatorArr.push(Validators.max(item.max)); + item.min && validatorArr.push(Validators.min(item.min)); + } + return Validators.compose(validatorArr); + } + + ngOnInit(): void { + this.list.forEach((item)=> { + let dynamicItem: DynamicInput; + switch (item.type) { + case 'multi_select': + item.optionList.forEach(function(option) { option.id = option.id||option.name; + option.itemName = option.name;}); + item.settings = { + disabled: !item.isEnabled, + text: item.prompt, + }; + dynamicItem = new DynamicMultiSelect(item); + break; + case 'select': + let defaultValue:any = item.optionList.find((option) => option.isDataLoading && option.name); + item.value = defaultValue && defaultValue.id; + dynamicItem = new DynamicSelect(item); + break; + case 'boolean': + item.value = item.value || false; + item.optionList = [{name: true, isPermitted: true, isDataLoading: item.value}, {name: false, isPermitted: true, isDataLoading: !item.value}]; + + dynamicItem = new DynamicSelect(item); + break; + case 'number': + dynamicItem = new DynamicNumber(item); + break; + case 'file': + dynamicItem = new DynamicInput(item); + break; + case 'checkbox': + dynamicItem = new DynamicInput(item); + break; + case 'map': + item.prompt = "{: ,\.\.\.,: }"; + dynamicItem = new DynamicInput(item); + break; + case 'list': + item.prompt = "[,...,]"; + dynamicItem = new DynamicInput(item); + break; + default: dynamicItem = new DynamicInput(item); + } + this.dynamicList.push(dynamicItem); + this.group.addControl(dynamicItem.name, new FormControl({value: dynamicItem.value, disabled: !dynamicItem.isEnabled}, this.buildValidators(dynamicItem))); + }) + } + +} -- cgit 1.2.3-korg