Records view

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

@@ -25,7 +25,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
 
     <br />
 
-    <div *ngIf="selectedRow?.relatedRecords?.referenced_by.length">
+    <div *ngIf="selectedRow?.relatedRecords?.referenced_by?.length">
         <div class="related-records__title">
             <h3 class="mat-heading-3">Related records</h3>
             <button mat-icon-button type="button"
@@ -57,7 +57,8 @@ <h3 class="mat-heading-3">Related records</h3>
                 <mat-nav-list>
                     <a mat-list-item *ngFor="let row of referencedRecords[referencedTable.table_name]?.rows; let i = index" class="related-record"
                         [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
-                        [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]">
+                        [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
+                        (click)="handleClose()">
                         <span matListItemTitle>{{row[referencedRecords[referencedTable.table_name].identityColumn]}}</span>
                         <span matListItemLine>
                             <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">

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

@@ -61,7 +61,6 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
     // this.connectionID = this._connections.connectionID;
 
     this.selectedRowCast = this._tableState.cast.subscribe((row) => {
-      row && console.log('Row selected:', row.primaryKeys);
       this.selectedRow = row;
       if (row && row.columnsOrder) {
         const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
@@ -73,7 +72,7 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
           }
         })
 
-        if (row.relatedRecords?.referenced_by.length) {
+        if (row.relatedRecords?.referenced_by?.length) {
           this.referencedRecords = {};
 
           this.referencedTables = row.relatedRecords.referenced_by

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

@@ -183,10 +183,7 @@ export class DbTableComponent implements OnInit {
   }
 
   loadRowsPage() {
-    console.log('loadRowsPage');
-    console.log('loadRowsPage, tableRelatedRecords before', this.tableRelatedRecords);
     this.tableRelatedRecords = null;
-    console.log('loadRowsPage, tableRelatedRecords after', this.tableRelatedRecords);
     this.tableData.fetchRows({
       connectionID: this.connectionID,
       tableName: this.name,

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

@@ -1,9 +1,15 @@
+.page {
+    display: flex;
+    height: 100%;
+}
+
 .wrapper {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 36px 0 16px;
+    width: 100vw;
 }
 
 @media (width <= 600px) {
@@ -13,6 +19,10 @@
     }
 }
 
+.wrapper_shifted {
+    margin-left: calc(clamp(-400px, -22vw, -200px) - 24px);
+}
+
 .row-edit-header {
     display: flex;
     align-items: center;
@@ -73,8 +83,8 @@
 } */
 
 .related-views {
-    position: fixed;
-    top: calc(52px + 96px);
+    position: absolute;
+    top: calc(52px + 40px);
     right: 0;
     display: flex;
     flex-direction: column;
@@ -143,14 +153,29 @@
     bottom: 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     background-color: var(--mat-sidenav-content-background-color);
     box-shadow: var(--shadow);
     height: 64px;
     padding: 0 max(calc(50vw - 260px), 2%);
     width: 100vw;
 }
 
+.actions-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.wrapper_shifted .actions {
+    left: calc(clamp(-400px, -22vw, -200px));
+}
+
+.wrapper_shifted .actions-box {
+    margin-left: -24px;
+}
+
 @media (prefers-color-scheme: dark) {
     .actions {
         --shadow: 0 3px 1px -2px rgba(0,0,0,.5),0 2px 2px 0 rgba(0,0,0,.64),0 1px 5px 0 rgba(0,0,0,0.85);