add request on related recoreds and display them in mat list

rocket-admin · Jan 10, 2025 · 7dbe07a · 7dbe07a
1 parent 10b526c
commit 7dbe07a
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 18 deletions.
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -96,6 +96,14 @@
     }
 }
 
+.related-records {
+    list-style: none;
+}
+
+.related-record {
+    border-bottom: 1px solid gray;
+}
+
 .related-tables {
     margin-top: -4px;
 }

diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
@@ -41,26 +41,51 @@
             </div>
         </div>
     </div>
+
     <div *ngIf="referencedTables && referencedTables.length" class="related-views">
-        <mat-expansion-panel [expanded]="isDesktop">
-            <mat-expansion-panel-header class="related-views__title">
-                <mat-panel-title>
-                    Records related to&nbsp;
-                    <span *ngIf="tableRowValues[identityColumn]">"{{tableRowValues[identityColumn]}}"</span>
-                    <span *ngIf="!tableRowValues[identityColumn]">this row</span>
-                </mat-panel-title>
-            </mat-expansion-panel-header>
-
-            <mat-chip-listbox class="related-tables">
-                <mat-chip-option *ngFor="let referencedTable of referencedTables; let i = index"
-                    color="primary"
-                    routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}"
-                    [queryParams]="referencedTablesURLParams[i]">
-                    {{referencedTable.displayTableName}}
-                </mat-chip-option>
-            </mat-chip-listbox>
-        </mat-expansion-panel>
+
+        <h3>
+            Records related to&nbsp;
+            <span *ngIf="tableRowValues[identityColumn]">"{{tableRowValues[identityColumn]}}"</span>
+            <span *ngIf="!tableRowValues[identityColumn]">this row</span>
+        </h3>
+
+        <mat-accordion multi="true">
+            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index">
+                <mat-expansion-panel-header>
+                    <mat-panel-title> {{referencedTable.displayTableName}} </mat-panel-title>
+                </mat-expansion-panel-header>
+
+                <mat-nav-list>
+                    <a mat-list-item *ngFor="let row of referencedRecords[referencedTable.table_name].rows">
+                        <span matListItemTitle>{{row[referencedRecords[referencedTable.table_name].fieldsOrder[0]]}}</span>
+                        <span matListItemLine>
+                            <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
+                                <strong>{{field_name}}:</strong>
+                                {{row[field_name] | json}}
+                            </span>
+                        </span>
+                    </a>
+                </mat-nav-list>
+
+
+
+                <ul class="related-records">
+                    <li *ngFor="let row of referencedRecords[referencedTable.table_name].rows" class="related-record">
+                        <!--<div *ngFor="let field of row | keyvalue">{{field.key}}: {{field.value}}</div>-->
+                        <div *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
+                            <strong>{{field_name}}:</strong>
+                            {{row[field_name] | json}}
+                        </div>
+
+                        <!--<strong *ngFor="let field of record.value.rows">{{field | json}}</strong>-->
+                        <!--<div *ngFor="let field of record | keyvalue"><strong>{{field.key}}:</strong> {{field.value}}</div>-->
+                    </li>
+                </ul>
+            </mat-expansion-panel>
+        </mat-accordion>
     </div>
+
     <form #editRowForm="ngForm" class="form"
         (ngSubmit)="handleRowSubmitting(false)">
         <div *ngFor="let value of fieldsOrdered; let index = index">

diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -35,6 +35,7 @@ import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
 import { normalizeTableName } from '../../lib/normalize';
+import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'app-db-table-row-edit',
@@ -50,6 +51,7 @@ import { normalizeTableName } from '../../lib/normalize';
     MatInputModule,
     MatSelectModule,
     MatTooltipModule,
+    MatListModule,
     RouterModule,
     MatExpansionModule,
     MatChipsModule,
@@ -87,6 +89,7 @@ export class DbTableRowEditComponent implements OnInit {
   public fieldsOrdered: string[];
   public rowActions: CustomAction[];
   public referencedTables: any;
+  public referencedRecords: {} = {};
   public referencedTablesURLParams: any;
   public isDesktop: boolean = true;
   public permissions: TablePermissions;
@@ -223,6 +226,60 @@ export class DbTableRowEditComponent implements OnInit {
                     filters: JsonURL.stringify(params),
                     page_index: 0
                 }});
+
+                console.log('referenced_table_names_and_columns');
+                console.log(res.referenced_table_names_and_columns[0].referenced_by);
+
+              res.referenced_table_names_and_columns[0].referenced_by.forEach((table: any) => {
+                const filters = {[table.column_name]: {
+                  eq: this.tableRowValues[res.referenced_table_names_and_columns[0].referenced_on_column_name]
+                }};
+
+                console.log('filters');
+                console.log(filters);
+
+                this._tables.fetchTable({
+                  connectionID: this.connectionID,
+                  tableName: table.table_name,
+                  requstedPage: 1,
+                  chunkSize: 30,
+                  filters
+                }).subscribe((res) => {
+                  let fieldsOrder = [];
+
+                  if (res.identity_column && res.list_fields.length && res.list_fields.includes(res.identity_column)) {
+                    const identityIndex = res.list_fields.indexOf(res.identity_column);
+                    fieldsOrder = res.list_fields.splice(identityIndex, 1);
+                    fieldsOrder.slice(0, 3)
+                  }
+
+                  if (res.identity_column && res.list_fields.length && !res.list_fields.includes(res.identity_column)) {
+                    fieldsOrder = res.list_fields.slice(0, 2);
+                    fieldsOrder.unshift(res.identity_column);
+                  }
+
+                  if (res.identity_column && !res.list_fields.length) {
+                    fieldsOrder = res.structure.slice(0, 3).map((field: TableField) => field.column_name);
+                    fieldsOrder.unshift(res.identity_column);
+                  }
+
+                  if (!res.identity_column && res.list_fields.length) {
+                    fieldsOrder = res.list_fields.slice(0, 3);
+                  }
+
+                  if (!res.identity_column && !res.list_fields.length) {
+                    fieldsOrder = res.structure.slice(0, 3).map((field: TableField) => field.column_name);
+                  }
+
+                  const tableRecords = {
+                    rows: res.rows,
+                    fieldsOrder,
+                    list_fields: res.list_fields,
+                    identity_column: res.identity_column
+                  }
+                  this.referencedRecords[table.table_name] = tableRecords;
+                });
+              });
             }
 
             this.loading = false;