record view: map and fix record view components

Author: lyubov-voloshko

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

@@ -67,50 +67,6 @@
     }
 }
 
-.row-preview-sidebar__field-value {
-    word-wrap: anywhere;
-    word-break: keep-all;
-    white-space: break-spaces;
-    max-width: 100%;
-}
-
-@media (prefers-color-scheme: light) {
-    .row-preview-sidebar__field-value {
-        color: rgba(0, 0, 0, 0.64);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .row-preview-sidebar__field-value {
-        color: rgba(255, 255, 255, 0.64);
-    }
-}
-
-.row-preview-sidebar__field-value_foreign-key {
-    display: flex;
-    align-items: center;
-    text-decoration: none;
-}
-
-@media (prefers-color-scheme: light) {
-    .row-preview-sidebar__field-value_foreign-key {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.64);
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .row-preview-sidebar__field-value_foreign-key {
-        border-bottom: 1px solid rgba(255, 255, 255, 0.64);
-    }
-}
-
-.row-preview-sidebar__field-value-icon {
-    font-size: 16px;
-    height: 16px;
-    margin-left: 8px;
-    width: 16px;
-}
-
 .row-preview-sidebar__image {
     width: 100%;
     margin-top: 8px;

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

@@ -80,26 +80,35 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     </mat-expansion-panel>
 
     <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
-        <div *ngFor="let column of columns" class="row-preview-sidebar__field">
+        <div *ngFor="let column of columns; let i = index" class="row-preview-sidebar__field">
             <strong>{{column.normalizedTitle}}</strong>
-            <a *ngIf="isForeignKey(column.title); else recordContent"
-                routerLink="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
-                [queryParams]="getForeignKeyQueryParams(column.title)"
-                class="row-preview-sidebar__field-value row-preview-sidebar__field-value_foreign-key"
-                (click)="handleClose()">
-                <span>{{getForeignKeyValue(column.title)}}</span>
-                <mat-icon fontSet="material-icons-outlined" class="row-preview-sidebar__field-value-icon">edit</mat-icon>
-            </a>
+            <ng-container *ngIf="isForeignKey(column.title); else recordContent">
+                <app-foreign-key-record-view
+                    [key]="i"
+                    link="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
+                    [primaryKeysParams]="getForeignKeyQueryParams(column.title)"
+                    [displayValue]="getForeignKeyValue(column.title)"
+                    (onForeignKeyClick)="handleClose()">
+                </app-foreign-key-record-view>
+            </ng-container>
 
             <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>
-                <ng-template #stringValue>
-                    <span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
+                <ndc-dynamic *ngIf="isWidget(column.title); else simpleValue"
+                    [ndcDynamicComponent]="UIwidgets[selectedRow.widgets[column.title].widget_type]"
+                    [ndcDynamicInputs]="{
+                        key: column.title,
+                        value: selectedRow.record[column.title],
+                        widgetStructure: selectedRow.widgets[column.title]
+                    }">
+                </ndc-dynamic>
+                <ng-template #simpleValue>
+                    <ndc-dynamic
+                        [ndcDynamicComponent]="recordViewComponents[selectedRow.fieldsTypes[column.title]]"
+                        [ndcDynamicInputs]="{
+                            key: column.title,
+                            value: selectedRow.record[column.title]
+                        }">
+                    </ndc-dynamic>
                 </ng-template>
             </ng-template>
         </div>

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

@@ -18,6 +18,9 @@ import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-reco
 import { TableStateService } from 'src/app/services/table-state.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
