refactor(Sample-Datasets): replace old table with dynamic-mat-table and fix pagination bugs

src/app/samples/sample-detail/sample-detail.component.html

@@ -164,20 +164,23 @@
 
     <mat-tab>
       <ng-template mat-tab-label>
-        <mat-icon> folder </mat-icon> Datasets
+        <mat-icon> folder </mat-icon> Related Datasets
       </ng-template>
 
       <div class="datasets-table">
-        <app-table
-          [data]="tableData"
-          [columns]="tableColumns"
-          [paginate]="tablePaginate"
-          [currentPage]="vm.datasetsPage"
-          [dataCount]="vm.datasetsCount"
-          [dataPerPage]="vm.datasetsPerPage"
-          (pageChange)="onPageChange($event)"
-          (rowClick)="onRowClick($event)"
-        ></app-table>
+        <dynamic-mat-table
+          [columns]="columns"
+          [dataSource]="dataSource"
+          [setting]="setting"
+          [pagingMode]="paginationMode"
+          [pagination]="pagination"
+          [rowSelectionMode]="rowSelectionMode"
+          [showGlobalTextSearch]="false"
+          [emptyMessage]="'No datasets available'"
+          [emptyIcon]="'folder'"
+          (paginationChange)="onPaginationChange($event)"
+          (onRowEvent)="onRowEvent($event)"
+        ></dynamic-mat-table>
       </div>
     </mat-tab>
   </mat-tab-group>

src/app/samples/sample-detail/sample-detail.component.spec.ts

@@ -16,7 +16,6 @@ import {
   waitForAsync,
 } from "@angular/core/testing";
 import { NgxJsonViewerModule } from "ngx-json-viewer";
-import { PageChangeEvent } from "shared/modules/table/table.component";
 import {
   changeDatasetsPageAction,
   fetchSampleDatasetsAction,
@@ -36,10 +35,15 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatTabsModule } from "@angular/material/tabs";
 import { FlexLayoutModule } from "@ngbracket/ngx-layout";
 import { AppConfigService } from "app-config.service";
-import {
-  DatasetClass,
-  ReturnedUserDto,
-} from "@scicatproject/scicat-sdk-ts-angular";
+import { ReturnedUserDto } from "@scicatproject/scicat-sdk-ts-angular";
+import { RowEventType } from "shared/modules/dynamic-material-table/models/table-row.model";
+import { TablePagination } from "shared/modules/dynamic-material-table/models/table-pagination.model";
+import { JsonHeadPipe } from "shared/pipes/json-head.pipe";
+import { provideMockStore } from "@ngrx/store/testing";
+import { selectSampleDetailPageViewModel } from "state-management/selectors/samples.selectors";
+import { selectColumnsWithHasFetchedSettings } from "state-management/selectors/user.selectors";
+import { DatasetsListService } from "shared/services/datasets-list.service";
+import { MockDatasetsListService } from "shared/MockStubs";
 
 const getConfig = () => ({
   editMetadataEnabled: true,
@@ -69,7 +73,35 @@ describe("SampleDetailComponent", () => {
         SharedScicatFrontendModule,
         StoreModule.forRoot({}),
       ],
-      providers: [DatePipe, FileSizePipe, SlicePipe],
+      providers: [
+        DatePipe,
+        FileSizePipe,
+        SlicePipe,
+        JsonHeadPipe,
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectSampleDetailPageViewModel,
+              value: {
+                sample: mockSample,
+                user: null,
+                attachments: [],
+                datasets: [],
+                datasetsPage: 0,
+                datasetsPerPage: 25,
+                datasetsCount: 0,
+              },
+            },
+            {
+              selector: selectColumnsWithHasFetchedSettings,
+              value: {
+                columns: [],
+                hasFetchedSettings: true,
+              },
+            },
+          ],
+        }),
+      ],
     });
     TestBed.overrideComponent(SampleDetailComponent, {
       set: {
@@ -82,6 +114,7 @@ describe("SampleDetailComponent", () => {
           },
           { provide: Router, useValue: router },
           { provide: ActivatedRoute, useClass: MockActivatedRoute },
+          { provide: DatasetsListService, useClass: MockDatasetsListService },
         ],
       },
     });
@@ -106,21 +139,6 @@ describe("SampleDetailComponent", () => {
     expect(component).toBeTruthy();
   });
 
-  describe("#formatTableData()", () => {
-    it("should return empty array if there are no datasets", () => {
-      const data = component.formatTableData(null);
-
-      expect(data).toEqual([]);
-    });
-
-    it("should return an array of data objects if there are datasets", () => {
-      const datasets = [mockDataset];
-      const data = component.formatTableData(datasets);
-
-      expect(data.length).toEqual(1);
-    });
-  });
-
   describe("#onSaveCharacteristics()", () => {
     it("should dispatch a saveCharacteristicsAction", () => {
       dispatchSpy = spyOn(store, "dispatch");
@@ -204,20 +222,20 @@ describe("SampleDetailComponent", () => {
     });
   });
 
-  describe("#onPageChange()", () => {
+  describe("#onPaginationChange()", () => {
     it("should dispatch a changeDatasetsPageAction and a fetchSampleDatasetsAction", () => {
       dispatchSpy = spyOn(store, "dispatch");
 
       const sample = mockSample;
       sample.sampleId = "testId";
       component.sample = sample;
-      const event: PageChangeEvent = {
+      const event: TablePagination = {
         pageIndex: 1,
         pageSize: 25,
         length: 25,
       };
 
-      component.onPageChange(event);
+      component.onPaginationChange(event);
 
       expect(dispatchSpy).toHaveBeenCalledTimes(2);
       expect(dispatchSpy).toHaveBeenCalledWith(
@@ -232,12 +250,15 @@ describe("SampleDetailComponent", () => {
     });
   });
 
-  describe("#onRowClick()", () => {
+  describe("#onRowEvent()", () => {
     it("should navigate to a dataset", () => {
       const dataset = mockDataset;
       dataset.pid = "testId";
 
-      component.onRowClick(dataset as DatasetClass);
+      component.onRowEvent({
+        event: RowEventType.RowClick,
+        sender: { row: dataset },
+      } as any);
 
       expect(router.navigateByUrl).toHaveBeenCalledTimes(1);
       expect(router.navigateByUrl).toHaveBeenCalledWith(