-
-
-
-
-
-
-
-
-
- | Name |
- Type |
- Length |
- Not-Null |
-
-
-
-
- |
- {{column.name}}
- {{column.name}}
- |
- {{column.type}} |
- {{column.length}} |
- {{column.notNull}} |
-
-
-
+ @if (!jsonView()) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Type |
+ Length |
+ Not-Null |
+
+
+
+ @for (column of selected.columns; track column.name) {
+
+ |
+ @if (column.name === selected.primaryKey) {
+ {{column.name}}
+ }
+ @if (column.name !== selected.primaryKey) {
+ {{column.name}}
+ }
+ |
+ {{column.type}} |
+ {{column.length}} |
+ {{column.notNull}} |
+
+ }
+
+
+
+ @if (selected.indexes && selected.indexes.length > 0) {
+
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Columns |
+ Unique |
+
+
+
+ @for (index of selected.indexes; track $index) {
+
+ | {{index.name}} |
+ {{index.columns}} |
+ {{index.unique}} |
+
+ }
+
+
+
+
+ }
+ @if (selected.foreignKeys && selected.foreignKeys.length > 0) {
+
+
+
+
+
+
+
+
+
+
+
+
+ | Name |
+ Foreign Table |
+ Local Column Names |
+ Foreign Column Names |
+
+
+
+ @for (foreignKey of selected.foreignKeys; track $index) {
+
+ | {{foreignKey.name}} |
+ {{foreignKey.foreignTable}} |
+ {{foreignKey.localColumnNames}} |
+ {{foreignKey.foreignColumnNames}} |
+
+ }
+
+
+
+
+ }
-
-
-
-
-
-
-
-
-
-
-
- | Name |
- Columns |
- Unique |
-
-
-
-
- | {{index.name}} |
- {{index.columns}} |
- {{index.unique}} |
-
-
-
+ }
+ @if (jsonView()) {
+
-
-
-
-
-
-
-
-
-
-
-
-
- | Name |
- Foreign Table |
- Local Column Names |
- Foreign Column Names |
-
-
-
-
- | {{foreignKey.name}} |
- {{foreignKey.foreignTable}} |
- {{foreignKey.localColumnNames}} |
- {{foreignKey.foreignColumnNames}} |
-
-
-
-
-
-
-
-
+ }
+}
diff --git a/src/app/api/connection/database/table/detail/detail.component.ts b/src/app/api/connection/database/table/detail/detail.component.ts
index 40a7cdd9..660e5ae6 100644
--- a/src/app/api/connection/database/table/detail/detail.component.ts
+++ b/src/app/api/connection/database/table/detail/detail.component.ts
@@ -1,18 +1,27 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
import {Detail, ErrorService} from "ngx-fusio-sdk";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ActivatedRoute, Router, RouterLink} from "@angular/router";
import {BackendConnection, BackendDatabaseTable} from "fusio-sdk";
import {TableService} from "../../../../../services/connection/database/table.service";
import {ConnectionService} from "../../../../../services/connection.service";
+import {EditorComponent} from "ngx-monaco-editor-v2";
+import {FormsModule} from "@angular/forms";
+import {JsonPipe} from "@angular/common";
@Component({
selector: 'app-connection-database-table-detail',
templateUrl: './detail.component.html',
+ imports: [
+ RouterLink,
+ EditorComponent,
+ FormsModule,
+ JsonPipe
+ ],
styleUrls: ['./detail.component.css']
})
export class DetailComponent extends Detail
{
- selectedConnection?: BackendConnection;
+ selectedConnection = signal(undefined);
constructor(private service: TableService, private connection: ConnectionService, route: ActivatedRoute, router: Router, error: ErrorService) {
super(route, router, error);
@@ -23,17 +32,20 @@ export class DetailComponent extends Detail {
}
override async ngOnInit(): Promise {
+ super.ngOnInit();
+
this.route.params.subscribe(async (params) => {
if (params['connection']) {
- this.selectedConnection = await this.connection.get(params['connection']);
- if (this.selectedConnection) {
- this.service.setConnection(this.selectedConnection);
+ try {
+ const connection = await this.connection.get(params['connection']);
+ if (connection) {
+ this.service.setConnection(connection);
+ this.selectedConnection.set(connection);
+ }
+ } catch (error) {
+ this.response.set(this.error.convert(error));
}
}
-
- if (this.service.isConfigured()) {
- await super.ngOnInit();
- }
});
}
diff --git a/src/app/api/connection/database/table/foreign-key/foreign-key.component.html b/src/app/api/connection/database/table/foreign-key/foreign-key.component.html
index bf716118..9228ef05 100644
--- a/src/app/api/connection/database/table/foreign-key/foreign-key.component.html
+++ b/src/app/api/connection/database/table/foreign-key/foreign-key.component.html
@@ -1,33 +1,37 @@
-
-
-
-
-
-
-
-
-
-
-
-
+}
+
-
+
-
+
-
+
diff --git a/src/app/api/connection/database/table/foreign-key/foreign-key.component.ts b/src/app/api/connection/database/table/foreign-key/foreign-key.component.ts
index 4bdcb885..9431eef6 100644
--- a/src/app/api/connection/database/table/foreign-key/foreign-key.component.ts
+++ b/src/app/api/connection/database/table/foreign-key/foreign-key.component.ts
@@ -1,62 +1,117 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, effect, EventEmitter, input, Input, OnInit, output, Output, signal} from '@angular/core';
import {BackendDatabaseTableForeignKeyConstraint} from "fusio-sdk";
+import {FormsModule} from "@angular/forms";
+import {CsvPipe} from "../../../../../shared/tag-editor/csv.pipe";
@Component({
selector: 'app-connection-database-table-foreign-key',
templateUrl: './foreign-key.component.html',
+ imports: [
+ FormsModule,
+ CsvPipe
+ ],
styleUrls: ['./foreign-key.component.css']
})
-export class ForeignKeyComponent implements OnInit {
- @Input() name: string = 'table-foreign-key';
- @Input() disabled: boolean = false;
- @Input() data: Array
= [];
- @Output() dataChange = new EventEmitter>();
+export class ForeignKeyComponent {
+ name = input('table-foreign-key');
+ disabled = input(false);
+ data = input>([]);
+ dataChange = output>();
- newName?: string;
- newForeignTable?: string;
- newLocalColumnNames: Array = [];
- newForeignColumnNames: Array = [];
+ newName = signal(undefined);
+ newForeignTable = signal(undefined);
+ newLocalColumnNames = signal>([]);
+ newForeignColumnNames = signal>([]);
- result: Array = [];
+ result = signal>([]);
- ngOnInit(): void {
- this.result = this.filter(this.data);
+ constructor() {
+ effect(() => {
+ this.result.set(this.filter(this.data()));
+ });
}
add() {
- if (!this.newName || !this.newForeignTable || this.disabled) {
+ const newName = this.newName();
+ const newForeignTable = this.newForeignTable();
+ if (!newName || !newForeignTable || this.disabled()) {
return;
}
- this.result.push({
- name: this.newName,
- foreignTable: this.newForeignTable,
- localColumnNames: this.newLocalColumnNames,
- foreignColumnNames: this.newForeignColumnNames,
- })
-
- this.newName = undefined;
- this.newForeignTable = undefined;
- this.newLocalColumnNames = [];
- this.newForeignColumnNames = [];
+ this.result.update((keys) => {
+ keys.push({
+ name: newName,
+ foreignTable: newForeignTable,
+ localColumnNames: this.newLocalColumnNames(),
+ foreignColumnNames: this.newForeignColumnNames(),
+ });
+ return keys;
+ });
+
+ this.newName.set(undefined);
+ this.newForeignTable.set(undefined);
+ this.newLocalColumnNames.set([]);
+ this.newForeignColumnNames.set([]);
+
+ this.changeValue();
+ }
+
+ setName(index:number, name: string) {
+ this.result.update((keys) => {
+ keys[index].name = name;
+ return keys;
+ });
+
+ this.changeValue();
+ }
+
+ setForeignTable(index:number, foreignTable: string) {
+ this.result.update((keys) => {
+ keys[index].foreignTable = foreignTable;
+ return keys;
+ });
+
+ this.changeValue();
+ }
+
+ setLocalColumnNames(index:number, localColumnNames: string) {
+ this.result.update((keys) => {
+ keys[index].localColumnNames = this.parseCsv(localColumnNames);
+ return keys;
+ });
+
+ this.changeValue();
+ }
+
+ setForeignColumnNames(index:number, foreignColumnNames: string) {
+ this.result.update((keys) => {
+ keys[index].foreignColumnNames = this.parseCsv(foreignColumnNames);
+ return keys;
+ });
+
+ this.changeValue();
}
remove(name?: string) {
- if (this.disabled) {
+ if (this.disabled()) {
return;
}
- this.result = this.result.filter((row) => {
- return row.name !== name;
+ this.result.update((keys) => {
+ return keys.filter((row) => {
+ return row.name !== name;
+ });
});
+
+ this.changeValue();
}
changeValue() {
- if (this.disabled) {
+ if (this.disabled()) {
return;
}
- this.dataChange.emit(this.filter(this.result));
+ this.dataChange.emit(this.filter(this.result()));
}
private filter(result: Array) {
diff --git a/src/app/api/connection/database/table/form/form.component.html b/src/app/api/connection/database/table/form/form.component.html
index dce26247..1add5d5f 100644
--- a/src/app/api/connection/database/table/form/form.component.html
+++ b/src/app/api/connection/database/table/form/form.component.html
@@ -1,53 +1,57 @@
-
diff --git a/src/app/api/connection/database/table/form/form.component.ts b/src/app/api/connection/database/table/form/form.component.ts
index 385cabb5..125495d9 100644
--- a/src/app/api/connection/database/table/form/form.component.ts
+++ b/src/app/api/connection/database/table/form/form.component.ts
@@ -1,18 +1,34 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, signal} from '@angular/core';
import {BackendConnection, BackendDatabaseTable} from "fusio-sdk";
-import {ErrorService, Form} from "ngx-fusio-sdk";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ErrorService, Form, MessageComponent} from "ngx-fusio-sdk";
+import {ActivatedRoute, Router, RouterLink} from "@angular/router";
import {TableService} from "../../../../../services/connection/database/table.service";
import {ConnectionService} from "../../../../../services/connection.service";
+import {FormBreadcrump} from "../../../../../shared/form-breadcrump/form-breadcrump";
+import {FormsModule} from "@angular/forms";
+import {ColumnComponent} from "../column/column.component";
+import {IndexComponent} from "../index/index.component";
+import {ForeignKeyComponent} from "../foreign-key/foreign-key.component";
+import {FormButtons} from "../../../../../shared/form-buttons/form-buttons";
@Component({
selector: 'app-connection-database-table-form',
templateUrl: './form.component.html',
+ imports: [
+ RouterLink,
+ FormBreadcrump,
+ MessageComponent,
+ FormsModule,
+ ColumnComponent,
+ IndexComponent,
+ ForeignKeyComponent,
+ FormButtons
+ ],
styleUrls: ['./form.component.css']
})
export class FormComponent extends Form implements OnInit {
- selectedConnection?: BackendConnection;
+ selectedConnection = signal(undefined);
constructor(private service: TableService, private connection: ConnectionService, route: ActivatedRoute, router: Router, error: ErrorService) {
super(route, router, error);
@@ -23,17 +39,20 @@ export class FormComponent extends Form implements OnInit
}
override async ngOnInit(): Promise {
+ super.ngOnInit();
+
this.route.params.subscribe(async (params) => {
if (params['connection']) {
- this.selectedConnection = await this.connection.get(params['connection']);
- if (this.selectedConnection) {
- this.service.setConnection(this.selectedConnection);
+ try {
+ const connection = await this.connection.get(params['connection']);
+ if (connection) {
+ this.service.setConnection(connection);
+ this.selectedConnection.set(connection);
+ }
+ } catch (error) {
+ this.response.set(this.error.convert(error));
}
}
-
- if (this.service.isConfigured()) {
- await super.ngOnInit();
- }
});
}
diff --git a/src/app/api/connection/database/table/index/index.component.html b/src/app/api/connection/database/table/index/index.component.html
index 759b8bee..d95fe97f 100644
--- a/src/app/api/connection/database/table/index/index.component.html
+++ b/src/app/api/connection/database/table/index/index.component.html
@@ -1,37 +1,41 @@
-