catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/activities-list/activities-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-activities">
  22   <div class="group-with-border content-row">
  23     <form novalidate class="w-sdc-form two-columns" [formGroup]="activityForm">
  24       <div formArrayName="activityFormList">
  25         <label class="activities-label"> Activities </label>
  26         <div *ngFor="let activity of activities; let idx = index">
  27           <div class="side-by-side group-with-border-blue">
  28             <div class="form-item">
  29               <label class="sdc-timeout-label">Activity Type: </label>
  30               <div class="sdc-dropdown">
  31                 <select class="i-sdc-form-select"
  32                         data-tests-id="activity-type"
  33                         [value]="activity.type"
  34                         [disabled]="isViewOnly"
  35                         (change)="onActivityTypeChange($event.target.value, idx)"
  36                         required>
  37                   <option *ngIf="activity" [value]="activity.type" hidden selected>
  38                     {{ activity.type }}
  39                   </option>
  40                   <option *ngFor="let activityType of activityTypes"
  41                           [value]="activityType">
  42                     {{ activityType }}
  43                   </option>
  44                 </select>
  45               </div>
  46             </div>
  47             <div class="form-item">
  48               <div class="side-by-side">
  49                 <div class="form-item-big">
  50                   <label>Activity Implementation: </label>
  51                   <input type="text"
  52                      class="sdc-input"
  53                      [disabled]="isViewOnly"
  54                      (input)="onActivityValueChange($event.target.value, idx)"
  55                      [value]="activity.workflow"
  56                      [ngClass]="{'disabled': isViewOnly}"
  57                      required/>
  58                 </div>
  59                 <div class="form-item-icon">
  60                   <span class="sprite-new delete-btn" [ngClass]="{'disabled': isViewOnly}" (click)="removeFromActivities(idx)"></span>
  61                 </div>
  62               </div>
  63             </div>
  64           </div>
  65           <div class="w-sdc-form-columns-wrapper">
  66             <div class="validation-errors">
  67               <ng-container *ngFor="let validation of validationMessages.activity">
  68                 <div class="input-error" *ngIf="activityFormArray.at(idx).hasError(validation.type);">
  69                   {{ validation.message }}
  70                 </div>
  71               </ng-container>
  72             </div>
  73           </div>
  74           <div class="group-with-border content-row" *ngIf="dataTypeMap">
  75             <input-list
  76                 [title]="'INPUT_LIST_TITLE' | translate"
  77                 [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
  78                 [inputs]="getInputs(idx)"
  79                 [dataTypeMap]="dataTypeMap"
  80                 [isViewOnly]="isViewOnly"
  81                 [allowDeletion]="true"
  82                 [componentInstanceMap]="componentInstanceMap"
  83                 (onValueChange)="onInputValueChange($event, idx)"
  84                 (onDelete)="onInputDelete($event, idx)"
  85             >
  86             </input-list>
  87           </div>
  88           <div class="group-with-border content-row">
  89               <app-add-input
  90                   [dataTypeMap]="dataTypeMap$"
  91                   [isView]="isViewOnly"
  92                   [defaultType]="DEFAULT_INPUT_TYPE"
  93                   [existingInputNames]="collectInputNames(idx)"
  94                   (onAddInput)="onAddInput($event, idx)"
  95               >
  96               </app-add-input>
  97           </div>
  98         </div>
  99         <div class="add-button-container group-with-border" *ngIf="!isViewOnly">
 100           <a class="add-btn" data-tests-id="add-input.add-input-link"
 101              (click)="addActivity()">Add Activity</a>
 102         </div>
 103       </div>
 104     </form>
 105   </div>
 106 </div>