Skip to content

Records view #1225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 8 commits into from
Jun 22, 2025
Merged

Records view #1225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
310c1ce
record preview, related records: fix links when primary key is a fore…
lyubov-voloshko Jun 22, 2025
12a365d
edit row, related records: delete legacy links as now related records…
lyubov-voloshko Jun 22, 2025
6ac33e6
record preview: fix link to a record in case when primary key is a fo…
lyubov-voloshko Jun 22, 2025
6527b30
record view: close record view on redirects to other pages
lyubov-voloshko Jun 22, 2025
73fd5e0
edit page, related records: human readable names for record field names
lyubov-voloshko Jun 22, 2025
a89f746
related records: show field name if it is not identity field
lyubov-voloshko Jun 22, 2025
9b6c7e3
record preview, related recors: normalized and names from widgets for…
lyubov-voloshko Jun 22, 2025
2c6daee
Merge branch 'main' into records-view
lyubov-voloshko Jun 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
</button>
<a mat-icon-button *ngIf="selectedRow.link"
[routerLink]="selectedRow.link"
[queryParams]="selectedRow.primaryKeys"
[queryParams]="getDedicatedPageLinkParams()"
matTooltip="Open the record"
(click)="stashUrlParams()">
<mat-icon fontSet="material-icons-outlined">create</mat-icon>
Expand All @@ -39,13 +39,15 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
<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"
[routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
matTooltip="Set up records view">
matTooltip="Set up records view"
(click)="handleClose()">
<mat-icon>settings</mat-icon>
</a>
<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
[queryParams]="referencedTablesURLParams[i]"
matTooltip="Open records in table view">
matTooltip="Open records in table view"
(click)="handleClose()">
<mat-icon>open_in_new</mat-icon>
</a>
</mat-panel-description>
Expand All @@ -56,11 +58,18 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
[routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
[queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
(click)="handleClose()">
<span matListItemTitle>{{row[referencedRecords[referencedTable.table_name].identityColumn]}}</span>

<span matListItemTitle style="margin-left: -4px;">
<strong *ngIf="!referencedRecords[referencedTable.table_name].identityColumn.isSet">
{{referencedRecords[referencedTable.table_name].identityColumn.displayName}}:&nbsp;
</strong>
{{ row[referencedRecords[referencedTable.table_name].identityColumn.fieldName] }}
</span>

<span matListItemLine>
<span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
<strong>{{field_name}}:</strong>
{{ row[field_name]}}
<span *ngFor="let field of referencedRecords[referencedTable.table_name].fieldsOrder">
<strong>{{field.displayName}}:</strong>
{{ row[field.fieldName] || '—' }};
</span>
</span>
</a>
Expand All @@ -82,7 +91,8 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
<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">
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>
Expand Down
110 changes: 93 additions & 17 deletions frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
foreignKeyMap[fk.column_name] = fk.referenced_column_name;
}

const tableWidgetsNameMap = Object.keys(res.widgets).reduce((acc, key) => {
acc[key] = res.widgets[key].name;
return acc;
}, {});

// Format each row
const formattedRows = res.rows.map(row => {
const formattedRow = {};
Expand All @@ -123,39 +128,89 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
})

if (res.identity_column && res.list_fields.length) {
identityColumn = res.identity_column;
fieldsOrder = res.list_fields.filter((field: string) => field !== res.identity_column).slice(0, 3);
identityColumn = {
isSet: true,
fieldName: res.identity_column,
displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
};
fieldsOrder = res.list_fields
.filter((field: string) => field !== res.identity_column)
.slice(0, 3)
.map((field: string) => {
return {
fieldName: field,
displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
};
});
}

if (res.identity_column && !res.list_fields.length) {
identityColumn = res.identity_column;
fieldsOrder = res.structure.filter((field: TableField) => field.column_name !== res.identity_column).map((field: TableField) => field.column_name).slice(0, 3);
identityColumn = {
isSet: true,
fieldName: res.identity_column,
displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
};
fieldsOrder = res.structure
.filter((field: TableField) => field.column_name !== res.identity_column)
.slice(0, 3)
.map((field: TableField) => {
return {
fieldName: field.column_name,
displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
};
});
}

if (!res.identity_column && res.list_fields.length) {
identityColumn = res.list_fields[0];
fieldsOrder = res.list_fields.slice(1, 4);
identityColumn = {
isSet: false,
fieldName: res.list_fields[0],
displayName: tableWidgetsNameMap[res.list_fields[0]] || normalizeFieldName(res.list_fields[0])
};
fieldsOrder = res.list_fields
.slice(1, 4)
.map((field: string) => {
return {
fieldName: field,
displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
};
});
}

if (!res.identity_column && !res.list_fields.length) {
identityColumn = res.structure[0].column_name;
identityColumn = {
isSet: false,
fieldName: res.structure[0].column_name,
displayName: tableWidgetsNameMap[res.structure[0].column_name] || normalizeFieldName(res.structure[0].column_name)
};
console.log(identityColumn);
fieldsOrder = res.structure.slice(1, 4).map((field: TableField) => field.column_name);
fieldsOrder = res.structure
.slice(1, 4)
.map((field: TableField) => {
return {
fieldName: field.column_name,
displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
};
});
}

const tableRecords = {
rows: formattedRows,
links: res.rows.map(row => {
let params = {};
Object.keys(res.primaryColumns).forEach((key) => {
params[res.primaryColumns[key].column_name] = row[res.primaryColumns[key].column_name];
});

return params;
return res.primaryColumns.reduce((keys, column) => {
if (res.foreignKeys.map(foreignKey => foreignKey.column_name).includes(column.column_name)) {
const referencedColumnNameOfForeignKey = foreignKeyMap[column.column_name];
keys[column.column_name] = row[column.column_name][referencedColumnNameOfForeignKey];
} else {
keys[column.column_name] = row[column.column_name];
}
return keys;
}, {})
}),
identityColumn,
fieldsOrder
}

this.referencedRecords[table.table_name] = tableRecords;
});
});
Expand Down Expand Up @@ -197,12 +252,33 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
return this.selectedRow.widgetsList.includes(columnName);
}

