New Angular UI from 1806
Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>
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 0000000..921c923
--- /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<any>[] = [];
+
+ isDynamicNumber(item: any): item is DynamicNumber {
+ return item;
+ }
+
+ buildValidators(item: DynamicInput<any>) {
+ 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<any>;
+ 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<any>(item);
+ break;
+ case 'checkbox':
+ dynamicItem = new DynamicInput<boolean>(item);
+ break;
+ case 'map':
+ item.prompt = "{<key1>: <value1>,\.\.\.,<keyN>: <valueN>}";
+ dynamicItem = new DynamicInput<string>(item);
+ break;
+ case 'list':
+ item.prompt = "[<value1>,...,<valueN>]";
+ dynamicItem = new DynamicInput<string>(item);
+ break;
+ default: dynamicItem = new DynamicInput<string>(item);
+ }
+ this.dynamicList.push(dynamicItem);
+ this.group.addControl(dynamicItem.name, new FormControl({value: dynamicItem.value, disabled: !dynamicItem.isEnabled}, this.buildValidators(dynamicItem)));
+ })
+ }
+
+}
diff --git a/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.html b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.html
new file mode 100644
index 0000000..a933364
--- /dev/null
+++ b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.html
@@ -0,0 +1,22 @@
+<div *ngFor="let item of dynamicList">
+ <div id="{{item.id}}" class="details-item" [ngSwitch]="item.type" [formGroup]="group" [hidden]="!item.isVisible">
+ <label>{{item.name | dynamicInputLabel }}</label>
+ <select *ngSwitchCase="item.type === 'select'|| item.type === 'boolean'? item.type: ''" name="{{item.name}}" class="form-control input-text" [formControlName]="item.name" title="{{item.description}}" [required]="item.isRequired && item.isVisible" maxlength="{{item.maxLength}}" minlength="{{item.minLength}}">
+ <option value="null" [selected]="item.value == null || item.value == undefined" hidden disabled>{{item.prompt}}</option>
+ <option *ngFor="let option of item.optionList" [ngValue]="option.id || option.name" [disabled]="!option.isPermitted" [selected]="option.isDataLoading">{{option.name}}</option>
+ </select>
+ <angular2-multiselect *ngSwitchCase="'multi_select'" [formControlName]="item.name" [(ngModel)]="item.selectedItems" [data]="item.optionList" [settings]="item.settings" title="{{item.description}}" [required]="item.isRequired && item.isVisible"></angular2-multiselect>
+ <input *ngSwitchCase="'number'" name="{{item.name}}" class="form-control input-text" [formControlName]="item.name" type="number" placeholder="{{item.prompt}}" title="{{item.description}}" min="{{item.min}}" max="{{item.max}}" [readonly]="item.isReadOnly" [required]="item.isRequired && item.isVisible">
+ <div *ngSwitchCase="'file'">
+
+ <label class="dynamicFileName" for="dynamicFileInput-{{item.name}}">
+ <input id="dynamicFileInput-{{item.name}}" name="{{item.name}}" class="form-control input-text" [formControlName]="item.name" type="file" placeholder="{{item.prompt}}" [readonly]="item.isReadOnly" [required]="item.isRequired && item.isVisible">
+ <label for="dynamicFileInput-{{item.name}}" class="labelForImage">
+ <span class="icon-browse"></span>
+ </label>
+ </label>
+ </div>
+ <input *ngSwitchCase="'checkbox'" name="{{item.name}}" [formControlName]="item.name" type="checkbox" data-toggle="toggle" title="{{item.description}}" [readonly]="item.isReadOnly" [required]="item.isRequired && item.isVisible">
+ <input *ngSwitchDefault name="{{item.name}}" class="form-control input-text" [formControlName]="item.name" placeholder="{{item.prompt}}" title="{{item.description}}" maxlength="{{item.maxLength}}" minlength="{{item.minLength}}" [readonly]="item.isReadOnly" [required]="item.isRequired && item.isVisible"/>
+ </div>
+</div>
diff --git a/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.scss b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.scss
new file mode 100644
index 0000000..11a1414
--- /dev/null
+++ b/vid-webpack-master/src/app/components/dynamic-inputs/dynamic-inputs.scss
@@ -0,0 +1,58 @@
+input[type=file] {
+ opacity: 0;
+ position: relative;
+ z-index: 1;
+ width: 0.5px;
+ height: 0.5px;
+ display: inline-block;
+ input {
+ display: none;
+ }
+}
+
+.dynamicFileName {
+ width: 100%;
+ height: 34px;
+ background: #FFFFFF;
+ border: 1px solid #D2D2D2;
+ border-radius: 2px;
+ display: inline-block;
+ line-height: 34px;
+ font-weight: normal !important;
+ padding-left: 3px;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.labelForImage {
+ background: #F2F2F2;
+ border-left: 1px solid #D2D2D2;
+ float: right;
+ height: 32px;
+}
+
+.icon-browse:before {
+ content: "\e90d";
+ color: #5A5A5A;
+ font-size: 15px;
+ cursor: pointer;
+ width: 34px;
+ height: 100%;
+ line-height: 34px;
+ text-align: center;
+ display: inline-block;
+ vertical-align: super;
+ border-radius: 2px;
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+
+.icon-browse:hover::before {
+ background-color: #E6F6FB;
+ color: #009FDB;
+}
+
+.icon-browse:active::before {
+ background-color: #E6F6FB;
+ color: #009FDB;
+}