catalog-ui/src/app/view-models/forms/attribute-form/attribute-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="modalInstanceAttribute" type="classic" class="sdc-edit-attribute-container" buttons="footerButtons"  header="{{isNew ? 'Add' : 'Update' }} Attribute" show-close-button="true">
  18
  19     <div class="sdc-edit-attribute-form-container" >
  20         <form novalidate class="w-sdc-form two-columns" name="forms.editForm" >
  21
  22             <div class="w-sdc-form-columns-wrapper">
  23
  24                 <div class="w-sdc-form-column">
  25
  26                     <!-- Name -->
  27                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid)}">
  28                         <label class="i-sdc-form-label required">Name</label>
  29                         <input class="i-sdc-form-input"
  30                         data-tests-id="attributeName"
  31                         data-ng-maxlength="50"
  32                         data-ng-disabled="!isNew"
  33                         maxlength="50"
  34                         data-ng-model="editAttributeModel.attribute.name"
  35                         type="text"
  36                         name="attributeName"
  37                         data-ng-pattern="propertyNameValidationPattern"
  38                         data-required
  39                         data-ng-model-options="{ debounce: 200 }"
  40                         data-ng-change="validateName()"
  41                         autofocus />
  42                         <div class="input-error" data-ng-show="forms.editForm.attributeName.$dirty && forms.editForm.attributeName.$invalid">
  43                             <span ng-show="forms.editForm.attributeName.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Attribute name' }"></span>
  44                             <span ng-show="forms.editForm.attributeName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
  45                             <span ng-show="forms.editForm.attributeName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  46                             <span ng-show="forms.editForm.attributeName.$error.nameExist" translate="NEW_ATTRIBUTE_ERROR_NAME_EXISTS"></span>
  47                         </div>
  48                     </div>
  49
  50                     <!-- Description -->
  51                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
  52                         <label class="i-sdc-form-label">Description</label>
  53                         <textarea  class="i-sdc-form-textarea"
  54                         data-ng-maxlength="256"
  55                         data-ng-disabled="editAttributeModel.attribute.readonly"
  56                         maxlength="256"
  57                         data-ng-pattern="commentValidationPattern"
  58                         name="description"
  59                         data-ng-model="editAttributeModel.attribute.description"
  60                         data-ng-model-options="{ debounce: 200 }"
  61                         data-tests-id="description"></textarea>
  62                         <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
  63                             <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
  64                             <span ng-show="forms.editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  65                             <span ng-show="forms.editForm.description.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Description' }"></span>
  66                         </div>
  67                     </div>
  68
  69
  70                 </div>
  71
  72                 <div class="w-sdc-form-column">
  73                     <!-- Type -->
  74                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
  75                         <label class="i-sdc-form-label required">Type</label>
  76                         <select class="i-sdc-form-select"
  77                                 data-tests-id="type-field"
  78                                 data-required
  79                                 data-ng-disabled="editAttributeModel.attribute.readonly"
  80                                 name="type"
  81                                 data-ng-change="onTypeChange()"
  82                                 data-ng-model="editAttributeModel.attribute.type"
  83                                 data-ng-options="type for type in editAttributeModel.types">
  84                             <option value="">Choose Type</option>
  85                         </select>
  86                         <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
  87                             <span ng-show="forms.editForm.type.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Type' }"></span>
  88                         </div>
  89                     </div>
  90
  91                     <!-- schema -->
  92                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schema.$dirty && forms.editForm.schema.$invalid)}"
  93                          data-ng-if="showSchema()">
  94                         <label class="i-sdc-form-label required">Entry Schema</label>
  95                         <select class="i-sdc-form-select" ng-if="isSchemaEditable()"
  96                         data-required
  97                         name="schema"
  98                         data-ng-disabled="editAttributeModel.attribute.readonly"
  99                         data-ng-change="onTypeChange(false)"
 100                         data-ng-model="editAttributeModel.attribute.schema.property.type"
 101                         data-ng-options="type for type in editAttributeModel.simpleTypes">
 102                         <option value="">Choose Schema Type</option>
 103                         </select>
 104                         <input class="i-sdc-form-input"
 105                                ng-if="!isSchemaEditable()"
 106                                data-tests-id="schema"
 107                                data-ng-disabled="true"
 108                                data-ng-model="editAttributeModel.attribute.schema.property.type"
 109                                type="text"
 110                                name="schema"/>
 111                         <div class="input-error" data-ng-show="forms.editForm.schema.$dirty && forms.editForm.schema.$invalid">
 112                             <span ng-show="forms.editForm.schema.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Entry schema' }"></span>
 113                         </div>
 114                     </div>
 115
 116                     <!-- Default value -->
 117                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.value.$dirty && forms.editForm.value.$invalid)}">
 118                         <label class="i-sdc-form-label">Default Value</label>
 119                         <input class="i-sdc-form-input"
 120                                data-tests-id="defaultvalue"
 121                                ng-if="!(editAttributeModel.attribute.type == 'boolean')"
 122                                data-ng-maxlength="2500"
 123                                data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
 124                                maxlength="2500"
 125                                data-ng-model="attributeValue.value"
 126                                type="text"
 127                                name="value"
 128                                data-custom-validation="" data-validation-func="validateUniqueKeys"
 129                                data-ng-pattern="validationPattern"
 130                                data-ng-model-options="{ debounce: 200 }"
 131                                data-ng-change="!forms.editForm.value.$error.pattern && ('integer'==editAttributeModel.attribute.type && forms.editForm.value.$setValidity('pattern', validateIntRange(editAttributeModel.attribute.value)) || onValueChange())"
 132                                autofocus />
 133                         <select class="i-sdc-form-select"
 134                                 data-tests-id="booleantype"
 135                                 ng-if="editAttributeModel.attribute.type == 'boolean'"
 136                                 data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
 137                                 name="value"
 138                                 data-ng-change="onValueChange()"
 139                                 data-ng-model="attributeValue.value">
 140                             <option value="true">true</option>
 141                             <option value="false">false</option>
 142                         </select>
 143                         <div class="input-error" data-ng-show="forms.editForm.value.$dirty && forms.editForm.value.$invalid">
 144                             <span ng-show="forms.editForm.value.$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Default value' }"></span>
 145                             <span ng-show="forms.editForm.value.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 146                             <span ng-show="forms.editForm.value.$error.pattern" translate="{{getValidationTranslate()}}"></span>
 147                             <span ng-show="forms.editForm.value.$error.customValidation" translate="ATTRIBUTE_EDIT_MAP_UNIQUE_KEYS"></span>
 148                         </div>
 149                     </div>
 150
 151                     <!-- hidden -->
 152                     <div class="i-sdc-form-item" data-ng-if="isAttributeValueOwner()">
 153                         <label class="i-sdc-form-label">Hidden</label>
 154                         <input class="i-sdc-form-input"
 155                         data-tests-id="hidden"
 156                         data-ng-disabled="editAttributeModel.attribute.readonly && !isAttributeValueOwner()"
 157                         data-ng-model="editAttributeModel.attribute.hidden"
 158                         type="checkbox"
 159                         name="hidden"/>
 160                     </div>
 161                 </div>
 162
 163             </div>
 164
 165         </form>
 166     </div>
 167
 168 </ng1-modal>