Display records fixes

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

@@ -38,12 +38,13 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                         <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
                         <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">Absent</span>
                         <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
+                            target="_blank"
                             [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
                             matTooltip="Set up records view"
                             (click)="handleClose()">
                             <mat-icon>settings</mat-icon>
                         </a>
-                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
+                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
                             routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
                             [queryParams]="referencedTablesURLParams[i]"
                             matTooltip="Open records in table view"

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

@@ -244,8 +244,13 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
 
   getForeignKeyQueryParams(field: string) {
     if (this.selectedRow) {
-      const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
-      return {[this.selectedRow.foreignKeys[field]?.referenced_column_name]: this.selectedRow.record[field][referencedColumnName]}
+      const referencedColumnName = this.selectedRow.foreignKeys[field]?.referenced_column_name;
+
+      if (typeof this.selectedRow.record[field] === 'object') {
+        return {[referencedColumnName]: this.selectedRow.record[field][referencedColumnName]}
+      } else {
+        return {[referencedColumnName]: this.selectedRow.record[field]};
+      }
     };
     return {};
   }

frontend/src/app/components/ui-components/filter-fields/time-interval/time-interval.component.ts

@@ -16,26 +16,70 @@ import { MatInputModule } from '@angular/material/input';
 })
 export class TimeIntervalFilterComponent extends BaseFilterFieldComponent {
   @Input() value;
+  static type = 'number';
 
   public interval = {
-    years: '',
-    months: '',
-    days: '',
-    hours: '',
-    minutes: '',
-    seconds: '',
-    milliseconds: ''
+    years: 0,
+    months: 0,
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    milliseconds: 0
   };
 
   ngOnInit(): void {
     super.ngOnInit();
-    // @ts-ignore
-    if (this.value) this.interval = {...pgInterval.parse(this.value)};
+
+    if (this.value) this.interval = this.parseIntervalString(this.value);
   }
 
   onInputChange() {
     // @ts-ignore
     const currentInterval = pgInterval.prototype.toPostgres.call(this.interval);
     this.onFieldChange.emit(currentInterval);
   }
+
+  parseIntervalString(input) {
+    const units = {
+      year: 'years',
+      years: 'years',
+      month: 'months',
+      months: 'months',
+      day: 'days',
+      days: 'days',
+      hour: 'hours',
+      hours: 'hours',
+      minute: 'minutes',
+      minutes: 'minutes',
+      second: 'seconds',
+      seconds: 'seconds',
+      millisecond: 'milliseconds',
+      milliseconds: 'milliseconds',
+    };
+
+    const result = {
+      years: 0,
+      months: 0,
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0,
+    };
+
+    const regex = /(\d+(?:\.\d+)?)\s*(years?|months?|days?|hours?|minutes?|seconds?|milliseconds?)/gi;
+
+    let match;
+    while ((match = regex.exec(input)) !== null) {
+      const value = parseFloat(match[1]);
+      const unit = match[2].toLowerCase();
+      const key = units[unit];
+
+      if (key) result[key] += value;
+    }
+
+    return result;
+  }
+
 }

frontend/src/app/components/ui-components/row-fields/time-interval/time-interval.component.ts

@@ -31,7 +31,7 @@ export class TimeIntervalRowComponent extends BaseRowFieldComponent {
   ngOnInit(): void {
     super.ngOnInit();
     // @ts-ignore
-    if (this.value) this.interval = {...pgInterval.parse(this.value)};
+    if (this.value) this.interval = this.value;
   }
 
   onInputChange() {

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

@@ -22,8 +22,9 @@ export function formatFieldValue(value, type) {
       if (value || value ===  1) return '✓'
       else if (value === false || value === 0) return '✕'
       else return '—'
-    } else if (type === 'json' || type === 'jsonb' || type === 'object' || type === 'array') {
+    } else if (type === 'json' || type === 'jsonb' || type === 'object' || type === 'array' || type === 'interval') {
       return JSON.stringify(value)
     }
+
     return value;
   }