Skip to content

Commit 4d31fe1

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1296 from rocket-admin/record-view-components
Record view components
2 parents b291314 + 860ebab commit 4d31fe1

84 files changed

Lines changed: 1406 additions & 69 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -67,50 +67,6 @@
6767
}
6868
}
6969

70-
.row-preview-sidebar__field-value {
71-
word-wrap: anywhere;
72-
word-break: keep-all;
73-
white-space: break-spaces;
74-
max-width: 100%;
75-
}
76-
77-
@media (prefers-color-scheme: light) {
78-
.row-preview-sidebar__field-value {
79-
color: rgba(0, 0, 0, 0.64);
80-
}
81-
}
82-
83-
@media (prefers-color-scheme: dark) {
84-
.row-preview-sidebar__field-value {
85-
color: rgba(255, 255, 255, 0.64);
86-
}
87-
}
88-
89-
.row-preview-sidebar__field-value_foreign-key {
90-
display: flex;
91-
align-items: center;
92-
text-decoration: none;
93-
}
94-
95-
@media (prefers-color-scheme: light) {
96-
.row-preview-sidebar__field-value_foreign-key {
97-
border-bottom: 1px solid rgba(0, 0, 0, 0.64);
98-
}
99-
}
100-
101-
@media (prefers-color-scheme: dark) {
102-
.row-preview-sidebar__field-value_foreign-key {
103-
border-bottom: 1px solid rgba(255, 255, 255, 0.64);
104-
}
105-
}
106-
107-
.row-preview-sidebar__field-value-icon {
108-
font-size: 16px;
109-
height: 16px;
110-
margin-left: 8px;
111-
width: 16px;
112-
}
113-
11470
.row-preview-sidebar__image {
11571
width: 100%;
11672
margin-top: 8px;

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

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -80,26 +80,35 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
8080
</mat-expansion-panel>
8181

8282
<ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
83-
<div *ngFor="let column of columns" class="row-preview-sidebar__field">
83+
<div *ngFor="let column of columns; let i = index" class="row-preview-sidebar__field">
8484
<strong>{{column.normalizedTitle}}</strong>
85-
<a *ngIf="isForeignKey(column.title); else recordContent"
86-
routerLink="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
87-
[queryParams]="getForeignKeyQueryParams(column.title)"
88-
class="row-preview-sidebar__field-value row-preview-sidebar__field-value_foreign-key"
89-
(click)="handleClose()">
90-
<span>{{getForeignKeyValue(column.title)}}</span>
91-
<mat-icon fontSet="material-icons-outlined" class="row-preview-sidebar__field-value-icon">edit</mat-icon>
92-
</a>
85+
<ng-container *ngIf="isForeignKey(column.title); else recordContent">
86+
<app-foreign-key-record-view
87+
[key]="i"
88+
link="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
89+
[primaryKeysParams]="getForeignKeyQueryParams(column.title)"
90+
[displayValue]="getForeignKeyValue(column.title)"
91+
(onForeignKeyClick)="handleClose()">
92+
</app-foreign-key-record-view>
93+
</ng-container>
9394

9495
<ng-template #recordContent>
95-
<div *ngIf="isWidget(column.title); else stringValue">
96-
<div *ngIf="selectedRow.widgets[column.title].widget_type === 'Image'">
97-
<img [src]="selectedRow.record[column.title]" alt="Image" class="row-preview-sidebar__image">
98-
</div>
99-
<span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
100-
</div>
101-
<ng-template #stringValue>
102-
<span class="row-preview-sidebar__field-value">{{selectedRow.record[column.title] || '—'}}</span>
96+
<ndc-dynamic *ngIf="isWidget(column.title); else simpleValue"
97+
[ndcDynamicComponent]="UIwidgets[selectedRow.widgets[column.title].widget_type]"
98+
[ndcDynamicInputs]="{
99+
key: column.title,
100+
value: selectedRow.record[column.title],
101+
widgetStructure: selectedRow.widgets[column.title]
102+
}">
103+
</ndc-dynamic>
104+
<ng-template #simpleValue>
105+
<ndc-dynamic
106+
[ndcDynamicComponent]="recordViewComponents[selectedRow.fieldsTypes[column.title]]"
107+
[ndcDynamicInputs]="{
108+
key: column.title,
109+
value: selectedRow.record[column.title]
110+
}">
111+
</ndc-dynamic>
103112
</ng-template>
104113
</ng-template>
105114
</div>

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-reco
1818
import { TableStateService } from 'src/app/services/table-state.service';
1919
import { TablesService } from 'src/app/services/tables.service';
2020
import { formatFieldValue } from 'src/app/lib/format-field-value';
21+
import { ForeignKeyRecordViewComponent } from '../../ui-components/record-view-fields/foreign-key/foreign-key.component';
22+
import { UIwidgets, recordViewFieldTypes } from 'src/app/consts/record-view-types';
23+
import { DynamicModule } from 'ng-dynamic-component';
2124