+import { ForeignKeyRecordViewComponent } from '../../ui-components/record-view-fields/foreign-key/foreign-key.component';
+import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
+import { DynamicModule } from 'ng-dynamic-component';
 
 @Component({
   selector: 'app-db-table-row-view',
@@ -33,7 +36,9 @@ import { formatFieldValue } from 'src/app/lib/format-field-value';
     MatListModule,
     RouterModule,
     CommonModule,
-    PlaceholderRecordViewComponent
+    PlaceholderRecordViewComponent,
+    ForeignKeyRecordViewComponent,
+    DynamicModule
   ]
 })
 export class DbTableRowViewComponent implements OnInit, OnDestroy {
@@ -48,19 +53,29 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
   public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
   public referencedTablesURLParams: any;
   public referencedRecords: {} = {};
+  public recordViewComponents;
+  public widgetsMap: { [key: string]: any } = {};
+  public UIwidgets = UIwidgets;
 
   constructor(
     private _tables: TablesService,
     private _tableState: TableStateService,
     private _notifications: NotificationsService,
+    private _connections: ConnectionsService,
     private route: ActivatedRoute,
   ) { }
 
   ngOnInit(): void {
     // this.connectionID = this._connections.connectionID;
 
+    const connectionType = this._connections.currentConnection.type;
+    this.recordViewComponents = recordViewFieldTypes[connectionType];
+
     this.selectedRowCast = this._tableState.cast.subscribe((row) => {
       this.selectedRow = row;
+
+      console.log('Selected row:', this.selectedRow);
+
       if (row && row.columnsOrder) {
         const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
 

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

@@ -451,6 +451,7 @@ export class DbTableComponent implements OnInit {
       foreignKeysList: this.tableData.foreignKeysList,
       widgets: this.tableData.widgets,
       widgetsList: this.tableData.widgetsList,
+      fieldsTypes: this.tableData.tableTypes,
       relatedRecords: this.tableData.relatedRecords || null,
       link: `/dashboard/${this.connectionID}/${this.name}/entry`
     });
@@ -469,16 +470,15 @@ export class DbTableComponent implements OnInit {
       foreignKeysList: null,
       widgets: null,
       widgetsList: null,
+      fieldsTypes: null,
       relatedRecords: null,
       link: null
     })
 
     this._tableRow.fetchTableRow(this.connectionID, foreignKeys.referenced_table_name, {[foreignKeys.referenced_column_name]: row[foreignKeys.referenced_column_name]})
       .subscribe(res => {
-        const filedsTypes = res.structure.reduce((acc, field) => {
-          acc[field.column_name	] = field.data_type;
-          return acc;
-        }, {});
+        const foreignKeysList = res.foreignKeys.map((foreignKey: TableForeignKey) => foreignKey.column_name);
+        const filedsTypes = getTableTypes(res.structure, foreignKeysList);
 
         const formattedRecord = Object.entries(res.row).reduce((acc, [key, value]) => {
           acc[key] = formatFieldValue(value, filedsTypes[key]);
@@ -494,7 +494,7 @@ export class DbTableComponent implements OnInit {
             [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),
+          foreignKeysList,
           widgets: Object.assign({}, ...res.table_widgets.map((widget: Widget) => {
               let parsedParams;
 
@@ -513,6 +513,7 @@ export class DbTableComponent implements OnInit {
             })
           ),
           widgetsList: res.table_widgets.map(widget => widget.field_name),
+          fieldsTypes: filedsTypes,
           relatedRecords: res.referenced_table_names_and_columns[0],
           link: `/dashboard/${this.connectionID}/${foreignKeys.referenced_table_name}/entry`
         });

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

@@ -270,15 +270,15 @@ export class DbTableRowEditComponent implements OnInit {
                   chunkSize: 30,
                   filters
                 }).subscribe((res) => {
-
+                  const foreignKeysList = res.foreignKeys.map((foreignKey: TableForeignKey) => foreignKey.column_name);
                   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),
+                      foreignKeysList,
                       widgets: Object.assign({}, ...res.widgets.map((widget: Widget) => {
                           let parsedParams;
 
@@ -297,6 +297,7 @@ export class DbTableRowEditComponent implements OnInit {
                         })
                       ),
                       widgetsList: res.widgets.map(widget => widget.field_name),
+                      fieldsTypes: getTableTypes(res.structure, foreignKeysList),
                       relatedRecords: [],
                       link: `/dashboard/${this.connectionID}/${table.table_name}/entry`
                     }

frontend/src/app/components/ui-components/record-view-fields/base-record-view-field/base-record-view-field.component.css

@@ -1,26 +1,25 @@
-.field-display {
-  position: relative;
-  display: flex;
-  align-items: center;
+.field-view-value {
+  word-wrap: anywhere;
+  word-break: keep-all;
+  white-space: break-spaces;
+  max-width: 100%;
 }
 
-.field-value {
-  flex-grow: 1 0 auto;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+@media (prefers-color-scheme: light) {
+  .field-view-value {
+    color: rgba(0, 0, 0, 0.64);
+  }
 }
 
-.field-copy-button {
-  position: absolute;
-  right: -6px;
-  top: 50%;
-  background-color: var(--hover-color);
-  transform: translate(0, -50%) scale(0.85);
-  opacity: 0;
-  transition: opacity 0.1s ease-in-out;
+@media (prefers-color-scheme: dark) {
+  .field-view-value {
+    color: rgba(255, 255, 255, 0.64);
+  }
 }
 
-.field-display:hover .field-copy-button {
-  opacity: 1;
-}
+.field-view-icon {
+  font-size: 16px;
+  height: 16px;
+  margin-left: 8px;
+  width: 16px;
+}

frontend/src/app/components/ui-components/record-view-fields/binary-data-caption/binary-data-caption.component.ts

@@ -7,7 +7,7 @@ import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-rec
 
 @Injectable()
 @Component({
-  selector: 'app-binary-data-caption-display',
+  selector: 'app-binary-data-caption-record-view',
   templateUrl: './binary-data-caption.component.html',
   styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './binary-data-caption.component.css'],
   imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule]

frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html

@@ -1,7 +1,3 @@
-<div class="field-display">
-  <div class="field-value">
-    <mat-icon *ngIf="value === true" class="boolean-icon boolean-icon-true">check_small</mat-icon>
-    <mat-icon *ngIf="value === false" class="boolean-icon boolean-icon-false">close_small</mat-icon>
-    <span *ngIf="value !== true && value !== false">—</span>
-  </div>
-</div>
+<mat-icon *ngIf="value === true" class="boolean-icon boolean-icon-true">check_small</mat-icon>
+<mat-icon *ngIf="value === false" class="boolean-icon boolean-icon-false">close_small</mat-icon>
+<span *ngIf="value !== true && value !== false">—</span>

frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.ts

@@ -1,19 +1,16 @@
 import { Component, Injectable } from '@angular/core';
 
 
-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 { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
 
 @Injectable()
 @Component({
-  selector: 'app-display-boolean',
+  selector: 'app-boolean-record-view',
   templateUrl: './boolean.component.html',
   styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './boolean.component.css'],
-  imports: [ClipboardModule, MatIconModule, MatButtonModule, MatTooltipModule, CommonModule]
+  imports: [MatIconModule, CommonModule]
 })
 export class BooleanRecordViewComponent extends BaseRecordViewFieldComponent {
 }

frontend/src/app/components/ui-components/record-view-fields/code/code.component.css

@@ -1,12 +1,20 @@
-.field-value {
-  background-color: #EAEAFF;
-  border-radius: 4px;
-  font-family: monospace;
-  padding: 0 8px;
+:host {
+    width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .field-value {
-    background-color: #2C2C54;
-  }
+.code-editor-box {
+    display: block;
+    border: 1px solid rgba(0, 0, 0, 0.38);
+    border-radius: 0;
+    margin-top: 4px;
+    margin-bottom: 20px;
+    /* overflow-y: auto;
+    resize: vertical; */
+    overflow: auto;
+    resize: both;
 }
+
+.code-editor-box ::ng-deep .ngs-code-editor {
+    width: 100%;
+    height: 100%;
+}