Provide validation to the json type property in the operation inputs

[sdc.git] / catalog-ui / src / app / ng2 / pages / composition / interface-operatons / operation-creator / interface-operation-handler.component.html

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
index 46db3b9..38aed30 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.html
@@ -25,19 +25,30 @@
 
         <div class="side-by-side">
             <div class="form-item">
-                <sdc-input
+                <sdc-dropdown
                     label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}"
-                    [(value)]="interfaceType"
-                    [disabled]=isViewOnly>
-                </sdc-input>
+                    [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
+                <sdc-dropdown
+                    #interfaceOperationDropDown
                     label="{{ 'OPERATION_NAME' | translate }}"
-                    [(value)]="operationToUpdate.name"
-                    [disabled]=isViewOnly>
-                </sdc-input>
+                    [required]="true"
+                    [testId]="'operation-name'"
+                    [selectedOption]="selectedInterfaceOperation"
+                    [placeHolder]="'Select...'"
+                    [disabled]="isViewOnly || isEdit"
+                    (changed)="onSelectOperation($event)"
+                    [options]="interfaceOperationOptions">
+                </sdc-dropdown>
             </div>
         </div>
 
@@ -54,81 +65,75 @@
         <div class="group-with-border content-row">
             <label class="occurrences-label"> {{ 'INTERFACE_OPERATION_IMPLEMENTATION' | translate}}</label>
             <div class="form-item">
-                <checkbox [label]="'Add Artifact To Implementation'"
-                          [(checked)]="enableAddArtifactImplementation"
-                          (checkedChange)="onMarkToAddArtifactToImplementation($event)"
-                          [disabled]=isViewOnly>
-                </checkbox>
-            </div>
-            <div class="form-item" *ngIf="!enableAddArtifactImplementation">
                 <sdc-input
-                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_NAME' | translate}}"
+                    label="{{'INTERFACE_OPERATION_IMPLEMENTATION_ARTIFACT_URI' | translate}}"
                     testId="interface-operation-implementation-name"
                     [(value)]="artifactName"
-                    (valueChange)="onImplementationNameChange($event)"
+                    (valueChange)="onURIChange($event)"
                     [disabled]=isViewOnly>
                 </sdc-input>
             </div>
-
-            <div class="side-by-side" *ngIf="enableAddArtifactImplementation">
-                <div class="form-item" *ngIf="toscaArtifactTypes">
-                    <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="toscaArtifactTypeSelected && enableAddArtifactImplementation">
-                    <sdc-input
-                        label="{{ 'INTERFACE_OPERATION_IMPLEMENTATION_FILE' | translate }}"
-                        data-tests-id="artifactFile"
-                        [(value)]="artifactName"
-                        [required]="true"
-                        (valueChange)="onArtifactFileChange($event)"
-                        [disabled]=isViewOnly>
-                    </sdc-input>
-                </div>
-                <div class="form-item">
-                    <sdc-input
-                        label="{{ 'ARTIFACT_VERSION' | translate }}"
-                        data-tests-id="artifactVersion"
-                        [(value)]="artifactVersion"
-                        (valueChange)="onArtifactVersionChange($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">
-                <label class="sdc-input__label">{{ 'ENTITY_VIEWER_PROPERTIES_TAB' | translate }}</label>
-                <div class="generic-table">
-                    <div class="header-row table-row">
-                        <span class="cell header-cell field-input-name">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_NAME' | translate }}</span>
-                        <span class="cell header-cell field-input-type">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_TYPE' | translate }}</span>
-                        <span class="cell header-cell field-input-value">{{ 'IMPLEMENTATION_ARTIFACT_PROPERTY_VALUE' | translate }}</span>
-                    </div>
-
-                    <div class="empty-msg data-row" *ngIf="!toscaArtifactTypeProperties.length">
-                        <div>{{ 'EMPTY_PARAM_TABLE_HEADER' | translate }}</div>
-                    </div>
-                    <property-param-row
-                        *ngFor="let property of toscaArtifactTypeProperties"
-                        class="data-row"
-                        [artifactProperty]="property"
-                        [isPropertyValueValid]="propertyValueValidation">
-                    </property-param-row>
-                </div>
+                <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
-                [inputs]="inputs" [dataTypeMap]="dataTypeMap"
+                [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>
@@ -142,5 +147,14 @@
             >
             </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>
     </form>
 </div>