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

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