2225
@Component({
2326
selector: 'app-db-table-row-view',
@@ -33,7 +36,9 @@ import { formatFieldValue } from 'src/app/lib/format-field-value';
3336
MatListModule,
3437
RouterModule,
3538
CommonModule,
36-
PlaceholderRecordViewComponent
39+
PlaceholderRecordViewComponent,
40+
ForeignKeyRecordViewComponent,
41+
DynamicModule
3742
]
3843
})
3944
export class DbTableRowViewComponent implements OnInit, OnDestroy {
@@ -48,19 +53,29 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
4853
public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
4954
public referencedTablesURLParams: any;
5055
public referencedRecords: {} = {};
56+
public recordViewComponents;
57+
public widgetsMap: { [key: string]: any } = {};
58+
public UIwidgets = UIwidgets;
5159

5260
constructor(
5361
private _tables: TablesService,
5462
private _tableState: TableStateService,
5563
private _notifications: NotificationsService,
64+
private _connections: ConnectionsService,
5665
private route: ActivatedRoute,
5766
) { }
5867

5968
ngOnInit(): void {
6069
// this.connectionID = this._connections.connectionID;
6170

71+
const connectionType = this._connections.currentConnection.type;
72+
this.recordViewComponents = recordViewFieldTypes[connectionType];
73+
6274
this.selectedRowCast = this._tableState.cast.subscribe((row) => {
6375
this.selectedRow = row;
76+
77+
console.log('Selected row:', this.selectedRow);
78+
6479
if (row && row.columnsOrder) {
6580
const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
6681

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,7 @@ export class DbTableComponent implements OnInit {
451451
foreignKeysList: this.tableData.foreignKeysList,
452452
widgets: this.tableData.widgets,
453453
widgetsList: this.tableData.widgetsList,
454+
fieldsTypes: this.tableData.tableTypes,
454455
relatedRecords: this.tableData.relatedRecords || null,
455456
link: `/dashboard/${this.connectionID}/${this.name}/entry`
456457
});
@@ -469,16 +470,15 @@ export class DbTableComponent implements OnInit {
469470
foreignKeysList: null,
470471
widgets: null,
471472
widgetsList: null,
473+
fieldsTypes: null,
472474
relatedRecords: null,
473475
link: null
474476
})
475477

476478
this._tableRow.fetchTableRow(this.connectionID, foreignKeys.referenced_table_name, {[foreignKeys.referenced_column_name]: row[foreignKeys.referenced_column_name]})
477479
.subscribe(res => {
478-
const filedsTypes = res.structure.reduce((acc, field) => {
479-
acc[field.column_name ] = field.data_type;
480-
return acc;
481-
}, {});
480+
const foreignKeysList = res.foreignKeys.map((foreignKey: TableForeignKey) => foreignKey.column_name);
481+
const filedsTypes = getTableTypes(res.structure, foreignKeysList);
482482

483483
const formattedRecord = Object.entries(res.row).reduce((acc, [key, value]) => {
484484
acc[key] = formatFieldValue(value, filedsTypes[key]);
@@ -494,7 +494,7 @@ export class DbTableComponent implements OnInit {
494494
[foreignKeys.referenced_column_name]: res.row[foreignKeys.referenced_column_name]
495495
},
496496
foreignKeys: Object.assign({}, ...res.foreignKeys.map((foreignKey: TableForeignKey) => ({[foreignKey.column_name]: foreignKey}))),
497-
foreignKeysList: res.foreignKeys.map(fk => fk.column_name),
497+
foreignKeysList,
498498
widgets: Object.assign({}, ...res.table_widgets.map((widget: Widget) => {
499499
let parsedParams;
500500

@@ -513,6 +513,7 @@ export class DbTableComponent implements OnInit {
513513
})
514514
),
515515
widgetsList: res.table_widgets.map(widget => widget.field_name),
516+
fieldsTypes: filedsTypes,
516517
relatedRecords: res.referenced_table_names_and_columns[0],
517518
link: `/dashboard/${this.connectionID}/${foreignKeys.referenced_table_name}/entry`
518519
});

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,15 +270,15 @@ export class DbTableRowEditComponent implements OnInit {
270270
chunkSize: 30,
271271
filters
272272
}).subscribe((res) => {
273-
273+
const foreignKeysList = res.foreignKeys.map((foreignKey: TableForeignKey) => foreignKey.column_name);
274274
this.relatedRecordsProperties = Object.assign({}, this.relatedRecordsProperties, {
275275
[table.table_name]: {
276276
connectionID: this.connectionID,
277277
tableName: table.table_name,
278278
columnsOrder: res.list_fields,
279279
primaryColumns: res.primaryColumns,
280280
foreignKeys: Object.assign({}, ...res.foreignKeys.map((foreignKey: TableForeignKey) => ({[foreignKey.column_name]: foreignKey}))),
281-
foreignKeysList: res.foreignKeys.map(fk => fk.column_name),
281+
foreignKeysList,
282282
widgets: Object.assign({}, ...res.widgets.map((widget: Widget) => {
283283
let parsedParams;
284284

@@ -297,6 +297,7 @@ export class DbTableRowEditComponent implements OnInit {
297297
})
298298
),
299299
widgetsList: res.widgets.map(widget => widget.field_name),
300+
fieldsTypes: getTableTypes(res.structure, foreignKeysList),
300301
relatedRecords: [],
301302
link: `/dashboard/${this.connectionID}/${table.table_name}/entry`
302303
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.field-view-value {
2+
word-wrap: anywhere;
3+
word-break: keep-all;
4+
white-space: break-spaces;
5+
max-width: 100%;
6+
}
7+
8+
@media (prefers-color-scheme: light) {
9+
.field-view-value {
10+
color: rgba(0, 0, 0, 0.64);
11+
}
12+
}
13+
14+
@media (prefers-color-scheme: dark) {
15+
.field-view-value {
16+
color: rgba(255, 255, 255, 0.64);
17+
}
18+
}
19+
20+
.field-view-icon {
21+
font-size: 16px;
22+
height: 16px;
23+
margin-left: 8px;
24+
width: 16px;
25+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!-- Base template is empty, will be overridden by child components -->

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
2+
import { TableField, WidgetStructure } from 'src/app/models/table';
3+
4+
import { CommonModule } from '@angular/common';
5+
6+
@Component({
7+
selector: 'app-base-record-view-field',
8+
templateUrl: './base-record-view-field.component.html',
9+
styleUrls: ['./base-record-view-field.component.css'],
10+
imports: [CommonModule]
11+
})
12+
export class BaseRecordViewFieldComponent {
13+
@Input() key: string;
14+
@Input() value: any;
15+
@Input() structure: TableField;
16+
@Input() widgetStructure: WidgetStructure;
17+
// @Input() relations: TableForeignKey;
18+
19+
@Output() onCopyToClipboard = new EventEmitter<string>();
20+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="field-display">
2+
<span class="field-value">{{value || '—'}}</span>
3+
</div>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { CommonModule } from '@angular/common';
2+
import { Component, Injectable } from '@angular/core';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { MatIconModule } from '@angular/material/icon';
5+
import { MatTooltipModule } from '@angular/material/tooltip';
6+
import { BaseRecordViewFieldComponent } from '../base-record-view-field/base-record-view-field.component';
7+
8+
@Injectable()
9+
@Component({
10+
selector: 'app-binary-data-caption-record-view',
11+
templateUrl: './binary-data-caption.component.html',
12+
styleUrls: ['../base-record-view-field/base-record-view-field.component.css', './binary-data-caption.component.css'],
13+
imports: [CommonModule, MatIconModule, MatButtonModule, MatTooltipModule]
14+
})
15+
export class BinaryDataCaptionRecordViewComponent extends BaseRecordViewFieldComponent {
16+
}

0 commit comments

Comments
 (0)