catalog-ui/src/app/ng2/pages/properties-assignment/constraints/constraints.component.html

   1 <!--
   2   ~ -
   3   ~  ============LICENSE_START=======================================================
   4   ~  Copyright (C) 2022 Nordix Foundation.
   5   ~  ================================================================================
   6   ~  Licensed under the Apache License, Version 2.0 (the "License");
   7   ~  you may not use this file except in compliance with the License.
   8   ~  You may obtain a copy of the License at
   9   ~
  10   ~       http://www.apache.org/licenses/LICENSE-2.0
  11   ~
  12   ~  Unless required by applicable law or agreed to in writing, software
  13   ~  distributed under the License is distributed on an "AS IS" BASIS,
  14   ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15   ~  See the License for the specific language governing permissions and
  16   ~  limitations under the License.
  17   ~
  18   ~  SPDX-License-Identifier: Apache-2.0
  19   ~  ============LICENSE_END=========================================================
  20   -->
  21
  22 <div class="app-constraints">
  23   <form novalidate class="w-sdc-form two-columns" [formGroup]="constraintForm">
  24     <div *ngFor="let constraint of constraintsArray.controls; let constraintIndex = index; trackBy:trackByFn">
  25
  26       <div formArrayName="constraint">
  27         <div class="w-sdc-form-columns-wrapper" [formGroupName]="constraintIndex">
  28           <div class="w-sdc-form-column-small">
  29               <select class="i-sdc-form-select"
  30                       data-tests-id="constraints"
  31                       formControlName="type"
  32                       [value]="constraintsArray.at(constraintIndex).get('type').value"
  33                       (change)="onChangeConstraintType(constraintIndex, $event.target.value)">
  34                 <option *ngIf="constraint" [value]="constraint.value.type"
  35                         hidden selected>
  36                   {{ConstraintTypesMapping[constraint.value.type]}}
  37                 </option>
  38                 <option *ngFor="let constraintType of constraintTypes"
  39                         [value]="constraintType"
  40                         [disabled]="disableConstraint(constraintType, constraint.value.type)">
  41                   {{ConstraintTypesMapping[constraintType]}}
  42                 </option>
  43               </select>
  44
  45             <div class="validation-errors">
  46               <ng-container *ngFor="let validation of validationMessages.type">
  47                 <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('type').hasError(validation.type);">
  48                   {{ validation.message }}
  49                 </div>
  50               </ng-container>
  51             </div>
  52           </div>
  53
  54
  55           <div class="w-sdc-form-columns-wrapper">
  56
  57             <div class="w-sdc-form-column">
  58               <div class="w-sdc-form-columns-wrapper" *ngIf="constraint.value.type == 'inRange'">
  59                 <div class="w-sdc-form-column">
  60                   <input type="text" class="i-sdc-form-input myClass" required
  61                         (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)"
  62                         [value]="getInRangeValue(constraintIndex, 0)"/>
  63
  64                   <ng-container *ngFor="let validation of validationMessages.constraint">
  65                     <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[0].hasError(validation.type);">
  66                       {{ validation.message }}
  67                     </div>
  68                   </ng-container>
  69                 </div>
  70                 <div class="w-sdc-form-column">
  71                   <input type="text" class="i-sdc-form-input myClass" required
  72                         (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)"
  73                         [value]="getInRangeValue(constraintIndex, 1)"/>
  74
  75                   <ng-container *ngFor="let validation of validationMessages.constraint">
  76                     <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[1].hasError(validation.type);">
  77                       {{ validation.message }}
  78                     </div>
  79                   </ng-container>
  80                 </div>
  81               </div>
  82
  83               <div *ngIf="constraint.value.type == 'validValues'">
  84                 <div class="w-sdc-form-columns-wrapper-block">
  85                   <div class="add-btn add-list-item w-sdc-form-column-block"
  86                       [ngClass]="{'disabled': isViewOnly}"
  87                       (click)="addToList(constraintIndex)">Add to List</div>
  88                 </div>
  89                 <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraintValuesArray(constraintIndex).controls; let valueIndex = index; trackBy:trackByFn">
  90                   <div class="w-sdc-form-column">
  91                     <input type="text" class="i-sdc-form-input" required
  92                       [value]="value.value"
  93                       [disabled]=isViewOnly
  94                       (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/>
  95                   </div>
  96
  97                   <ng-container *ngFor="let validation of validationMessages.constraint">
  98                     <div class="input-error" *ngIf="constraintValuesArray(constraintIndex).controls[valueIndex].hasError(validation.type);">
  99                       {{ validation.message }}
 100                     </div>
 101                   </ng-container>
 102
 103                   <div class="w-sdc-form-column">
 104                     <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span>
 105                   </div>
 106                 </div>
 107               </div>
 108
 109               <div *ngIf="constraint.get('type').value != 'inRange' && constraint.get('type').value != 'validValues'">
 110                 <input type="text" class="i-sdc-form-input myClass required" required
 111                        formControlName="value"
 112                        [value]="constraintsArray.at(constraintIndex).get('value').value"
 113                        (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"/>
 114
 115                 <div class="validation-errors">
 116                   <ng-container *ngFor="let validation of validationMessages.constraint">
 117                     <div class="input-error" *ngIf="constraintsArray.at(constraintIndex).get('value').hasError(validation.type);">
 118                       {{ validation.message }}
 119                     </div>
 120                   </ng-container>
 121                 </div>
 122               </div>
 123             </div>
 124
 125             <div class="w-sdc-form-column-vsmall" *ngIf="!isViewOnly">
 126                 <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeConstraint(constraintIndex)"></span>
 127             </div>
 128           </div>
 129         </div>
 130       </div>
 131
 132     </div>
 133     <div class="w-sdc-form-columns-wrapper-small" *ngIf="!isViewOnly">
 134         <div class="add-btn add-list-item w-sdc-form-column-small" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
 135         (click)="addConstraint()"> Add Constraint </div>
 136     </div>
 137   </form>
 138 </div>