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, 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";
35 selector: 'app-type-workspace-properties',
36 templateUrl: './type-workspace-properties.component.html',
37 styleUrls: ['./type-workspace-properties.component.less']
39 export class TypeWorkspacePropertiesComponent implements OnInit {
40 @Input() isViewOnly = true;
41 @Input() dataType: DataTypeModel = new DataTypeModel();
43 properties: Array<PropertyBEModel> = [];
44 filteredProperties: Array<PropertyBEModel> = [];
45 tableHeadersList: Array<TableHeader> = [];
46 tableSortBy: string = 'name';
47 tableColumnReverse: boolean = false;
48 tableFilterTerm: string = undefined;
49 tableSearchTermUpdate = new Subject<string>();
51 constructor(private dataTypeService: DataTypeService, private modalService: ModalService, private translateService: TranslateService) {
56 this.initProperties();
57 this.tableSearchTermUpdate.pipe(
59 distinctUntilChanged())
60 .subscribe(searchTerm => {
61 this.filter(searchTerm);
65 private initTable(): void {
66 this.tableHeadersList = [
67 {title: 'Name', property: 'name'},
68 {title: 'Type', property: 'type'},
69 {title: 'Schema', property: 'schema.property.type'},
70 {title: 'Required', property: 'required'},
71 {title: 'Description', property: 'description'},
74 this.tableSortBy = this.tableHeadersList[0].property;
77 private initProperties(): void {
78 this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => {
79 this.properties = properties.map(value => {
80 const property = new PropertyBEModel(value);
81 if (property.defaultValue) {
82 property.defaultValue = JSON.parse(property.defaultValue);
87 this.filteredProperties = Array.from(this.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);
193 interface TableHeader {