catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html

   1 <!--
   2   ~ Copyright © 2016-2018 European Support Limited
   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 <div class="cell field-name">
  18     <ui-element-input
  19         *ngIf="!isAssociateWorkflow"
  20         [testId]="'param-name-' + (param.name || 'unnamed')"
  21         [(value)]="param.name"
  22         (valueChange)="onChangeName()"
  23         [readonly]="readonly">
  24     </ui-element-input>
  25     <span *ngIf="isAssociateWorkflow">{{param.name}}</span>
  26 </div>
  27
  28 <div class="cell field-type">
  29     <ui-element-dropdown
  30         *ngIf="!isAssociateWorkflow"
  31         [testId]="'param-type-' + (param.name || 'unnamed')"
  32         [values]="propTypeEnum"
  33         [(value)]="param.type"
  34         (valueChange)="onChangeType()"
  35         [readonly]="readonly">
  36     </ui-element-dropdown>
  37     <span *ngIf="isAssociateWorkflow">{{param.type}}</span>
  38 </div>
  39
  40 <div class="cell field-property" *ngIf="isInputParam">
  41     <select
  42         *ngIf="filteredInputProps.length || operationOutputCats.length || !isAssociateWorkflow"
  43         [(ngModel)]="param.inputId"
  44         (change)="onChangeProperty($event)"
  45         [ngClass]="{'disabled': readonly}"
  46         [attr.data-tests-id]="'value-param-property-' + (param.name || 'unnamed')">
  47         <option
  48             *ngFor="let prop of filteredInputProps"
  49             [ngValue]="prop.value">
  50             {{prop.label}}
  51         </option>
  52         <optgroup
  53             *ngFor="let operation of operationOutputCats"
  54             label="{{operation.operationName}}">
  55             <option
  56                 *ngFor="let output of operation.outputs"
  57                 [ngValue]="output.value">
  58                 {{output.label}}
  59             </option>
  60         </optgroup>
  61         <optgroup
  62                 *ngFor="let cap of filteredCapabilitiesProps"
  63                 label="{{cap.capabilityName}}">
  64             <option
  65                     *ngFor="let prop of cap.properties"
  66                     [ngValue]="prop.value">
  67                 {{prop.label}}
  68             </option>
  69         </optgroup>
  70     </select>
  71     <span
  72         *ngIf="!filteredInputProps.length && !operationOutputCats.length && isAssociateWorkflow"
  73         class="no-properties-error">
  74         {{ 'PARAM_NONE_OF_TYPE' | translate }}
  75     </span>
  76 </div>
  77
  78 <div class="cell field-mandatory" *ngIf="!isAssociateWorkflow">
  79     <checkbox
  80         *ngIf="!isAssociateWorkflow"
  81         [attr.data-tests-id]="'param-mandatory-' + (param.name || 'unnamed')"
  82         [(checked)]="param.required"
  83         [ngClass]="{'disabled':readonly}">
  84     </checkbox>
  85 </div>
  86
  87 <div class="cell remove" *ngIf="!isAssociateWorkflow && !readonly">
  88     <svg-icon
  89         name="trash-o"
  90         mode="info"
  91         size="small"
  92         [attr.data-tests-id]="'param-remove-' + (param.name || 'unnamed')"
  93         (click)="onRemoveParam(param)"
  94         [clickable]="true">
  95   </svg-icon>
  96 </div>