diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html index 47c3ee531..8d1912839 100644 --- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html +++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html @@ -25,7 +25,7 @@

Preview


-
+

Related records

-
-
- -
- - difference - - -
-
- -
-
- +
+
+
+ +
+ + difference + + +
+
+ +
+
+ +
-
-
+
-

- Records related to  - "{{tableRowValues[identityColumn]}}" - this row -

+

+ Records related to  + "{{tableRowValues[identityColumn]}}" + this row +

- - - - {{referencedTable.displayTableName}} - - - Absent - - settings - - - open_in_new - - - + + + + {{referencedTable.displayTableName}} + + + Absent + + settings + + + open_in_new + + + - - - {{row[referencedRecords[referencedTable.table_name].identityColumn]}} - - - {{field_name}}: - {{ row[field_name]}} + + + + {{ referencedRecords[referencedTable.table_name].formattedRows[i][referencedRecords[referencedTable.table_name].identityColumn] }} - - - - - -
+ + + {{field_name}}: + {{ referencedRecords[referencedTable.table_name].formattedRows[i][field_name] }} + + + + + + +
+ +
+
+
+
+ +
+ + + info_outline + +
- -
- -
- - - info_outline - + + + +
+
- - - -
+
+
+ + Back + + -
- - Back - - + - + - + +
+
+ +
- -
- +
+ diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts index dbff5eb45..7591d9483 100644 --- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts +++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts @@ -17,6 +17,7 @@ import { CompanyService } from 'src/app/services/company.service'; import { ConnectionsService } from 'src/app/services/connections.service'; import { DBtype } from 'src/app/models/connection'; import { DbActionLinkDialogComponent } from '../dashboard/db-action-link-dialog/db-action-link-dialog.component'; +import { DbTableRowViewComponent } from '../dashboard/db-table-row-view/db-table-row-view.component'; import { DynamicModule } from 'ng-dynamic-component'; import JsonURL from "@jsonurl/jsonurl"; import { MatButtonModule } from '@angular/material/button'; @@ -31,15 +32,16 @@ import { MatSelectModule } from '@angular/material/select'; import { MatTooltipModule } from '@angular/material/tooltip'; import { NotificationsService } from 'src/app/services/notifications.service'; import { PlaceholderRowEditComponent } from '../skeletons/placeholder-row-edit/placeholder-row-edit.component'; +import { PlaceholderTableViewComponent } from '../skeletons/placeholder-table-view/placeholder-table-view.component'; import { RouterModule } from '@angular/router'; import { Subscription } from 'rxjs'; import { TableRowService } from 'src/app/services/table-row.service'; import { TableStateService } from 'src/app/services/table-state.service'; import { TablesService } from 'src/app/services/tables.service'; import { Title } from '@angular/platform-browser'; +import { formatFieldValue } from 'src/app/lib/format-field-value'; import { getTableTypes } from 'src/app/lib/setup-table-row-structure'; import { normalizeTableName } from '../../lib/normalize'; -import { formatFieldValue } from 'src/app/lib/format-field-value'; @Component({ selector: 'app-db-table-row-edit', @@ -64,7 +66,8 @@ import { formatFieldValue } from 'src/app/lib/format-field-value'; AlertComponent, PlaceholderRowEditComponent, BannerComponent, - BreadcrumbsComponent + BreadcrumbsComponent, + DbTableRowViewComponent ] }) export class DbTableRowEditComponent implements OnInit { @@ -105,6 +108,9 @@ export class DbTableRowEditComponent implements OnInit { public tableForeignKeys: TableForeignKey[]; + public selectedRow: any; + public relatedRecordsProperties: {}; + public isTestConnectionWarning: Alert = { id: 10000000, type: AlertType.Error, @@ -148,6 +154,10 @@ export class DbTableRowEditComponent implements OnInit { ...(this.tableFiltersUrlString !== 'null' ? { filters: this.tableFiltersUrlString } : {}) }; + this._tableState.cast.subscribe(row => { + this.selectedRow = row; + }); + this.routeSub = this.route.queryParams.subscribe((params) => { this.tableName = this.route.snapshot.paramMap.get('table-name'); if (Object.keys(params).length === 0) { @@ -256,10 +266,62 @@ export class DbTableRowEditComponent implements OnInit { chunkSize: 30, filters }).subscribe((res) => { + + this.relatedRecordsProperties = Object.assign({}, this.relatedRecordsProperties, { + [table.table_name]: { + connectionID: this.connectionID, + tableName: table.table_name, + columnsOrder: res.list_fields, + primaryColumns: res.primaryColumns, + foreignKeys: Object.assign({}, ...res.foreignKeys.map((foreignKey: TableForeignKey) => ({[foreignKey.column_name]: foreignKey}))), + foreignKeysList: res.foreignKeys.map(fk => fk.column_name), + widgets: Object.assign({}, ...res.widgets.map((widget: Widget) => { + let parsedParams; + + try { + parsedParams = JSON5.parse(widget.widget_params); + } catch { + parsedParams = {}; + } + + return { + [widget.field_name]: { + ...widget, + widget_params: parsedParams, + }, + }; + }) + ), + widgetsList: res.widgets.map(widget => widget.field_name), + relatedRecords: [], + link: `/dashboard/${this.connectionID}/${table.table_name}/entry` + } + }); + + if (res.rows && res.rows.length) { + const firstRow = res.rows[0]; + this._tableRow.fetchTableRow( + this.connectionID, + table.table_name, + res.primaryColumns.reduce((keys, column) => { + if (res.foreignKeys.map(foreignKey => foreignKey.column_name).includes(column.column_name)) { + const referencedColumnNameOfForeignKey = res.foreignKeys[column.column_name].referenced_column_name; + keys[column.column_name] = firstRow[column.column_name][referencedColumnNameOfForeignKey]; + } else { + keys[column.column_name] = firstRow[column.column_name]; + } + return keys; + }, {}) + ).subscribe((res) => { + this.relatedRecordsProperties[table.table_name].relatedRecords = res.referenced_table_names_and_columns[0]; + }); + } + + let identityColumn = res.identity_column; let fieldsOrder = []; - console.log(res); + // console.log(res); const foreignKeyMap = {}; for (const fk of res.foreignKeys) { @@ -303,7 +365,8 @@ export class DbTableRowEditComponent implements OnInit { } const tableRecords = { - rows: formattedRows, + rawRows: res.rows, + formattedRows, links: res.rows.map(row => { let params = {}; Object.keys(res.primaryColumns).forEach((key) => { @@ -312,7 +375,8 @@ export class DbTableRowEditComponent implements OnInit { return params; }), identityColumn, - fieldsOrder + fieldsOrder, + foreignKeys: res.foreignKeys } this.referencedRecords[table.table_name] = tableRecords; }); @@ -421,25 +485,18 @@ export class DbTableRowEditComponent implements OnInit { } updateField = (updatedValue: any, field: string) => { - console.log('updateField'); - console.log(field); - console.log(updatedValue); if (typeof(updatedValue) === 'object' && updatedValue !== null) { for (const prop of Object.getOwnPropertyNames(this.tableRowValues[field])) { delete this.tableRowValues[field][prop]; } Object.assign(this.tableRowValues[field], updatedValue); } else { - console.log('updateField not object'); this.tableRowValues[field] = updatedValue; }; if (this.keyAttributesFromURL && Object.keys(this.keyAttributesFromURL).includes(field)) { this.isPrimaryKeyUpdated = true }; - console.log('this.tableRowValues[field]'); - console.log(this.tableRowValues[field]); - console.log(this.tableRowValues); } getFormattedUpdatedRow = () => { @@ -604,4 +661,16 @@ export class DbTableRowEditComponent implements OnInit { }) } } + + handleViewRow(tableName: string, row: {}) { + // this.selectedRowType = 'record'; + this._tableState.selectRow({ + ...this.relatedRecordsProperties[tableName], + record: row, + primaryKeys: this.relatedRecordsProperties[tableName].primaryColumns.reduce((acc, column) => { + acc[column.column_name] = row[column.column_name]; + return acc; + }, {}), + }); + } } diff --git a/frontend/src/app/components/ui-components/row-fields/foreign-key/foreign-key.component.ts b/frontend/src/app/components/ui-components/row-fields/foreign-key/foreign-key.component.ts index f94a468c9..80dc6d042 100644 --- a/frontend/src/app/components/ui-components/row-fields/foreign-key/foreign-key.component.ts +++ b/frontend/src/app/components/ui-components/row-fields/foreign-key/foreign-key.component.ts @@ -77,9 +77,6 @@ export class ForeignKeyRowComponent extends BaseRowFieldComponent { this.fkRelations = this.relations; } - console.log('test fkRelations'); - console.log(this.fkRelations); - this.fkRelations && this._tables.fetchTable({ connectionID: this.connectionID, tableName: this.fkRelations.referenced_table_name, @@ -97,8 +94,6 @@ export class ForeignKeyRowComponent extends BaseRowFieldComponent { this.identityColumn ? `${res.rows[0][this.identityColumn]} (${Object.values(modifiedRow).filter(value => value).join(' | ')})` : Object.values(modifiedRow).filter(value => value).join(' | '); - console.log('test identityColumn'); - console.log(this.currentDisplayedString); this.currentFieldValue = res.rows[0][this.fkRelations.referenced_column_name]; this.currentFieldQueryParams = Object.assign({}, ...res.primaryColumns.map((primaeyKey) => ({[primaeyKey.column_name]: res.rows[0][primaeyKey.column_name]}))); this.onFieldChange.emit(this.currentFieldValue);