catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html

   1 <div include-padding="true" class="sdc-workspace-general-step">
   2
   3     <form novalidate class="w-sdc-form" name="editForm" validation-on-load form-to-validate="editForm">
   4
   5         <div class="w-sdc-form-section-container">
   6
   7             <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
   8             <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
   9                 <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
  10                 <file-upload id="fileUploadElement"
  11                              class="i-sdc-form-input"
  12                              element-name="fileElement"
  13                              element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
  14                              form-element="editForm"
  15                              file-model="component.importedFile"
  16                              on-file-changed-in-directive="uploadFileChangedInGeneralTab"
  17                              extensions="{{importedFileExtension}}"
  18                              default-text="'Browse to select file'"
  19                              data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
  20             </div>
  21
  22             <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
  23             <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
  24                 <label class="i-sdc-form-label required">Select VSP</label>
  25                 <div class="i-sdc-form-file-upload i-sdc-form-input">
  26                     <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
  27                     <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
  28                     <input type="button" name="fileElement"/>
  29                     <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
  30                 </div>
  31             </div>
  32
  33             <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
  34                 <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
  35                 <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
  36                 <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
  37                 <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
  38                 <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
  39             </div>
  40             <!--------------------- IMPORT TOSCA FILE -------------------->
  41
  42             <div class="w-sdc-form-columns-wrapper">
  43
  44                 <div class="w-sdc-form-column">
  45
  46                 <!--------------------- NAME -------------------->
  47                 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
  48                     <label class="i-sdc-form-label required">Name</label>
  49                     <input class="i-sdc-form-input"
  50                            data-ng-class="{'view-mode': isViewMode()}"
  51                            name="componentName"
  52                            data-ng-init="isCreateMode() && validateName(true)"
  53                            data-ng-maxlength="{{component.isProduct()?'25':'50'}}"
  54                            maxlength="{{component.isProduct()?'25':'50'}}"
  55                            data-ng-minlength="{{component.isProduct()?'4':'0'}}"
  56                            minlength="{{component.isProduct()?'4':'0'}}"
  57                            data-ng-model="component.name"
  58                            type="text"
  59                            data-required
  60                            data-ng-model-options="{ debounce: 500 }"
  61                            data-ng-pattern="validation.componentNameValidationPattern"
  62                            data-ng-disabled="component.isAlreadyCertified()"
  63                            data-tests-id="name"
  64                            autofocus
  65                            ng-readonly="isViewMode()"
  66                         />
  67
  68                     <div class="input-error" data-ng-show="validateField(editForm.componentName)">
  69                         <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
  70                         <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
  71                         <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
  72                         <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
  73                         <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
  74                     </div>
  75                 </div>
  76                 <!--------------------- NAME -------------------->
  77
  78                 <!--------------------- FULL NAME -------------------->
  79                 <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}">
  80                     <label class="i-sdc-form-label required">Full Name</label>
  81                     <input class="i-sdc-form-input"
  82                            name="fullName"
  83                            data-ng-class="{'view-mode': isViewMode()}"
  84                            data-ng-change="validateName()"
  85                            data-ng-maxlength="100"
  86                            maxlength="100"
  87                            data-ng-minlength="4"
  88                            minlength="4"
  89                            data-ng-model="component.fullName"
  90                            type="text"
  91                            data-required
  92                            data-ng-model-options="{ debounce: 500 }"
  93                            data-ng-pattern="validation.commentValidationPattern"
  94                            data-tests-id="fullName"
  95                            autofocus
  96                            ng-readonly="isViewMode()"
  97                         />
  98
  99                     <div class="input-error" data-ng-show="validateField(editForm.fullName)">
 100                         <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
 101                         <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
 102                         <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
 103                         <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
 104                         <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 105                     </div>
 106                 </div>
 107                 <!--------------------- NAME -------------------->
 108
 109                 <!--------------------- DESCRIPTION -------------------->
 110                 <div class="i-sdc-form-item"
 111                      data-ng-class="{'error': validateField(editForm.description)}">
 112                     <label class="i-sdc-form-label required">Description</label>
 113                     <textarea class="description"
 114                               name="description"
 115                               data-ng-class="{'view-mode': isViewMode()}"
 116                               data-ng-maxlength="1024"
 117                               data-required
 118                               data-ng-model="component.description"
 119                               data-ng-model-options="{ debounce: 500 }"
 120                               data-ng-pattern="validation.commentValidationPattern"
 121                               maxlength="1024"
 122                               data-tests-id="description"></textarea>
 123                     <!-- placeholder="Description here..." -->
 124
 125                     <div class="input-error" data-ng-show="validateField(editForm.description)">
 126                         <span ng-show="editForm.description.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_DESCRIPTION_REQUIRED"></span>
 127                         <span ng-show="editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '1024' }"></span>
 128                         <span ng-show="editForm.description.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 129                     </div>
 130                 </div>
 131                 <!--------------------- DESCRIPTION -------------------->
 132
 133                 <!--------------------- CATEGORIES -------------------->
 134                 <div class="i-sdc-form-item"
 135                      data-ng-class="{'error': validateField(editForm.category)}"
 136                      data-ng-if="!component.isProduct()">
 137                     <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
 138                     <label class="i-sdc-form-label required">Category</label>
 139                     <select class="i-sdc-form-select"
 140                             data-required
 141                             name="category"
 142                             data-ng-class="{'view-mode': isViewMode()}"
 143                             data-ng-change="onCategoryChange()"
 144                             data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
 145                             data-ng-model="componentCategories.selectedCategory"
 146                             data-tests-id="selectGeneralCategory"
 147                         >
 148                         <option value="">Select category</option>
 149                         <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
 150                             <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
 151                                     data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
 152                                     data-tests-id="{{subCategory.name}}"
 153                                     value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
 154
 155                             </option>
 156                         </optgroup>
 157                         <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
 158                                 data-ng-selected="component.selectedCategory===mainCategory.name"
 159                                 value="{{mainCategory.name}}"
 160                                 data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
 161                     </select>
 162
 163                     <div class="input-error" data-ng-show="validateField(editForm.category)">
 164                         <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
 165                     </div>
 166                 </div>
 167                 <!--------------------- CATEGORIES -------------------->
 168
 169                 <!--------------------- PROJECT CODE -------------------->
 170                 <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
 171                      data-ng-class="{'error': validateField(editForm.projectCode)}">
 172                     <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
 173                     <input class="i-sdc-form-input" type="text"
 174                            data-ng-model="component.projectCode"
 175                            data-ng-class="{'view-mode': isViewMode()}"
 176                            data-ng-model-options="{ debounce: 500 }"
 177                            maxlength="50"
 178                            data-required
 179                            name="projectCode"
 180                            data-ng-pattern="validation.projectCodeValidationPattern"
 181                            data-tests-id="projectCode"
 182                         />
 183
 184                     <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
 185                         <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
 186                         <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
 187                     </div>
 188                 </div>
 189
 190
 191                     <!--------------------- ECOMPGENERATEDNAMING -------------------->
 192
 193                     <div class="i-sdc-form-item"
 194                          data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
 195                          data-ng-if="component.isService()">
 196                         <label class="i-sdc-form-label">Ecomp Generated Naming</label>
 197                         <select class="i-sdc-form-select"
 198                                 data-required
 199                                 name="ecompGeneratedNaming"
 200                                 data-ng-change="onEcompGeneratedNamingChange()"
 201                                 data-ng-class="{'view-mode': isViewMode()}"
 202                                 data-ng-model="component.ecompGeneratedNaming"
 203                                 data-tests-id="ecompGeneratedNaming">
 204                             <option ng-value="true">true</option>
 205                             <option ng-value="false">false</option>
 206                         </select>
 207                         <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 208
 209                         </div>
 210                     </div>
 211                     <!--------------------- CATEGORIES -------------------->
 212
 213                     <!--------------------- NAMING POLICY  -------------------->
 214                     <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
 215                         <label class="i-sdc-form-label">Naming policy</label>
 216                         <input class="i-sdc-form-input"
 217                                name="fullName"
 218                                data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
 219                                data-ng-maxlength="100"
 220                                maxlength="100"
 221                                data-ng-model="component.namingPolicy"
 222                                type="text"
 223                                data-ng-model-options="{ debounce: 500 }"
 224                                data-ng-pattern="validation.commentValidationPattern"
 225                                data-tests-id="namingPolicy"
 226                                autofocus
 227                                ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
 228                         />
 229
 230                         <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
 231                             <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 232                             <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 233                         </div>
 234                     </div>
 235                     <!--------------------- NAMING POLICY  -------------------->
 236
 237
 238                 <!--------------------- VENDOR NAME -------------------->
 239                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
 240                     <label class="i-sdc-form-label required">Vendor</label>
 241                     <input class="i-sdc-form-input" type="text"
 242                            data-ng-class="{'view-mode': isViewMode()}"
 243                            data-ng-model="component.vendorName"
 244                            data-ng-model-options="{ debounce: 500 }"
 245                            data-ng-maxlength="25"
 246                            data-required
 247                            ng-click="oldValue = component.vendorName"
 248                            name="vendorName"
 249                            data-ng-change="onVendorNameChange(oldValue)"
 250                            data-ng-pattern="validation.vendorValidationPattern"
 251                            maxlength="25"
 252                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
 253                            data-tests-id="vendorName"
 254                         />
 255
 256                     <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
 257                         <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
 258                         <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 259                         <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 260                     </div>
 261
 262                 </div>
 263
 264                 <!--------------------- VENDOR NAME -------------------->
 265
 266                 <!--------------------- VENDOR RELEASE -------------------->
 267                 <div ng-if="component.isResource()"
 268                      class="i-sdc-form-item"
 269                      data-ng-class="{'error': validateField(editForm.vendorRelease)}">
 270                     <label class="i-sdc-form-label required">Vendor Release</label>
 271                     <input class="i-sdc-form-input" type="text"
 272                            data-ng-class="{'view-mode': isViewMode()}"
 273                            data-ng-model="component.vendorRelease"
 274                            data-ng-model-options="{ debounce: 500 }"
 275                            data-ng-maxlength="25"
 276                            data-required
 277                            name="vendorRelease"
 278                            data-ng-pattern="validation.vendorValidationPattern"
 279                            maxlength="25"
 280                            data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
 281                            data-tests-id="vendorRelease"
 282                         />
 283
 284                     <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
 285                         <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
 286                         <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
 287                         <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 288                     </div>
 289                 </div>
 290                 <!--------------------- VENDOR RELEASE -------------------->
 291
 292
 293
 294             </div><!-- Close w-sdc-form-column -->
 295
 296                 <div class="w-sdc-form-column">
 297
 298                 <!--------------------- RESOURCE TAGS -------------------->
 299                 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
 300                     <label class="i-sdc-form-label">Tags</label>
 301
 302                     <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
 303                               sdc-disabled="isViewMode()"
 304                               tags="component.tags"
 305                               pattern="validation.tagValidationPattern"
 306                               special-tag="component.name"></sdc-tags>
 307
 308                     <div class="input-error" data-ng-show="validateField(editForm.tags)">
 309                         <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
 310                         <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
 311                     </div>
 312                 </div>
 313                 <!--------------------- RESOURCE TAGS -------------------->
 314
 315                 <!--------------------- USER ID -------------------->
 316                 <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
 317                     <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label>
 318                     <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()"
 319                            data-ng-model="component.contactId"
 320                            data-ng-class="{'view-mode': isViewMode()}"
 321                            data-ng-required="!component.isProduct()"
 322                            name="contactId"
 323                            data-ng-pattern="validation.contactIdValidationPattern"
 324                            data-ng-model-options="{ debounce: 500 }"
 325                            data-tests-id="contactId"
 326                            maxlength="50"
 327                         />
 328                     <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()"
 329                            data-ng-model="component.contacts[0]"
 330                            data-ng-class="{'view-mode': isViewMode()}"
 331                            data-ng-required="!component.isProduct()"
 332                            name="contactId"
 333                            data-ng-pattern="validation.contactIdValidationPattern"
 334                            data-ng-model-options="{ debounce: 500 }"
 335                            data-tests-id="contactId"
 336                            maxlength="50"
 337                     />
 338
 339                     <div class="input-error" data-ng-show="validateField(editForm.contactId)">
 340                         <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
 341                         <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
 342                     </div>
 343                 </div>
 344                 <!--------------------- USER ID -------------------->
 345
 346
 347                 </div><!-- Close w-sdc-form-column -->
 348             </div>
 349
 350         </div><!-- Close w-sdc-form-section-container -->
 351
 352     </form>
 353
 354 </div>