Records view

frontend/src/app/components/dashboard/dashboard.component.html

@@ -93,11 +93,6 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
                 </app-db-table>
             </div>
             <app-db-table-row-view *ngIf="selectedRow"
-                [columns]="dataSource.columns"
-                [foreignKeys]="dataSource.foreignKeys"
-                [foreignKeysList]="dataSource.foreignKeysList"
-                [widgets]="dataSource.widgets"
-                [widgetsList]="dataSource.widgetsList"
                 [activeFilters]="filters"
             ></app-db-table-row-view>
             <app-db-table-ai-panel *ngIf="isAIpanelOpened"

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

@@ -4,13 +4,13 @@
     <div class="row-preview-sidebar__header">
         <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         <div class="row-preview-sidebar__actions">
-            <button mat-icon-button
+            <button mat-icon-button *ngIf="selectedRow.link"
                 matTooltip="Copy link to this record"
                 [cdkCopyToClipboard]="getDedicatedPageLink()"
                 (cdkCopyToClipboardCopied)="showCopyNotification('Link to this record was copied to clipboard.')">
                 <mat-icon>link</mat-icon>
             </button>
-            <a mat-icon-button
+            <a mat-icon-button *ngIf="selectedRow.link"
                 [routerLink]="selectedRow.link"
                 [queryParams]="selectedRow.primaryKeys"
                 matTooltip="Open the record"
@@ -24,22 +24,27 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     </div>
 
     <br />
-    <div *ngFor="let column of columns" class="row-preview-sidebar__field">
-        <strong>{{column.normalizedTitle}}</strong>
-        <span *ngIf="isForeignKey(column.title); else recordContent" class="row-preview-sidebar__field-value">
-            {{getForeignKeyValue(column.title)}}
-        </span>
-        <ng-template #recordContent>
-            <div *ngIf="isWidget(column.title); else stringValue">
-                <div *ngIf="widgets[column.title].widget_type === 'Image'">
-                    <img [src]="selectedRow.record[column.title]" alt="Image" class="row-preview-sidebar__image">
+    <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
+        <div *ngFor="let column of columns" class="row-preview-sidebar__field">
+            <strong>{{column.normalizedTitle}}</strong>
+            <span *ngIf="isForeignKey(column.title); else recordContent" class="row-preview-sidebar__field-value">
+                {{getForeignKeyValue(column.title)}}
+            </span>
+            <ng-template #recordContent>
+                <div *ngIf="isWidget(column.title); else stringValue">
+                    <div *ngIf="selectedRow.widgets[column.title].widget_type === 'Image'">
+                        <img [src]="selectedRow.record[column.title]" alt="Image" class="row-preview-sidebar__image">
+                    </div>
+                    <span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
                 </div>
-                <span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
-            </div>
-            <ng-template #stringValue>
-                <span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
+                <ng-template #stringValue>
+                    <span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
+                </ng-template>
             </ng-template>
-        </ng-template>
+        </div>
+    </ng-container>
 
-    </div>
+    <ng-template #loadingContent>
+        <app-placeholder-record-view></app-placeholder-record-view>
+    </ng-template>
 </div>

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

