catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/filters-list/filters-list.component.html

   1 <!--
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2023 Nordix Foundation. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19 -->
  20
  21 <div class="sub-operation-filters">
  22   <div class="group-with-border content-row">
  23     <form novalidate class="w-sdc-form two-columns" [formGroup]="filterForm">
  24       <div formArrayName="filterFormList">
  25         <label class="filters-label"> Filters </label>
  26         <div *ngFor="let filter of filters; let idx = index">
  27           <div class="side-by-side group-with-border">
  28             <div class="form-item">
  29               <div class="side-by-side">
  30                 <div class="form-item">
  31                   <label class="sdc-timeout-label">Name: </label>
  32                   <input type="text"
  33                      class="i-sdc-form-input"
  34                      [disabled]="isViewOnly"
  35                      [value]="filter.name"
  36                      [ngClass]="{'disabled': isViewOnly}"
  37                      (input)="onFilterNameChange($event.target.value, idx)"
  38                      required/>
  39                 </div>
  40                 <div class="form-item">
  41                   <label>Constraint: </label>
  42                   <div class="sdc-dropdown">
  43                     <select class="i-sdc-form-select"
  44                             data-tests-id="filter-type"
  45                             [value]="filter.constraint"
  46                             [disabled]="isViewOnly"
  47                             (change)="onFilterConstraintChange($event.target.value, idx)"
  48                             required>
  49                       <option *ngIf="filter" [value]="filter.constraint" hidden selected>
  50                         {{ ConstraintTypesMapping[filter.constraint] }}
  51                       </option>
  52                       <option *ngFor="let operatorType of operatorTypes"
  53                             [value]="operatorType">
  54                       {{ ConstraintTypesMapping[operatorType] }}
  55                       </option>
  56                     </select>
  57                   </div>
  58                 </div>
  59               </div>
  60             </div>
  61             <div class="form-item">
  62               <div class="side-by-side">
  63                 <div class="form-item-big">
  64                   <fieldset class="padding-zero" [disabled]="isViewOnly" >
  65                     <label>Value: </label>
  66                     <input type="radio" [name]="'hasGetFunctionValue.' + filter.name + idx"
  67                           [value]="false"
  68                           [checked]="!isToscaFunction(idx)"
  69                           (change)="onValueTypeChange($event.target.value, idx)"/> Value
  70                     <input type="radio" [name]="'hasGetFunctionValue.' + filter.name + idx"
  71                           [checked]="isToscaFunction(idx)"
  72                           (change)="onValueTypeChange($event.target.value, idx)"
  73                           [value]="true"/> {{'TOSCA_FUNCTION_LABEL' | translate}}
  74                   </fieldset>
  75                   <div *ngIf="isToscaFunction(idx)">
  76                     <div *ngIf="componentInstanceMap">
  77                       <tosca-function
  78                           [property]="getAsProperty(idx)"
  79                           [allowClear]="false"
  80                           [customToscaFunctions]="customToscaFunctions"
  81                           [componentInstanceMap]="componentInstanceMap"
  82                           (onValidityChange)="onToscaFunctionValidityChange($event, idx)">
  83                       </tosca-function>
  84                     </div>
  85                     <div *ngIf="!componentInstanceMap">
  86                       <tosca-function
  87                           [property]="getAsProperty(idx)"
  88                           [allowClear]="false"
  89                           [customToscaFunctions]="customToscaFunctions"
  90                           (onValidityChange)="onToscaFunctionValidityChange($event, idx)">
  91                       </tosca-function>
  92                     </div>
  93                   </div>
  94                   <div *ngIf="!isToscaFunction(idx)">
  95                     <div *ngIf="filter.constraint == 'validValues'">
  96                       <div class="add-btn padding-bottom"
  97                           [ngClass]="{'disabled': isViewOnly}"
  98                           (click)="addToList(idx)">
  99                           Add to List
 100                       </div>
 101                       <div class="w-sdc-form-columns-wrapper padding-bottom" *ngFor="let value of constraintValuesArray(idx); let valueIndex = index; trackBy:trackByFn">
 102                         <div class="w-sdc-form-column">
 103                           <input type="text" required
 104                             (change)="onChangeConstrainValueIndex(idx, $event.target.value, valueIndex)"
 105                             [disabled]="isViewOnly"
 106                             [value]="getInRangeValue(idx, valueIndex)"/>
 107                         </div>
 108                         <div class="w-sdc-form-column">
 109                           <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(idx, valueIndex)"></span>
 110                         </div>
 111                       </div>
 112                     </div>
 113                     <div *ngIf="filter.constraint == 'inRange'">
 114                       <div class="side-by-side">
 115                         <div class="form-item-50">
 116                           <input type="text" required
 117                           (input)="onChangeConstrainValueIndex(idx, $event.target.value, 0)"
 118                           [disabled]="isViewOnly"
 119                           [value]="getInRangeValue(idx, 0)"/>
 120                         </div>
 121                         <div class="form-item-50">
 122                           <input type="text" required
 123                           (input)="onChangeConstrainValueIndex(idx, $event.target.value, 1)"
 124                           [disabled]="isViewOnly"
 125                           [value]="getInRangeValue(idx, 1)"/>
 126                         </div>
 127                       </div>
 128                     </div>
 129                     <div *ngIf="filter.constraint != 'inRange' && filter.constraint != 'validValues'">
 130                       <input type="text"
 131                       class="i-sdc-form-input"
 132                       [disabled]="isViewOnly"
 133                       [ngClass]="{'disabled': isViewOnly}"
 134                       [value]="filter.filterValue"
 135                       (input)="onFilterValueChange($event.target.value, idx)"
 136                       required/>
 137                     </div>
 138                   </div>
 139                 </div>
 140                 <div class="form-item-icon">
 141                   <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromFilters(idx)"></span>
 142                 </div>
 143               </div>
 144             </div>
 145           </div>
 146           <div class="w-sdc-form-columns-wrapper">
 147             <div class="validation-errors">
 148               <ng-container *ngFor="let validation of validationMessages.filter">
 149                 <div class="input-error" *ngIf="filterFormArray.at(idx).hasError(validation.type);">
 150                   {{ validation.message }}
 151                 </div>
 152               </ng-container>
 153             </div>
 154           </div>
 155         </div>
 156
 157         <div class="add-button-container group-with-border" *ngIf="!isViewOnly && activitiesExist">
 158           <a class="add-btn" data-tests-id="add-input.add-input-link"
 159              (click)="addFilter()">Add Filter</a>
 160         </div>
 161         <div *ngIf="!activitiesExist">
 162           Must have at leat one actifity before adding filters
 163         </div>
 164       </div>
 165     </form>
 166   </div>
 167 </div>
 168