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

   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 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
  23 import {InputOperationParameter} from '../../../../../../models/interfaceOperation';
  24 import {IDropDownOption} from 'onap-ui-angular/dist/form-elements/dropdown/dropdown-models';
  25 import {Observable} from 'rxjs/Observable';
  26 import {AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
  27 import {PROPERTY_TYPES} from '../../../../../../utils/constants';
  28 import {SchemaProperty, SchemaPropertyGroupModel} from '../../../../../../models/schema-property';
  29 import {DataTypeModel} from "../../../../../../models/data-types";
  30
  31 @Component({
  32   selector: 'app-add-input',
  33   templateUrl: './add-input.component.html',
  34   styleUrls: ['./add-input.component.less']
  35 })
  36 export class AddInputComponent implements OnInit {
  37
  38   @Input('dataTypeMap') dataTypeMap$: Observable<Map<string, DataTypeModel>>;
  39   @Input('isView') isView: boolean;
  40   @Input() existingInputNames: Array<string> = [];
  41   @Output('onAddInput') onAddInputEvent: EventEmitter<InputOperationParameter>;
  42
  43   dataTypeMap: Map<string, DataTypeModel>;
  44   inputToAdd: InputOperationParameter;
  45   inputTypeOptions: Array<IDropDownOption>;
  46   inputSchemaOptions: Array<IDropDownOption>;
  47   showForm: boolean = false;
  48   showAddLink: boolean = true;
  49   showInputSchema: boolean = false;
  50
  51   inputForm: FormGroup;
  52
  53   constructor() {
  54     this.onAddInputEvent = new EventEmitter<InputOperationParameter>();
  55     this.inputTypeOptions = [];
  56     this.inputSchemaOptions = [];
  57     this.inputToAdd = new InputOperationParameter();
  58   }
  59
  60   schemaValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  61     const type = control.get('type');
  62     const schema = control.get('schema');
  63     return (type.value === 'list' || type.value === 'map') && !schema.value ? { schemaRequired: true } : null;
  64   };
  65
  66   uniqueNameValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  67     const name = control.get('name');
  68     return this.existingInputNames.indexOf(name.value) === -1 ? null : { nameIsNotUnique: true };
  69   };
  70
  71   ngOnInit() {
  72     this.initForm();
  73     this.initInputType();
  74   }
  75
  76   private initForm() {
  77     this.inputForm = new FormGroup({
  78       name: new FormControl({value: '', disabled: this.isView}, [Validators.required, Validators.minLength(1)]),
  79       type: new FormControl({value: '', disabled: this.isView}, [Validators.required, Validators.minLength(1)]),
  80       schema: new FormControl({value: '', disabled: this.isView})
  81     }, { validators: [this.schemaValidator, this.uniqueNameValidator] });
  82   }
  83
  84   private initInputType() {
  85     this.dataTypeMap$.subscribe((dataTypesMap: Map<string, DataTypeModel>) => {
  86       this.dataTypeMap = dataTypesMap;
  87       this.inputTypeOptions = [];
  88       this.inputSchemaOptions = [];
  89       dataTypesMap.forEach((value, key) => {
  90         const entry = {label: key, value: key};
  91         this.inputTypeOptions.push(entry);
  92         if (key != PROPERTY_TYPES.LIST && key != PROPERTY_TYPES.MAP) {
  93           this.inputSchemaOptions.push(entry);
  94         }
  95       });
  96     });
  97   }
  98
  99   onChangeInputType(inputType) {
 100     const typeForm = this.inputForm.get('type');
 101     if (!inputType) {
 102       this.inputToAdd.type = undefined;
 103       typeForm.setValue(undefined);
 104       this.toggleInputSchema();
 105       return;
 106     }
 107     typeForm.setValue(inputType);
 108     this.inputToAdd.type = inputType;
 109     this.toggleInputSchema();
 110   }
 111
 112   onChangeInputSchema(inputSchema: string) {
 113     const schemaForm = this.inputForm.get('schema');
 114     if (!inputSchema) {
 115       this.inputToAdd.schema = undefined;
 116       schemaForm.setValue(undefined);
 117       return;
 118     }
 119     schemaForm.setValue(inputSchema);
 120     this.inputToAdd.schema = new SchemaPropertyGroupModel();
 121     this.inputToAdd.schema.property = new SchemaProperty();
 122     this.inputToAdd.schema.property.type = inputSchema;
 123   }
 124
 125   onSubmit() {
 126     this.trimForm();
 127     if (this.inputForm.valid) {
 128       const nameForm = this.inputForm.get('name');
 129       const typeForm = this.inputForm.get('type');
 130       const schemaForm = this.inputForm.get('schema');
 131       const input = new InputOperationParameter();
 132       input.name = nameForm.value;
 133       input.type = typeForm.value;
 134       if (this.typeHasSchema()) {
 135         input.schema = new SchemaPropertyGroupModel();
 136         input.schema.property = new SchemaProperty();
 137         input.schema.property.type = schemaForm.value;
 138       }
 139       this.onAddInputEvent.emit(input);
 140       this.hideAddInput();
 141       this.resetForm();
 142     }
 143   }
 144
 145   showAddInput() {
 146     this.showForm = true;
 147     this.showAddLink = false;
 148   }
 149
 150   hideAddInput() {
 151     this.showForm = false;
 152     this.showAddLink = true;
 153   }
 154
 155   onCancel() {
 156     this.hideAddInput();
 157     this.resetForm();
 158   }
 159
 160   private resetForm() {
 161     this.inputForm.reset();
 162     this.showInputSchema = false;
 163     this.inputToAdd = new InputOperationParameter();
 164   }
 165
 166   getSchemaType() {
 167     return this.inputToAdd.schema == undefined ? undefined : this.inputToAdd.schema.property.type;
 168   }
 169
 170   getSchemaPlaceholder() {
 171     const schemaType = this.getSchemaType();
 172     return schemaType === undefined ? 'Select...' : schemaType;
 173   }
 174
 175   private toggleInputSchema() {
 176     this.showInputSchema = this.typeHasSchema();
 177   }
 178
 179   private typeHasSchema() {
 180     const typeForm = this.inputForm.get('type');
 181     return typeForm.value == PROPERTY_TYPES.LIST || typeForm.value == PROPERTY_TYPES.MAP;
 182   }
 183
 184   private trimForm() {
 185     const nameForm = this.inputForm.get('name');
 186     if (nameForm.value) {
 187       nameForm.setValue(nameForm.value.trim());
 188     }
 189     const typeForm = this.inputForm.get('type');
 190     if (typeForm.value) {
 191       typeForm.setValue(typeForm.value.trim());
 192     }
 193     const schemaForm = this.inputForm.get('schema');
 194     if (schemaForm.value) {
 195       schemaForm.setValue(schemaForm.value.trim());
 196     }
 197   }
 198
 199 }