catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17
  18 <div class="data-type-fields-structure">
  19     <div class="open-close">
  20         <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div>
  21         <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span>
  22     </div>
  23     <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property">
  24         <div class="i-sdc-form-item property-name">
  25             <div tooltips tooltip-content="{{property.name}}">
  26                 <input class="i-sdc-form-input"
  27                        type="text"
  28                        readonly="readonly"
  29                        value="{{property.name}}"/>
  30             </div>
  31         </div>
  32         <!--<div class="property-value">-->
  33         <div class="inner-structure tosca-box tosca-parent">
  34             <div class="tosca-box">
  35                 <form class="temp-form" data-ng-if="isService">
  36                     <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name) == false" data-ng-click="onEnableTosca(false,property.name)"/>
  37                     Value
  38                     <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name)" data-ng-click="onEnableTosca(true,property.name)" />
  39                     {{'TOSCA_FUNCTION_LABEL' | translate}}
  40                 </form>
  41             </div>
  42             <div data-ng-if="verifyTosca(property.name)" class="div-tosca-function">
  43                 <tosca-function [property]="getSubProperty(property.name)"
  44                                 [component-instance-map]="componentInstanceMap"
  45                                 [allow-clear]="false"
  46                                 [composition-map]="true"
  47                                 [composition-map-key]="property.name"
  48                                 [complex-list-key]="complexToscapath"
  49                                 (on-valid-function)="onGetToscaFunction($event,property.name)"
  50                 >
  51                 </tosca-function>
  52             </div>
  53             <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" class="tosca-box">
  54                 <fields-structure value-obj-ref="(valueObjRef[property.name])"
  55                                 type-name="property.type"
  56                                 parent-property="parentProperty"
  57                                 component-instance-map="componentInstanceMap"
  58                                 parent-form-obj="parentFormObj"
  59                                 fields-prefix-name="fieldsPrefixName+property.name"
  60                                 read-only="readOnly"
  61                                 is-service="isService"
  62                                 complex-toscapath="property.name"
  63                                 default-value="{{currentTypeDefaultValue[property.name]}}">
  64
  65                 </fields-structure>
  66             </div>
  67             <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" ng-switch="property.type" class="tosca-box">
  68                 <div ng-switch-when="map">
  69                     <type-map value-obj-ref="valueObjRef[property.name]"
  70                             schema-property="getSubProperty(property.name).schema.property"
  71                             parent-property="getSubProperty(property.name)"
  72                             component-instance-map="componentInstanceMap"
  73                             parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
  74                             fields-prefix-name="fieldsPrefixName+property.name"
  75                             read-only="readOnly"
  76                             default-value="{{currentTypeDefaultValue[property.name]}}"
  77                             is-service="isService"
  78                             complex-toscapath="property.name"
  79                             types="types"></type-map>
  80                 </div>
  81                 <div ng-switch-when="list">
  82                     <type-list value-obj-ref="valueObjRef[property.name]"
  83                             schema-property="getSubProperty(property.name).schema.property"
  84                             parent-property="getSubProperty(property.name)"
  85                             component-instance-map="componentInstanceMap"
  86                             parent-form-obj="parentFormObj[fieldsPrefixName + property.name]"
  87                             fields-prefix-name="fieldsPrefixName+property.name"
  88                             read-only="readOnly"
  89                             default-value="{{currentTypeDefaultValue[property.name]}}"
  90                             is-service="isService"
  91                             complex-toscapath="property.name"
  92                             types="types"></type-list>
  93                 </div>
  94                 <div ng-switch-default class="primitive-value-field">
  95                     <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
  96                         <!-- Has Constraints -->
  97
  98                         <!--<select class="i-sdc-form-select"-->
  99                         <!--ng-if="(property.constraints)"-->
 100                         <!--data-ng-disabled="readOnly"-->
 101                         <!--name="{{fieldsPrefixName+property.name}}"-->
 102                         <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
 103                         <!--data-ng-model="valueObjRef[property.name]"-->
 104                         <!--&gt;-->
 105                         <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
 106                         <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
 107                         <!--{{valueObjRef[property.name]}}-->
 108                         <!--</option> -->
 109                         <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
 110                         <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
 111                         <!--{{value}}-->
 112                         <!--</option> -->
 113                         <!--</select>-->
 114                         <!-- Input without constraints -->
 115                         <input class="i-sdc-form-input"
 116                             data-tests-id="{{fieldsPrefixName+property.name}}"
 117                             ng-if="!((property.simpleType||property.type) == 'boolean')"
 118                             data-ng-maxlength="100"
 119                             data-ng-readonly="readOnly"
 120                             maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
 121                             data-ng-model="valueObjRef[property.name]"
 122                             type="text"
 123                             name="{{fieldsPrefixName+property.name}}"
 124                             data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
 125                             data-ng-model-options="{ debounce: 200 }"
 126                             data-ng-change="inputOnValueChange(property,valueObjRef[property.name])"
 127                             autofocus
 128                         />
 129                         <select class="i-sdc-form-select"
 130                                 data-tests-id="{{fieldsPrefixName+property.name}}"
 131                                 ng-if="(property.simpleType||property.type) == 'boolean'"
 132                                 data-ng-disabled="readOnly"
 133                                 name="{{fieldsPrefixName+property.name}}"
 134                                 data-ng-change="onValueChange(property.name,'boolean')"
 135                                 data-ng-model="valueObjRef[property.name]"
 136                                 data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
 137                         </select>
 138
 139                         <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
 140                             <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 141                             <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
 142                             <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
 143                         </div>
 144                     </div>
 145                 </div>
 146             </div>
 147         </div>
 148         <!--</div>-->
 149
 150     </div>
 151 </div>