From 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 Mon Sep 17 00:00:00 2001 From: Ittay Stern Date: Wed, 29 Aug 2018 17:01:32 +0300 Subject: merge from ecomp a88f0072 - Modern UI Issue-ID: VID-378 Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6 Signed-off-by: Ittay Stern --- .../formControlModels/checkboxFormControl.model.ts | 11 ++ .../formControlModels/dropdownFormControl.model.ts | 29 +++++ .../formControlModels/fileFormControl.model.ts | 18 +++ .../models/formControlModels/formControl.model.ts | 121 +++++++++++++++++++++ .../formControlModels/formControlTypes.enum.ts | 8 ++ .../formControlModels/formPopupDetails.model.ts | 55 ++++++++++ .../formControlModels/inputFormControl.model.ts | 19 ++++ .../multiselectFormControl.model.ts | 27 +++++ .../formControlModels/numberFormControl.model.ts | 16 +++ 9 files changed, 304 insertions(+) create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/checkboxFormControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/dropdownFormControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/fileFormControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/formControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/formControlTypes.enum.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/formPopupDetails.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/inputFormControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/multiselectFormControl.model.ts create mode 100644 vid-webpack-master/src/app/shared/models/formControlModels/numberFormControl.model.ts (limited to 'vid-webpack-master/src/app/shared/models/formControlModels') 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 = null; + args : string[]; + onInit: (data : DropdownFormControl, form: FormGroup) => Observable; + 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[] = []; + 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; + args : string[]; + onInit: (data : MultiselectFormControl, form: FormGroup) => Observable; + 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; + } + +} -- cgit 1.2.3-korg