From 5e71c18416adc5c136ea9053a6bbac819da18c60 Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Wed, 12 Oct 2022 18:14:23 +0100 Subject: Implement create data type property MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Allows to add a new data type property and visualize the properties details. Change-Id: Ib7bcd4b0bd8213dbe8ee8a3762a0636e22dc67eb Issue-ID: SDC-4258 Signed-off-by: André Schmid --- .../type-workspace-properties.component.ts | 238 ++++++++++++++------- 1 file changed, 159 insertions(+), 79 deletions(-) (limited to 'catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts') diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts index 931fd3d97c..90bc89ae08 100644 --- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts +++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/type-workspace-properties.component.ts @@ -23,93 +23,173 @@ import {Component, Input, OnInit} from '@angular/core'; import {DataTypeModel} from "../../../../models/data-types"; import {DataTypeService} from "../../../services/data-type.service"; import {PropertyBEModel} from "../../../../models/properties-inputs/property-be-model"; -import { Subject } from "rxjs"; +import {Subject} from "rxjs"; import {debounceTime, distinctUntilChanged} from "rxjs/operators"; +import {ModalService} from "../../../services/modal.service"; +import {ModalModel} from "../../../../models/modal"; +import {ButtonModel} from "../../../../models/button"; +import {TranslateService} from "../../../shared/translator/translate.service"; +import {AddPropertyComponent, PropertyValidationEvent} from "./add-property/add-property.component"; @Component({ - selector: 'app-type-workspace-properties', - templateUrl: './type-workspace-properties.component.html', - styleUrls: ['./type-workspace-properties.component.less'] + selector: 'app-type-workspace-properties', + templateUrl: './type-workspace-properties.component.html', + styleUrls: ['./type-workspace-properties.component.less'] }) export class TypeWorkspacePropertiesComponent implements OnInit { - @Input() isViewOnly = true; - @Input() dataType: DataTypeModel = new DataTypeModel(); - - properties: Array = []; - filteredProperties: Array = []; - tableHeadersList: Array = []; - tableSortBy: string = 'name'; - tableColumnReverse: boolean = false; - tableFilterTerm: string = undefined; - tableSearchTermUpdate = new Subject(); - - constructor(private dataTypeService: DataTypeService) { } - - ngOnInit(): void { - this.initTable(); - this.initProperties(); - this.tableSearchTermUpdate.pipe( - debounceTime(400), - distinctUntilChanged()) - .subscribe(searchTerm => { - this.filter(searchTerm); - }); - } - - private initTable(): void { - this.tableHeadersList = [ - {title: 'Name', property: 'name'}, - {title: 'Type', property: 'type'}, - {title: 'Schema', property: 'schema.property.type'}, - {title: 'Description', property: 'description'}, - ]; - - this.tableSortBy = this.tableHeadersList[0].property; - } - - private initProperties(): void { - this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => { - this.properties = properties.map(value => new PropertyBEModel(value)); - this.filteredProperties = Array.from(this.properties); - this.sort(); - }); - } - - onUpdateSort(property: string): void { - if (this.tableSortBy === property) { - this.tableColumnReverse = !this.tableColumnReverse; - } else { - this.tableColumnReverse = false; - this.tableSortBy = property; + @Input() isViewOnly = true; + @Input() dataType: DataTypeModel = new DataTypeModel(); + + properties: Array = []; + filteredProperties: Array = []; + tableHeadersList: Array = []; + tableSortBy: string = 'name'; + tableColumnReverse: boolean = false; + tableFilterTerm: string = undefined; + tableSearchTermUpdate = new Subject(); + + constructor(private dataTypeService: DataTypeService, private modalService: ModalService, private translateService: TranslateService) { + } + + ngOnInit(): void { + this.initTable(); + this.initProperties(); + this.tableSearchTermUpdate.pipe( + debounceTime(400), + distinctUntilChanged()) + .subscribe(searchTerm => { + this.filter(searchTerm); + }); + } + + private initTable(): void { + this.tableHeadersList = [ + {title: 'Name', property: 'name'}, + {title: 'Type', property: 'type'}, + {title: 'Schema', property: 'schema.property.type'}, + {title: 'Required', property: 'required'}, + {title: 'Description', property: 'description'}, + ]; + + this.tableSortBy = this.tableHeadersList[0].property; } - this.sort(); - } - - private sort(): void { - const field = this.tableSortBy; - this.filteredProperties = this.filteredProperties.sort((property1, property2) => { - const result = property1[field] > property2[field] ? 1 : property1[field] < property2[field] ? -1 : 0; - return this.tableColumnReverse ? result * -1 : result; - }); - } - - private filter(searchTerm: string): void { - if (searchTerm) { - searchTerm = searchTerm.toLowerCase(); - this.filteredProperties = this.properties.filter(property => - property.name.toLowerCase().includes(searchTerm) - || property.type.toLowerCase().includes(searchTerm) - || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm)) - || (property.description && property.description.toLowerCase().includes(searchTerm)) - ); - } else { - this.filteredProperties = Array.from(this.properties); + + private initProperties(): void { + this.dataTypeService.findAllProperties(this.dataType.uniqueId).subscribe(properties => { + this.properties = properties.map(value => { + const property = new PropertyBEModel(value); + if (property.defaultValue) { + property.defaultValue = JSON.parse(property.defaultValue); + } + + return property; + }); + this.filteredProperties = Array.from(this.properties); + this.sort(); + }); + } + + onUpdateSort(property: string): void { + if (this.tableSortBy === property) { + this.tableColumnReverse = !this.tableColumnReverse; + } else { + this.tableColumnReverse = false; + this.tableSortBy = property; + } + this.sort(); + } + + private sort(): void { + const field = this.tableSortBy; + this.filteredProperties.sort((property1, property2) => { + let result = 0; + if (property1[field] > property2[field]) { + result = 1; + } else if (property1[field] < property2[field]) { + result = -1; + } + return this.tableColumnReverse ? result * -1 : result; + }); + } + + private filter(searchTerm?: string): void { + if (searchTerm) { + searchTerm = searchTerm.toLowerCase(); + this.filteredProperties = this.properties.filter(property => + property.name.toLowerCase().includes(searchTerm) + || property.type.toLowerCase().includes(searchTerm) + || (property.getSchemaType() && property.getSchemaType().toLowerCase().includes(searchTerm)) + || (property.description && property.description.toLowerCase().includes(searchTerm)) + ); + } else { + this.filteredProperties = Array.from(this.properties); + } + this.sort(); + } + + private addProperty(property: PropertyBEModel) { + this.properties.push(property); + this.filter(); + } + + onClickAddProperty() { + this.openAddPropertyModal(); + } + + private openAddPropertyModal(property?: PropertyBEModel, readOnly: boolean = false) { + const modalTitle = this.translateService.translate('PROPERTY_ADD_MODAL_TITLE'); + const modalButtons = []; + let disableSaveButtonFlag = true; + let propertyFromModal: PropertyBEModel = undefined; + const modal = this.modalService.createCustomModal(new ModalModel( + 'md', + modalTitle, + null, + modalButtons, + null + )); + if (readOnly) { + modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CLOSE'), 'outline grey', () => { + this.modalService.closeCurrentModal(); + })); + } else { + modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_SAVE'), 'blue', + () => { + disableSaveButtonFlag = true; + this.dataTypeService.createProperty(this.dataType.uniqueId, propertyFromModal).subscribe(property => { + this.addProperty(new PropertyBEModel(property)); + }); + this.modalService.closeCurrentModal(); + }, + (): boolean => { + return disableSaveButtonFlag + } + )); + + modalButtons.push(new ButtonModel(this.translateService.translate('MODAL_CANCEL'), 'outline grey', () => { + this.modalService.closeCurrentModal(); + })); + } + + this.modalService.addDynamicContentToModalAndBindInputs(modal, AddPropertyComponent, { + 'readOnly': readOnly, + 'property': property + }); + modal.instance.dynamicContent.instance.onValidityChange.subscribe((validationEvent: PropertyValidationEvent) => { + disableSaveButtonFlag = !validationEvent.isValid; + if (validationEvent.isValid) { + propertyFromModal = validationEvent.property; + } + }); + modal.instance.open(); + } + + onRowClick(property: PropertyBEModel) { + this.openAddPropertyModal(property, true); } - this.sort(); - } } interface TableHeader { - title: string; - property: string; + title: string; + property: string; } \ No newline at end of file -- cgit 1.2.3-korg