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 <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">
  17     <loader data-display="isLoading" relative="false" size="medium"></loader>
  18     <div class="sdc-modal-top-bar" data-ng-if="!isNew">
  19         <div class="sdc-modal-top-bar-buttons">
  20             <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>
  21             <span class="delimiter"></span>
  22             <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>
  23             <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>
  24         </div>
  25     </div>
  26
  27     <div class="sdc-edit-property-form-container" >
  28         <perfect-scrollbar scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
  29             <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
  30
  31                 <div class="w-sdc-form-columns-wrapper">
  32
  33                     <div class="w-sdc-form-column">
  34
  35                         <!-- Name -->
  36                         <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid)}">
  37                             <label class="i-sdc-form-label" ng-class="{'required': !componentMetadata.isService}">Name</label>
  38                             <input class="i-sdc-form-input"
  39                                    data-tests-id="propertyName"
  40                                    data-ng-maxlength="nameMaxLength"
  41                                    data-ng-disabled="!isNew || editPropertyModel.property.readonly"
  42                                    maxlength="{{nameMaxLength}}"
  43                                    data-ng-model="editPropertyModel.property.name"
  44                                    type="text"
  45                                    name="propertyName"
  46                                    data-ng-pattern="propertyNameValidationPattern"
  47                                    data-required
  48                                    data-ng-model-options="{ debounce: 200 }"
  49                                    autofocus />
  50
  51                             <div class="input-error" data-ng-show="forms.editForm.propertyName.$dirty && forms.editForm.propertyName.$invalid">
  52                                 <span ng-show="forms.editForm.propertyName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Property name' }"></span>
  53                                 <span ng-show="forms.editForm.propertyName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{nameMaxLength}}' }"></span>
  54                                 <span ng-show="forms.editForm.propertyName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  55                             </div>
  56                         </div>
  57                     </div>
  58
  59                     <div class="w-sdc-form-column">
  60                         <div class="w-sdc-form-columns-wrapper">
  61                             <div class="w-sdc-form-column">
  62                                 <!-- Type -->
  63                                 <div class="i-sdc-form-item"  data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
  64                                     <label class="i-sdc-form-label" ng-class="{'required': !componentMetadata.isService}">Type</label>
  65                                     <select class="i-sdc-form-select"
  66                                             data-tests-id="propertyType"
  67                                             data-required
  68                                             data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
  69                                             name="type"
  70                                             data-ng-change="onTypeChange()"
  71                                             data-ng-model="editPropertyModel.property.type">
  72                                         <option value="">Choose Type</option>
  73                                         <option data-ng-repeat="type in editPropertyModel.types"
  74                                                 value="{{type}}">{{type}}</option>
  75                                         <option data-ng-repeat="type in nonPrimitiveTypes"
  76                                                 value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
  77                                     </select>
  78
  79                                     <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
  80                                         <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span>
  81                                     </div>
  82                                 </div>
  83                             </div>
  84                             <div class="w-sdc-form-column" data-ng-if="showSchema()">
  85                                 <!-- Entry Schema -->
  86                                 <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid)}">
  87                                     <label class="i-sdc-form-label required">{{'PROPERTY_ENTRY_SCHEMA' | translate}}</label>
  88                                     <select class="i-sdc-form-select"
  89                                             data-required
  90                                             data-tests-id="schema-type"
  91                                             data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
  92                                             name="schemaType"
  93                                             data-ng-change="onSchemaTypeChange()"
  94                                             data-ng-model="editPropertyModel.property.schema.property.type">
  95                                         <option value="">{{'PROPERTY_ENTRY_SCHEMA_CHOOSE_OPTION' | translate}}</option>
  96                                         <option data-ng-repeat="type in editPropertyModel.types"
  97                                                 value="{{type}}">{{type}}</option>
  98                                         <option data-ng-repeat="type in nonPrimitiveTypes"
  99                                                 value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>
 100                                     </select>
 101
 102                                     <div class="input-error" data-ng-show="forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid">
 103                                         <span ng-show="forms.editForm.schemaType.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span>
 104                                     </div>
 105                                 </div>
 106                             </div>
 107                         </div>
 108
 109                         <!-- Constraints by type -->
 110                         <div class="i-sdc-form-item" data-ng-if="false">
 111                             <label class="i-sdc-form-label required">Constraints by type</label>
 112                             <div>
 113                                 Should be constraints by type(TBD)
 114                             </div>
 115                         </div>
 116
 117                     </div>
 118
 119                 </div>
 120                 <!-- Description -->
 121                 <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
 122                     <label class="i-sdc-form-label">Description</label>
 123                             <textarea  class="i-sdc-form-textarea"
 124                                        data-ng-maxlength="400"
 125                                        data-ng-disabled="isPropertyValueOwner || editPropertyModel.property.readonly"
 126                                        maxlength="400"
 127                                        data-ng-pattern="commentValidationPattern"
 128                                        name="description"
 129                                        data-ng-model="editPropertyModel.property.description"
 130                                        data-ng-model-options="{ debounce: 200 }"
 131                                        data-tests-id="description"
 132                             ></textarea>
 133
 134                     <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
 135                         <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 136                         <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 137                         <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span>
 138                     </div>
 139                 </div>
 140                 <!-- Default value -->
 141
 142                 <div class="default-value-section i-sdc-form-item">
 143                     <label class="i-sdc-form-label">Default Value</label>
 144                     <ng-container ng-if="!componentMetadata.isVfc">
 145                         <input type="hidden" ng-model="editPropertyModel.isGetFunctionValid" required="required"/>
 146                         <input type="radio" name="hasGetFunctionValue"
 147                                ng-model="editPropertyModel.hasGetFunctionValue"
 148                                ng-value="false"
 149                                ng-change="onValueTypeChange()"/> Value
 150                         <input type="radio" name="hasGetFunctionValue"
 151                                ng-model="editPropertyModel.hasGetFunctionValue"
 152                                ng-value="true"
 153                                ng-change="onValueTypeChange()"/> {{'TOSCA_FUNCTION_LABEL' | translate}}
 154                         <div data-ng-if="editPropertyModel.hasGetFunctionValue">
 155                             <tosca-function [property]="editPropertyModel.property"
 156                                             [component-instance-map]="componentInstanceMap"
 157                                             [allow-clear]="false"
 158                                             (on-valid-function)="onGetFunctionValidFunction($event)"
 159                                             (on-validity-change)="onToscaFunctionValidityChange($event)"
 160                             >
 161                             </tosca-function>
 162                         </div>
 163                     </ng-container>
 164                     <div data-ng-if="!editPropertyModel.hasGetFunctionValue">
 165                         <div data-ng-if="isTypeDataType">
 166                             <fields-structure value-obj-ref="myValue"
 167                                               type-name="editPropertyModel.property.type"
 168                                               parent-form-obj="forms.editForm"
 169                                               fields-prefix-name="currentPropertyIndex"
 170                                               read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
 171                                               default-value="{{getDefaultValue()}}"
 172                                               expand-by-default="true"></fields-structure>
 173
 174                         </div>
 175                         <div data-ng-if="!isTypeDataType" ng-switch="editPropertyModel.property.type">
 176                             <div ng-switch-when="map">
 177                                 <type-map value-obj-ref="myValue"
 178                                           schema-property="editPropertyModel.property.schema.property"
 179                                           parent-form-obj="forms.editForm"
 180                                           fields-prefix-name="currentPropertyIndex"
 181                                           read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
 182                                           default-value="{{getDefaultValue()}}"
 183                                           max-length="maxLength"
 184                                           constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues">
 185                                 </type-map>
 186                             </div>
 187
 188                             <div ng-switch-when="list">
 189                                 <type-list value-obj-ref="myValue"
 190                                            schema-property="editPropertyModel.property.schema.property"
 191                                            parent-form-obj="forms.editForm"
 192                                            fields-prefix-name="currentPropertyIndex"
 193                                            read-only="editPropertyModel.property.readonly && !isPropertyValueOwner"
 194                                            default-value="{{getDefaultValue()}}"
 195                                            max-length="maxLength"
 196                                            constraints="editPropertyModel.property.constraints && editPropertyModel.property.constraints[0].validValues"></type-list>
 197                             </div>
 198
 199                             <div ng-switch-default>
 200                                 <div class="i-sdc-form-item"
 201                                      data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid), 'input-group' : editPropertyModel.property.addOn}">
 202                                     <span ng-if="editPropertyModel.property.addOn"
 203                                           class="input-group-addon">{{editPropertyModel.property.addOn}}</span>
 204                                     <!-- Has Constraints -->
 205                                     <select class="i-sdc-form-select"
 206                                             data-tests-id="constraints"
 207                                             ng-if="(editPropertyModel.property.constraints)"
 208                                             data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
 209
 210                                             data-ng-change="onValueChange()"
 211                                             data-ng-model="editPropertyModel.property.value">
 212                                         <!-- Get the default value in case exist -->
 213                                         <option value="{{editPropertyModel.property.value}}" name="{{editPropertyModel.property.value}}" hidden
 214                                                 selected>
 215                                             {{editPropertyModel.property.value}}
 216                                         </option>
 217                                         <!-- add all constratint to Select list -->
 218                                         <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
 219                                             {{value}}
 220                                         </option>
 221                                     </select>
 222
 223
 224                                     <!-- No Constraints -->
 225                                     <input class="i-sdc-form-input"
 226                                            data-tests-id="defaultvalue"
 227                                            ng-if="!(editPropertyModel.property.constraints) && !((editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean')"
 228                                            data-ng-maxlength="maxLength"
 229                                            data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
 230                                            maxlength="{{maxLength}}"
 231                                            data-ng-model="editPropertyModel.property.value"
 232                                            type="text"
 233                                            name="value"
 234                                            data-ng-pattern="getValidationPattern((editPropertyModel.property.simpleType||editPropertyModel.property.type))"
 235                                            data-ng-model-options="{ debounce: 200 }"
 236                                            data-ng-change="('json'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateJson(editPropertyModel.property.value)))
 237                                                         ||(!forms.editForm.value.$error.pattern && ('integer'==editPropertyModel.property.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editPropertyModel.property.value)) || onValueChange()))"
 238                                            data-ng-change=""
 239                                            autofocus/>
 240                                     <!-- Boolean -->
 241                                     <select class="i-sdc-form-select"
 242                                             data-tests-id="booleantype"
 243                                             ng-if="(editPropertyModel.property.simpleType||editPropertyModel.property.type) == 'boolean'"
 244                                             data-ng-disabled="editPropertyModel.property.readonly && !isPropertyValueOwner"
 245                                             name="value"
 246                                             data-ng-change="onValueChange()"
 247                                             data-ng-model="editPropertyModel.property.value">
 248                                         <option value="true">true</option>
 249                                         <option value="false">false</option>
 250                                     </select>
 251
 252                                     <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
 253                                         <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED"
 254                                               translate-values="{'field': 'Property' }"></span>
 255                                         <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH"
 256                                               translate-values="{'max': '{{maxLength}}' }"></span>
 257                                         <span ng-show="forms.editForm.value.$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
 258                                     </div>
 259                                 </div>
 260                             </div>
 261                         </div>
 262                     </div>
 263                 </div>
 264                 <div class="constraints-section i-sdc-form-item" data-ng-if="editPropertyModel.property.constraints || !(isViewOnly || componentMetadata.isService)">
 265                     <label class="i-sdc-form-label">Constraints</label>
 266                     <ng-container>
 267                         <app-constraints [property-constraints]="editPropertyModel.property.constraints"
 268                                          [is-view-only]="isViewOnly || componentMetadata.isService"
 269                                          [property-type]="editPropertyModel.property.type"
 270                                          (on-constraint-change)="onConstraintChange($event)">
 271                         </app-constraints>
 272                     </ng-container>
 273                 </div>
 274                 <span  class="w-sdc-form-note"  data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
 275             </form>
 276         </perfect-scrollbar>
 277     </div>
 278
 279 </ng1-modal>