gh-458 Fix summary metadata table to support filters and sorting

MauroDataMapper · Jan 31, 2023 · 712db58 · 712db58
1 parent f315cfb
commit 712db58
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 63 deletions.
diff --git a/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.ts b/src/app/admin/subscribed-catalogue/subscribed-catalogue.component.ts
@@ -146,7 +146,8 @@ export class SubscribedCatalogueComponent implements OnInit {
       url: this.url.value,
       subscribedCatalogueType: this.type.value,
       apiKey: this.apiKey.value,
-      refreshPeriod: this.refreshPeriod.value
+      refreshPeriod: this.refreshPeriod.value,
+      subscribedCatalogueAuthenticationType: ''
     };
 
     const request$: Observable<SubscribedCatalogueResponse> = this.isCreating

diff --git a/src/app/shared/summary-metadata/summary-metadata-table/summary-metadata-table.component.html b/src/app/shared/summary-metadata/summary-metadata-table/summary-metadata-table.component.html
@@ -34,7 +34,7 @@ <h4 class="marginless">
     [dataSource]="records"
     class="mdm--mat-table mat-elevation-z3 table-striped"
   >
-    <ng-container matColumnDef="name">
+    <ng-container matColumnDef="label">
       <th
         mat-header-cell
         *matHeaderCellDef
@@ -46,7 +46,7 @@ <h4 class="marginless">
         <div [hidden]="hideFilters">
           <mat-form-field class="filter" floatLabel="never">
             <mat-label>Name</mat-label>
-            <input #filters matInput name="name" (keyup)="applyFilter()" />
+            <input #filters matInput name="label" (keyup)="applyFilter()" />
           </mat-form-field>
         </div>
       </th>

diff --git a/src/app/shared/summary-metadata/summary-metadata-table/summary-metadata-table.component.ts b/src/app/shared/summary-metadata/summary-metadata-table/summary-metadata-table.component.ts
@@ -29,11 +29,12 @@ import {
 import { MdmResourcesService } from '@mdm/modules/resources';
 import { merge } from 'rxjs';
 import { catchError, map, startWith, switchMap } from 'rxjs/operators';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, SortDirection } from '@angular/material/sort';
 import { MatDialog } from '@angular/material/dialog';
 import { MatInput } from '@angular/material/input';
 import { MdmPaginatorComponent } from '@mdm/shared/mdm-paginator/mdm-paginator';
 import { SummaryMetadataPopupComponent } from '../summary-metadata-popup/summary-metadata-popup.component';
