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";
35 import {ToscaTypeHelper} from "../../../../utils/tosca-type-helper";
38 selector: 'app-type-workspace-properties',
39 templateUrl: './type-workspace-properties.component.html',
40 styleUrls: ['./type-workspace-properties.component.less']
42 export class TypeWorkspacePropertiesComponent implements OnInit {
43 @Input() isViewOnly = true;
44 @Input() dataType: DataTypeModel = new DataTypeModel();
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>();
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) {
66 this.initProperties();
67 this.tableSearchTermUpdate.pipe(
69 distinctUntilChanged())
70 .subscribe(searchTerm => {
71 this.filter(searchTerm);
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'},
83 this.tableSortBy = this.tableHeadersList[0].property;
86 private initProperties(): void {
87 this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
88 this.showPropertiesMap(properties);
92 onUpdateSort(property: string): void {
93 if (this.tableSortBy === property) {
94 this.tableColumnReverse = !this.tableColumnReverse;
96 this.tableColumnReverse = false;
97 this.tableSortBy = property;
102 private sort(): void {
103 const field = this.tableSortBy;
104 this.filteredProperties.sort((property1, property2) => {
106 if (property1[field] > property2[field]) {
108 } else if (property1[field] < property2[field]) {
111 return this.tableColumnReverse ? result * -1 : result;
115 private filter(searchTerm?: string): void {
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))
125 this.filteredProperties = Array.from(this.properties);
130 private addProperty(property: PropertyBEModel) {
131 this.properties.push(property);
135 onClickAddProperty() {
136 this.openAddPropertyModal();
139 private openAddPropertyModal(property?: PropertyBEModel, readOnly: boolean = false) {
140 const modalTitle = this.translateService.translate('PROPERTY_ADD_MODAL_TITLE');
141 const modalButtons = [];
142 let disableSaveButtonFlag = true;
143 let propertyFromModal: PropertyBEModel = undefined;
144 const modal = this.modalService.createCustomModal(new ModalModel(
152 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CLOSE'), 'outline grey', () => {
153 this.modalService.closeCurrentModal();
156 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue',
158 disableSaveButtonFlag = true;
159 this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => {
160 this.addProperty(new PropertyBEModel(property));
162 this.modalService.closeCurrentModal();
165 return disableSaveButtonFlag
169 modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => {
170 this.modalService.closeCurrentModal();
174 this.modalService.addDynamicContentToModalAndBindInputs(modal, AddPropertyComponent, {
175 'readOnly': readOnly,
176 'property': property,
177 'model': this.dataType.model
179 modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: PropertyValidationEvent) => {
180 disableSaveButtonFlag = !validationEvent.isValid;
181 if (validationEvent.isValid) {
182 propertyFromModal = validationEvent.property;
185 modal.instance.open();
188 onRowClick(property: PropertyBEModel) {
189 this.openAddPropertyModal(property, true);
192 private showPropertiesMap(properties: Array<PropertyBEModel>): void {
193 this.properties = properties.map(value => {
194 const property = new PropertyBEModel(value);
195 if (property.defaultValue) {
196 if (!this.isTypeSimple(property.type) && typeof property.defaultValue === 'string') {
197 property.defaultValue = JSON.parse(property.defaultValue);
199 property.defaultValue = property.defaultValue;
204 this.filteredProperties = Array.from(this.properties);
208 public isTypeSimple(value:any): boolean {
209 return ToscaTypeHelper.isTypeSimple(value);
212 onConstraintChange = (constraints: any): void => {
213 if (!this.$scope.invalidMandatoryFields) {
214 this.$scope.footerButtons[0].disabled = !constraints.valid;
216 this.$scope.footerButtons[0].disabled = this.$scope.invalidMandatoryFields;
218 if (!constraints.constraints || constraints.constraints.length == 0) {
219 this.$scope.editPropertyModel.property.propertyConstraints = null;
220 this.$scope.editPropertyModel.property.constraints = null;
223 this.$scope.editPropertyModel.property.propertyConstraints = this.serializePropertyConstraints(constraints.constraints);
224 this.$scope.editPropertyModel.property.constraints = constraints.constraints;
227 private serializePropertyConstraints(constraints: any[]): string[] {
229 let stringConstraints = new Array();
230 constraints.forEach((constraint) => {
231 stringConstraints.push(JSON.stringify(constraint));
233 return stringConstraints;
239 interface TableHeader {