refactor(PublishedData): replace published data table with dynamic mat table

src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.html

@@ -1,11 +1,19 @@
-<shared-table
+<dynamic-mat-table
+  [tableName]="tableName"
+  [columns]="columns"
   [dataSource]="dataSource"
-  [columnsdef]="columns"
-  [pageSize]="5"
-  (rowClick)="onRowClick($event)"
-  (selectAll)="onSelectAll($event)"
-  (selectOne)="onSelectOne($event)"
-  (shareClick)="onShareClick()"
-  [select]="select"
+  [pagination]="pagination"
+  [pagingMode]="paginationMode"
+  [setting]="setting"
+  [pending]="pending"
+  [rowSelectionMode]="rowSelectionMode"
+  [showGlobalTextSearch]="true"
+  [globalTextSearch]="globalTextSearch"
+  [globalTextSearchPlaceholder]="'Title, Creator, DOI...'"
+  (paginationChange)="onPaginationChange($event)"
+  (globalTextSearchChange)="onGlobalTextSearchChange($event)"
+  (globalTextSearchApply)="onGlobalTextSearchAction()"
+  [emptyMessage]="'No published data available'"
+  [emptyIcon]="'folder'"
 >
-</shared-table>
+</dynamic-mat-table>

src/app/publisheddata/publisheddata-dashboard/publisheddata-dashboard.component.ts

@@ -1,21 +1,20 @@
-import { Component, OnInit, OnDestroy, Inject } from "@angular/core";
+import { Component, OnInit, OnDestroy } from "@angular/core";
 import { Store } from "@ngrx/store";
 import { PublishedData } from "@scicatproject/scicat-sdk-ts-angular";
 import { Router } from "@angular/router";
 import { selectPublishedDataDashboardPageViewModel } from "state-management/selectors/published-data.selectors";
-import { CheckboxEvent } from "shared/modules/table/table.component";
-import { Subscription } from "rxjs";
-
-import { MatCheckboxChange } from "@angular/material/checkbox";
-import { DOCUMENT } from "@angular/common";
-import { Message, MessageType } from "state-management/models";
-import { showMessageAction } from "state-management/actions/user.actions";
-import { Column } from "shared/modules/shared-table/shared-table.module";
-import { SciCatDataSource } from "shared/services/scicat.datasource";
+import { BehaviorSubject, Subscription, take } from "rxjs";
 import { AppConfigService } from "app-config.service";
 import { ScicatDataService } from "shared/services/scicat-data-service";
 import { ExportExcelService } from "shared/services/export-excel.service";