+import { GridService } from '@mdm/services';
 
 @Component({
   selector: 'mdm-summary-metadata-table',
@@ -44,93 +45,134 @@ export class SummaryMetadataTableComponent implements AfterViewInit {
   @Input() parent: any;
   @Input() domainType: any;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
-  @ViewChild(MdmPaginatorComponent, { static: true }) paginator: MdmPaginatorComponent;
+  @ViewChild(MdmPaginatorComponent, { static: true })
+  paginator: MdmPaginatorComponent;
   @ViewChildren('filters') filters: QueryList<MatInput>;
 
   hideFilters = true;
-  displayedColumns: string[] = ['name', 'description'];
+  displayedColumns: string[] = ['label', 'description'];
   totalItemCount = 0;
   isLoadingResults = true;
   filterEvent = new EventEmitter<any>();
   filter: {};
   records: any[] = [];
 
-
   result: any;
 
   constructor(
     private changeRef: ChangeDetectorRef,
     private resources: MdmResourcesService,
-    protected matDialog: MatDialog
-  ) { }
-
+    protected matDialog: MatDialog,
+    private grid: GridService
+  ) {}
 
   ngAfterViewInit() {
     this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
     this.filterEvent.subscribe(() => (this.paginator.pageIndex = 0));
 
-    merge(this.sort.sortChange, this.paginator.page, this.filterEvent).pipe(startWith({}), switchMap(() => {
-      this.isLoadingResults = true;
-      this.changeRef.detectChanges();
-      return this.summaryMetadataFetch();
-    }),
-      map((data: any) => {
-        this.totalItemCount = data.body.count;
-        this.isLoadingResults = false;
-        this.changeRef.detectChanges();
-        return data.body.items;
-      }),
-      catchError(() => {
-        this.isLoadingResults = false;
+    merge(this.sort.sortChange, this.paginator.page, this.filterEvent)
+      .pipe(
+        startWith({}),
+        switchMap(() => {
+          this.isLoadingResults = true;
+          this.changeRef.detectChanges();
+          return this.summaryMetadataFetch(
+            this.paginator.pageSize,
+            this.paginator.pageOffset,
+            this.sort.active,
+            this.sort.direction,
+            this.filter
+          );
+        }),
+        map((data: any) => {
+          this.totalItemCount = data.body.count;
+          this.isLoadingResults = false;
+          this.changeRef.detectChanges();
+          return data.body.items;
+        }),
+        catchError(() => {
+          this.isLoadingResults = false;
+          this.changeRef.detectChanges();
+          return [];
+        })
+      )
+      .subscribe((data) => {
+        this.summaryMetadataReports(data);
         this.changeRef.detectChanges();
-        return [];
-      })
-    ).subscribe(data => {
-      this.summaryMetadataReports(data);
-      this.changeRef.detectChanges();
-    });
+      });
   }
 
-  summaryMetadataFetch = () => {
-    return this.resources.summaryMetadata.list(this.domainType, this.parent.id);
-  };
+  summaryMetadataFetch(
+    pageSize?: number,
+    pageIndex?: number,
+    sortBy?: string,
+    sortType?: SortDirection,
+    filter?: {}
+  ) {
+    const options = this.grid.constructOptions(
+      pageSize,
+      pageIndex,
+      sortBy,
+      sortType,
+      filter
+    );
+
+    return this.resources.summaryMetadata.list(
+      this.domainType,
+      this.parent.id,
+      options
+    );
+  }
 
-  summaryMetadataReports = data => {
+  summaryMetadataReports = (data) => {
     const output = [];
     let promise = Promise.resolve();
     data.forEach((item: any) => {
-      promise = promise.then(async () => {
-        await this.resources.summaryMetadata.listReports(this.domainType, this.parent.id, item.id).toPromise().then(response => {
-          if (item.summaryMetadataType && item.summaryMetadataType.toLowerCase() === 'map') {
-            item.summaryMetadataType = 'map';
-            response.body.items.forEach(report => {
-              report.reportValue = JSON.parse(report.reportValue);
-              report.reportDate = report.reportDate.substring(0, 10);
-            });
-          } else if (item.summaryMetadataType && item.summaryMetadataType.toLowerCase() === 'number') {
-            item.summaryMetadataType = 'number';
-            response.body.items.forEach(report => {
-              report.reportValue = parseInt(report.reportValue, 10);
-              report.reportDate = report.reportDate.substring(0, 10);
+      promise = promise
+        .then(async () => {
+          await this.resources.summaryMetadata
+            .listReports(this.domainType, this.parent.id, item.id)
+            .toPromise()
+            .then((response) => {
+              if (
+                item.summaryMetadataType &&
+                item.summaryMetadataType.toLowerCase() === 'map'
+              ) {
+                item.summaryMetadataType = 'map';
+                response.body.items.forEach((report) => {
+                  report.reportValue = JSON.parse(report.reportValue);
+                  report.reportDate = report.reportDate.substring(0, 10);
+                });
+              } else if (
+                item.summaryMetadataType &&
+                item.summaryMetadataType.toLowerCase() === 'number'
+              ) {
+                item.summaryMetadataType = 'number';
+                response.body.items.forEach((report) => {
+                  report.reportValue = parseInt(report.reportValue, 10);
+                  report.reportDate = report.reportDate.substring(0, 10);
+                });
+              }
+              output.push({
+                id: item.id,
+                label: item.label,
+                description: item.description,
+                lastUpdated: item.lastUpdated,
+                summaryMetadataType: item.summaryMetadataType,
+                summaryMetadataReports: response.body.items
+              });
             });
-          }
-          output.push({
-            id: item.id,
-            label: item.label,
-            description: item.description,
-            lastUpdated: item.lastUpdated,
-            summaryMetadataType: item.summaryMetadataType,
-            summaryMetadataReports: response.body.items,
-          });
+        })
+        .catch((err) => {
+          console.log(err);
         });
-      }).catch(err => {
-        console.log(err);
-      });
     });
 
-    promise.then(() => {
-      this.records = output;
-    }).catch(() => console.log('error'));
+    promise
+      .then(() => {
+        this.records = output;
+      })
+      .catch(() => console.log('error'));
   };
 
   applyFilter = () => {
@@ -139,7 +181,7 @@ export class SummaryMetadataTableComponent implements AfterViewInit {
       const name = x.nativeElement.name;
       const value = x.nativeElement.value;
       if (value !== '') {
-       filter[name] = value;
+        filter[name] = value;
       }
     });
     this.filter = filter;

diff --git a/...ibed-catalogues/subscribed-catalogue-detail/subscribed-catalogue-detail.component.spec.ts b/...ibed-catalogues/subscribed-catalogue-detail/subscribed-catalogue-detail.component.spec.ts
@@ -36,7 +36,8 @@ describe('SubscribedCatalogueDetailComponent', () => {
     component.subscribedCatalogue = {
       url: '',
       label: '',
-      subscribedCatalogueType: 'test'
+      subscribedCatalogueType: 'test',
+      subscribedCatalogueAuthenticationType: ''
     };
     fixture.detectChanges();
   });