@@ -6,9 +6,11 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { TableStateService } from 'src/app/services/table-state.service';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { normalizeFieldName } from 'src/app/lib/normalize';
+import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-record-view/placeholder-record-view.component';
 
 @Component({
   selector: 'app-db-table-row-view',
@@ -20,18 +22,18 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     ClipboardModule,
     MatTooltipModule,
     RouterModule,
-    CommonModule
+    CommonModule,
+    PlaceholderRecordViewComponent
   ]
 })
 export class DbTableRowViewComponent implements OnInit {
-  @Input() columns: object[];
-  @Input() foreignKeys: object;
-  @Input() foreignKeysList: string[];
-  @Input() widgets: { string: Widget };
-  @Input() widgetsList: string[];
   @Input() activeFilters: object;
 
   public selectedRow: TableRow;
+  public columns: {
+    title: string;
+    normalizedTitle: string;
+  }[] = [];
 
   constructor(
     private _tableState: TableStateService,
@@ -42,28 +44,37 @@ export class DbTableRowViewComponent implements OnInit {
   ngOnInit(): void {
     this._tableState.cast.subscribe((row) => {
       this.selectedRow = row;
+      if (row.columnsOrder) {
+        const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
+        this.columns = columnsOrder.map(column => {
+          return {
+            title: column,
+            normalizedTitle: normalizeFieldName(column)
+          }
+        })
+      }
     });
   }
 
   isForeignKey(columnName: string) {
-    return this.foreignKeysList.includes(columnName);
+    return this.selectedRow.foreignKeysList.includes(columnName);
   }
 
   getForeignKeyValue(field: string) {
     if (this.selectedRow) {
-      const identityColumnName = Object.keys(this.selectedRow.record[field]).find(key => key !== this.foreignKeys[field].referenced_column_name);
+      const identityColumnName = Object.keys(this.selectedRow.record[field]).find(key => key !== this.selectedRow.foreignKeys[field].referenced_column_name);
       if (identityColumnName) {
         return this.selectedRow.record[field][identityColumnName];
       } else {
-        const referencedColumnName = this.foreignKeys[field].referenced_column_name;
-        return this.selectedRow.record[field][referencedColumnName];
+        // const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
+        return this.selectedRow.record[field];
       }
     };
     return '';
   }
 
   isWidget(columnName: string) {
-    return this.widgetsList.includes(columnName);
+    return this.selectedRow.widgetsList.includes(columnName);
   }
 
   getDedicatedPageLink() {

frontend/src/app/components/dashboard/db-table/db-table.component.css

@@ -533,8 +533,17 @@ tr.mat-row:hover {
     top: 40px;
 }
 
-.foreign-key-link {
+.foreign-key-button {
+    background: transparent;
+    border: none;
     color: var(--color-accentedPalette-500);
+    text-decoration: underline;
+    font-size: inherit;
+}
+
+.foreign-key-button_selected {
+    color: var(--color-accentedPalette-700);
+    font-weight: 600;
 }
 
 .empty-table {

frontend/src/app/components/dashboard/db-table/db-table.component.html

@@ -217,11 +217,16 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                 <mat-cell *matCellDef="let element; let i = index" [attr.data-label]="tableData.dataNormalizedColumns[column]" class="db-table-cell" data-hj-suppress>
                     <div class="table-cell-content">
                         <span *ngIf="isForeignKey(column); else contentCell" class="field-value">
-                            <a routerLink="/dashboard/{{connectionID}}/{{tableData.foreignKeys[column].referenced_table_name}}/entry"
+                            <!--<a routerLink="/dashboard/{{connectionID}}/{{tableData.foreignKeys[column].referenced_table_name}}/entry"
                                 class="foreign-key-link"
                                 [queryParams]="getForeignKeyQueryParams(tableData.foreignKeys[column], element[column])">
                                 {{ getCellValue(tableData.foreignKeys[column], element[column]) }}
-                            </a>
+                            </a>-->
+                            <button class="foreign-key-button" type="button"
+                                [ngClass]="{'foreign-key-button_selected': isForeignKeySelected(element[column], tableData.foreignKeys[column])}"
+                                (click)="handleForeignKeyView($event, tableData.foreignKeys[column], element[column])">
+                                {{ getCellValue(tableData.foreignKeys[column], element[column]) }}
+                            </button>
                             <button type="button" mat-icon-button
                                 class="field-value-copy-button"
                                 matTooltip="Copy"
@@ -347,7 +352,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
             <mat-row *matRowDef="let row; columns: tableData.actionsColumnWidth === '0' ? tableData.displayedDataColumns : tableData.displayedColumns;"
                 class="db-table-row"
                 [ngClass]="{'db-table-row_selected': isRowSelected(tableData.getQueryParams(row))}"
-                (click)="handleViewRow({record: row, primaryKeys: tableData.getQueryParams(row)})">
+                (click)="handleViewRow(row)">
             </mat-row>
         </mat-table>
     </div>

frontend/src/app/components/dashboard/db-table/db-table.component.ts

@@ -1,6 +1,8 @@
+import * as JSON5 from 'json5';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { CustomAction, TableForeignKey, TablePermissions, TableProperties, TableRow } from 'src/app/models/table';
+import { CustomAction, TableForeignKey, TablePermissions, TableProperties, TableRow, Widget } from 'src/app/models/table';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Observable, merge, of } from 'rxjs';
 import { map, startWith, tap } from 'rxjs/operators';
@@ -33,6 +35,7 @@ import { NotificationsService } from 'src/app/services/notifications.service';
 import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
 import { RouterModule } from '@angular/router';
 import { SelectionModel } from '@angular/cdk/collections';
+import { TableRowService } from 'src/app/services/table-row.service';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { normalizeTableName } from '../../../lib/normalize'
 
@@ -112,6 +115,7 @@ export class DbTableComponent implements OnInit {
     lte: "<="
   }
   public selectedRow: TableRow = null;
+  public selectedRowType: 'record' | 'foreignKey';
 
   @Input() set table(value){
     if (value) this.tableData = value;
@@ -123,6 +127,7 @@ export class DbTableComponent implements OnInit {
   constructor(
     private _tableState: TableStateService,
     private _notifications: NotificationsService,
+    private _tableRow: TableRowService,
     private route: ActivatedRoute,
     public router: Router,
     public dialog: MatDialog,
@@ -383,15 +388,90 @@ export class DbTableComponent implements OnInit {
   }
 
   handleViewRow(row: TableRow) {
-    this._tableState.selectRow({...row, link: `/dashboard/${this.connectionID}/${this.name}/entry`});
+    this.selectedRowType = 'record';
+    this._tableState.selectRow({
+      tableName: this.name,
+      record: row,
+      columnsOrder: this.tableData.dataColumns,
+      primaryKeys: this.tableData.getQueryParams(row),
+      foreignKeys: this.tableData.foreignKeys,
+      foreignKeysList: this.tableData.foreignKeysList,
+      widgets: this.tableData.widgets,
+      widgetsList: this.tableData.widgetsList,
+      link: `/dashboard/${this.connectionID}/${this.name}/entry`
+    });
+  }
+
+  handleForeignKeyView(event, foreignKeys, row) {
+    event.stopPropagation();
+    this.selectedRowType = 'foreignKey';
+
+    console.log('handleForeignKeyView', foreignKeys, row);
+
+    this._tableState.selectRow({
+      tableName: null,
+      record: null,
+      columnsOrder: null,
+      primaryKeys: null,
+      foreignKeys: null,
+      foreignKeysList: null,
+      widgets: null,
+      widgetsList: null,
+      link: null
+    })
+
+    this._tableRow.fetchTableRow(this.connectionID, foreignKeys.referenced_table_name, {[foreignKeys.referenced_column_name]: row[foreignKeys.referenced_column_name]})
+      .subscribe(res => {
+        console.log('Fetched foreign key row:', res);
+        this._tableState.selectRow({
+          tableName: foreignKeys.referenced_table_name,
+          record: res.row,
+          columnsOrder: res.list_fields,
+          primaryKeys: {
+            [foreignKeys.referenced_column_name]: res.row[foreignKeys.referenced_column_name]
+          },
+          foreignKeys: Object.assign({}, ...res.foreignKeys.map((foreignKey: TableForeignKey) => ({[foreignKey.column_name]: foreignKey}))),
+          foreignKeysList: res.foreignKeys.map(fk => fk.column_name),
+          widgets: Object.assign({}, ...res.table_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.table_widgets.map(widget => widget.field_name),
+          link: `/dashboard/${this.connectionID}/${foreignKeys.referenced_table_name}/entry`
+        });
+      })
   }
 
   handleViewAIpanel() {
     this._tableState.handleViewAIpanel();
   }
 
   isRowSelected(primaryKeys) {
-    return this.selectedRow && Object.keys(this.selectedRow.primaryKeys).length && JSON.stringify(this.selectedRow.primaryKeys) === JSON.stringify(primaryKeys);
+    if (this.selectedRowType === 'record' && this.selectedRow.primaryKeys !== null) return this.selectedRow && Object.keys(this.selectedRow.primaryKeys).length && JSON.stringify(this.selectedRow.primaryKeys) === JSON.stringify(primaryKeys);
+    return false;
+  }
+
+  isForeignKeySelected(record, foreignKey: TableForeignKey) {
+    if (this.selectedRow) console.log('isForeignKeySelected', this.selectedRow.primaryKeys, foreignKey);
+    const primaryKeyValue = record[foreignKey.referenced_column_name];
+
+    if (this.selectedRowType === 'foreignKey' && this.selectedRow && this.selectedRow.record !== null) {
+      return Object.values(this.selectedRow.primaryKeys)[0] === primaryKeyValue && this.selectedRow.tableName === foreignKey.referenced_table_name;
+    }
+    return false;
   }
 
   showCopyNotification(message: string) {

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css

@@ -0,0 +1,22 @@
+.record-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+}
+
+.record-field:not(:last-child) {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.12);
+}
+
+.record-field__key {
+    mix-blend-mode: normal !important;
+    height: 20px;
+    width: 120px;
+}
+
+.record-field__value {
+    mix-blend-mode: normal !important;
+    height: 20px;
+    width: 200px
+}

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html

@@ -0,0 +1,22 @@
+<div class="wrapper skeleton">
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+</div>

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaceholderRecordViewComponent } from './placeholder-record-view.component';
+
+describe('PlaceholderRecordViewComponent', () => {
+  let component: PlaceholderRecordViewComponent;
+  let fixture: ComponentFixture<PlaceholderRecordViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlaceholderRecordViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlaceholderRecordViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});