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