related records:

frontend/src/app/components/dashboard/db-tables-data-source.ts

@@ -16,8 +16,8 @@ import { TablesService } from 'src/app/services/tables.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
 import { UserService } from 'src/app/services/user.service';
 import { filter } from "lodash";
-import { format } from 'date-fns'
 import { normalizeFieldName } from 'src/app/lib/normalize';
+import { formatFieldValue } from 'src/app/lib/format-field-value';
 
 interface Column {
   title: string,
@@ -91,42 +91,14 @@ export class TablesDataSource implements DataSource<Object> {
       this.loadingSubject.complete();
   }
 
-  formatField(value, type) {
-    const dateTimeTypes = [
-      'timestamp without time zone',
-      'timestamp with time zone',
-      'abstime',
-      'realtime',
-      'datetime',
-      'timestamp'
-    ]
-
-    if (value && type === 'time') {
-      return value
-    } else if (value && type === 'date') {
-      const datetimeValue = new Date(value);
-      return format(datetimeValue, "P")
-    } else if (value && dateTimeTypes.includes(type)) {
-      const datetimeValue = new Date(value);
-      return format(datetimeValue, "P p")
-    } else if (type === 'boolean') {
-      if (value || value ===  1) return '✓'
-      else if (value === false || value === 0) return '✕'
-      else return '—'
-    } else if (type === 'json' || type === 'jsonb' || type === 'object' || type === 'array') {
-      return JSON.stringify(value)
-    }
-    return value;
-  }
-
   formatRow(row, columns) {
     const rowToFormat = {};
     for (const [columnName, columnStructute] of columns) {
       let type = '';
       if (['number', 'tinyint'].includes(columnStructute.data_type) && (columnStructute.character_maximum_length === 1)) {
         type = 'boolean'
       } else type = columnStructute.data_type;
-      rowToFormat[columnName] = this.formatField(row[columnName], type);
+      rowToFormat[columnName] = formatFieldValue(row[columnName], type);
     }
     return rowToFormat;
   }

frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css

@@ -118,6 +118,10 @@
     height: 24px;
 }
 
+.related-records__panel ::ng-deep .mat-expansion-panel-body {
+    padding: 0 8px 16px;
+}
+
 .widget {
     display: grid;
     grid-template-columns: 0 1fr 36px;

frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html

@@ -64,7 +64,7 @@ <h3>
         </h3>
 
         <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index">
+            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
                 <mat-expansion-panel-header>
                     <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
                     <mat-panel-description class="related-records__actions">
@@ -92,7 +92,7 @@ <h3>
                         <span matListItemLine>
                             <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
                                 <strong>{{field_name}}:</strong>
-                                {{row[field_name] | json}}
+                                {{ row[field_name]}}
                             </span>
                         </span>
                     </a>

frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts

@@ -39,6 +39,7 @@ import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 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',
@@ -260,6 +261,26 @@ export class DbTableRowEditComponent implements OnInit {
 
                   console.log(res);
 
+                  const foreignKeyMap = {};
+                  for (const fk of res.foreignKeys) {
+                    foreignKeyMap[fk.column_name] = fk.referenced_column_name;
+                  }
+
+                  // Format each row
+                  const formattedRows = res.rows.map(row => {
+                    const formattedRow = {};
+
+                    for (const key in row) {
+                      if (foreignKeyMap[key] && typeof row[key] === 'object' && row[key] !== null) {
+                        const preferredKey = Object.keys(row[key]).find(k => k !== foreignKeyMap[key]);
+                        formattedRow[key] = preferredKey ? row[key][preferredKey] : row[key][foreignKeyMap[key]];
+                      } else {
+                        formattedRow[key] = formatFieldValue(row[key], res.structure.find((field: TableField) => field.column_name === key)?.data_type || 'text');
+                      }
+                    }
+                    return formattedRow;
+                  })
+
                   if (res.identity_column && res.list_fields.length) {
                     identityColumn = res.identity_column;
                     fieldsOrder = res.list_fields.filter((field: string) => field !== res.identity_column).slice(0, 3);
@@ -282,7 +303,7 @@ export class DbTableRowEditComponent implements OnInit {
                   }
 
                   const tableRecords = {
-                    rows: res.rows,
+                    rows: formattedRows,
                     links: res.rows.map(row => {
                       let params = {};
                       Object.keys(res.primaryColumns).forEach((key) => {

frontend/src/app/lib/format-field-value.ts

@@ -0,0 +1,29 @@
+import { format } from 'date-fns'
+
+export function formatFieldValue(value, type) {
+    const dateTimeTypes = [
+      'timestamp without time zone',
+      'timestamp with time zone',
+      'abstime',
+      'realtime',
+      'datetime',
+      'timestamp'
+    ]
+
+    if (value && type === 'time') {
+      return value
+    } else if (value && type === 'date') {
+      const datetimeValue = new Date(value);
+      return format(datetimeValue, "P")
+    } else if (value && dateTimeTypes.includes(type)) {
+      const datetimeValue = new Date(value);
+      return format(datetimeValue, "P p")
+    } else if (type === 'boolean') {
+      if (value || value ===  1) return '✓'
+      else if (value === false || value === 0) return '✕'
+      else return '—'
+    } else if (type === 'json' || type === 'jsonb' || type === 'object' || type === 'array') {
+      return JSON.stringify(value)
+    }
+    return value;
+  }