getDedicatedPageLink() {
getDedicatedPageLinkParams() {
if (this.selectedRow) {
const params = new URLSearchParams();
const params = {};
for (const key in this.selectedRow.primaryKeys) {
if (this.selectedRow.primaryKeys.hasOwnProperty(key)) {
params.append(key, this.selectedRow.primaryKeys[key]);
if (this.selectedRow.foreignKeysList.includes(key)) {
const referencedColumnName = this.selectedRow.foreignKeys[key].referenced_column_name;
params[key] = this.selectedRow.record[key][referencedColumnName];
}
else {
params[key] = this.selectedRow.primaryKeys[key];
}

}
}
return params;
};
return {};
}

getDedicatedPageLink() {
if (this.selectedRow) {
const paramsObj = this.getDedicatedPageLinkParams();
const params = new URLSearchParams();
for (const key in paramsObj) {
if (paramsObj.hasOwnProperty(key)) {
params.set(key, paramsObj[key]);
}
}
return `${location.origin}${this.selectedRow.link}?${params.toString()}`;
Expand Down
12 changes: 12 additions & 0 deletions frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,18 @@
padding: 0 8px 16px;
}

.related-record__fields {
margin-left: -4px;
}

.related-record__field {
margin-left: 8px;
}

.related-record__fieldName {
margin-right: 4px;
}

.widget {
display: grid;
grid-template-columns: 0 1fr 36px;
Expand Down
13 changes: 8 additions & 5 deletions frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,15 @@ <h3>
<mat-list-item *ngFor="let rawRow of referencedRecords[referencedTable.table_name]?.rawRows; let i = index"
class="related-record" (click)="handleViewRow(referencedTable.table_name, rawRow)">
<span matListItemTitle>
{{ referencedRecords[referencedTable.table_name].formattedRows[i][referencedRecords[referencedTable.table_name].identityColumn] }}
<strong *ngIf="!referencedRecords[referencedTable.table_name].identityColumn.isSet">
{{referencedRecords[referencedTable.table_name].identityColumn.displayName}}:&nbsp;
</strong>
{{ referencedRecords[referencedTable.table_name].formattedRows[i][referencedRecords[referencedTable.table_name].identityColumn.name] }}
</span>
<span matListItemLine>
<span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
<strong>{{field_name}}:</strong>
<span>{{ referencedRecords[referencedTable.table_name].formattedRows[i][field_name] }}</span>
<span matListItemLine class="related-record__fields">
<span *ngFor="let field of referencedRecords[referencedTable.table_name].fieldsOrder" class="related-record__field">
<strong class="related-record__fieldName">{{field.displayName}}:</strong>
<span>{{ referencedRecords[referencedTable.table_name].formattedRows[i][field.fieldName] }};</span>
</span>
</span>
</mat-list-item>
Expand Down
73 changes: 56 additions & 17 deletions frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ import { TablesService } from 'src/app/services/tables.service';
import { Title } from '@angular/platform-browser';
import { formatFieldValue } from 'src/app/lib/format-field-value';
import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
import { normalizeTableName } from '../../lib/normalize';
import { normalizeTableName, normalizeFieldName } from 'src/app/lib/normalize';
import { isSet } from 'lodash';

@Component({
selector: 'app-db-table-row-edit',
Expand Down Expand Up @@ -345,36 +346,74 @@ export class DbTableRowEditComponent implements OnInit {
})

if (res.identity_column && res.list_fields.length) {
identityColumn = res.identity_column;
fieldsOrder = res.list_fields.filter((field: string) => field !== res.identity_column).slice(0, 3);
identityColumn = {
isSet: true,
name: res.identity_column,
displayName: this.relatedRecordsProperties[table.table_name].widgets[res.identity_column]?.name || normalizeFieldName(res.identity_column)
};
fieldsOrder = res.list_fields
.filter((field: string) => field !== res.identity_column)
.slice(0, 3)
.map((field: string) => {
return {
fieldName: field,
displayName: this.relatedRecordsProperties[table.table_name].widgets[field]?.name || normalizeFieldName(field),
};
});
}

if (res.identity_column && !res.list_fields.length) {
identityColumn = res.identity_column;
fieldsOrder = res.structure.filter((field: TableField) => field.column_name !== res.identity_column).map((field: TableField) => field.column_name).slice(0, 3);
identityColumn = {
isSet: true,
name: res.identity_column,
displayName: this.relatedRecordsProperties[table.table_name].widgets[res.identity_column]?.name || normalizeFieldName(res.identity_column)
};
fieldsOrder = res.structure
.filter((field: TableField) => field.column_name !== res.identity_column)
.slice(0, 3)
.map((field: TableField) => {
return {
fieldName: field.column_name,
displayName: this.relatedRecordsProperties[table.table_name].widgets[field.column_name]?.name || normalizeFieldName(field.column_name),
}
})
}

if (!res.identity_column && res.list_fields.length) {
identityColumn = res.list_fields[0];
fieldsOrder = res.list_fields.slice(1, 4);
identityColumn = {
isSet: false,
name: res.list_fields[0],
displayName: this.relatedRecordsProperties[table.table_name].widgets[res.list_fields[0]]?.name || normalizeFieldName(res.list_fields[0])
};
fieldsOrder = res.list_fields
.slice(1, 4)
.map((field: string) => {
return {
fieldName: field,
displayName: this.relatedRecordsProperties[table.table_name].widgets[field]?.name || normalizeFieldName(field),
};
});
}

if (!res.identity_column && !res.list_fields.length) {
identityColumn = res.structure[0].column_name;
console.log(identityColumn);
fieldsOrder = res.structure.slice(1, 4).map((field: TableField) => field.column_name);
identityColumn = {
isSet: false,
name: res.structure[0].column_name,
displayName: this.relatedRecordsProperties[table.table_name].widgets[res.structure[0].column_name]?.name || normalizeFieldName(res.structure[0].column_name)
};
fieldsOrder = res.structure
.slice(1, 4)
.map((field: TableField) => {
return {
fieldName: field.column_name,
displayName: this.relatedRecordsProperties[table.table_name].widgets[field.column_name]?.name || normalizeFieldName(field.column_name),
}
})
}

const tableRecords = {
rawRows: res.rows,
formattedRows,
links: res.rows.map(row => {
let params = {};
Object.keys(res.primaryColumns).forEach((key) => {
params[res.primaryColumns[key].column_name] = row[res.primaryColumns[key].column_name];
});
return params;
}),
identityColumn,
fieldsOrder,
foreignKeys: res.foreignKeys
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/app/consts/acronyms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4232,7 +4232,6 @@ export default [
'PEN',
'PEO',
'PEPFAR',
'PER',
'perl',
'PES',
'PEST',
Expand Down Expand Up @@ -5069,7 +5068,6 @@ export default [
'TNO',
'TNT',
'to',
'TO',
'TOA',
'TOAD',
'TOBS',
Expand Down