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
10 * http://www.apache.org/licenses/LICENSE-2.0
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.
18 * SPDX-License-Identifier: Apache-2.0
19 * ============LICENSE_END=========================================================
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";
37 selector: 'app-type-workspace-properties',
38 templateUrl: './type-workspace-properties.component.html',
39 styleUrls: ['./type-workspace-properties.component.less']
41 export class TypeWorkspacePropertiesComponent implements OnInit {
42 @Input() isViewOnly = true;
43 @Input() dataType: DataTypeModel = new DataTypeModel();
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>();
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) {
65 this.initProperties();
66 this.tableSearchTermUpdate.pipe(
68 distinctUntilChanged())
69 .subscribe(searchTerm => {
70 this.filter(searchTerm);
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'},
82 this.tableSortBy = this.tableHeadersList[0].property;
85 private initProperties(): void {
86 this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
87 this.showPropertiesMap(properties);
91 onUpdateSort(property: string): void {
92 if (this.tableSortBy === property) {
93 this.tableColumnReverse = !this.tableColumnReverse;
95 this.tableColumnReverse = false;
96 this.tableSortBy = property;
101 private sort(): void {
102 const field = this.tableSortBy;
103 this.filteredProperties.sort((property1, property2) => {
105 if (property1[field] > property2[field]) {
107 } else if (property1[field] < property2[field]) {
110 return this.tableColumnReverse ? result * -1 : result;
114 private filter(searchTerm?: string): void {
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))
124 this.filteredProperties = Array.from(this.properties);
129 private addProperty(property: PropertyBEModel) {
130 this.properties.push(property);
134 onClickAddProperty() {
135 this.openAddPropertyModal();
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(
151 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CLOSE'), 'outline grey', () => {
152 this.modalService.closeCurrentModal();
155 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
157 disableSaveButtonFlag = true;
158 this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => {
159 this.addProperty(new PropertyBEModel(property));
161 this.modalService.closeCurrentModal();
164 return disableSaveButtonFlag
168 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
169 this.modalService.closeCurrentModal();
173 this.modalService.addDynamicContentToModalAndBindInputs(modal, AddPropertyComponent, {
174 'readOnly': readOnly,
175 'property': property,
176 'model': this.dataType.model
178 modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: PropertyValidationEvent) => {
179 disableSaveButtonFlag = !validationEvent.isValid;
180 if (validationEvent.isValid) {
181 propertyFromModal = validationEvent.property;
184 modal.instance.open();
187 onRowClick(property: PropertyBEModel) {
188 this.openAddPropertyModal(property, true);
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);
200 this.filteredProperties = Array.from(this.properties);
205 interface TableHeader {