catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/interface-operation-handler.component.ts

   1 /*
   2 * ============LICENSE_START=======================================================
   3 * SDC
   4 * ================================================================================
   5 *  Copyright (C) 2021 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 *  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 import {Component, EventEmitter, Output} from '@angular/core';
  23 import {UIInterfaceModel} from "../interface-operations.component";
  24 import {
  25     InputOperationParameter,
  26     InterfaceOperationModel,
  27     IOperationParamsList
  28 } from "../../../../../models/interfaceOperation";
  29 import {TranslateService} from "../../../../shared/translator/translate.service";
  30 import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models";
  31 import {DropdownValue} from "../../../../components/ui/form-components/dropdown/ui-element-dropdown.component";
  32 import {ArtifactModel} from "../../../../../models/artifacts";
  33 import {PropertyBEModel} from "../../../../../models/properties-inputs/property-be-model";
  34 import {PropertyParamRowComponent} from "./property-param-row/property-param-row.component";
  35 import {PropertyFEModel} from "../../../../../models/properties-inputs/property-fe-model";
  36
  37 @Component({
  38     selector: 'operation-handler',
  39     templateUrl: './interface-operation-handler.component.html',
  40     styleUrls: ['./interface-operation-handler.component.less'],
  41     providers: [TranslateService]
  42 })
  43
  44 export class InterfaceOperationHandlerComponent {
  45     @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>();
  46
  47     input: {
  48         toscaArtifactTypes: Array<DropdownValue>;
  49         selectedInterface: UIInterfaceModel;
  50         selectedInterfaceOperation: InterfaceOperationModel;
  51         validityChangedCallback: Function;
  52         isViewOnly: boolean;
  53     };
  54
  55     interfaceType: string;
  56     artifactVersion: string;
  57     artifactName: string;
  58     interfaceOperationName: string;
  59     operationToUpdate: InterfaceOperationModel;
  60     inputs: Array<InputOperationParameter> = [];
  61     properties: Array<PropertyParamRowComponent> = [];
  62     isLoading: boolean = false;
  63     readonly: boolean;
  64     isViewOnly: boolean;
  65
  66     toscaArtifactTypeSelected: string;
  67     toscaArtifactTypeProperties: Array<PropertyBEModel> = [];
  68
  69     toscaArtifactTypes: Array<DropdownValue> = [];
  70
  71     enableAddArtifactImplementation: boolean;
  72     propertyValueValid: boolean = true;
  73
  74     ngOnInit() {
  75         this.isViewOnly = this.input.isViewOnly;
  76         this.interfaceType = this.input.selectedInterface.displayType();
  77         this.operationToUpdate = new InterfaceOperationModel(this.input.selectedInterfaceOperation);
  78         this.operationToUpdate.interfaceId = this.input.selectedInterface.uniqueId;
  79         this.operationToUpdate.interfaceType = this.input.selectedInterface.type;
  80         if (!this.operationToUpdate.inputs) {
  81             this.operationToUpdate.inputs = new class implements IOperationParamsList {
  82                 listToscaDataDefinition: Array<InputOperationParameter> = [];
  83             }
  84         }
  85
  86         this.inputs = this.operationToUpdate.inputs.listToscaDataDefinition;
  87         this.removeImplementationQuote();
  88         this.validityChanged();
  89         this.loadInterfaceOperationImplementation();
  90     }
  91
  92     private loadInterfaceOperationImplementation() {
  93         this.toscaArtifactTypes = this.input.toscaArtifactTypes;
  94         this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
  95         this.artifactName = this.operationToUpdate.implementation.artifactName;
  96         this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
  97         this.getArtifactTypesSelected();
  98     }
  99
 100     onDescriptionChange= (value: any): void => {
 101         this.operationToUpdate.description = value;
 102     }
 103
 104     onImplementationNameChange(value: any) {
 105         this.readonly = true
 106         if (value) {
 107             let artifact = new ArtifactModel();
 108             artifact.artifactName = value;
 109             this.operationToUpdate.implementation = artifact;
 110             this.enableAddArtifactImplementation = false;
 111             this.readonly = false;
 112         }
 113     }
 114
 115     onPropertyValueChange = (propertyValue) => {
 116         this.emitter.emit(propertyValue);
 117     }
 118
 119     onMarkToAddArtifactToImplementation(event: any) {
 120         if (!event) {
 121             this.toscaArtifactTypeSelected = undefined;
 122             this.artifactVersion = undefined;
 123             if (this.operationToUpdate.implementation.artifactType) {
 124                 this.artifactName = undefined;
 125             }
 126             this.toscaArtifactTypeProperties = undefined;
 127         } else {
 128             this.getArtifactTypesSelected();
 129         }
 130         this.enableAddArtifactImplementation = event;
 131         this.validateRequiredField();
 132     }
 133
 134     onSelectToscaArtifactType(type: IDropDownOption) {
 135         if (type) {
 136             let toscaArtifactType = type.value;
 137             let artifact = new ArtifactModel();
 138             this.artifactName = undefined;
 139             this.artifactVersion = undefined;
 140             artifact.artifactType = toscaArtifactType.type;
 141             artifact.properties = toscaArtifactType.properties;
 142             this.toscaArtifactTypeProperties = artifact.properties;
 143             this.toscaArtifactTypeSelected = artifact.artifactType;
 144             this.operationToUpdate.implementation = artifact;
 145             this.getArtifactTypesSelected();
 146         }
 147         this.validateRequiredField();
 148     }
 149
 150     onArtifactFileChange(value: any) {
 151         if (value) {
 152             this.operationToUpdate.implementation.artifactName = value;
 153         }
 154         this.validateRequiredField();
 155     }
 156
 157     onArtifactVersionChange(value: any) {
 158         if (value) {
 159             this.operationToUpdate.implementation.artifactVersion = value;
 160         }
 161     }
 162
 163     onAddInput(inputOperationParameter?: InputOperationParameter): void {
 164         let newInput = new InputOperationParameter(inputOperationParameter)
 165         newInput.type = "string";
 166         newInput.inputId = this.generateUniqueId();
 167         this.inputs.push(newInput);
 168         this.validityChanged();
 169     }
 170
 171     propertyValueValidation = (propertyValue): void => {
 172         this.onPropertyValueChange(propertyValue);
 173         this.propertyValueValid = propertyValue.isValid;
 174         this.readonly = !this.propertyValueValid;
 175         this.validateRequiredField();
 176     }
 177
 178     onRemoveInput = (inputParam: InputOperationParameter): void => {
 179         let index = this.inputs.indexOf(inputParam);
 180         this.inputs.splice(index, 1);
 181         this.validityChanged();
 182     }
 183
 184     private removeImplementationQuote(): void {
 185         if (this.operationToUpdate.implementation) {
 186             if (!this.operationToUpdate.implementation
 187                 || !this.operationToUpdate.implementation.artifactName) {
 188                 return;
 189             }
 190
 191             let implementation = this.operationToUpdate.implementation.artifactName.trim();
 192
 193             if (implementation.startsWith("'") && implementation.endsWith("'")) {
 194                 this.operationToUpdate.implementation.artifactName = implementation.slice(1, -1);
 195             }
 196         }
 197     }
 198
 199     private generateUniqueId = (): string => {
 200         let result = '';
 201         const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 202         const charactersLength = characters.length;
 203         for (let i = 0; i < 36; i++ ) {
 204             result += characters.charAt(Math.floor(Math.random() * charactersLength));
 205         }
 206         return result;
 207     }
 208
 209     validityChanged = () => {
 210         let validState = this.checkFormValidForSubmit();
 211         this.input.validityChangedCallback(validState);
 212         if (validState) {
 213             this.readonly = false;
 214         }
 215     }
 216
 217     private getArtifactTypesSelected() {
 218         if (this.operationToUpdate.implementation && this.operationToUpdate.implementation.artifactType) {
 219             this.artifactName = this.operationToUpdate.implementation.artifactName;
 220             this.toscaArtifactTypeSelected = this.operationToUpdate.implementation.artifactType;
 221             this.artifactVersion = this.operationToUpdate.implementation.artifactVersion;
 222             this.toscaArtifactTypeProperties = this.operationToUpdate.implementation.properties;
 223             this.enableAddArtifactImplementation = true;
 224         }
 225         this.validateRequiredField();
 226     }
 227
 228     validateRequiredField = () => {
 229         this.readonly = true;
 230         const isRequiredFieldSelected = this.isRequiredFieldsSelected();
 231         this.input.validityChangedCallback(isRequiredFieldSelected);
 232         if (isRequiredFieldSelected && this.propertyValueValid) {
 233             this.readonly = false;
 234         }
 235     }
 236
 237     private isRequiredFieldsSelected() {
 238         return this.toscaArtifactTypeSelected && this.artifactName;
 239     }
 240
 241     private checkFormValidForSubmit = (): boolean => {
 242         return this.operationToUpdate.name && this.artifactName && this.isParamsValid();
 243     }
 244
 245     private isParamsValid = (): boolean => {
 246         const isInputValid = (input) => input.name && input.inputId;
 247         const isValid = this.inputs.every(isInputValid);
 248         if (!isValid) {
 249             this.readonly = true;
 250         }
 251         return isValid;
 252     }
 253
 254     toDropDownOption(val: string) {
 255         return { value : val, label: val };
 256     }
 257
 258 }