-import { SelectionModel } from "@angular/cdk/collections";
+import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model";
+import {
+  TablePagination,
+  TablePaginationMode,
+} from "shared/modules/dynamic-material-table/models/table-pagination.model";
+import { ITableSetting } from "shared/modules/dynamic-material-table/models/table-setting.model";
+import { actionMenu } from "shared/modules/dynamic-material-table/utilizes/default-table-settings";
+import { SciCatDataSource } from "shared/services/scicat.datasource";
 
 @Component({
   selector: "app-publisheddata-dashboard",
@@ -25,143 +24,153 @@ import { SelectionModel } from "@angular/cdk/collections";
 })
 export class PublisheddataDashboardComponent implements OnInit, OnDestroy {
   public vm$ = this.store.select(selectPublishedDataDashboardPageViewModel);
-  columns: Column[] = [
-    {
-      id: "doi",
-      label: "DOI",
-      canSort: true,
-      icon: "fingerprint",
-      matchMode: "contains",
-      hideOrder: 0,
-    },
-    {
-      id: "title",
-      label: "Title",
-      icon: "description",
-      canSort: true,
-      matchMode: "contains",
-      hideOrder: 1,
-    },
-    {
-      id: "creator",
-      label: "Creator",
-      icon: "face",
-      canSort: true,
-      matchMode: "contains",
-      hideOrder: 2,
-    },
-    {
-      id: "status",
-      label: "Status",
-      icon: "face",
-      canSort: true,
-      matchMode: "contains",
-      hideOrder: 3,
-    },
-    {
-      id: "createdBy",
-      icon: "account_circle",
-      label: "Created by",
-      canSort: true,
-      matchMode: "contains",
-      hideOrder: 4,
-    },
-    {
-      id: "createdAt",
-      icon: "date_range",
-      label: "Created at",
-      format: "date",
-      canSort: true,
-      matchMode: "between",
-      hideOrder: 5,
-    },
+
+  columns: TableField<any>[] = [
+    { name: "doi", header: "DOI", index: 0 },
+    { name: "title", header: "Title", index: 1 },
+    { name: "creator", header: "Creator", index: 2 },
+    { name: "status", header: "Status", index: 3 },
+    { name: "createdBy", header: "Created by", index: 4 },
+    { name: "createdAt", header: "Created at", index: 5 },
   ];
+
+  tableName = "publishedDataTable";
+  rowSelectionMode: "single" | "multi" | "none" = "none";
+  paginationMode: TablePaginationMode = "server-side";
+  pending = false;
+  globalTextSearch = "";
+
+  setting: ITableSetting = {
+    visibleActionMenu: actionMenu,
+    settingList: [
+      {
+        visibleActionMenu: actionMenu,
+        isDefaultSetting: true,
+        isCurrentSetting: true,
+        columnSetting: [],
+      },
+    ],
+    rowStyle: {
+      "border-bottom": "1px solid #d2d2d2",
+    },
+  };
+
+  pagination: TablePagination = {
+    pageSize: 5,
+    pageIndex: 0,
+    pageSizeOptions: [5, 10, 25, 100],
+    length: 0,
+  };
+
   tableDefinition = {
     collection: "publishedData",
     columns: this.columns,
     apiVersion: "v4",
   };
-  dataSource: SciCatDataSource;
-  select = true;
 
-  doiBaseUrl = "https://doi.org/";
-  selectedDOIs: string[] = [];
-  filtersSubscription: Subscription = new Subscription();
+  dataSource: BehaviorSubject<PublishedData[]> = new BehaviorSubject<
+    PublishedData[]
+  >([]);
+  scicatDataSource: SciCatDataSource;
+
+  subscriptions: Subscription[] = [];
+  currentFilters: any = {};
 
   constructor(
-    @Inject(DOCUMENT) private document: Document,
     private router: Router,
     private store: Store,
     private appConfigService: AppConfigService,
     private dataService: ScicatDataService,
     private exportService: ExportExcelService,
   ) {
-    this.dataSource = new SciCatDataSource(
+    this.scicatDataSource = new SciCatDataSource(
       this.appConfigService,
       this.dataService,
       this.exportService,
       this.tableDefinition,
     );
   }
 
-  onShareClick() {
-    const selectionBox = this.document.createElement("textarea");
-    selectionBox.style.position = "fixed";
-    selectionBox.style.left = "0";
-    selectionBox.style.top = "0";
-    selectionBox.style.opacity = "0";
-    selectionBox.value = this.selectedDOIs.join("\n");
-    this.document.body.appendChild(selectionBox);
-    selectionBox.focus();
-    selectionBox.select();
-    this.document.execCommand("copy");
-    this.document.body.removeChild(selectionBox);
-
-    const message = new Message(
-      "The selected DOI's have been copied to your clipboard",
-      MessageType.Success,
-      5000,
+  ngOnInit() {
+    this.subscriptions.push(
+      this.vm$.pipe(take(1)).subscribe((vm) => {
+        this.currentFilters = vm.filters;
+        const { skip, limit, sortField } = vm.filters;
+        const pageIndex = skip / limit;
+
+        const [field, direction] = sortField
+          ? sortField.split(" ")
+          : ["", "asc"];
+
+        this.loadData(vm.filters, pageIndex, limit);
+
+        this.pagination = {
+          ...this.pagination,
+          length: vm.count,
+          pageIndex,
+          pageSize: limit,
+        };
+      }),
+    );
+
+    this.subscriptions.push(
+      this.scicatDataSource.connect().subscribe((data) => {
+        this.dataSource.next(data);
+      }),
+    );
+
+    this.subscriptions.push(
+      this.scicatDataSource.count$.subscribe((count) => {
+        this.pagination = { ...this.pagination, length: count };
+      }),
     );
-    this.store.dispatch(showMessageAction({ message }));
   }
 
-  onRowClick(published: PublishedData) {
-    const id = encodeURIComponent(published.doi);
-    this.router.navigateByUrl("/publishedDatasets/" + id);
+  onPaginationChange(pagination: TablePagination) {
+    const pageIndex = pagination.pageIndex;
+    const pageSize = pagination.pageSize;
+    const newFilters = {
+      ...this.currentFilters,
+      skip: pageIndex * pageSize,
+      limit: pageSize,
+    };
+
+    this.loadData(newFilters, pageIndex, pageSize);
   }
 
-  onSelectAll(event: {
-    event: MatCheckboxChange;
-    selection: SelectionModel<any>;
-  }) {
-    if (event.event.checked) {
-      this.selectedDOIs = event.selection.selected.map(
-        ({ doi }) => this.doiBaseUrl + encodeURIComponent(doi),
-      );
-    } else {
-      this.selectedDOIs = [];
-    }
+  onGlobalTextSearchChange(text: string) {
+    this.globalTextSearch = text;
   }
 
-  onSelectOne(checkboxEvent: CheckboxEvent) {
-    const { event, row } = checkboxEvent;
-    const doiUrl = this.doiBaseUrl + encodeURIComponent(row.doi);
-    if (event.checked) {
-      this.selectedDOIs.push(doiUrl);
-    } else {
-      this.selectedDOIs.splice(this.selectedDOIs.indexOf(doiUrl), 1);
-    }
+  onGlobalTextSearchAction() {
+    const newFilters = {
+      ...this.currentFilters,
+      skip: 0,
+      limit: this.pagination.pageSize,
+      globalSearch: this.globalTextSearch || undefined,
+    };
+
+    this.loadData(newFilters, 0, this.pagination.pageSize);
+    this.currentFilters = newFilters;
   }
 
-  ngOnInit() {
-    this.filtersSubscription = this.vm$.subscribe((vm) => {
-      this.router.navigate(["/publishedDatasets"], {
-        queryParams: { args: JSON.stringify(vm.filters) },
-      });
-    });
+  getSort() {
+    const sortField = this.currentFilters.sortField;
+    return sortField ? sortField.split(" ") : ["", "asc"];
+  }
+
+  loadData(filters: any, pageIndex: number, pageSize: number) {
+    const [field, direction] = this.getSort();
+    this.scicatDataSource.loadAllData(
+      filters,
+      field,
+      direction,
+      pageIndex,
+      pageSize,
+    );
   }
 
   ngOnDestroy() {
-    this.filtersSubscription.unsubscribe();
+    this.subscriptions.forEach((sub) => sub.unsubscribe());
   }
 }