merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

9 files changed, 304 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts
new file mode 100644
index 000000000..f505b5667
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts
@@ -0,0 +1,11 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class CheckboxFormControl extends FormControlModel{
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.CHECKBOX;
+    this.validations = [];
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts
new file mode 100644
index 000000000..ba3e860e0
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts
@@ -0,0 +1,29 @@
+import {FormControlModel} from "./formControl.model";
+import {FormGroup} from "@angular/forms";
+import {FormControlType} from "./formControlTypes.enum";
+import {Observable} from "rxjs";
+
+export class DropdownFormControl extends FormControlModel{
+  options$ : Observable<any[]> = null;
+  args : string[];
+  onInit: (data : DropdownFormControl, form: FormGroup) => Observable<any>;
+  selectedField : string;
+  onInitSelectedField : string[]; // key that should select from API response.
+  ngValue : string;
+  name : string;
+  hasEmptyOptions : boolean; // get empty result from API or REDUX.
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.DROPDOWN;
+    this.options$ = data.options ? data.options$ : null;
+    this.onInit = data.onInit;
+    this.selectedField = data.selectedField;
+    this.onInitSelectedField = data.onInitSelectedField ? data.onInitSelectedField : null;
+    this.ngValue = data.selectedField ? data.selectedField : 'id';
+    this.name = data.name;
+    this.hasEmptyOptions = false;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts
new file mode 100644
index 000000000..7803fabf8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts
@@ -0,0 +1,18 @@
+import {CustomValidatorOptions, FormControlModel, ValidatorModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+import {InputFormControl} from "./inputFormControl.model";
+
+export class FileFormControl extends FormControlModel{
+  acceptedExtentions : String;
+  selectedFile : String;
+  onDelete? :Function;
+  hiddenFile: InputFormControl[];
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.FILE;
+    this.selectedFile = data.selectedFile ? data.selectedFile : data.placeHolder;
+    this.acceptedExtentions = data.acceptedExtentions ? data.acceptedExtentions : '';
+    this.onDelete = data.onDelete ? data.onDelete : function () {};
+    this.hiddenFile = data.hiddenFile;
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts
new file mode 100644
index 000000000..24116549e
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts
@@ -0,0 +1,121 @@
+import {FormGroup, ValidatorFn, Validators} from "@angular/forms";
+import {Subject} from "rxjs/Subject";
+import {FormControlType} from "./formControlTypes.enum";
+import {CustomValidators} from "../../validators/uniqueName/uniqueName.validator";
+import * as _ from 'lodash';
+
+export class  FormControlModel {
+  formGroup : FormGroup;
+  controlName : string;
+  type : FormControlType;
+  displayName : string;
+  dataTestId : string;
+  placeHolder? : string;
+  tooltip? :string;
+  isDisabled? : boolean;
+  validations? : ValidatorModel[];
+  isVisible? : boolean;
+  value? : any;
+  originalValue?: any;
+  minLength?: number;
+  maxLength?: number;
+  onChange? : Function;
+  onBlur? : Function;
+  preventionsAttribute : AttributeMap[] = [];
+  waitFor? : Subject<string>[] = [];
+  hasErrors : () =>  string[];
+
+
+  constructor(data: any){
+    this.type = data.type;
+    this.displayName = data.displayName;
+    this.dataTestId = data.dataTestId;
+    this.placeHolder = data.placeHolder;
+    this.tooltip = data.tooltip;
+    this.isDisabled = data.isDisabled || false;
+    this.validations = data.validations || [];
+    this.isVisible = !_.isNil(data.isVisible)  ? data.isVisible : true;
+    this.value = data.value;
+    this.originalValue = data.value;
+    this.controlName = data.controlName;
+    this.minLength = data.minLength;
+    this.maxLength = data.maxLength;
+    this.preventionsAttribute = data.preventionsAttribute || [];
+    this.onBlur = function(){};
+    this.onChange = data.onChange ? data.onChange: function () {}
+  }
+
+  isRequired() : boolean {
+    for(let validtorsModel of this.validations){
+      let required = 'required';
+      if(validtorsModel.validatorName.toString() === required){
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getPreventionAttribute() : AttributeMap[] {
+    let result : AttributeMap[] = [new AttributeMap('data-tests-id', this.dataTestId)];
+    return this.preventionsAttribute.concat(result);
+  }
+}
+
+
+
+export class ValidatorModel {
+  validator : ValidatorFn;
+  validatorArg? : any;
+  validatorName : ValidatorOptions | CustomValidatorOptions;
+  errorMsg : string;
+
+  constructor(validatorName : ValidatorOptions | CustomValidatorOptions, errorMsg : string, validatorArg: any = null){
+    this.validatorName = validatorName;
+    this.validator = this.setValidator(validatorName, validatorArg);
+    this.errorMsg = errorMsg;
+    this.validatorArg = validatorArg;
+  }
+
+
+  setValidator(validatorName : ValidatorOptions | CustomValidatorOptions, validatorArg: any = null) : ValidatorFn {
+    if(validatorName in ValidatorOptions){
+      return validatorArg ? Validators[validatorName](validatorArg) : Validators[validatorName];
+    }else {
+      return validatorArg ? CustomValidators[CustomValidatorOptions[validatorName]].apply(this, validatorArg) : CustomValidators[CustomValidatorOptions[validatorName]];
+    }
+  }
+}
+
+
+
+export enum ValidatorOptions {
+  required = 'required',
+  minLength = 'minLength',
+  maxLength = 'maxLength',
+  pattern = 'pattern',
+  nullValidator = 'nullValidator'
+}
+
+
+
+export enum CustomValidatorOptions {
+  uniqueInstanceNameValidator = 'uniqueInstanceNameValidator',
+  emptyDropdownOptions = 'emptyDropdownOptions',
+  isValidJson = 'isValidJson',
+  isFileTooBig = 'isFileTooBig',
+  isStringContainTags = 'isStringContainTags'
+}
+
+export class AttributeMap {
+  key : string;
+  value : string;
+
+  constructor(key : string, value? : string){
+    this.key = key;
+    this.value = value ? value : '';
+  }
+}
+
+
+
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts
new file mode 100644
index 000000000..eba1b0894
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts
@@ -0,0 +1,8 @@
+export enum FormControlType{
+  MULTI_SELECT = 'MULTI_SELECT',
+  FILE = 'FILE',
+  NUMBER = 'NUMBER',
+  INPUT = 'INPUT',
+  DROPDOWN = 'DROPDOWN',
+  CHECKBOX = 'CHECKBOX'
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
new file mode 100644
index 000000000..8ea3d2d0b
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts
@@ -0,0 +1,55 @@
+import {FormControlModel} from "./formControl.model";
+import {ModelInformationItem} from "../../components/model-information/model-information.component";
+import {FormGroup} from "@angular/forms";
+
+export class FormPopupDetails {
+  popupTypeName: PopupType;
+  that : any;
+  UUIDData : Object = {}; // TODO uuid tree
+  title: string;
+  leftSubTitle: string;
+  rightSubTitle: string;
+  formControlList: FormControlModel[];
+  dynamicInputsControlList: FormControlModel[];
+  modelInformationItems: ModelInformationItem[];
+  onSubmit : (that : any, form: FormGroup , ...args) =>  void;
+  onCancel : (that : any, form: FormGroup) => void;
+
+  constructor(that : any,
+              popupTypeName : PopupType ,
+              UUIDData : Object,
+              title : string,
+              leftSubTitle : string,
+              rightSubTitle : string,
+              formControlList : FormControlModel[],
+              dynamicInputsControlList : FormControlModel[],
+              modelInformationItems : ModelInformationItem[],
+              onSubmit : (that : any, form : FormGroup, ...args) =>  void,
+              onCancel : (that : any, form : FormGroup) => void){
+    this.title = title;
+    this.leftSubTitle = leftSubTitle;
+    this.rightSubTitle = rightSubTitle;
+    this.formControlList = formControlList;
+    this.dynamicInputsControlList = dynamicInputsControlList;
+    this.modelInformationItems = modelInformationItems;
+    this.onSubmit = onSubmit;
+    this.onCancel = onCancel;
+    this.popupTypeName = popupTypeName;
+    this.UUIDData = UUIDData;
+    this.that = that;
+  }
+}
+
+
+
+export enum PopupType {
+  SERVICE_MACRO = 'service macro',
+  SERVICE_A_LA_CART = 'service a-la-cart',
+  SERVICE = 'service',
+  VNF_MACRO  ='vnf macro',
+  VNF_A_LA_CARTE = 'vnf a-la-carte',
+  VFMODULE = 'vfModule',
+  NETWORK_MACRO = 'network_macro',
+  VNF_GROUP = 'vnfGroup'
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts
new file mode 100644
index 000000000..99210af7a
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts
@@ -0,0 +1,19 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class InputFormControl extends FormControlModel {
+  onBlur ?: Function;
+  onKeypress?: Function;
+  inputType: string = 'text';
+  pattern: string;
+  preventions: string[];
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.INPUT;
+    this.pattern = data.pattern;
+    this.onKeypress = data.onKeypress ? data.onKeypress : ()=>{}
+    this.onBlur = data.onBlur ? data.onBlur : ()=>{}
+  }
+}
+
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts
new file mode 100644
index 000000000..b13745104
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts
@@ -0,0 +1,27 @@
+import {FormControlModel} from "./formControl.model";
+import {Observable} from "rxjs";
+import {FormGroup} from "@angular/forms";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class MultiselectFormControl extends FormControlModel{
+  options$ : Observable<any[]>;
+  args : string[];
+  onInit: (data : MultiselectFormControl, form: FormGroup) => Observable<any>;
+  selectedItems : string;
+  onInitSelectedItems : string[];
+  ngValue : string;
+  settings: {};
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.MULTI_SELECT;
+    this.options$ = data.options;
+    this.onInit = data.onInit;
+    this.selectedItems = data.selectedItems;
+    this.onInitSelectedItems = data.onInitSelectedItems ? data.onInitSelectedItems : null;
+    this.ngValue = data.selectedField ? data.selectedField : 'id';
+    this.settings = data.settings || {};
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts b/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts
new file mode 100644
index 000000000..5de38e2f7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts
@@ -0,0 +1,16 @@
+import {FormControlModel} from "./formControl.model";
+import {FormControlType} from "./formControlTypes.enum";
+
+export class NumberFormControl extends FormControlModel{
+  min: number;
+  max: number;
+
+
+  constructor(data) {
+    super(data);
+    this.type = FormControlType.NUMBER;
+    this.min = data.min;
+    this.max = data.max;
+  }
+
+}