gerrit.onap Code Review - sdc.git/blob

   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, Inject, Input, OnInit} from '@angular/core';
  23 import {DataTypeModel} from "../../../../models/data-types";
  24 import {DataTypeService} from "../../../services/data-type.service";
  25 import {PropertyBEModel} from "../../../../models/properties-inputs/property-be-model";
  26 import {Subject} from "rxjs";
  27 import {debounceTime, distinctUntilChanged} from "rxjs/operators";
  28 import {ModalService} from "../../../services/modal.service";
  29 import {ModalModel} from "../../../../models/modal";
  30 import {ButtonModel} from "../../../../models/button";
  31 import {TranslateService} from "../../../shared/translator/translate.service";
  32 import {AddPropertyComponent, PropertyValidationEvent} from "./add-property/add-property.component";
  33 import {IWorkspaceViewModelScope} from "../../../../view-models/workspace/workspace-view-model";
  34 import {SdcUiServices} from "onap-ui-angular/dist";
  35 import {ToscaTypeHelper} from "../../../../utils/tosca-type-helper";
  36
  37 @Component({
  38     selector: 'app-type-workspace-properties',
  39     templateUrl: './type-workspace-properties.component.html',
  40     styleUrls: ['./type-workspace-properties.component.less']
  41 })
  42 export class TypeWorkspacePropertiesComponent implements OnInit {
  43     @Input() isViewOnly = true;
  44     @Input() dataType: DataTypeModel = new DataTypeModel();
  45
  46     importedFile: File;
  47     derivedFromName: string;
  48     properties: Array<PropertyBEModel> = [];
  49     filteredProperties: Array<PropertyBEModel> = [];
  50     tableHeadersList: Array<TableHeader> = [];
  51     tableSortBy: string = 'name';
  52     tableColumnReverse: boolean = false;
  53     tableFilterTerm: string = undefined;
  54     tableSearchTermUpdate = new Subject<string>();
  55
  56     constructor(@Inject('$scope') private $scope: IWorkspaceViewModelScope,
  57                 @Inject('$state') private $state: ng.ui.IStateService,
  58                 protected dataTypeService: DataTypeService,
  59                 private modalServiceSdcUI: SdcUiServices.ModalService,
  60                 private modalService: ModalService,
  61                 private translateService: TranslateService) {
  62     }
  63
  64     ngOnInit(): void {
  65         this.initTable();
  66         this.initProperties();
  67         this.tableSearchTermUpdate.pipe(
  68             debounceTime(400),
  69             distinctUntilChanged())
  70         .subscribe(searchTerm => {
  71             this.filter(searchTerm);
  72         });
  73     }
  74
  75     private initTable(): void {
  76         this.tableHeadersList = [
  77             {title: 'Name', property: 'name'},
  78             {title: 'Type', property: 'type'},
  79             {title: 'Schema', property: 'schema.property.type'},
  80             {title: 'Required', property: 'required'},
  81             {title: 'Description', property: 'description'},
  82         ];
  83         this.tableSortBy = this.tableHeadersList[0].property;
  84     }
  85
  86     private initProperties(): void {
  87         this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
  88             this.showPropertiesMap(properties);
  89         });
  90     }
  91
  92     onUpdateSort(property: string): void {
  93         if (this.tableSortBy === property) {
  94             this.tableColumnReverse = !this.tableColumnReverse;
  95         } else {
  96             this.tableColumnReverse = false;
  97             this.tableSortBy = property;
  98         }
  99         this.sort();
 100     }
 101
 102     private sort(): void {
 103         const field = this.tableSortBy;
 104         this.filteredProperties.sort((property1, property2) => {
 105             let result = 0;
 106             if (property1[field] > property2[field]) {
 107                 result = 1;
 108             } else if (property1[field] < property2[field]) {
 109                 result = -1;
 110             }
 111             return this.tableColumnReverse ? result * -1 : result;
 112         });
 113     }
 114
 115     private filter(searchTerm?: string): void {
 116         if (searchTerm) {
 117             searchTerm = searchTerm.toLowerCase();
 118             this.filteredProperties = this.properties.filter(property =>
 119                 property.name.toLowerCase().includes(searchTerm)
 120                 || property.type.toLowerCase().includes(searchTerm)
 121                 || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm))
 122                 || (property.description && property.description.toLowerCase().includes(searchTerm))
 123             );
 124         } else {
 125             this.filteredProperties = Array.from(this.properties);
 126         }
 127         this.sort();
 128     }
 129
 130     private addProperty(property: PropertyBEModel) {
 131         this.properties.push(property);
 132         this.filter();
 133     }
 134
 135     private updateProperty(oldProperty: PropertyBEModel, newProperty: PropertyBEModel) {
 136         this.properties.forEach((value,index)=>{
 137             if(value.name == oldProperty.name) this.properties.splice(index,1);
 138         });
 139         this.properties.push(newProperty);
 140         this.filter();
 141     }
 142
 143     onClickAddProperty() {
 144         this.openAddPropertyModal(null, false);
 145     }
 146
 147     private openAddPropertyModal(property?: PropertyBEModel, readOnly: boolean = false) {
 148         const modalTitle = this.translateService.translate(property ? 'PROPERTY_EDIT_MODAL_TITLE' : 'PROPERTY_ADD_MODAL_TITLE');
 149         const modalButtons = [];
 150         let disableSaveButtonFlag = true;
 151         let propertyFromModal: PropertyBEModel = undefined;
 152         const modal = this.modalService.createCustomModal(new ModalModel(
 153             'md',
 154             modalTitle,
 155             null,
 156             modalButtons,
 157             null
 158         ));
 159         if (readOnly) {
 160             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CLOSE'), 'outline grey', () => {
 161                 this.modalService.closeCurrentModal();
 162             }));
 163         } else {
 164             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
 165                 () => {
 166                     disableSaveButtonFlag = true;
 167                     if (property) {
 168                         this.dataTypeService.updateProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => {
 169                             this.updateProperty(propertyFromModal, new PropertyBEModel(property));
 170                         });
 171                     }
 172                     else {
 173                         this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => {
 174                             this.addProperty(new PropertyBEModel(property));
 175                         });
 176                     }
 177                     this.modalService.closeCurrentModal();
 178                 },
 179                 (): boolean => {
 180                     return disableSaveButtonFlag
 181                 }
 182             ));
 183
 184             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
 185                 this.modalService.closeCurrentModal();
 186             }));
 187         }
 188
 189         this.modalService.addDynamicContentToModalAndBindInputs(modal, AddPropertyComponent, {
 190             'readOnly': readOnly,
 191             'property': property,
 192             'model': this.dataType.model
 193         });
 194         modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: PropertyValidationEvent) => {
 195             disableSaveButtonFlag = !validationEvent.isValid;
 196             if (validationEvent.isValid) {
 197                 propertyFromModal = validationEvent.property;
 198             }
 199         });
 200         modal.instance.open();
 201     }
 202
 203     onNameClick(property: PropertyBEModel) {
 204         this.openAddPropertyModal(property, this.isViewOnly);
 205     }
 206
 207     private showPropertiesMap(properties: Array<PropertyBEModel>): void {
 208         this.properties = properties.map(value => {
 209             const property = new PropertyBEModel(value);
 210             if (property.defaultValue) {
 211                 if (!this.isTypeSimple(property.type) && typeof property.defaultValue === 'string') {
 212                     property.defaultValue = JSON.parse(property.defaultValue);
 213                 } else {
 214                     property.defaultValue = property.defaultValue;
 215                 }
 216             }
 217             return property;
 218         });
 219         this.filteredProperties = Array.from(this.properties);
 220         this.sort();
 221     }
 222
 223     public isTypeSimple(value:any): boolean {
 224         return ToscaTypeHelper.isTypeSimple(value);
 225     }
 226
 227     onConstraintChange = (constraints: any): void => {
 228         if (!this.$scope.invalidMandatoryFields) {
 229             this.$scope.footerButtons[0].disabled = !constraints.valid;
 230         } else {
 231             this.$scope.footerButtons[0].disabled = this.$scope.invalidMandatoryFields;
 232         }
 233         if (!constraints.constraints || constraints.constraints.length == 0) {
 234             this.$scope.editPropertyModel.property.propertyConstraints = null;
 235             this.$scope.editPropertyModel.property.constraints = null;
 236             return;
 237         }
 238         this.$scope.editPropertyModel.property.propertyConstraints = this.serializePropertyConstraints(constraints.constraints);
 239         this.$scope.editPropertyModel.property.constraints = constraints.constraints;
 240     }
 241
 242     private serializePropertyConstraints(constraints: any[]): string[] {
 243         if (constraints) {
 244             let stringConstraints = new Array();
 245             constraints.forEach((constraint) => {
 246                 stringConstraints.push(JSON.stringify(constraint));
 247             })
 248             return stringConstraints;
 249         }
 250         return null;
 251     }
 252 }
 253
 254 interface TableHeader {
 255     title: string;
 256     property: string;
 257 }