db-table-row-view.component.html

<div *ngIf="selectedRow"
    class="row-preview-sidebar"
    [ngClass]="{'row-preview-sidebar_open': selectedRow}">
    <div class="row-preview-sidebar__header">
        <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
        <div class="row-preview-sidebar__actions">
            <button mat-icon-button *ngIf="selectedRow.link"
                matTooltip="Copy link to this record"
                [cdkCopyToClipboard]="getDedicatedPageLink()"
                (cdkCopyToClipboardCopied)="showCopyNotification('Link to this record was copied to clipboard.')">
                <mat-icon>link</mat-icon>
            </button>
            <a mat-icon-button *ngIf="selectedRow.link"
                [routerLink]="selectedRow.link"
                [queryParams]="getDedicatedPageLinkParams()"
                matTooltip="Open the record"
                (click)="stashUrlParams()">
                <mat-icon fontSet="material-symbols-outlined">create</mat-icon>
            </a>
        </div>
        <button mat-icon-button (click)="handleClose()">
            <mat-icon>close</mat-icon>
        </button>
    </div>

    <mat-expansion-panel *ngIf="selectedRow?.relatedRecords?.referenced_by?.length" class="related-records-panel">
        <mat-expansion-panel-header class="related-records-panel__header">
            Related records
        </mat-expansion-panel-header>

        <mat-accordion multi="true">
            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
                <mat-expansion-panel-header class="related-records__header">
                    <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
                    <mat-panel-description class="related-records__actions">
                        <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]" target="_blank"
                            routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
                            [queryParams]="referencedTablesURLParams[i]"
                            matTooltip="Open records in table view"
                            (click)="handleClose()">
                            <mat-icon>open_in_new</mat-icon>
                        </a>
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <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]"
                        (click)="handleClose()">

                        <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 of referencedRecords[referencedTable.table_name].fieldsOrder">
                                <strong>{{field.displayName}}:</strong>
                                {{ row[field.fieldName] || '—' }};
                            </span>
                        </span>
                    </a>
                </mat-nav-list>
            </mat-expansion-panel>
        </mat-accordion>
    </mat-expansion-panel>

    <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
        <div *ngFor="let column of columns; let i = index" class="row-preview-sidebar__field">
            <strong>{{column.normalizedTitle}}</strong>
            <div data-hj-suppress class="row-preview-sidebar__value">
                <ng-container *ngIf="isForeignKey(column.title); else recordContent">
                    <app-foreign-key-record-view
                        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>
                    <ndc-dynamic *ngIf="isWidget(column.title) && selectedRow.widgets[column.title].widget_type; else simpleValue"
                        [ndcDynamicComponent]="UIwidgets[selectedRow.widgets[column.title].widget_type]"
                        [ndcDynamicInputs]="{
                            key: column.title,
                            value: selectedRow.record[column.title],
                            widgetStructure: selectedRow.widgets[column.title],
                            rowData: selectedRow.record,
                            primaryKeys: selectedRow.primaryKeys
                        }">
                    </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>
        </div>
    </ng-container>

    <ng-template #loadingContent>
        <app-placeholder-record-view></app-placeholder-record-view>
    </ng-template>
</div>