Create foreign key
constraint name
+ [ngClass]="getValidationClass(constraintName)">
invalid name
diff --git a/src/app/views/uml/uml.component.scss b/src/app/views/uml/component/uml.component.scss
similarity index 100%
rename from src/app/views/uml/uml.component.scss
rename to src/app/views/uml/component/uml.component.scss
diff --git a/src/app/views/uml/uml.component.ts b/src/app/views/uml/component/uml.component.ts
similarity index 65%
rename from src/app/views/uml/uml.component.ts
rename to src/app/views/uml/component/uml.component.ts
index fa549b66..428fcc15 100644
--- a/src/app/views/uml/uml.component.ts
+++ b/src/app/views/uml/component/uml.component.ts
@@ -1,41 +1,56 @@
-import {AfterViewInit, Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';
-import {ActivatedRoute, Router} from '@angular/router';
-import {CrudService} from '../../services/crud.service';
-import {EditTableRequest, SchemaRequest} from '../../models/ui-request.model';
-import {DbTable, ForeignKey, SvgLine, Uml} from './uml.model';
-import {LeftSidebarService} from '../../components/left-sidebar/left-sidebar.service';
-import {FormBuilder} from '@angular/forms';
-import {ToastDuration, ToastService} from '../../components/toast/toast.service';
-import {DbColumn, ResultSet} from '../../components/data-view/models/result-set.model';
-import {DbmsTypesService} from '../../services/dbms-types.service';
-import {Subscription} from 'rxjs';
-import {ModalDirective} from 'ngx-bootstrap/modal';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { Subscription } from 'rxjs';
+import { DbColumn, ResultSet } from '../../../components/data-view/models/result-set.model';
+import { ToastDuration, ToastService } from '../../../components/toast/toast.service';
+import { getValidationClass, invalidNameMessage, nameIsValid } from '../../../utils/validation';
+import { DbTable, ForeignKey, SvgLine, Uml } from '../api/uml.model';
@Component({
selector: 'app-uml',
templateUrl: './uml.component.html',
- styleUrls: ['./uml.component.scss']
+ styleUrls: ['./uml.component.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush
})
-export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
+export class UmlComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+ @Input()
uml: Uml;
+
+ @Input()
+ addForeignKeyResult: [ForeignKey, ResultSet];
+
+ @Input()
+ proposedConstraintName = 'fk1';
+
+ @Input()
+ fkActions;
+
+ @Input()
+ schemaType;
+
+ @Input()
+ errorMsg: string;
+
+ @Output()
+ addForeignKey: EventEmitter
= new EventEmitter();
+
temporalLine: SvgLine;
schema;
connections = [];
zIndex = 2;
- errorMsg: string;
@ViewChild('myModal', {static: false}) myModal: ModalDirective;
sourceTable;//schema.table
sourceCol;
targetTable;//schema.table
targetCol;
- fkActions;
fkForm = this._formBuilder.group({update: 'RESTRICT', delete: 'RESTRICT'});
constraintName = '';
- proposedConstraintName = 'fk1';
private subscriptions = new Subscription();
@@ -46,84 +61,41 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
offsetConnLeft1 = 21;
offsetConnLeft2 = -5;
offsetConnTop = 20;
- schemaType: string;
constructor(
private _route: ActivatedRoute,
- private _router: Router,
- public _crud: CrudService,
- private _leftSidebar: LeftSidebarService,
private _formBuilder: FormBuilder,
private _toast: ToastService,
- private _dbmsTypes: DbmsTypesService
- ) {
- this._dbmsTypes.getFkActions().subscribe(
- types => {
- this.fkActions = types;
- }
- );
- }
+ private _cdr: ChangeDetectorRef,
+ ) {}
ngOnInit() {
this.schema = this._route.snapshot.paramMap.get('id');
this._route.params.subscribe(params => {
this.schema = params['id'];
- this.schemaType = this._leftSidebar.schemaType;
- this.getUml();
});
- const sub = this._crud.onReconnection().subscribe(
- b => {
- if(b) this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', false, 1, true), this._router);
- }
- );
- this.subscriptions.add(sub);
- this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', true, 1, true), this._router);
}
ngAfterViewInit() {
- this.getUml();
this.connectTables();
- this.getGeneratedNames();
- }
-
- ngOnDestroy() {
- $(document).off();//remove event listener from connectTables() when leaving this view
- this._leftSidebar.close();
- this.subscriptions.unsubscribe();
}
- getUml() {
- if (!this.schema) {
- this.uml = null;
- this._leftSidebar.reset();
- return;
- }
- this._crud.getUml(new EditTableRequest(this.schema)).subscribe(
- res => {
- this.errorMsg = null;
- const uml: Uml = res;
- this.uml = new Uml(uml.tables, uml.foreignKeys);
+ ngOnChanges(changes: SimpleChanges): void {
+ if(changes.uml?.currentValue) {
this.mapConnections();
- }, err => {
- this.errorMsg = 'Could not connect with the server.';
}
- );
+ if(changes.addForeignKeyResult?.currentValue){
+ this.handleAddForeignKey(
+ this.addForeignKeyResult[0],
+ this.addForeignKeyResult[1]
+ );
+ }
}
- getGeneratedNames() {
- this._crud.getGeneratedNames().subscribe(
- res => {
- const names = res;
- if (!names.error) {
- this.proposedConstraintName = names.data[0][1];
- } else {
- console.log(names.error);
- }
- }, err => {
- console.log(err);
- }
- );
+ ngOnDestroy() {
+ $(document).off();//remove event listener from connectTables() when leaving this view
+ this.subscriptions.unsubscribe();
}
getColumnClass(table: DbTable, col: DbColumn) {
@@ -163,10 +135,14 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
$(e.source.element.nativeElement).css('z-index', z);
}
- onDragging(e) {
+ onDragStart(e) {
$(e.source.element.nativeElement).css('z-index', 9000);
}
+ onDragging(){
+ this._cdr.markForCheck();
+ }
+
connectTables() {
const self = this;
let isDragging = false;
@@ -186,6 +162,7 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
if (isDragging) {
self.temporalLine.x2 = e.pageX - offsetX;
self.temporalLine.y2 = e.pageY - self.offsetLineY;
+ self._cdr.markForCheck();
e.preventDefault();
}
}).on('mouseup', function (e) {
@@ -210,6 +187,7 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
}
self.temporalLine = null;
isDragging = false;
+ self._cdr.markForCheck();
});
}
@@ -271,38 +249,38 @@ export class UmlComponent implements OnInit, AfterViewInit, OnDestroy {
if (!this.constraintName || this.constraintName === '') {
this.constraintName = this.proposedConstraintName;
}
- if (!this._crud.nameIsValid(this.constraintName)) {
- this._toast.warn(this._crud.invalidNameMessage('constraint'), 'invalid constraint name', ToastDuration.INFINITE);
+ if (!nameIsValid(this.constraintName)) {
+ this._toast.warn(invalidNameMessage('constraint'), 'invalid constraint name', ToastDuration.INFINITE);
return;
}
const fk: ForeignKey = new ForeignKey(this.constraintName, this.schema, this.sourceTable, this.sourceCol, this.targetTable, this.targetCol)
.updateAction(this.fkForm.value.update).deleteAction(this.fkForm.value.delete);
- this._crud.addForeignKey(fk).subscribe(
- res => {
- this.closeModal();
- const result = res;
- if( result.error ) {
- this._toast.exception(result, null, null, ToastDuration.INFINITE);
- }
- else if( result.affectedRows === 1 ) {
- this._toast.success('new foreign key was created', result.generatedQuery);
- // this.getUml();
- // this.connectTables();
- const fkTable = fk.sourceTable.substr(fk.sourceTable.indexOf('.') + 1, fk.sourceTable.length);
- const pkTable = fk.targetTable.substr(fk.targetTable.indexOf('.') + 1, fk.targetTable.length);
- this.connections.push({
- source: fk.sourceSchema + '_' + fkTable + '_' + fk.sourceColumn,
- target: fk.targetSchema + '_' + pkTable + '_' + fk.targetColumn
- });
- this.constraintName = '';
- this.getGeneratedNames();
- }
- }, err => {
- this.closeModal();
- this._toast.error('An unknown error occurred on the server');
- }
- );
+ this.addForeignKey.emit(fk);
+ }
+
+ handleAddForeignKey(fk: ForeignKey, result: ResultSet){
+ this.closeModal();
+ if( result.error ) {
+ this._toast.exception(result, null, null, ToastDuration.INFINITE);
+ }
+ else if( result.affectedRows === 1 ) {
+ this._toast.success('new foreign key was created', result.generatedQuery);
+ // this.getUml();//handled in service
+ this.connectTables();
+ const fkTable = fk.sourceTable.substr(fk.sourceTable.indexOf('.') + 1, fk.sourceTable.length);
+ const pkTable = fk.targetTable.substr(fk.targetTable.indexOf('.') + 1, fk.targetTable.length);
+ this.connections.push({
+ source: fk.sourceSchema + '_' + fkTable + '_' + fk.sourceColumn,
+ target: fk.targetSchema + '_' + pkTable + '_' + fk.targetColumn
+ });
+ this.constraintName = '';
+ //this.getGeneratedNames();//handled in service
+ }
+ }
+
+ getValidationClass(name: string){
+ return getValidationClass(name);
}
}
diff --git a/src/app/views/uml/container/uml-container.component.ts b/src/app/views/uml/container/uml-container.component.ts
new file mode 100644
index 00000000..938f772d
--- /dev/null
+++ b/src/app/views/uml/container/uml-container.component.ts
@@ -0,0 +1,74 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { combineLatest, Subscription } from 'rxjs';
+import { filter, map, tap } from 'rxjs/operators';
+import { LeftSidebarService } from '../../../components/left-sidebar/left-sidebar.service';
+import { SchemaRequest } from '../../../models/ui-request.model';
+import { CrudService } from '../../../services/crud.service';
+import { UmlService } from '../service/uml.service';
+
+@Component({
+ selector: 'app-uml-container',
+ template: `
+
+
+ `,
+ styles: [
+ ]
+})
+export class UmlContainerComponent implements OnInit, OnDestroy {
+
+ subscriptions = new Subscription();
+
+ schema: string;
+ schema$ = this._route.params.pipe(
+ map(params => params['id']),
+ tap(schema => {
+ this.schema = schema;
+ this._uml.getUml(schema);
+ })
+ );
+
+ schemaType$ = combineLatest([
+ this.schema$.pipe(map(schema => schema?.split('.')[0])),
+ //getTypeSchemas is only called once
+ this._crud.getTypeSchemas()
+ ]).pipe(
+ filter(([schema, schemaTypes]) => !!schema),
+ map(([schema, schemaTypes]) => schemaTypes[schema])
+ );
+
+ constructor(
+ public _uml: UmlService,
+ private _router: Router,
+ private _route: ActivatedRoute,
+ private _crud: CrudService,
+ private _leftSidebar: LeftSidebarService
+ ) { }
+
+ ngOnInit(): void {
+ this.subscriptions.add(
+ this._crud.onReconnection().pipe(
+ filter(r => !!r),
+ tap(() => this._leftSidebar.setSchema(
+ new SchemaRequest('/views/uml/', false, 1, true), this._router)
+ )
+ ).subscribe()
+ );
+ this._leftSidebar.setSchema(new SchemaRequest('/views/uml/', true, 1, true), this._router);
+ }
+
+ ngOnDestroy(): void {
+ this._leftSidebar.close();
+ this.subscriptions.unsubscribe();
+ }
+
+}
diff --git a/src/app/views/uml/index.ts b/src/app/views/uml/index.ts
new file mode 100644
index 00000000..f275756a
--- /dev/null
+++ b/src/app/views/uml/index.ts
@@ -0,0 +1,2 @@
+import { UmlModule } from "./module/uml.module";
+export {UmlModule};
diff --git a/src/app/views/uml/module/uml.module.ts b/src/app/views/uml/module/uml.module.ts
new file mode 100644
index 00000000..a2e035bf
--- /dev/null
+++ b/src/app/views/uml/module/uml.module.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UmlComponent } from '../component/uml.component';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ComponentsModule } from '../../../components/components.module';
+import { ViewsModule } from '../../views.module';
+import { RouterModule } from '@angular/router';
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { UmlContainerComponent } from '../container/uml-container.component';
+
+
+const routes = [
+ {
+ path: '',
+ pathMatch: 'full',
+ component: UmlContainerComponent,
+ data: {
+ title: 'UML'
+ }
+ },
+ {
+ path: ':id',
+ component: UmlContainerComponent,
+ data: {
+ title: 'UML'
+ }
+ },
+];
+@NgModule({
+ declarations: [
+ UmlComponent,
+ UmlContainerComponent,
+ ],
+ imports: [
+ CommonModule,
+ ViewsModule,
+ BsDropdownModule,
+ ButtonsModule.forRoot(),
+ FormsModule,
+ ReactiveFormsModule,
+ DragDropModule,
+ ModalModule.forChild(),
+ ComponentsModule,
+ RouterModule.forChild(routes)
+ ],
+ exports: [UmlComponent]
+})
+export class UmlModule { }
diff --git a/src/app/views/uml/service/uml.service.ts b/src/app/views/uml/service/uml.service.ts
new file mode 100644
index 00000000..3e73ab78
--- /dev/null
+++ b/src/app/views/uml/service/uml.service.ts
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { filter, map, shareReplay, startWith, switchMap, take, tap } from 'rxjs/operators';
+import { ResultSet } from '../../../components/data-view/models/result-set.model';
+import { LeftSidebarService } from '../../../components/left-sidebar/left-sidebar.service';
+import { EditTableRequest } from '../../../models/ui-request.model';
+import { CrudService } from '../../../services/crud.service';
+import { DbmsTypesService } from '../../../services/dbms-types.service';
+import { ForeignKey, Uml } from '../api/uml.model';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class UmlService {
+
+ uml$ = new Subject();
+ addForeignKeyResult$ = new Subject<[ForeignKey, ResultSet]>();
+ fkActions$ = this._dbmsTypes.getFkActions().pipe(
+ shareReplay()
+ );
+
+ errorMessage$ = new BehaviorSubject(null);
+
+ private reloadProposedConstraintName = new Subject();
+ public proposedConstraintName$ = this.reloadProposedConstraintName.pipe(
+ startWith(0),
+ switchMap(() => this._crud.getGeneratedNames()),
+ filter(names => !!names),
+ map(names => names),
+ tap(names => {
+ if(names.error){
+ console.log(names.error);
+ }
+ }),
+ map(names => names.data[0][1]),
+ );
+
+ constructor(
+ private _leftSidebar: LeftSidebarService,
+ private _crud: CrudService,
+ private _dbmsTypes: DbmsTypesService
+ ) { }
+
+ getUml(schema: string) {
+ if (!schema) {
+ this.uml$.next(null);
+ this._leftSidebar.reset();
+ return;
+ }
+ this._crud.getUml(new EditTableRequest(schema))
+ .pipe(take(1))
+ .subscribe(
+ res => {
+ this.errorMessage$.next(null);
+ this.uml$.next(res);
+ //this.mapConnections();//handled in component ngOnChanges
+ }, err => {
+ this.errorMessage$.next('Could not connect with the server.');
+ }
+ );
+ }
+
+ addForeignKey(schema: string, fk: ForeignKey) {
+ this._crud.addForeignKey(fk).pipe(
+ map(res => res),
+ tap(res => {
+ if(res.affectedRows === 1) {
+ this.getUml(schema);
+ }
+ this.loadProposedConstraintName();
+ }),
+ take(1)
+ ).subscribe(res => {
+ this.addForeignKeyResult$.next([fk, res])
+ });
+ }
+
+ loadProposedConstraintName(){
+ this.reloadProposedConstraintName.next();
+ }
+
+}
diff --git a/src/app/views/views-routing.module.ts b/src/app/views/views-routing.module.ts
index a824ccd5..886327e1 100644
--- a/src/app/views/views-routing.module.ts
+++ b/src/app/views/views-routing.module.ts
@@ -1,6 +1,6 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
-import {UmlComponent} from './uml/uml.component';
+import {UmlComponent} from './uml/component/uml.component';
import {FormGeneratorComponent} from './forms/form-generator/form-generator.component';
import {TableViewComponent} from './table-view/table-view.component';
import {SchemaEditingComponent} from './schema-editing/schema-editing.component';
@@ -49,6 +49,10 @@ const routes: Routes = [
}
},
{
+ path: 'uml',
+ loadChildren: () => import('./uml').then(m => m.UmlModule)
+ },
+ /*{
path: 'uml',
redirectTo: 'uml/',
pathMatch: 'full'
@@ -59,7 +63,7 @@ const routes: Routes = [
data: {
title: 'UML'
}
- },
+ },*/
{
path: 'querying',
redirectTo: 'querying/console',
diff --git a/src/app/views/views.module.ts b/src/app/views/views.module.ts
index 7895bff9..2dc493e1 100644
--- a/src/app/views/views.module.ts
+++ b/src/app/views/views.module.ts
@@ -8,7 +8,6 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ComponentsModule} from '../components/components.module';
import {EditColumnsComponent} from './schema-editing/edit-columns/edit-columns.component';
import {AppAsideModule, AppFooterModule, AppHeaderModule, AppSidebarModule} from '@coreui/angular';
-import {UmlComponent} from './uml/uml.component';
import {GraphicalQueryingComponent} from './querying/graphical-querying/graphical-querying.component';
import {TreeModule} from 'angular-tree-component';
import {FormGeneratorComponent} from './forms/form-generator/form-generator.component';
@@ -66,7 +65,7 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat
AutocompleteLibModule,
ProgressbarModule,
PopoverModule,
- NgxSliderModule
+ NgxSliderModule,
],
declarations: [
EditColumnsComponent,
@@ -74,7 +73,6 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat
GraphicalQueryingComponent,
ConsoleComponent,
TableViewComponent,
- UmlComponent,
SchemaEditingComponent,
EditTablesComponent,
DocumentEditCollectionsComponent,
@@ -93,10 +91,11 @@ import {StatisticsColumnComponent} from './schema-editing/statistics-column/stat
EditSourceColumnsComponent,
StatisticsColumnComponent,
ValuePipe,
- SearchFilterPipe
+ SearchFilterPipe,
],
exports: [
- ExploreByExampleComponent
+ ExploreByExampleComponent,
+ ValuePipe
]
})
export class ViewsModule {