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