catalog-ui/src/app/view-models/forms/env-parameters-form/env-parameters-form.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="envParametersModal" type="classic" class="sdc-env-form-container" buttons="buttons" header="{{artifactResource.artifactDisplayName}}" show-close-button="true">
  18     <div class="w-sdc-env-form-container">
  19         <div class="w-sdc-env-search pull-left">
  20             <input type="text" class="w-sdc-env-search-input" placeholder="Search" data-ng-model="searchText" data-tests-id="search-env-param-name"/>
  21             <div class="search-icon-container">
  22                 <span class="w-sdc-search-icon env-search-icon magnification-white"></span>
  23             </div>
  24         </div>
  25         <div class="table-container-flex">
  26             <div class="table">
  27                 <div class="head flex-container">
  28                     <div class="table-header head-row flex-item" ng-repeat="header in tableHeadersList track by $index">
  29                         <info-tooltip class="header-info" data-ng-if="header.info" class="info-button" info-message-translate="{{header.info}}" direction="left"></info-tooltip>
  30                         {{header.title}}
  31                     </div>
  32                 </div>
  33                 <div class="body">
  34                     <perfect-scrollbar suppress-scroll-x="true" scroll-y-margin-offset="0" include-padding="true" class="scrollbar-container">
  35                         <ng-form name="forms.editForm" class="w-sdc-form">
  36                             <div data-ng-repeat="parameter in heatParameters| filter:{filterTerm:searchText} track by $index "
  37                                  class="flex-container data-row"
  38                                 data-ng-init="parameter.filterTerm=parameter.name + ' ' + parameter.currentValue + ' ' + parameter.defaultValue + ' ' +parameter.description">
  39                                 <div class="table-col-general flex-item" data-tests-id="heatParameterName_{{parameter.name}}">
  40                                     {{parameter.name}}
  41                                     <span class="sprite-new show-desc hand"
  42                                           uib-popover-template="templatePopover"
  43                                           popover-class="parameter-description-popover top"
  44                                           popover-title="Parameter Description"
  45                                           popover-placement="top-left"
  46                                           popover-is-open="selectedParameter.name == parameter.name"
  47                                           popover-trigger="'none'"
  48                                           popover-append-to-body="true"
  49                                         data-ng-click="openDescPopover(parameter)"></span>
  50                                 </div>
  51
  52                                 <div class="table-col-general flex-item text">
  53                                     <span  data-tests-id="default-value-of-{{parameter.name}}" tooltips tooltip-content="{{parameter.defaultValue}}">{{parameter.defaultValue}}</span>
  54                                 </div>
  55
  56                                 <!--<div class="table-col-general flex-item">-->
  57                                     <!--<input type="text" value="{{parameter.currentValue}}"/>-->
  58                                 <!--</div>-->
  59
  60                                 <div class="table-col-general flex-item left-column-container">
  61
  62                                         <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm[parameter.name].$dirty && forms.editForm[parameter.name].$invalid), required: (parameter.defaultValue)}">
  63                                             <span class="required-symbol">*</span>
  64                                             <div class="input-parameter">
  65                                                 <input class="i-sdc-form-input" data-ng-class="{error: (forms.editForm[parameter.name].$invalid)}"
  66                                                        data-ng-model-options="{ debounce: 200 }"
  67                                                        data-ng-model="parameter.currentValue"
  68                                                        value="{{parameter.currentValue}}"
  69                                                        type="text"
  70                                                        name="{{parameter.name}}"
  71                                                        data-ng-pattern="getValidationPattern(parameter.type, 'heat')"
  72                                                        data-ng-required="parameter.defaultValue"
  73                                                        data-ng-change="onValueChanged(parameter)"
  74                                                        data-ng-blur="(forms.editForm[parameter.name].$error.required && (parameter.currentValue=parameter.defaultValue))"
  75                                                        data-tests-id="value-field-of-{{parameter.name}}"/>
  76
  77                                                 <div class="action-button">
  78                                                     <div class="sprite-new revert-param" data-ng-if="parameter.defaultValue" data-ng-click="parameter.currentValue = parameter.defaultValue"
  79                                                          data-tests-id="revert-{{parameter.name}}">
  80                                                     </div>
  81                                                     <div class="sprite-new delete-param"
  82                                                          data-ng-if="!parameter.defaultValue"
  83                                                          data-ng-disabled="!parameter.currentValue"
  84                                                          data-ng-class="{disabled:!parameter.currentValue}"
  85                                                          data-ng-click="parameter.currentValue = ''"
  86                                                          data-tests-id="delete-{{parameter.name}}">
  87                                                     </div>
  88                                                 </div>
  89                                             </div>
  90                                             <div class="input-error" data-ng-show="forms.editForm[parameter.name].$invalid">
  91                                                 <span ng-show="forms.editForm[parameter.name].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value'}"></span>
  92                                                 <span ng-show="forms.editForm[parameter.name].$error.pattern && parameter.type==='string'" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  93                                                 <span ng-show="forms.editForm[parameter.name].$error.pattern && !(parameter.type==='string')" translate="VALIDATION_ERROR_TYPE" translate-values="{'type': '{{parameter.type}}'}"></span>
  94                                             </div>
  95                                         </div>
  96
  97                                 </div>
  98
  99                             </div>
 100                         </ng-form>
 101
 102                     </perfect-scrollbar>
 103                 </div>
 104             </div>
 105         </div>
 106         </div>
 107     </div>
 108 </ng1-modal>