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">
  24     <div class="w-sdc-form-columns-wrapper" *ngFor="let constraint of constraints; let constraintIndex = index; trackBy:trackByFn">
  25         <div class="w-sdc-form-column-small">
  26             <select class="i-sdc-form-select"
  27                     data-tests-id="constraints"
  28                     [disabled]="isViewOnly"
  29                     (change)="onChangeConstraintType(constraintIndex, $event.target.value)">
  30               <option *ngIf="constraint" [value]="constraint.type"
  31                       hidden selected>
  32                 {{ConstraintTypesMapping[constraint.type]}}
  33               </option>
  34               <option *ngFor="let constraintType of constraintTypes"
  35                       [value]="constraintType"
  36                       [disabled]="disableConstraint(constraintType, constraint.type)">
  37                 {{ConstraintTypesMapping[constraintType]}}
  38               </option>
  39             </select>
  40         </div>
  41
  42
  43         <div class="w-sdc-form-columns-wrapper">
  44
  45           <div class="w-sdc-form-column">
  46             <div class="w-sdc-form-columns-wrapper" *ngIf="constraint.type == 'inRange'">
  47               <div class="w-sdc-form-column">
  48                 <input type="text" class="i-sdc-form-input myClass"
  49                       (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 0)"
  50                       [disabled]="isViewOnly"
  51                       [value]="getInRangeValue(constraintIndex, 0)"/>
  52               </div>
  53               <div class="w-sdc-form-column">
  54                 <input type="text" class="i-sdc-form-input myClass"
  55                       (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, 1)"
  56                       [disabled]="isViewOnly"
  57                       [value]="getInRangeValue(constraintIndex, 1)"/>
  58               </div>
  59             </div>
  60
  61             <div *ngIf="constraint.type == 'validValues'">
  62               <div class="w-sdc-form-columns-wrapper-block">
  63                 <div class="add-btn add-list-item w-sdc-form-column-block"
  64                     [ngClass]="{'disabled': isViewOnly}"
  65                     (click)="addToList(constraintIndex)">Add to List</div>
  66               </div>
  67               <div class="w-sdc-form-columns-wrapper" *ngFor="let value of constraint.value; let valueIndex = index; trackBy:trackByFn">
  68                 <div class="w-sdc-form-column">
  69                   <input type="text" class="i-sdc-form-input" [value]="value"
  70                         [disabled]="isViewOnly"
  71                         (input)="onChangeConstrainValueIndex(constraintIndex, $event.target.value, valueIndex)"/>
  72                 </div>
  73                 <div class="w-sdc-form-column">
  74                   <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromList(constraintIndex, valueIndex)"></span>
  75                 </div>
  76               </div>
  77             </div>
  78
  79             <div *ngIf="constraint.type != 'inRange' && constraint.type != 'validValues'">
  80               <input type="text" class="i-sdc-form-input myClass"
  81                     (input)="onChangeConstraintValue(constraintIndex, $event.target.value)"
  82                     [value]="constraint.value"/>
  83             </div>
  84           </div>
  85
  86           <div class="w-sdc-form-column-vsmall">
  87               <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeConstraint(constraintIndex)"></span>
  88           </div>
  89         </div>
  90
  91
  92     </div>
  93     <div class="w-sdc-form-columns-wrapper-small" *ngIf="!isViewOnly">
  94         <div class="add-btn add-list-item w-sdc-form-column-small" *ngIf="!isViewOnly" [ngClass]="{'disabled': isViewOnly}"
  95         (click)="addConstraint()"> Add Constraint </div>
  96     </div>
  97   </form>
  98 </div>