catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/add-input/add-input.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>
  23   <div *ngIf="!isView && showAddLink" class="add-button-container">
  24     <a class="add-btn" data-tests-id="add-input.add-input-link"
  25        (click)="showAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
  26     </a>
  27   </div>
  28   <form *ngIf="showForm" [formGroup]="inputForm" (ngSubmit)="onSubmit()">
  29     <label class="occurrences-label">{{'ADD_INPUT_TITLE' | translate}}</label>
  30     <div>
  31       <label class="sdc-input-label" for="input-name">{{'OPERATION_INPUT_NAME' | translate}}</label>
  32       <input id="input-name" class="sdc-input" type="text" formControlName="name" data-tests-id="add-input.input-name"/>
  33     </div>
  34     <div>
  35       <label class="sdc-input-label" for="input-type">{{'OPERATION_INPUT_TYPE' | translate}}</label>
  36       <sdc-combo-box
  37           id="input-type"
  38           [placeHolder]="inputToAdd.type != undefined ? inputToAdd.type : 'Select...'"
  39           [data]="inputTypeOptions"
  40           [selectedValue]="inputToAdd.type"
  41           (itemSelected)="onChangeInputType($event)"
  42           [testId]="'add-input.input-type'"
  43           [disabled]="isView"
  44       >
  45       </sdc-combo-box>
  46     </div>
  47     <div *ngIf="showInputSchema">
  48       <label class="sdc-input-label" for="input-schema">{{'OPERATION_INPUT_SCHEMA' | translate}}</label>
  49       <sdc-combo-box
  50           id="input-schema"
  51           [placeHolder]="getSchemaPlaceholder()"
  52           [data]="inputSchemaOptions"
  53           [selectedValue]="getSchemaType()"
  54           (itemSelected)="onChangeInputSchema($event)"
  55           [testId]="'add-input.input-schema'"
  56           [disabled]="isView"
  57       >
  58       </sdc-combo-box>
  59     </div>
  60     <div class="confirmation-button-container" *ngIf="!isView">
  61       <button type="submit" class="tlv-btn blue" [disabled]="!inputForm.valid" data-tests-id="add-input.add-input-btn">
  62         {{'OPERATION_ADD_INPUT' | translate}}
  63       </button>
  64       <button type="button" class="tlv-btn outline white" (click)="onCancel()" data-tests-id="add-input.cancel-btn">
  65         {{'OPERATION_CANCEL' | translate}}
  66       </button>
  67     </div>
  68   </form>
  69 </div>