-->
<div class="operation-handler">
- <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
+ <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader>
- <form class="w-sdc-form">
+ <form class="w-sdc-form">
- <div class="side-by-side">
- <div class="form-item">
- <sdc-input
- label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
- [(value)]="interfaceType"
- [disabled]="true">
- </sdc-input>
- </div>
+ <div class="side-by-side">
+ <div class="form-item">
+ <sdc-dropdown
+ label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
+ [required]="true"
+ [testId]="'interface-name'"
+ [selectedOption]="selectedInterfaceType"
+ [placeHolder]="'Select...'"
+ [disabled]="isViewOnly || isEdit"
+ (changed)="onSelectInterface($event)"
+ [options]="interfaceTypeOptions">
+ </sdc-dropdown>
+ </div>
- <div class="form-item">
- <sdc-input
- label="{{ 'OPERATION_NAME' | translate }}"
- [(value)]="operationToUpdate.name"
- [disabled]="true">
- </sdc-input>
- </div>
- </div>
+ <div class="form-item">
+ <sdc-dropdown
+ #interfaceOperationDropDown
+ label="{{ 'OPERATION_NAME' | translate }}"
+ [required]="true"
+ [testId]="'operation-name'"
+ [selectedOption]="selectedInterfaceOperation"
+ [placeHolder]="'Select...'"
+ [disabled]="isViewOnly || isEdit"
+ (changed)="onSelectOperation($event)"
+ [options]="interfaceOperationOptions">
+ </sdc-dropdown>
+ </div>
+ </div>
- <div class="i-sdc-form-item">
- <sdc-input
- label="{{'OPERATION_DESCRIPTION' | translate}}"
- [(value)]="operationToUpdate.description"
- (valueChange)="onDescriptionChange($event)">
- </sdc-input>
- </div>
+ <div class="form-item">
+ <sdc-input
+ label="{{'OPERATION_DESCRIPTION' | translate}}"
+ [(value)]="operationToUpdate.description"
+ testId="interface-operation-description"
+ (valueChange)="onDescriptionChange($event)"
+ [disabled]=isViewOnly>
+ </sdc-input>
+ </div>
- <div class="i-sdc-form-item">
- <sdc-input
- label="{{'IMPLEMENTATION_NAME' | translate}}"
- [(value)]="operationToUpdate.implementation.artifactName">
- </sdc-input>
- </div>
+ <div class="group-with-border content-row">
+ <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
+ <div class="form-item">
+ <sdc-input
+ label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
+ testId="interface-operation-implementation-name"
+ [(value)]="artifactName"
+ (valueChange)="onURIChange($event)"
+ [disabled]=isViewOnly>
+ </sdc-input>
+ </div>
+ <br>
+ <div class="form-item">
+ <checkbox [label]="'ADD_ARTIFACT_DETAILS' | translate"
+ [(checked)]="enableAddArtifactImplementation"
+ (checkedChange)="onMarkToAddArtifactToImplementation($event)"
+ [disabled]=isViewOnly>
+ </checkbox>
+ </div>
+ <div class="form-item" *ngIf="toscaArtifactTypes && enableAddArtifactImplementation">
+ <br>
+ <sdc-dropdown
+ label="{{ 'TOSCA_ARTIFACT_TYPE' | translate }}"
+ testId="selectToscaArtifactType"
+ [required]="true"
+ [selectedOption]="toscaArtifactTypeSelected"
+ placeHolder="{{toscaArtifactTypeSelected != undefined ? toscaArtifactTypeSelected : 'Select...'}}"
+ (changed)="onSelectToscaArtifactType($event)"
+ [options]="toscaArtifactTypes"
+ [disabled]=isViewOnly>
+ </sdc-dropdown>
+ </div>
+ <div class="form-item" *ngIf="enableAddArtifactImplementation">
+ <sdc-input
+ label="{{ 'ARTIFACT_VERSION' | translate }}"
+ data-tests-id="artifactVersion"
+ [(value)]="artifactVersion"
+ (valueChange)="onArtifactVersionChange($event)"
+ [disabled]=isViewOnly>
+ </sdc-input>
+ </div>
+ <div class="form-item" *ngIf="toscaArtifactTypeSelected && enableAddArtifactImplementation">
+ <br>
+ <input-list
+ *ngIf="artifactTypeProperties && dataTypeMap"
+ [title]="'ARTIFACT_PROPERTY_LIST_TITLE' | translate"
+ [emptyMessage]="'ARTIFACT_PROPERTY_LIST_EMPTY' | translate"
+ [inputs]="artifactTypeProperties"
+ [dataTypeMap]="dataTypeMap"
+ [isViewOnly]="isViewOnly"
+ [showToscaFunctionOption]="true"
+ [componentInstanceMap]="componentInstanceMap"
+ [allowDeletion]="false"
+ [customToscaFunctions]="customToscaFunctions"
+ (onInputsValidityChange)="implementationPropsValidityChange($event)"
+ (onValueChange)="onArtifactPropertyValueChange($event)"
+ >
+ </input-list>
+ </div>
+ </div>
+ <div class="group-with-border content-row" *ngIf="dataTypeMap">
+ <input-list
+ [title]="'INPUT_LIST_TITLE' | translate"
+ [emptyMessage]="'INPUT_LIST_EMPTY' | translate"
+ [inputs]="inputs"
+ [dataTypeMap]="dataTypeMap"
+ [isViewOnly]="isViewOnly"
+ [allowDeletion]="true"
+ [componentInstanceMap]="componentInstanceMap"
+ [showToscaFunctionOption]="true"
+ (onValueChange)="onInputValueChange($event)"
+ (onInputsValidityChange)="implementationPropsValidityChange($event)"
+ (onDelete)="onInputDelete($event)"
+ >
+ </input-list>
+ </div>
+ <div class="group-with-border content-row">
+ <app-add-input
+ [dataTypeMap]="dataTypeMap$"
+ [isView]="isViewOnly"
+ [existingInputNames]="collectInputNames()"
+ (onAddInput)="onAddInput($event)"
+ >
+ </app-add-input>
+ </div>
+ <div class="group-with-border content-row">
+ <label class="sdc-timeout-label">Timeout : </label>
+ <input class="sdc-timeout" type="number" [formControl]="timeoutValue" oninput="this.value = this.valueAsNumber" [ngClass]="{'disabled':isViewOnly}" (change)="timeoutConversion()"/>
+ <select class="sdc-timeout-select" [formControl]="timeoutType" (change)="timeoutConversion()" [ngClass]="{'disabled':isViewOnly}">
+ <option value="sec">Seconds</option>
+ <option value="hour">Hours</option>
+ <option value="day">Days</option>
+ </select>
+ </div>
- <div class="separator-buttons">
- <tab tabTitle="Inputs"></tab>
- <a class="add-param-link add-btn"
- [ngClass]="{'disabled': readonly}"
- (click)="onAddInput()">{{'OPERATION_ADD_INPUT' | translate}}
- </a>
- </div>
-
- <div class="generic-table">
- <div class="header-row table-row">
- <span class="cell header-cell field-input-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span>
- <span class="cell header-cell field-input-value">{{ 'OPERATION_INPUT_VALUE' | translate }}</span>
- <span class="cell header-cell remove">●●●</span>
- </div>
- <div class="empty-msg data-row" *ngIf="!inputs.length">
- <div>{{ 'OPERATION_INPUT_EMPTY' | translate }}</div>
- </div>
- <input-param-row
- *ngFor="let inputParameter of inputs"
- class="data-row"
- [input]="inputParameter"
- [onRemoveInput]="onRemoveInput"
- [validityChanged]="validityChanged">
- </input-param-row>
- </div>
-
- </form>
-</div>
+ <div class="group-with-border content-row">
+ <label class="sub-operations-label"> Sub operations </label>
+ <tabs tabStyle="basic-tabs" [hideIndicationOnTabChange]="true" (tabChanged)="tabChanged($event)">
+ <div *ngFor="let milestone of milestones">
+ <tab tabTitle="{{milestone}}" [active]="isActiveTab(milestone)" [highlight]="isInvalidActivity(milestone)">
+ <!-- temporarily disable -->
+ <!--<filters-list
+ [customToscaFunctions]="customToscaFunctions"
+ [activitiesExist]="getExistingActivities(milestone) ? true : false"
+ [isViewOnly]="isViewOnly"
+ [componentInstanceMap]="componentInstanceMap"
+ [existingFilters]="getExistingFilters(milestone)"
+ (filtersChangeEvent)="filtersChangeEvent($event, milestone)">
+ </filters-list>-->
+ <activities-list
+ [isViewOnly]="isViewOnly"
+ [dataTypeMap]="dataTypeMap"
+ [dataTypeMap$]="dataTypeMap$"
+ [componentInstanceMap]="componentInstanceMap"
+ [existingActivities]="getExistingActivities(milestone)"
+ (activitiesChangeEvent)="activitiesChangeEvent($event, milestone)">
+ </activities-list>
+ </tab>
+ </div>
+ </tabs>
+ </div>
+ </form>
+ </div>