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