diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/directives/property-types | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/directives/property-types')
6 files changed, 137 insertions, 65 deletions
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index 25e1891790..792919172e 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -13,8 +13,8 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - - + + <div class="data-type-fields-structure"> <div class="open-close"> <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div> @@ -30,71 +30,89 @@ </div> </div> <!--<div class="property-value">--> - <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> - <fields-structure value-obj-ref="(valueObjRef[property.name])" - type-name="property.type" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}"> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> + <fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}"> - </fields-structure> - </div> - <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> - <div ng-switch-when="map"> - <type-map value-obj-ref="valueObjRef[property.name]" - schema-property="property.schema.property" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}" - types="types"></type-map> - </div> - <div ng-switch-when="list"> - <type-list value-obj-ref="valueObjRef[property.name]" + </fields-structure> + </div> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> + <div ng-switch-when="map"> + <type-map value-obj-ref="valueObjRef[property.name]" schema-property="property.schema.property" parent-form-obj="parentFormObj" fields-prefix-name="fieldsPrefixName+property.name" read-only="readOnly" default-value="{{currentTypeDefaultValue[property.name]}}" - types="types"></type-list> - </div> - <div ng-switch-default class="primitive-value-field"> - <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> - <input class="i-sdc-form-input" - data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="!((property.simpleType||property.type) == 'boolean')" - data-ng-maxlength="100" - data-ng-readonly="readOnly" - maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" - data-ng-model="valueObjRef[property.name]" - type="text" - name="{{fieldsPrefixName+property.name}}" - data-ng-pattern="getValidationPattern((property.simpleType||property.type))" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="inputOnValueChange(property)" - autofocus /> - <select class="i-sdc-form-select" - data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="(property.simpleType||property.type) == 'boolean'" - data-ng-disabled="readOnly" - name="{{fieldsPrefixName+property.name}}" - data-ng-change="onValueChange(property.name,'boolean')" - data-ng-model="valueObjRef[property.name]" - data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> - </select> + types="types"></type-map> + </div> + <div ng-switch-when="list"> + <type-list value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + types="types"></type-list> + </div> + <div ng-switch-default class="primitive-value-field"> + <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> + <!-- Has Constraints --> + + <!--<select class="i-sdc-form-select"--> + <!--ng-if="(property.constraints)"--> + <!--data-ng-disabled="readOnly"--> + <!--name="{{fieldsPrefixName+property.name}}"--> + <!--data-ng-change="onValueChange(property.name,'constraintsChange')"--> + <!--data-ng-model="valueObjRef[property.name]"--> + <!-->--> + <!--<!– Get the default value in case exist –>--> + <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>--> + <!--{{valueObjRef[property.name]}}--> + <!--</option> --> + <!--<!– add all constratint to Select list –>--> + <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >--> + <!--{{value}}--> + <!--</option> --> + <!--</select>--> + <!-- Input without constraints --> + <input class="i-sdc-form-input" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="!((property.simpleType||property.type) == 'boolean')" + data-ng-maxlength="100" + data-ng-readonly="readOnly" + maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" + data-ng-model="valueObjRef[property.name]" + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-pattern="getValidationPattern((property.simpleType||property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="inputOnValueChange(property)" + autofocus + /> + <select class="i-sdc-form-select" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="(property.simpleType||property.type) == 'boolean'" + data-ng-disabled="readOnly" + name="{{fieldsPrefixName+property.name}}" + data-ng-change="onValueChange(property.name,'boolean')" + data-ng-model="valueObjRef[property.name]" + data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> + </select> - <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> - </div> + <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> </div> </div> </div> + </div> <!--</div>--> </div> </div> - - diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts index eed209d438..ff2344534a 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts @@ -42,6 +42,7 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { expand:boolean; expanded:boolean; dataTypesService:DataTypesService; + constraints:string[]; expandAndCollapse():void; getValidationPattern(type:string):RegExp; @@ -53,11 +54,15 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { export class DataTypeFieldsStructureDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, private PropertyNameValidationPattern:RegExp, private ValidationUtils:ValidationUtils) { } + constraints: string[]; + scope = { valueObjRef: '=', typeName: '=', @@ -67,6 +72,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { defaultValue: '@', // types: '=', expandByDefault: '=' + }; restrict = 'E'; @@ -93,6 +99,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { return defaultValue; }; + private initDataOnScope = (scope:any, $attr:any):void => { scope.dataTypesService = this.DataTypesService; scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName); @@ -149,7 +156,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { return !value || this.ValidationUtils.validateIntRange(value); }; - scope.onValueChange = (propertyName:string, type:string):void => { + scope.onValueChange = (propertyName:string, type:string,):void => { scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName]; if (scope.valueObjRef[propertyName] && type != 'string') { scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]); @@ -157,7 +164,10 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { }; scope.inputOnValueChange = (property:any) => { - + if (property.constraints){ + // this.constraints = property.constraints[0].validValues; + } + let value = !scope.parentFormObj[scope.fieldsPrefixName + property.name].$error.pattern && ('integer' == property.type && scope.parentFormObj[scope.fieldsPrefixName + property.name].$setValidity('pattern', scope.validateIntRange(scope.valueObjRef[property.name])) || scope.onValueChange(property.name, (property.simpleType || property.type))); diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html index 2363f57d80..661514f799 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html @@ -20,7 +20,7 @@ <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"> <input class="i-sdc-form-input" data-tests-id="listNewItem{{fieldsPrefixName}}" - ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" data-ng-disabled="readOnly" data-ng-model="listNewItem.value" type="text" @@ -34,13 +34,32 @@ autofocus /> <select class="i-sdc-form-select" data-tests-id="listNewItem{{fieldsPrefixName}}" - ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'" data-ng-disabled="readOnly" name="listNewItem{{fieldsPrefixName}}" data-ng-model="listNewItem.value"> <option value="true">true</option> <option value="false">false</option> </select> + + + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="constraints" + data-ng-disabled="readOnly" + data-ng-model="listNewItem.value"> + <!-- Get the default value in case exist --> + <option value = "{{listNewItem.value}" name = "{{listNewItem.value}}" hidden selected> + {{listNewItem.value}} + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + + + </select> + <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid"> <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span> diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts index f2288cfd07..997e28dabc 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts @@ -37,6 +37,8 @@ export interface ITypeListScope extends ng.IScope { listDefaultValue:any; listNewItem:any; maxLength:number; + + constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -49,7 +51,7 @@ export class TypeListDirective implements ng.IDirective { constructor(private DataTypesService:DataTypesService, private PropertyNameValidationPattern:RegExp, - private ValidationUtils:ValidationUtils) { + private ValidationUtils:ValidationUtils) { } scope = { @@ -59,7 +61,8 @@ export class TypeListDirective implements ng.IDirective { fieldsPrefixName: '=',//prefix for form fields names readOnly: '=',//is form read only defaultValue: '@',//this list default value - maxLength: '=' + maxLength: '=', + constraints: '=' }; restrict = 'E'; diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html index aa03cecb17..55a414e729 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html @@ -41,8 +41,9 @@ </div> <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}"> <label class="i-sdc-form-label required">Value</label> + <input class="i-sdc-form-input" - ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" data-ng-readonly="readOnly" data-ng-model="valueObjRef[mapKeys[$index]]" type="text" @@ -57,7 +58,7 @@ autofocus /> <select class="i-sdc-form-select" data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" - ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'" data-ng-disabled="readOnly" name="mapValue{{fieldsPrefixName}}{{$index}}" data-ng-model="valueObjRef[mapKeys[$index]]" @@ -65,6 +66,24 @@ <option value="true">true</option> <option value="false">false</option> </select> + + + <select class="i-sdc-form-select" + data-tests-id="constraints" + ng-if="constraints" + data-ng-disabled="readOnly" + data-ng-model="valueObjRef[mapKeys[$index]]"> + + <!-- Get the saved value for the relevant key --> + <option ng-if = "valueObjRef[mapKeys[$index]]" value = "{{valueObjRef[mapKeys[$index]]}}" name = "{{valueObjRef[mapKeys[$index]]}}" hidden selected> + {{valueObjRef[mapKeys[$index]]}} + </option> + <!-- add all constratint to Select list --> + <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}"> + {{value}} + </option> + </select> + <div class="input-error" data-ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid"> <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value' }"></span> <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts index 5718cdd9b5..080c13b87f 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts @@ -39,6 +39,7 @@ export interface ITypeMapScope extends ng.IScope { readOnly:boolean; mapDefaultValue:any; maxLength:number; + constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -65,7 +66,9 @@ export class TypeMapDirective implements ng.IDirective { fieldsPrefixName: '=',//prefix for form fields names readOnly: '=',//is form read only defaultValue: '@',//this map default value - maxLength: '=' + maxLength: '=', + constraints: '=' + }; restrict = 'E'; |