catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.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, 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
  36 @Component({
  37     selector: 'app-type-workspace-properties',
  38     templateUrl: './type-workspace-properties.component.html',
  39     styleUrls: ['./type-workspace-properties.component.less']
  40 })
  41 export class TypeWorkspacePropertiesComponent implements OnInit {
  42     @Input() isViewOnly = true;
  43     @Input() dataType: DataTypeModel = new DataTypeModel();
  44
  45     importedFile: File;
  46     derivedFromName: string;
  47     properties: Array<PropertyBEModel> = [];
  48     filteredProperties: Array<PropertyBEModel> = [];
  49     tableHeadersList: Array<TableHeader> = [];
  50     tableSortBy: string = 'name';
  51     tableColumnReverse: boolean = false;
  52     tableFilterTerm: string = undefined;
  53     tableSearchTermUpdate = new Subject<string>();
  54
  55     constructor(@Inject('$scope') private $scope: IWorkspaceViewModelScope,
  56                 @Inject('$state') private $state: ng.ui.IStateService,
  57                 protected dataTypeService: DataTypeService,
  58                 private modalServiceSdcUI: SdcUiServices.ModalService,
  59                 private modalService: ModalService,
  60                 private translateService: TranslateService) {
  61     }
  62
  63     ngOnInit(): void {
  64         this.initTable();
  65         this.initProperties();
  66         this.tableSearchTermUpdate.pipe(
  67             debounceTime(400),
  68             distinctUntilChanged())
  69         .subscribe(searchTerm => {
  70             this.filter(searchTerm);
  71         });
  72     }
  73
  74     private initTable(): void {
  75         this.tableHeadersList = [
  76             {title: 'Name', property: 'name'},
  77             {title: 'Type', property: 'type'},
  78             {title: 'Schema', property: 'schema.property.type'},
  79             {title: 'Required', property: 'required'},
  80             {title: 'Description', property: 'description'},
  81         ];
  82         this.tableSortBy = this.tableHeadersList[0].property;
  83     }
  84
  85     private initProperties(): void {
  86         this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
  87             this.showPropertiesMap(properties);
  88         });
  89     }
  90
  91     onUpdateSort(property: string): void {
  92         if (this.tableSortBy === property) {
  93             this.tableColumnReverse = !this.tableColumnReverse;
  94         } else {
  95             this.tableColumnReverse = false;
  96             this.tableSortBy = property;
  97         }
  98         this.sort();
  99     }
 100
 101     private sort(): void {
 102         const field = this.tableSortBy;
 103         this.filteredProperties.sort((property1, property2) => {
 104             let result = 0;
 105             if (property1[field] > property2[field]) {
 106                 result = 1;
 107             } else if (property1[field] < property2[field]) {
 108                 result = -1;
 109             }
 110             return this.tableColumnReverse ? result * -1 : result;
 111         });
 112     }
 113
 114     private filter(searchTerm?: string): void {
 115         if (searchTerm) {
 116             searchTerm = searchTerm.toLowerCase();
 117             this.filteredProperties = this.properties.filter(property =>
 118                 property.name.toLowerCase().includes(searchTerm)
 119                 || property.type.toLowerCase().includes(searchTerm)
 120                 || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm))
 121                 || (property.description && property.description.toLowerCase().includes(searchTerm))
 122             );
 123         } else {
 124             this.filteredProperties = Array.from(this.properties);
 125         }
 126         this.sort();
 127     }
 128
 129     private addProperty(property: PropertyBEModel) {
 130         this.properties.push(property);
 131         this.filter();
 132     }
 133
 134     onClickAddProperty() {
 135         this.openAddPropertyModal();
 136     }
 137
 138     private openAddPropertyModal(property?: PropertyBEModel, readOnly: boolean = false) {
 139         const modalTitle = this.translateService.translate('PROPERTY_ADD_MODAL_TITLE');
 140         const modalButtons = [];
 141         let disableSaveButtonFlag = true;
 142         let propertyFromModal: PropertyBEModel = undefined;
 143         const modal = this.modalService.createCustomModal(new ModalModel(
 144             'md',
 145             modalTitle,
 146             null,
 147             modalButtons,
 148             null
 149         ));
 150         if (readOnly) {
 151             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CLOSE'), 'outline grey', () => {
 152                 this.modalService.closeCurrentModal();
 153             }));
 154         } else {
 155             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
 156                 () => {
 157                     disableSaveButtonFlag = true;
 158                     this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => {
 159                         this.addProperty(new PropertyBEModel(property));
 160                     });
 161                     this.modalService.closeCurrentModal();
 162                 },
 163                 (): boolean => {
 164                     return disableSaveButtonFlag
 165                 }
 166             ));
 167
 168             modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
 169                 this.modalService.closeCurrentModal();
 170             }));
 171         }
 172
 173         this.modalService.addDynamicContentToModalAndBindInputs(modal, AddPropertyComponent, {
 174             'readOnly': readOnly,
 175             'property': property,
 176             'model': this.dataType.model
 177         });
 178         modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: PropertyValidationEvent) => {
 179             disableSaveButtonFlag = !validationEvent.isValid;
 180             if (validationEvent.isValid) {
 181                 propertyFromModal = validationEvent.property;
 182             }
 183         });
 184         modal.instance.open();
 185     }
 186
 187     onRowClick(property: PropertyBEModel) {
 188         this.openAddPropertyModal(property, true);
 189     }
 190
 191     private showPropertiesMap(properties: Array<PropertyBEModel>): void {
 192         this.properties = properties.map(value => {
 193             const property = new PropertyBEModel(value);
 194             if (property.defaultValue) {
 195                 property.defaultValue = JSON.parse(property.defaultValue);
 196             }
 197
 198             return property;
 199         });
 200         this.filteredProperties = Array.from(this.properties);
 201         this.sort();
 202     }
 203 }
 204
 205 interface TableHeader {
 206     title: string;
 207     property: string;
 208 }