catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html

   1 <sdc-modal modal="modalInstanceProperty" type="classic" class="sdc-edit-property-container" buttons="footerButtons" header="{{isNew ? 'Add' : 'Update' }} Property" show-close-button="true" data-tests-id="sdc-edit-property-container">
   2     <loader data-display="isLoading" relative="false" size="medium"></loader>
   3     <div class="sdc-modal-top-bar" data-ng-if="!isNew">
   4         <div class="sdc-modal-top-bar-buttons">
   5             <span ng-click="delete(editPropertyModel.property)" data-ng-class="{'disabled' : isPropertyValueOwner || editPropertyModel.property.readonly}" class="sprite-new delete-btn" data-tests-id="delete_property"  sdc-smart-tooltip="">Delete</span>
   6             <span class="delimiter"></span>
   7             <span data-ng-click="getPrev()" data-ng-class="{'disabled' : !currentPropertyIndex }" class="sprite-new left-arrow" data-tests-id="get-prev" sdc-smart-tooltip="">Previous</span>
   8             <span data-ng-click="getNext()" data-ng-class="{'disabled' : isLastProperty }" class="sprite-new right-arrow" data-tests-id="get-next" sdc-smart-tooltip="">Next</span>
   9         </div>
  10     </div>
  11
  12     <div class="sdc-edit-property-form-container" >
  13         <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
  14             <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
  15
  16                 <div class="w-sdc-form-columns-wrapper">
  17
  18                     <div class="w-sdc-form-column">
  19
  20                         <!-- Name -->
  21                         <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid)}">
  22                             <label class="i-sdc-form-label" ng-class="{'required': !isService}">Name</label>
  23                             <input class="i-sdc-form-input"
  24                                    data-tests-id="propertyName"
  25                                    data-ng-maxlength="50"
  26                                    data-ng-disabled="!isNew || editPropertyModel.property.readonly"
  27                                    maxlength="50"
  28                                    data-ng-model="editPropertyModel.property.name"
  29                                    type="text"
  30                                    name="propertyName"
  31                                    data-ng-pattern="propertyNameValidationPattern"
  32                                    data-required
  33                                    data-ng-model-options="{ debounce: 200 }"
  34                                    autofocus />
  35
  36                             <div class="input-error" data-ng-show="forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid">
  37                                 <span ng-show="forms.editForm.propertyName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Property name' }"></span>
  38                                 <span ng-show="forms.editForm.propertyName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
  39                                 <span ng-show="forms.editForm.propertyName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  40                             </div>
  41                         </div>
  42                     </div>
  43
  44                     <div class="w-sdc-form-column">
  45                         <div class="w-sdc-form-columns-wrapper">
  46                             <div class="w-sdc-form-column">
  47                                 <!-- Type -->
  48                                 <div class="i-sdc-form-item"  data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
  49                                     <label class="i-sdc-form-label" ng-class="{'required': !isService}">Type</label>
  50                                     <select class="i-sdc-form-select"
  51                                             data-tests-id="propertyType"
  52                                             data-required
  53                                             data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
  54                                             name="type"
  55                                             data-ng-change="onTypeChange()"
  56                                             data-ng-model="editPropertyModel.property.type">
  57                                         <option value="">Choose Type</option>
  58                                         <option data-ng-repeat="type in editPropertyModel.types"
  59                                                 value="{{type}}">{{type}}</option>
  60                                         <option data-ng-repeat="type in nonPrimitiveTypes"
  61                                                 value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
  62                                     </select>
  63
  64                                     <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
  65                                         <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span>
  66                                     </div>
  67                                 </div>
  68                             </div>
  69                             <div class="w-sdc-form-column" data-ng-if="showSchema()">
  70                                 <!-- Entry Schema -->
  71                                 <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid)}">
  72                                     <label class="i-sdc-form-label required">Entry Schema</label>
  73                                     <select class="i-sdc-form-select"
  74                                             data-required
  75                                             data-tests-id="schema-type"
  76                                             data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
  77                                             name="schemaType"
  78                                             data-ng-change="onSchemaTypeChange()"
  79                                             data-ng-model="editPropertyModel.property.schema.property.type">
  80                                         <option value="">Choose Schema Type</option>
  81                                         <option data-ng-repeat="type in editPropertyModel.simpleTypes"
  82                                                 value="{{type}}">{{type}}</option>
  83                                         <option data-ng-repeat="type in nonPrimitiveTypes"
  84                                                 value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
  85                                     </select>
  86
  87                                     <div class="input-error" data-ng-show="forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid">
  88                                         <span ng-show="forms.editForm.schemaType.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span>
  89                                     </div>
  90                                 </div>
  91                             </div>
  92                         </div>
  93
  94                         <!-- Constraints by type -->
  95                         <div class="i-sdc-form-item" data-ng-if="false">
  96                             <label class="i-sdc-form-label required">Constraints by type</label>
  97                             <div>
  98                                 Should be constraints by type(TBD)
  99                             </div>
 100                         </div>
 101
 102                     </div>
 103
 104                 </div>
 105                 <!-- Description -->
 106                 <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
 107                     <label class="i-sdc-form-label">Description</label>
 108                             <textarea  class="i-sdc-form-textarea"
 109                                        data-ng-maxlength="400"
 110                                        data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
 111                                        maxlength="400"
 112                                        data-ng-pattern="commentValidationPattern"
 113                                        name="description"
 114                                        data-ng-model="editPropertyModel.property.description"
 115                                        data-ng-model-options="{ debounce: 200 }"
 116                                        data-tests-id="description"
 117                             ></textarea>
 118
 119                     <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
 120                         <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 121                         <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 122                         <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span>
 123                     </div>
 124                 </div>
 125                 <!-- Default value -->
 126
 127                 <div class="default-value-section i-sdc-form-item">
 128                     <label class="i-sdc-form-label">Default Value</label>
 129                     <div data-ng-if="isTypeDataType">
 130                         <fields-structure value-obj-ref="myValue"
 131                                           type-name="editPropertyModel.property.type"
 132                                           parent-form-obj="forms.editForm"
 133                                           fields-prefix-name="currentPropertyIndex"
 134                                           read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
 135                                           default-value="{{getDefaultValue()}}"
 136                                           expand-by-default="true"></fields-structure>
 137
 138                     </div>
 139                     <div data-ng-if="!isTypeDataType" ng-switch="editPropertyModel.property.type">
 140                         <div ng-switch-when="map">
 141                             <type-map value-obj-ref="myValue"
 142                                  schema-property="editPropertyModel.property.schema.property"
 143                                  parent-form-obj="forms.editForm"
 144                                  fields-prefix-name="currentPropertyIndex"
 145                                  read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
 146                                  default-value="{{getDefaultValue()}}"
 147                                  max-length="maxLength"></type-map>
 148                         </div>
 149                         <div ng-switch-when="list">
 150                             <type-list value-obj-ref="myValue"
 151                                   schema-property="editPropertyModel.property.schema.property"
 152                                   parent-form-obj="forms.editForm"
 153                                   fields-prefix-name="currentPropertyIndex"
 154                                   read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
 155                                   default-value="{{getDefaultValue()}}"
 156                                   max-length="maxLength"></type-list>
 157                         </div>
 158                         <div ng-switch-default>
 159                             <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}">
 160                                 <span ng-if="editPropertyModel.property.addOn" class="input-group-addon">{{editPropertyModel.property.addOn}}</span>
 161                                 <input class="i-sdc-form-input"
 162                                        data-tests-id="defaultvalue"
 163                                        ng-if="!((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
 164                                        data-ng-maxlength="maxLength"
 165                                        data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
 166                                        maxlength="{{maxLength}}"
 167                                        data-ng-model="editPropertyModel.property.value"
 168                                        type="text"
 169                                        name="value"
 170                                        data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))"
 171                                        data-ng-model-options="{ debounce: 200 }"
 172                                        data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value)))
 173                                                         ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value)) || onValueChange()))"
 174                                        data-ng-change=""
 175                                        autofocus />
 176                                 <select class="i-sdc-form-select"
 177                                         data-tests-id="booleantype"
 178                                         ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'"
 179                                         data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
 180                                         name="value"
 181                                         data-ng-change="onValueChange()"
 182                                         data-ng-model="editPropertyModel.property.value">
 183                                     <option value="true">true</option>
 184                                     <option value="false">false</option>
 185                                 </select>
 186
 187                                 <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
 188                                     <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Property' }"></span>
 189                                     <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
 190                                     <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
 191                                 </div>
 192                             </div>
 193                         </div>
 194                     </div>
 195                 </div>
 196                 <span  class="w-sdc-form-note"  data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
 197             </form>
 198         </perfect-scrollbar>
 199     </div>
 200
 201 </sdc-modal>