diff --git a/cypress/e2e/instruments/instruments-general.cy.js b/cypress/e2e/instruments/instruments-general.cy.js new file mode 100644 index 000000000..66b5eafec --- /dev/null +++ b/cypress/e2e/instruments/instruments-general.cy.js @@ -0,0 +1,206 @@ +const path = require("path"); + +import { testData } from "../../fixtures/testData"; +import { testConfig } from "../../fixtures/testData"; +import { getFormattedFileNamingDate, mergeConfig } from "../../support/utils"; + +describe("Instruments general", () => { + beforeEach(() => { + cy.login(Cypress.env("username"), Cypress.env("password")); + }); + + after(() => { + cy.removeInstruments(); + }); + + describe("Instruments table and details", () => { + it("should be able to see instrument in a table and visit the instrument details page", () => { + const instrument = { + ...testData.instrument, + name: "Cypress test instrument", + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + cy.createInstrument(instrument); + + cy.visit("/instruments"); + + cy.get("mat-table mat-header-row").should("exist"); + + cy.finishedLoading(); + + cy.get("mat-table mat-row").should("contain", instrument.uniqueName); + + cy.get("mat-cell") + .contains(instrument.uniqueName) + .closest("mat-row") + .contains(instrument.name) + .click(); + + cy.url().should("include", `/instruments`); + + cy.contains(instrument.uniqueName); + }); + + it("instrument should have metadata and if not it should be able to add", () => { + const metadataName = "Instrument Metadata Name"; + const metadataValue = "instrument metadata value"; + const instrument = { + ...testData.instrument, + name: "Cypress test instrument", + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + cy.createInstrument(instrument); + + cy.visit("/instruments"); + + cy.finishedLoading(); + + cy.get("mat-cell") + .contains(instrument.uniqueName) + .closest("mat-row") + .contains(instrument.name) + .click(); + + cy.finishedLoading(); + + cy.get('[data-cy="instrument-metadata-card"]').should("exist"); + + cy.get('[data-cy="instrument-metadata-card"] [role="tab"]') + .contains("Edit") + .click(); + + cy.get('[data-cy="add-new-row"]').click(); + + // simulate click event on the drop down + cy.get("mat-select[data-cy=field-type-input]").last().click(); // opens the drop down + + // simulate click event on the drop down item (mat-option) + cy.get("mat-option") + .contains("string") + .then((option) => { + option[0].click(); + }); + + cy.get("[data-cy=metadata-name-input]") + .last() + .focus() + .type(`${metadataName}{enter}`); + cy.get("[data-cy=metadata-value-input]") + .last() + .focus() + .type(`${metadataValue}{enter}`); + + cy.get("button[data-cy=save-changes-button]").click(); + + cy.finishedLoading(); + + cy.reload(); + + cy.finishedLoading(); + + cy.contains(instrument.name); + + cy.get('[data-cy="instrument-metadata-card"]').contains(metadataName, { + matchCase: true, + }); + cy.get('[data-cy="instrument-metadata-card"]').contains(metadataValue, { + matchCase: true, + }); + }); + }); + + describe("Instruments dynamic material table", () => { + it("should be able to sort for instrument in the column sort", () => { + const newInstrument = { + ...testData.instrument, + name: "000 Cypress test instrument", + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + + const newInstrument2 = { + ...testData.instrument, + name: "001 Cypress test instrument", + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + + cy.createInstrument(newInstrument2); + cy.createInstrument(newInstrument); + + cy.visit("/instruments"); + + cy.get("mat-table mat-row") + .first() + .should("not.contain", newInstrument.name); + + cy.get(".mat-sort-header-container").contains("Name").click(); + + cy.get("mat-table mat-row").first().should("contain", newInstrument.name); + + cy.reload(); + + cy.get("mat-table mat-row").first().should("contain", newInstrument.name); + }); + + it("should be able to download table data as a json", () => { + const instrument = { + ...testData.instrument, + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + + cy.createInstrument(instrument); + + cy.visit("/instruments"); + + cy.get("dynamic-mat-table table-menu button").click(); + + cy.get('[role="menu"] button').contains("Save data").click(); + + cy.get('[role="menu"] button').contains("Json file").click(); + + const downloadsFolder = Cypress.config("downloadsFolder"); + const tableName = "instrumentsTable"; + + cy.readFile( + path.join( + downloadsFolder, + `${tableName}${getFormattedFileNamingDate()}.json`, + ), + ).then((actualExport) => { + const foundInstrument = actualExport.find( + (instrument) => instrument.uniqueName === instrument.uniqueName, + ); + + expect(foundInstrument).to.exist; + }); + }); + + it("should be able to download table data as a csv", () => { + const instrument = { + ...testData.instrument, + uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`, + }; + + cy.createInstrument(instrument); + + cy.visit("/instruments"); + + cy.get("dynamic-mat-table table-menu button").click(); + + cy.get('[role="menu"] button').contains("Save data").click(); + + cy.get('[role="menu"] button').contains("CSV file").click(); + + const downloadsFolder = Cypress.config("downloadsFolder"); + const tableName = "instrumentsTable"; + + cy.readFile( + path.join( + downloadsFolder, + `${tableName}${getFormattedFileNamingDate()}.csv`, + ), + ).then((actualExport) => { + expect(actualExport).to.contain(instrument.uniqueName); + }); + }); + }); +}); diff --git a/cypress/fixtures/testData.js b/cypress/fixtures/testData.js index db39dd5b4..cc9a0400e 100644 --- a/cypress/fixtures/testData.js +++ b/cypress/fixtures/testData.js @@ -61,6 +61,15 @@ export const testData = { ownerGroup: "20170251-group", accessGroups: [], }, + instrument: { + uniqueName: "ESS1-1", + name: "ESS1", + customMetadata: { + institute: "An immaginary intitution #1", + department: "An immaginary department #1", + main_user: "ESS", + }, + }, rawDataset: { principalInvestigator: "string", endTime: "2019-10-31T14:44:46.143Z", diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 7811726eb..3c4da2539 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -195,6 +195,29 @@ Cypress.Commands.add("createProposal", (proposal) => { }); }); }); + +Cypress.Commands.add("createInstrument", (instrument) => { + return cy.getCookie("user").then((userCookie) => { + const user = JSON.parse(decodeURIComponent(userCookie.value)); + + cy.getToken().then((token) => { + cy.log("Instrument: " + JSON.stringify(instrument, null, 2)); + cy.log("User: " + JSON.stringify(user, null, 2)); + + cy.request({ + method: "POST", + url: lbBaseUrl + "/Instruments", + headers: { + Authorization: token, + Accept: "application/json", + "Content-Type": "application/json", + }, + body: instrument, + }); + }); + }); +}); + Cypress.Commands.add("updateProposal", (proposalId, updateProposalDto) => { return cy.getCookie("user").then((userCookie) => { const user = JSON.parse(decodeURIComponent(userCookie.value)); @@ -314,6 +337,46 @@ Cypress.Commands.add("removeProposals", () => { }); }); +Cypress.Commands.add("removeInstruments", () => { + cy.login(Cypress.env("username"), Cypress.env("password")); + cy.getToken().then((token) => { + cy.request({ + method: "GET", + url: lbBaseUrl + "/instruments", + headers: { + Authorization: token, + Accept: "application/json", + "Content-Type": "application/json", + }, + }) + .its("body") + .as("instruments"); + + cy.get("@instruments").then((instruments) => { + cy.login( + Cypress.env("secondaryUsername"), + Cypress.env("secondaryPassword"), + ); + cy.getToken().then((token) => { + instruments.forEach((instrument) => { + cy.request({ + method: "DELETE", + url: + lbBaseUrl + + "/instruments/" + + encodeURIComponent(instrument.pid), + headers: { + Authorization: token, + Accept: "application/json", + "Content-Type": "application/json", + }, + }); + }); + }); + }); + }); +}); + Cypress.Commands.add("removeSamples", () => { cy.login(Cypress.env("username"), Cypress.env("password")); cy.getToken().then((token) => { diff --git a/package-lock.json b/package-lock.json index e631ab998..21dfe0830 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "@ngrx/router-store": "^16", "@ngrx/store": "^16", "@ngx-translate/core": "^16.0.4", - "@scicatproject/scicat-sdk-ts-angular": "^4.13.0", + "@scicatproject/scicat-sdk-ts-angular": "^4.14.0", "autolinker": "^4.0.0", "deep-equal": "^2.0.5", "exceljs": "^4.3.0", @@ -5168,10 +5168,9 @@ } }, "node_modules/@scicatproject/scicat-sdk-ts-angular": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@scicatproject/scicat-sdk-ts-angular/-/scicat-sdk-ts-angular-4.13.0.tgz", - "integrity": "sha512-aWiG+KLQBAByZ5lbQRFjexiURCzhYsCKcTfK9Oi8QCwBShWiBcKkU4xUDSe1q/zWeYSAvey2jsxpBSA/tFVbGQ==", - "license": "Unlicense", + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@scicatproject/scicat-sdk-ts-angular/-/scicat-sdk-ts-angular-4.14.0.tgz", + "integrity": "sha512-EK+1Q/Bc0GSEG2yT8I1/fMuxIfjcA1zdCw/sFrMzr0e0XZ9YqKGwqUHCPaSMs5J871swGAHGnErH1AKVyRYeEQ==", "dependencies": { "tslib": "^2.3.0" }, diff --git a/package.json b/package.json index 27092b7af..36034b4a6 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "@ngrx/router-store": "^16", "@ngrx/store": "^16", "@ngx-translate/core": "^16.0.4", - "@scicatproject/scicat-sdk-ts-angular": "^4.13.0", + "@scicatproject/scicat-sdk-ts-angular": "^4.14.0", "autolinker": "^4.0.0", "deep-equal": "^2.0.5", "exceljs": "^4.3.0", diff --git a/src/app/instruments/instrument-details/instrument-details.component.html b/src/app/instruments/instrument-details/instrument-details.component.html index d478b7203..bdaba26a5 100644 --- a/src/app/instruments/instrument-details/instrument-details.component.html +++ b/src/app/instruments/instrument-details/instrument-details.component.html @@ -28,7 +28,10 @@ - +
science diff --git a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.html b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.html index 4fda02df8..b23412ca6 100644 --- a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.html +++ b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.html @@ -1,17 +1,18 @@ - -
-
- -
-
- + + diff --git a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts index 251df08d1..246a6113d 100644 --- a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts +++ b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.spec.ts @@ -1,28 +1,20 @@ -import { - ComponentFixture, - TestBed, - inject, - waitForAsync, -} from "@angular/core/testing"; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { InstrumentsDashboardComponent } from "./instruments-dashboard.component"; -import { MockStore, mockInstrument } from "shared/MockStubs"; +import { MockActivatedRoute, mockInstrument } from "shared/MockStubs"; import { NO_ERRORS_SCHEMA } from "@angular/core"; import { provideMockStore } from "@ngrx/store/testing"; -import { selectInstrumentsDashboardPageViewModel } from "state-management/selectors/instruments.selectors"; -import { Store } from "@ngrx/store"; +import { selectInstrumentsWithCountAndTableSettings } from "state-management/selectors/instruments.selectors"; import { SharedScicatFrontendModule } from "shared/shared.module"; -import { JsonHeadPipe } from "shared/pipes/json-head.pipe"; -import { - PageChangeEvent, - SortChangeEvent, -} from "shared/modules/table/table.component"; -import { - changePageAction, - sortByColumnAction, -} from "state-management/actions/instruments.actions"; -import { Router } from "@angular/router"; +import { SortChangeEvent } from "shared/modules/table/table.component"; +import { ActivatedRoute, Router } from "@angular/router"; import { FlexLayoutModule } from "@ngbracket/ngx-layout"; +import { + RowEventType, + TableEventType, +} from "shared/modules/dynamic-material-table/models/table-row.model"; +import { TablePagination } from "shared/modules/dynamic-material-table/models/table-pagination.model"; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; describe("InstrumentsDashboardComponent", () => { let component: InstrumentsDashboardComponent; @@ -30,26 +22,27 @@ describe("InstrumentsDashboardComponent", () => { const router = { navigateByUrl: jasmine.createSpy("navigateByUrl"), + navigate: jasmine.createSpy("navigate"), }; - let store: MockStore; - let dispatchSpy; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ schemas: [NO_ERRORS_SCHEMA], declarations: [InstrumentsDashboardComponent], - imports: [FlexLayoutModule, SharedScicatFrontendModule], + imports: [ + FlexLayoutModule, + SharedScicatFrontendModule, + BrowserAnimationsModule, + ], providers: [ - JsonHeadPipe, provideMockStore({ selectors: [ { - selector: selectInstrumentsDashboardPageViewModel, + selector: selectInstrumentsWithCountAndTableSettings, value: { instruments: [], - currentPage: 0, - instrumentsCount: 100, - instrumentsPerPage: 25, + count: 100, + tableSettings: {}, }, }, ], @@ -58,7 +51,10 @@ describe("InstrumentsDashboardComponent", () => { }); TestBed.overrideComponent(InstrumentsDashboardComponent, { set: { - providers: [{ provide: Router, useValue: router }], + providers: [ + { provide: Router, useValue: router }, + { provide: ActivatedRoute, useClass: MockActivatedRoute }, + ], }, }); TestBed.compileComponents(); @@ -70,10 +66,6 @@ describe("InstrumentsDashboardComponent", () => { fixture.detectChanges(); }); - beforeEach(inject([Store], (mockStore: MockStore) => { - store = mockStore; - })); - afterEach(() => { fixture.destroy(); }); @@ -83,43 +75,53 @@ describe("InstrumentsDashboardComponent", () => { }); describe("#onPageChange()", () => { - it("should dispatch a changePageAction", () => { - dispatchSpy = spyOn(store, "dispatch"); - - const event: PageChangeEvent = { + it("should dispatch a fetchInstrumentsAction", () => { + router.navigate.calls.reset(); + const event: TablePagination = { pageIndex: 0, pageSize: 25, length: 100, }; - const { pageIndex: page, pageSize: limit } = event; + const { pageIndex, pageSize } = event; - component.onPageChange(event); + component.onPaginationChange(event); - expect(dispatchSpy).toHaveBeenCalledTimes(1); - expect(dispatchSpy).toHaveBeenCalledWith( - changePageAction({ page, limit }), - ); + expect(router.navigate).toHaveBeenCalledTimes(1); + expect(router.navigate).toHaveBeenCalledWith([], { + queryParams: { + pageIndex, + pageSize, + }, + queryParamsHandling: "merge", + }); }); }); - describe("#onSortChange()", () => { - it("should dispatch a sortByColumnAction", () => { - dispatchSpy = spyOn(store, "dispatch"); - + describe("#onTableEvent()", () => { + it("should dispatch a fetchInstrumentsAction", () => { + router.navigate.calls.reset(); const event: SortChangeEvent = { active: "test", direction: "asc", }; - const { active: column, direction } = event; - - component.onSortChange(event); - - expect(dispatchSpy).toHaveBeenCalledTimes(1); - expect(dispatchSpy).toHaveBeenCalledWith( - sortByColumnAction({ column, direction }), - ); + const { active: sortColumn, direction: sortDirection } = event; + + component.onTableEvent({ + event: TableEventType.SortChanged, + sender: event, + }); + + expect(router.navigate).toHaveBeenCalledTimes(1); + expect(router.navigate).toHaveBeenCalledWith([], { + queryParams: { + pageIndex: 0, + sortDirection: sortDirection || undefined, + sortColumn: sortDirection ? sortColumn : undefined, + }, + queryParamsHandling: "merge", + }); }); }); @@ -128,7 +130,10 @@ describe("InstrumentsDashboardComponent", () => { const instrument = mockInstrument; const pid = encodeURIComponent(instrument.pid); - component.onRowClick(instrument); + component.onRowClick({ + event: RowEventType.RowClick, + sender: { row: instrument }, + }); expect(router.navigateByUrl).toHaveBeenCalledTimes(1); expect(router.navigateByUrl).toHaveBeenCalledWith("/instruments/" + pid); diff --git a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.ts b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.ts index 53f0f2d69..639f95924 100644 --- a/src/app/instruments/instruments-dashboard/instruments-dashboard.component.ts +++ b/src/app/instruments/instruments-dashboard/instruments-dashboard.component.ts @@ -1,65 +1,256 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, OnDestroy, OnInit } from "@angular/core"; import { Store } from "@ngrx/store"; import { Instrument } from "@scicatproject/scicat-sdk-ts-angular"; +import { ActivatedRoute, Router } from "@angular/router"; import { - fetchInstrumentsAction, - changePageAction, - sortByColumnAction, -} from "state-management/actions/instruments.actions"; -import { selectInstrumentsDashboardPageViewModel } from "state-management/selectors/instruments.selectors"; + ITableSetting, + TableSettingEventType, +} from "shared/modules/dynamic-material-table/models/table-setting.model"; import { - TableColumn, - PageChangeEvent, - SortChangeEvent, -} from "shared/modules/table/table.component"; -import { map } from "rxjs/operators"; -import { JsonHeadPipe } from "shared/pipes/json-head.pipe"; -import { Router } from "@angular/router"; + actionMenu, + getTableSettingsConfig, +} from "shared/modules/dynamic-material-table/utilizes/default-table-config"; +import { BehaviorSubject, Subscription } from "rxjs"; +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 { + IRowEvent, + ITableEvent, + RowEventType, + TableEventType, + TableSelectionMode, +} from "shared/modules/dynamic-material-table/models/table-row.model"; +import { fetchInstrumentsAction } from "state-management/actions/instruments.actions"; +import { updateUserSettingsAction } from "state-management/actions/user.actions"; +import { Sort } from "@angular/material/sort"; +import { selectInstrumentsWithCountAndTableSettings } from "state-management/selectors/instruments.selectors"; + +const tableDefaultSettingsConfig: ITableSetting = { + visibleActionMenu: actionMenu, + settingList: [ + { + visibleActionMenu: actionMenu, + isDefaultSetting: true, + isCurrentSetting: true, + columnSetting: [ + { + name: "uniqueName", + icon: "scanner", + }, + { + name: "name", + icon: "fingerprint", + }, + ], + }, + ], + rowStyle: { + "border-bottom": "1px solid #d2d2d2", + }, +}; @Component({ selector: "app-instruments-dashboard", templateUrl: "./instruments-dashboard.component.html", styleUrls: ["./instruments-dashboard.component.scss"], }) -export class InstrumentsDashboardComponent implements OnInit { - vm$ = this.store.select(selectInstrumentsDashboardPageViewModel).pipe( - map((vm) => ({ - ...vm, - instruments: vm.instruments.map((instrument) => ({ - ...instrument, - customMetadata: this.jsonHeadPipe.transform(instrument.customMetadata), - })), - })), +export class InstrumentsDashboardComponent implements OnInit, OnDestroy { + instrumentsWithCountAndTableSettings$ = this.store.select( + selectInstrumentsWithCountAndTableSettings, + ); + + subscriptions: Subscription[] = []; + + tableName = "instrumentsTable"; + + columns: TableField[]; + + pending = true; + + setting: ITableSetting = {}; + + paginationMode: TablePaginationMode = "server-side"; + + dataSource: BehaviorSubject = new BehaviorSubject( + [], ); - tablePaginate = true; - tableColumns: TableColumn[] = [ - { name: "uniqueName", icon: "scanner", sort: true, inList: true }, - { name: "name", icon: "fingerprint", sort: true, inList: true }, - ]; + pagination: TablePagination = {}; + + rowSelectionMode: TableSelectionMode = "none"; + + showGlobalTextSearch = false; + + defaultPageSize = 10; + + defaultPageSizeOptions = [5, 10, 25, 100]; + + tablesSettings: object; constructor( - private jsonHeadPipe: JsonHeadPipe, - private router: Router, private store: Store, + private router: Router, + private route: ActivatedRoute, ) {} - onPageChange(event: PageChangeEvent): void { - const { pageIndex: page, pageSize: limit } = event; - this.store.dispatch(changePageAction({ page, limit })); + ngOnInit(): void { + this.subscriptions.push( + this.instrumentsWithCountAndTableSettings$.subscribe( + ({ instruments, count, tablesSettings }) => { + this.tablesSettings = tablesSettings; + this.dataSource.next(instruments); + this.pending = false; + + const savedTableConfigColumns = + tablesSettings?.[this.tableName]?.columns; + const tableSort = this.getTableSort(); + const paginationConfig = this.getTablePaginationConfig(count); + + const tableSettingsConfig = getTableSettingsConfig( + this.tableName, + tableDefaultSettingsConfig, + savedTableConfigColumns, + tableSort, + ); + + if (tableSettingsConfig?.settingList.length) { + this.initTable(tableSettingsConfig, paginationConfig); + } + }, + ), + ); + + this.subscriptions.push( + this.route.queryParams.subscribe((queryParams) => { + this.pending = true; + const limit = queryParams.pageSize + ? +queryParams.pageSize + : this.defaultPageSize; + const skip = queryParams.pageIndex ? +queryParams.pageIndex * limit : 0; + + this.store.dispatch( + fetchInstrumentsAction({ + limit: limit, + skip: skip, + sortColumn: queryParams.sortColumn, + sortDirection: queryParams.sortDirection, + }), + ); + }), + ); + } + + getTableSort(): ITableSetting["tableSort"] { + const { queryParams } = this.route.snapshot; + + if (queryParams.sortDirection && queryParams.sortColumn) { + return { + sortColumn: queryParams.sortColumn, + sortDirection: queryParams.sortDirection, + }; + } + + return null; + } + + getTablePaginationConfig(dataCount = 0): TablePagination { + const { queryParams } = this.route.snapshot; + + return { + pageSizeOptions: this.defaultPageSizeOptions, + pageIndex: queryParams.pageIndex, + pageSize: queryParams.pageSize || this.defaultPageSize, + length: dataCount, + }; + } + + initTable( + settingConfig: ITableSetting, + paginationConfig: TablePagination, + ): void { + const currentColumnSetting = settingConfig.settingList.find( + (s) => s.isCurrentSetting, + )?.columnSetting; + + this.columns = currentColumnSetting; + this.setting = settingConfig; + this.pagination = paginationConfig; } - onSortChange(event: SortChangeEvent): void { - const { active: column, direction } = event; - this.store.dispatch(sortByColumnAction({ column, direction })); + onPaginationChange(pagination: TablePagination) { + this.router.navigate([], { + queryParams: { + pageIndex: pagination.pageIndex, + pageSize: pagination.pageSize, + }, + queryParamsHandling: "merge", + }); } - onRowClick(instrument: Instrument): void { - const pid = encodeURIComponent(instrument.pid); - this.router.navigateByUrl("/instruments/" + pid); + saveTableSettings(setting: ITableSetting) { + this.pending = true; + const columnsSetting = setting.columnSetting.map((column) => { + const { name, display, index, width } = column; + + return { name, display, index, width }; + }); + + const tablesSettings = { + ...this.tablesSettings, + [setting.settingName || this.tableName]: { + columns: columnsSetting, + }, + }; + + this.store.dispatch( + updateUserSettingsAction({ + property: { + tablesSettings, + }, + }), + ); + } + + onSettingChange(event: { + type: TableSettingEventType; + setting: ITableSetting; + }) { + if ( + event.type === TableSettingEventType.save || + event.type === TableSettingEventType.create + ) { + this.saveTableSettings(event.setting); + } + } + + onRowClick(event: IRowEvent) { + if (event.event === RowEventType.RowClick) { + const id = encodeURIComponent(event.sender.row.pid); + this.router.navigateByUrl("/instruments/" + id); + } + } + + onTableEvent({ event, sender }: ITableEvent) { + if (event === TableEventType.SortChanged) { + const { active: sortColumn, direction: sortDirection } = sender as Sort; + + this.router.navigate([], { + queryParams: { + pageIndex: 0, + sortDirection: sortDirection || undefined, + sortColumn: sortDirection ? sortColumn : undefined, + }, + queryParamsHandling: "merge", + }); + } } - ngOnInit() { - this.store.dispatch(fetchInstrumentsAction()); + ngOnDestroy() { + this.subscriptions.forEach((sub) => { + sub.unsubscribe(); + }); } } diff --git a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts index e04620099..c2eba8c9b 100644 --- a/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts +++ b/src/app/proposals/proposal-dashboard/proposal-dashboard.component.spec.ts @@ -3,9 +3,7 @@ import { ActivatedRoute, Router } from "@angular/router"; import { AppConfigService } from "app-config.service"; import { MockActivatedRoute, - MockAppConfigService, MockRouter, - MockScicatDataSource, MockStore, MockDatasetApi, MockHttp, diff --git a/src/app/samples/sample-dashboard/sample-dashboard.component.html b/src/app/samples/sample-dashboard/sample-dashboard.component.html index c7694a8fc..5bf4a9ed2 100644 --- a/src/app/samples/sample-dashboard/sample-dashboard.component.html +++ b/src/app/samples/sample-dashboard/sample-dashboard.component.html @@ -19,7 +19,6 @@
- + +
diff --git a/src/app/samples/sample-dashboard/sample-dashboard.component.scss b/src/app/samples/sample-dashboard/sample-dashboard.component.scss index e2c08e366..4b7b58306 100644 --- a/src/app/samples/sample-dashboard/sample-dashboard.component.scss +++ b/src/app/samples/sample-dashboard/sample-dashboard.component.scss @@ -1,6 +1,6 @@ @media only screen and (min-width: 1280px) { .big-search { - margin: 4em 1em 1em 0; + margin: 0em 1em; .title { font-size: 1.25em; diff --git a/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts b/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts index 629f5e554..a792c5a32 100644 --- a/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts +++ b/src/app/samples/sample-dashboard/sample-dashboard.component.spec.ts @@ -28,6 +28,10 @@ import { MatButtonModule } from "@angular/material/button"; import { MatIconModule } from "@angular/material/icon"; import { MatChipsModule } from "@angular/material/chips"; import { AppConfigService } from "app-config.service"; +import { + RowEventType, + TableEventType, +} from "shared/modules/dynamic-material-table/models/table-row.model"; const getConfig = () => ({ addSampleEnabled: true, @@ -142,7 +146,7 @@ describe("SampleDashboardComponent", () => { pageSize: 25, length: 25, }; - component.onPageChange(event); + component.onPaginationChange(event); expect(dispatchSpy).toHaveBeenCalledTimes(1); expect(dispatchSpy).toHaveBeenCalledWith( @@ -155,17 +159,17 @@ describe("SampleDashboardComponent", () => { it("should dispatch a SampleSortByColumnAction", () => { dispatchSpy = spyOn(store, "dispatch"); - const event: SortChangeEvent = { + const sender: SortChangeEvent = { active: "test", direction: "asc", }; - component.onSortChange(event); + component.onTableEvent({ event: TableEventType.SortChanged, sender }); expect(dispatchSpy).toHaveBeenCalledTimes(1); expect(dispatchSpy).toHaveBeenCalledWith( sortByColumnAction({ - column: event.active, - direction: event.direction, + column: sender.active, + direction: sender.direction, }), ); }); @@ -175,7 +179,10 @@ describe("SampleDashboardComponent", () => { it("should navigate to a sample", () => { const sample = mockSample; - component.onRowClick(sample); + component.onRowClick({ + event: RowEventType.RowClick, + sender: { row: sample }, + }); expect(router.navigateByUrl).toHaveBeenCalledTimes(1); expect(router.navigateByUrl).toHaveBeenCalledWith( diff --git a/src/app/samples/sample-dashboard/sample-dashboard.component.ts b/src/app/samples/sample-dashboard/sample-dashboard.component.ts index bde1becdc..1176b3ede 100644 --- a/src/app/samples/sample-dashboard/sample-dashboard.component.ts +++ b/src/app/samples/sample-dashboard/sample-dashboard.component.ts @@ -11,12 +11,7 @@ import { addCharacteristicsFilterAction, removeCharacteristicsFilterAction, } from "state-management/actions/samples.actions"; -import { - TableColumn, - PageChangeEvent, - SortChangeEvent, -} from "shared/modules/table/table.component"; -import { combineLatest, Subscription } from "rxjs"; +import { BehaviorSubject, combineLatest, Subscription } from "rxjs"; import { selectSampleDashboardPageViewModel } from "state-management/selectors/samples.selectors"; import { DatePipe } from "@angular/common"; import { Router, ActivatedRoute } from "@angular/router"; @@ -28,6 +23,28 @@ import { filter, map, distinctUntilChanged, take } from "rxjs/operators"; import { SampleFilters } from "state-management/models"; import { SearchParametersDialogComponent } from "shared/modules/search-parameters-dialog/search-parameters-dialog.component"; import { AppConfigService } from "app-config.service"; +import { TableField } from "shared/modules/dynamic-material-table/models/table-field.model"; +import { + ITableSetting, + TableSettingEventType, +} from "shared/modules/dynamic-material-table/models/table-setting.model"; +import { + TablePagination, + TablePaginationMode, +} from "shared/modules/dynamic-material-table/models/table-pagination.model"; +import { + IRowEvent, + ITableEvent, + RowEventType, + TableEventType, + TableSelectionMode, +} from "shared/modules/dynamic-material-table/models/table-row.model"; +import { updateUserSettingsAction } from "state-management/actions/user.actions"; +import { Sort } from "@angular/material/sort"; +import { + actionMenu, + getTableSettingsConfig, +} from "shared/modules/dynamic-material-table/utilizes/default-table-config"; @Component({ selector: "sample-dashboard", @@ -37,25 +54,85 @@ import { AppConfigService } from "app-config.service"; export class SampleDashboardComponent implements OnInit, OnDestroy { vm$ = this.store.select(selectSampleDashboardPageViewModel); + tableDefaultSettingsConfig: ITableSetting = { + visibleActionMenu: actionMenu, + settingList: [ + { + visibleActionMenu: actionMenu, + isDefaultSetting: true, + isCurrentSetting: true, + columnSetting: [ + { + name: "sampleId", + icon: "fingerprint", + header: "Sample ID", + }, + { + name: "description", + icon: "description", + }, + { + name: "owner", + icon: "face", + }, + { + name: "createdAt", + header: "Creation time", + icon: "date_range", + customRender: (column, row) => { + return this.datePipe.transform(row[column.name]); + }, + }, + { + name: "ownerGroup", + icon: "group", + }, + ], + }, + ], + rowStyle: { + "border-bottom": "1px solid #d2d2d2", + }, + }; + subscriptions: Subscription[] = []; appConfig = this.appConfigService.getConfig(); metadataKeys: string[] = []; - tableData: any[] = []; - tableColumns: TableColumn[] = [ - { name: "sampleId", icon: "fingerprint", sort: true, inList: false }, - { name: "description", icon: "description", sort: false, inList: true }, - { name: "owner", icon: "face", sort: true, inList: true }, - { name: "creationTime", icon: "date_range", sort: true, inList: true }, - { name: "ownerGroup", icon: "group", sort: false, inList: true }, - ]; - tablePaginate = true; dialogConfig: MatDialogConfig = new MatDialogConfig(); + name = ""; + description = ""; + tableName = "samplesTable"; + + columns: TableField[]; + + pending = true; + + setting: ITableSetting = {}; + + paginationMode: TablePaginationMode = "server-side"; + + dataSource: BehaviorSubject = new BehaviorSubject< + SampleClass[] + >([]); + + pagination: TablePagination = {}; + + rowSelectionMode: TableSelectionMode = "none"; + + showGlobalTextSearch = false; + + defaultPageSize = 10; + + defaultPageSizeOptions = [5, 10, 25, 100]; + + tablesSettings: object; + constructor( private appConfigService: AppConfigService, private datePipe: DatePipe, @@ -65,15 +142,76 @@ export class SampleDashboardComponent implements OnInit, OnDestroy { private store: Store, ) {} + ngOnInit() { + this.store.dispatch(fetchMetadataKeysAction()); + + this.subscriptions.push( + this.vm$.subscribe(({ samples, tableSettings, count }) => { + this.tablesSettings = tableSettings; + this.dataSource.next(samples); + this.pending = false; + + const savedTableConfigColumns = + tableSettings?.[this.tableName]?.columns; + const tableSort = this.getTableSort(); + const paginationConfig = this.getTablePaginationConfig(count); + + const tableSettingsConfig = getTableSettingsConfig( + this.tableName, + this.tableDefaultSettingsConfig, + savedTableConfigColumns, + tableSort, + ); + + if (tableSettingsConfig?.settingList.length) { + this.initTable(tableSettingsConfig, paginationConfig); + } + }), + ); + + this.subscriptions.push( + combineLatest([ + this.vm$.pipe(map((vm) => vm.filters)), + this.vm$.pipe(filter((vm) => vm.hasPrefilledFilters)), + ]) + .pipe( + map(([filters, _]) => filters), + distinctUntilChanged(deepEqual), + ) + .subscribe((filters) => { + this.store.dispatch(fetchSamplesAction()); + this.router.navigate(["/samples"], { + // NOTE: Because of the "characteristic" object we need to additionally wrap the filters using args property and stringify it. + queryParams: { args: JSON.stringify(filters) }, + }); + }), + ); + + this.subscriptions.push( + this.vm$.subscribe((vm) => { + this.metadataKeys = vm.metadataKeys; + }), + ); + + this.subscriptions.push( + this.route.queryParams + .pipe( + map((params) => params.args), + take(1), + map((args) => (args ? (JSON.parse(args) as SampleFilters) : {})), + ) + .subscribe((filters) => + this.store.dispatch(prefillFiltersAction({ values: filters })), + ), + ); + } + formatTableData(samples: SampleClass[]): any { if (samples) { return samples.map((sample) => ({ sampleId: sample.sampleId, owner: sample.owner, - creationTime: this.datePipe.transform( - sample.createdAt, - "yyyy-MM-dd, hh:mm", - ), + createdAt: this.datePipe.transform(sample.createdAt), description: sample.description, ownerGroup: sample.ownerGroup, })); @@ -88,7 +226,9 @@ export class SampleDashboardComponent implements OnInit, OnDestroy { } onTextSearchChange(query: string) { - this.store.dispatch(setTextFilterAction({ text: query })); + if (typeof query === "string") { + this.store.dispatch(setTextFilterAction({ text: query })); + } } openSearchParametersDialog() { @@ -111,69 +251,104 @@ export class SampleDashboardComponent implements OnInit, OnDestroy { this.store.dispatch(removeCharacteristicsFilterAction({ index })); } - onPageChange(event: PageChangeEvent) { - this.store.dispatch( - changePageAction({ page: event.pageIndex, limit: event.pageSize }), - ); - } + getTableSort(): ITableSetting["tableSort"] { + const { queryParams } = this.route.snapshot; + const queryArgsParsed = JSON.parse(queryParams.args); - onSortChange(event: SortChangeEvent) { - if (event.active === "creationTime") { - event.active = "createdAt"; + if (queryArgsParsed.sortField) { + const [sortColumn, sortDirection] = queryArgsParsed.sortField.split(":"); + return { + sortColumn, + sortDirection, + }; } - this.store.dispatch( - sortByColumnAction({ column: event.active, direction: event.direction }), - ); + + return null; } - onRowClick(sample: SampleClass) { - const id = encodeURIComponent(sample.sampleId); - this.router.navigateByUrl("/samples/" + id); + getTablePaginationConfig(dataCount = 0): TablePagination { + const { queryParams } = this.route.snapshot; + const queryArgsParsed = JSON.parse(queryParams.args); + + return { + pageSizeOptions: this.defaultPageSizeOptions, + pageIndex: queryArgsParsed.skip / queryArgsParsed.limit, + pageSize: queryArgsParsed.limit || this.defaultPageSize, + length: dataCount, + }; } - ngOnInit() { - this.store.dispatch(fetchMetadataKeysAction()); + initTable( + settingConfig: ITableSetting, + paginationConfig: TablePagination, + ): void { + const currentColumnSetting = settingConfig.settingList.find( + (s) => s.isCurrentSetting, + )?.columnSetting; - this.subscriptions.push( - this.vm$.subscribe((vm) => { - this.tableData = this.formatTableData(vm.samples); - }), - ); + this.columns = currentColumnSetting; + this.setting = settingConfig; + this.pagination = paginationConfig; + } - this.subscriptions.push( - combineLatest([ - this.vm$.pipe(map((vm) => vm.filters)), - this.vm$.pipe(filter((vm) => vm.hasPrefilledFilters)), - ]) - .pipe( - map(([filters, _]) => filters), - distinctUntilChanged(deepEqual), - ) - .subscribe((filters) => { - this.store.dispatch(fetchSamplesAction()); - this.router.navigate(["/samples"], { - queryParams: { args: JSON.stringify(filters) }, - }); - }), - ); + onPaginationChange({ pageIndex, pageSize }: TablePagination) { + this.store.dispatch(changePageAction({ page: pageIndex, limit: pageSize })); + } - this.subscriptions.push( - this.vm$.subscribe((vm) => { - this.metadataKeys = vm.metadataKeys; + saveTableSettings(setting: ITableSetting) { + this.pending = true; + const columnsSetting = setting.columnSetting.map((column) => { + const { name, display, index, width } = column; + + return { name, display, index, width }; + }); + + const tablesSettings = { + ...this.tablesSettings, + [setting.settingName || this.tableName]: { + columns: columnsSetting, + }, + }; + + this.store.dispatch( + updateUserSettingsAction({ + property: { + tablesSettings, + }, }), ); + } - this.subscriptions.push( - this.route.queryParams - .pipe( - map((params) => params.args as string), - take(1), - map((args) => (args ? (JSON.parse(args) as SampleFilters) : {})), - ) - .subscribe((filters) => - this.store.dispatch(prefillFiltersAction({ values: filters })), - ), - ); + onSettingChange(event: { + type: TableSettingEventType; + setting: ITableSetting; + }) { + if ( + event.type === TableSettingEventType.save || + event.type === TableSettingEventType.create + ) { + this.saveTableSettings(event.setting); + } + } + + onRowClick(event: IRowEvent) { + if (event.event === RowEventType.RowClick) { + const id = encodeURIComponent(event.sender.row.sampleId); + this.router.navigateByUrl("/samples/" + id); + } + } + + onTableEvent({ event, sender }: ITableEvent) { + if (event === TableEventType.SortChanged) { + const { active: column, direction: direction } = sender as Sort; + + this.store.dispatch( + sortByColumnAction({ + column: direction ? column : "", + direction, + }), + ); + } } ngOnDestroy() { diff --git a/src/app/shared/modules/search-bar/search-bar.component.html b/src/app/shared/modules/search-bar/search-bar.component.html index 71103460b..d4d3602ba 100644 --- a/src/app/shared/modules/search-bar/search-bar.component.html +++ b/src/app/shared/modules/search-bar/search-bar.component.html @@ -7,7 +7,6 @@ type="search" [value]="prefilledValue" [matAutocomplete]="options" - (click)="doSearch()" (input)="doSearch()" (keyup)="doSearch()" (focus)="doFocus()" diff --git a/src/app/state-management/actions/instruments.actions.spec.ts b/src/app/state-management/actions/instruments.actions.spec.ts index ee65a919f..312af5b77 100644 --- a/src/app/state-management/actions/instruments.actions.spec.ts +++ b/src/app/state-management/actions/instruments.actions.spec.ts @@ -6,7 +6,7 @@ describe("Instrument Actions", () => { describe("fetchInstrumentsAction", () => { it("should create an action", () => { - const action = fromActions.fetchInstrumentsAction(); + const action = fromActions.fetchInstrumentsAction({}); expect({ ...action }).toEqual({ type: "[Instrument] Fetch Instruments" }); }); @@ -139,34 +139,6 @@ describe("Instrument Actions", () => { }); }); - describe("changePageAction", () => { - it("should create an action", () => { - const page = 0; - const limit = 25; - const action = fromActions.changePageAction({ page, limit }); - - expect({ ...action }).toEqual({ - type: "[Instrument] Change Page", - page, - limit, - }); - }); - }); - - describe("changePageAction", () => { - it("should create an action", () => { - const column = "test"; - const direction = "desc"; - const action = fromActions.sortByColumnAction({ column, direction }); - - expect({ ...action }).toEqual({ - type: "[Instrument] Sort By Column", - column, - direction, - }); - }); - }); - describe("clearInstrumentsStateAction", () => { it("should create an action", () => { const action = fromActions.clearInstrumentsStateAction(); diff --git a/src/app/state-management/actions/instruments.actions.ts b/src/app/state-management/actions/instruments.actions.ts index c10782629..4320d41d2 100644 --- a/src/app/state-management/actions/instruments.actions.ts +++ b/src/app/state-management/actions/instruments.actions.ts @@ -3,6 +3,13 @@ import { Instrument } from "@scicatproject/scicat-sdk-ts-angular"; export const fetchInstrumentsAction = createAction( "[Instrument] Fetch Instruments", + props<{ + skip?: number; + limit?: number; + search?: string; + sortDirection?: string; + sortColumn?: string; + }>(), ); export const fetchInstrumentsCompleteAction = createAction( "[Instrument] Fetch Instruments Complete", @@ -45,16 +52,6 @@ export const saveCustomMetadataFailedAction = createAction( "[Instrument] Save Custom Metadata Failed", ); -export const changePageAction = createAction( - "[Instrument] Change Page", - props<{ page: number; limit: number }>(), -); - -export const sortByColumnAction = createAction( - "[Instrument] Sort By Column", - props<{ column: string; direction: string }>(), -); - export const clearInstrumentsStateAction = createAction( "[Instrument] Clear State", ); diff --git a/src/app/state-management/effects/instruments.effects.spec.ts b/src/app/state-management/effects/instruments.effects.spec.ts index dea4a768e..b64469c01 100644 --- a/src/app/state-management/effects/instruments.effects.spec.ts +++ b/src/app/state-management/effects/instruments.effects.spec.ts @@ -38,6 +38,7 @@ describe("InstrumentEffects", () => { provide: InstrumentsService, useValue: jasmine.createSpyObj("instrumentApi", [ "instrumentsControllerFindAll", + "instrumentsControllerCount", "instrumentsControllerFindById", "instrumentsControllerUpdate", ]), @@ -55,7 +56,7 @@ describe("InstrumentEffects", () => { describe("fetchInstruments$", () => { describe("ofType fetchInstrumentAction", () => { it("should result in a fetchInstrumentsCompleteAction and a fetchCountAction", () => { - const action = fromActions.fetchInstrumentsAction(); + const action = fromActions.fetchInstrumentsAction({}); const outcome1 = fromActions.fetchInstrumentsCompleteAction({ instruments, }); @@ -70,102 +71,7 @@ describe("InstrumentEffects", () => { }); it("should result in a fetchInstrumentsFailedAction", () => { - const action = fromActions.fetchInstrumentsAction(); - const outcome = fromActions.fetchInstrumentsFailedAction(); - - actions = hot("-a", { a: action }); - const response = cold("-#", {}); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--b", { b: outcome }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - }); - - describe("ofType changePageAction", () => { - const page = 0; - const limit = 25; - - it("should result in a fetchInstrumentsCompleteAction and a fetchCountAction", () => { - const action = fromActions.changePageAction({ page, limit }); - const outcome1 = fromActions.fetchInstrumentsCompleteAction({ - instruments, - }); - const outcome2 = fromActions.fetchCountAction(); - - actions = hot("-a", { a: action }); - const response = cold("-a|", { a: instruments }); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--(bc)", { b: outcome1, c: outcome2 }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - - it("should result in a fetchInstrumentsFailedAction", () => { - const action = fromActions.changePageAction({ page, limit }); - const outcome = fromActions.fetchInstrumentsFailedAction(); - - actions = hot("-a", { a: action }); - const response = cold("-#", {}); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--b", { b: outcome }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - }); - describe("ofType changePageAction", () => { - const page = 0; - const limit = 25; - - it("should result in a fetchInstrumentsCompleteAction and a fetchCountAction", () => { - const action = fromActions.changePageAction({ page, limit }); - const outcome1 = fromActions.fetchInstrumentsCompleteAction({ - instruments, - }); - const outcome2 = fromActions.fetchCountAction(); - - actions = hot("-a", { a: action }); - const response = cold("-a|", { a: instruments }); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--(bc)", { b: outcome1, c: outcome2 }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - - it("should result in a fetchInstrumentsFailedAction", () => { - const action = fromActions.changePageAction({ page, limit }); - const outcome = fromActions.fetchInstrumentsFailedAction(); - - actions = hot("-a", { a: action }); - const response = cold("-#", {}); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--b", { b: outcome }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - }); - - describe("ofType sortByColumnAction", () => { - const column = "test"; - const direction = "asc"; - - it("should result in a fetchInstrumentsCompleteAction and a fetchCountAction", () => { - const action = fromActions.sortByColumnAction({ column, direction }); - const outcome1 = fromActions.fetchInstrumentsCompleteAction({ - instruments, - }); - const outcome2 = fromActions.fetchCountAction(); - - actions = hot("-a", { a: action }); - const response = cold("-a|", { a: instruments }); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); - - const expected = cold("--(bc)", { b: outcome1, c: outcome2 }); - expect(effects.fetchInstruments$).toBeObservable(expected); - }); - - it("should result in a fetchInstrumentsFailedAction", () => { - const action = fromActions.sortByColumnAction({ column, direction }); + const action = fromActions.fetchInstrumentsAction({}); const outcome = fromActions.fetchInstrumentsFailedAction(); actions = hot("-a", { a: action }); @@ -180,14 +86,15 @@ describe("InstrumentEffects", () => { describe("fetchCount$", () => { it("should result in a fetchCountCompleteAction", () => { + const count = 1; const action = fromActions.fetchCountAction(); const outcome = fromActions.fetchCountCompleteAction({ - count: instruments.length, + count, }); actions = hot("-a", { a: action }); - const response = cold("-a|", { a: instruments }); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); + const response = cold("-a|", { a: { count } }); + instrumentApi.instrumentsControllerCount.and.returnValue(response); const expected = cold("--b", { b: outcome }); expect(effects.fetchCount$).toBeObservable(expected); @@ -199,7 +106,7 @@ describe("InstrumentEffects", () => { actions = hot("-a", { a: action }); const response = cold("-#", {}); - instrumentApi.instrumentsControllerFindAll.and.returnValue(response); + instrumentApi.instrumentsControllerCount.and.returnValue(response); const expected = cold("--b", { b: outcome }); expect(effects.fetchCount$).toBeObservable(expected); @@ -274,7 +181,7 @@ describe("InstrumentEffects", () => { describe("loading$", () => { describe("ofType fetchInstrumentsAction", () => { it("should dispatch a loadingAction", () => { - const action = fromActions.fetchInstrumentsAction(); + const action = fromActions.fetchInstrumentsAction({}); const outcome = loadingAction(); actions = hot("-a", { a: action }); diff --git a/src/app/state-management/effects/instruments.effects.ts b/src/app/state-management/effects/instruments.effects.ts index 795a29b32..d38882790 100644 --- a/src/app/state-management/effects/instruments.effects.ts +++ b/src/app/state-management/effects/instruments.effects.ts @@ -1,5 +1,5 @@ import { Injectable } from "@angular/core"; -import { Actions, createEffect, ofType, concatLatestFrom } from "@ngrx/effects"; +import { Actions, createEffect, ofType } from "@ngrx/effects"; import { Instrument, InstrumentsService, @@ -7,8 +7,6 @@ import { import * as fromActions from "state-management/actions/instruments.actions"; import { switchMap, map, catchError, mergeMap } from "rxjs/operators"; import { of } from "rxjs"; -import { Store } from "@ngrx/store"; -import { selectFilters } from "state-management/selectors/instruments.selectors"; import { loadingAction, loadingCompleteAction, @@ -16,28 +14,30 @@ import { @Injectable() export class InstrumentEffects { - filters$ = this.store.select(selectFilters); - fetchInstruments$ = createEffect(() => { return this.actions$.pipe( - ofType( - fromActions.fetchInstrumentsAction, - fromActions.changePageAction, - fromActions.sortByColumnAction, - ), - concatLatestFrom(() => this.filters$), - map(([action, filters]) => filters), - switchMap(({ sortField: order, skip, limit }) => - this.instrumentsService - .instrumentsControllerFindAll(JSON.stringify({ order, limit, skip })) + ofType(fromActions.fetchInstrumentsAction), + switchMap(({ limit, skip, sortColumn, sortDirection }) => { + const limitsParam = { + skip: skip, + limit: limit, + order: undefined, + }; + + if (sortColumn && sortDirection) { + limitsParam.order = `${sortColumn}:${sortDirection}`; + } + + return this.instrumentsService + .instrumentsControllerFindAll(JSON.stringify({ limits: limitsParam })) .pipe( mergeMap((instruments: Instrument[]) => [ fromActions.fetchInstrumentsCompleteAction({ instruments }), fromActions.fetchCountAction(), ]), catchError(() => of(fromActions.fetchInstrumentsFailedAction())), - ), - ), + ); + }), ); }); @@ -45,10 +45,8 @@ export class InstrumentEffects { return this.actions$.pipe( ofType(fromActions.fetchCountAction), switchMap(() => - this.instrumentsService.instrumentsControllerFindAll().pipe( - map((instruments: Instrument[]) => - fromActions.fetchCountCompleteAction({ count: instruments.length }), - ), + this.instrumentsService.instrumentsControllerCount().pipe( + map(({ count }) => fromActions.fetchCountCompleteAction({ count })), catchError(() => of(fromActions.fetchCountFailedAction())), ), ), @@ -118,6 +116,5 @@ export class InstrumentEffects { constructor( private actions$: Actions, private instrumentsService: InstrumentsService, - private store: Store, ) {} } diff --git a/src/app/state-management/effects/proposals.effects.ts b/src/app/state-management/effects/proposals.effects.ts index 555b9197d..8db402fae 100644 --- a/src/app/state-management/effects/proposals.effects.ts +++ b/src/app/state-management/effects/proposals.effects.ts @@ -30,7 +30,7 @@ export class ProposalEffects { fetchProposals$ = createEffect(() => { return this.actions$.pipe( ofType(fromActions.fetchProposalsAction), - mergeMap(({ skip, limit, search, sortColumn, sortDirection }) => { + switchMap(({ skip, limit, search, sortColumn, sortDirection }) => { const limitsParam = { skip: skip, limit: limit, diff --git a/src/app/state-management/effects/samples.effects.ts b/src/app/state-management/effects/samples.effects.ts index ed19c9ed8..b7f7a9849 100644 --- a/src/app/state-management/effects/samples.effects.ts +++ b/src/app/state-management/effects/samples.effects.ts @@ -25,12 +25,7 @@ export class SampleEffects { fetchSamples$ = createEffect(() => { return this.actions$.pipe( - ofType( - fromActions.fetchSamplesAction, - fromActions.changePageAction, - fromActions.sortByColumnAction, - fromActions.setTextFilterAction, - ), + ofType(fromActions.fetchSamplesAction), concatLatestFrom(() => this.fullqueryParams$), map(([action, params]) => params), mergeMap(({ query, limits }) => @@ -52,16 +47,26 @@ export class SampleEffects { ofType(fromActions.fetchSamplesCountAction), concatLatestFrom(() => this.fullqueryParams$), map(([action, params]) => params), - mergeMap(({ query }) => - this.sampleApi.samplesControllerFullquery(query).pipe( - map((samples) => - fromActions.fetchSamplesCountCompleteAction({ - count: samples.length, - }), - ), - catchError(() => of(fromActions.fetchSamplesCountFailedAction())), - ), - ), + mergeMap(({ query }) => { + const parsedQuery = JSON.parse(query); + if (parsedQuery.text) { + parsedQuery.where = { + ...parsedQuery.where, + $text: { $search: parsedQuery.text }, + }; + } + + return this.sampleApi + .samplesControllerCount(JSON.stringify(parsedQuery)) + .pipe( + map(({ count }) => + fromActions.fetchSamplesCountCompleteAction({ + count, + }), + ), + catchError(() => of(fromActions.fetchSamplesCountFailedAction())), + ); + }), ); }); diff --git a/src/app/state-management/reducers/instruments.reducer.spec.ts b/src/app/state-management/reducers/instruments.reducer.spec.ts index bd21ce69e..eff9e95d2 100644 --- a/src/app/state-management/reducers/instruments.reducer.spec.ts +++ b/src/app/state-management/reducers/instruments.reducer.spec.ts @@ -48,32 +48,6 @@ describe("InstrumentsReducer", () => { }); }); - describe("on changePageAction", () => { - it("should set skip and limit filters", () => { - const page = 1; - const limit = 25; - const skip = page * limit; - const action = fromActions.changePageAction({ page, limit }); - const state = instrumentsReducer(initialInstrumentState, action); - - expect(state.filters.skip).toEqual(skip); - expect(state.filters.limit).toEqual(limit); - }); - }); - - describe("on sortByColumnAction", () => { - it("should set sortField filter and set skip filter to 0", () => { - const column = "test"; - const direction = "asc"; - const sortField = column + ":" + direction; - const action = fromActions.sortByColumnAction({ column, direction }); - const state = instrumentsReducer(initialInstrumentState, action); - - expect(state.filters.sortField).toEqual(sortField); - expect(state.filters.skip).toEqual(0); - }); - }); - describe("on clearInstrumentsStateAction", () => { it("should set instrument state to initialInstrumentState", () => { const action = fromActions.clearInstrumentsStateAction(); diff --git a/src/app/state-management/reducers/instruments.reducer.ts b/src/app/state-management/reducers/instruments.reducer.ts index a692bec1a..f296f18b5 100644 --- a/src/app/state-management/reducers/instruments.reducer.ts +++ b/src/app/state-management/reducers/instruments.reducer.ts @@ -39,24 +39,6 @@ const reducer = createReducer( }), ), - on( - fromActions.changePageAction, - (state, { page, limit }): InstrumentState => { - const skip = page * limit; - const filters = { ...state.filters, skip, limit }; - return { ...state, filters }; - }, - ), - - on( - fromActions.sortByColumnAction, - (state, { column, direction }): InstrumentState => { - const sortField = column + (direction ? ":" + direction : ""); - const filters = { ...state.filters, sortField, skip: 0 }; - return { ...state, filters }; - }, - ), - on( fromActions.clearInstrumentsStateAction, (): InstrumentState => ({ diff --git a/src/app/state-management/selectors/instruments.selectors.spec.ts b/src/app/state-management/selectors/instruments.selectors.spec.ts index f8f9d6fc5..10699290b 100644 --- a/src/app/state-management/selectors/instruments.selectors.spec.ts +++ b/src/app/state-management/selectors/instruments.selectors.spec.ts @@ -1,7 +1,9 @@ import { InstrumentState } from "state-management/state/instruments.store"; import * as fromSelectors from "./instruments.selectors"; +import * as fromUserSelectors from "./user.selectors"; import { GenericFilters } from "state-management/models"; import { mockInstrument as instrument } from "shared/MockStubs"; +import { initialUserState } from "./user.selectors.spec"; const instrumentFilters: GenericFilters = { sortField: "name desc", @@ -71,24 +73,20 @@ describe("Instrument Selectors", () => { }); }); - describe("selectInstrumentsDashboardPageViewModel", () => { + describe("selectInstrumentsWithCountAndTableSettings", () => { it("should select the instruments dashboard page view model", () => { expect( - fromSelectors.selectInstrumentsDashboardPageViewModel.projector( + fromSelectors.selectInstrumentsWithCountAndTableSettings.projector( fromSelectors.selectInstruments.projector(initialInstrumentState), - fromSelectors.selectPage.projector(initialInstrumentState.filters), fromSelectors.selectInstrumentsCount.projector( initialInstrumentState, ), - fromSelectors.selectInstrumentsPerPage.projector( - initialInstrumentState.filters, - ), + fromUserSelectors.selectTablesSettings.projector(initialUserState), ), ).toEqual({ instruments: [], - currentPage: 0, - instrumentsCount: 0, - instrumentsPerPage: 25, + count: 0, + tablesSettings: {}, }); }); }); diff --git a/src/app/state-management/selectors/instruments.selectors.ts b/src/app/state-management/selectors/instruments.selectors.ts index 79e3697bd..984064259 100644 --- a/src/app/state-management/selectors/instruments.selectors.ts +++ b/src/app/state-management/selectors/instruments.selectors.ts @@ -1,5 +1,6 @@ import { createFeatureSelector, createSelector } from "@ngrx/store"; import { InstrumentState } from "state-management/state/instruments.store"; +import { selectTablesSettings } from "./user.selectors"; const selectInstrumentState = createFeatureSelector("instruments"); @@ -34,15 +35,15 @@ export const selectInstrumentsPerPage = createSelector( (filters) => filters.limit, ); -export const selectInstrumentsDashboardPageViewModel = createSelector( +export const selectInstrumentsWithCountAndTableSettings = createSelector( selectInstruments, - selectPage, selectInstrumentsCount, - selectInstrumentsPerPage, - (instruments, currentPage, instrumentsCount, instrumentsPerPage) => ({ - instruments, - currentPage, - instrumentsCount, - instrumentsPerPage, - }), + selectTablesSettings, + (instruments, count, tablesSettings) => { + return { + instruments, + count, + tablesSettings, + }; + }, ); diff --git a/src/app/state-management/selectors/samples.selectors.ts b/src/app/state-management/selectors/samples.selectors.ts index 646e301ae..b227d1659 100644 --- a/src/app/state-management/selectors/samples.selectors.ts +++ b/src/app/state-management/selectors/samples.selectors.ts @@ -1,6 +1,6 @@ import { createFeatureSelector, createSelector } from "@ngrx/store"; import { SampleState } from "state-management/state/samples.store"; -import { selectCurrentUser } from "./user.selectors"; +import { selectCurrentUser, selectTablesSettings } from "./user.selectors"; const selectSampleState = createFeatureSelector("samples"); @@ -106,6 +106,8 @@ export const selectSampleDashboardPageViewModel = createSelector( selectTextFilter, selectMetadataKeys, selectCharacteristicsFilter, + selectTablesSettings, + selectSamplesCount, ( samples, samplesPagination, @@ -114,6 +116,8 @@ export const selectSampleDashboardPageViewModel = createSelector( textFilter, metadataKeys, characteristicsFilter, + tableSettings, + count, ) => ({ samples, samplesPagination, @@ -122,6 +126,8 @@ export const selectSampleDashboardPageViewModel = createSelector( textFilter, metadataKeys, characteristicsFilter, + tableSettings, + count, }), ); diff --git a/src/app/state-management/selectors/user.selectors.spec.ts b/src/app/state-management/selectors/user.selectors.spec.ts index b2c163aa1..e9f528728 100644 --- a/src/app/state-management/selectors/user.selectors.spec.ts +++ b/src/app/state-management/selectors/user.selectors.spec.ts @@ -54,7 +54,7 @@ const settings: Settings = { darkTheme: false, }; -const initialUserState: UserState = { +export const initialUserState: UserState = { currentUser: user, profile: userIdentity.profile, accountType: "testType",