-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: related proposals and table improvements (#1703)
## Description This PR adds the related proposals tab and table into the proposals view. ## Motivation The idea is to collect all the proposals that are related to a proposal either they are a parent or a child of the current one. ## Fixes: Please provide a list of the fixes implemented in this PR * https://jira.ess.eu/browse/SWAP-4357 ## Changes: Please provide a list of the changes implemented by this PR * Added related proposals component and tests ## Tests included - [x] Included for each change/fix? - [x] Passing? (Merge will not be approved unless this is checked) ## Documentation - [ ] swagger documentation updated \[required\] - [ ] official documentation updated \[nice-to-have\] ### official documentation info If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included ## Backend version - [ ] Does it require a specific version of the backend - which version of the backend is required: ## Summary by Sourcery Update the route and location paths for related datasets. Bug Fixes: - Fix routing and navigation issues with related datasets. Enhancements: - Improve the loading of related datasets. ## Summary by Sourcery Add a "Related Proposals" tab to the proposal details view, displaying related proposals and their relationship to the current proposal. New Features: - Display related proposals in a new tab within the proposal details view. The tab shows the relationship between the proposals (parent or child). Tests: - Add tests for the related proposals component.
- Loading branch information
1 parent
14f4407
commit aed9710
Showing
28 changed files
with
802 additions
and
232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/app/proposals/proposal-dashboard/proposal-dashboard.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| <shared-table | ||
| [dataSource]="dataSource" | ||
| [columnsdef]="columns" | ||
| [pageSize]="5" | ||
| [pageSize]="10" | ||
| (rowClick)="onRowClick($event)" | ||
| > | ||
| </shared-table> |
12 changes: 12 additions & 0 deletions
12
src/app/proposals/proposal-datasets/proposal-datasets.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <div class="datasets-table" *ngIf="vm$ | async as vm"> | ||
| <app-table | ||
| [data]="tableData" | ||
| [columns]="tableColumns" | ||
| [paginate]="tablePaginate" | ||
| [currentPage]="vm.currentPage" | ||
| [dataCount]="vm.datasetCount" | ||
| [dataPerPage]="vm.datasetsPerPage" | ||
| (pageChange)="onPageChange($event)" | ||
| (rowClick)="onRowClick($event)" | ||
| ></app-table> | ||
| </div> |
Empty file.
137 changes: 137 additions & 0 deletions
137
src/app/proposals/proposal-datasets/proposal-datasets.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| import { | ||
| ComponentFixture, | ||
| TestBed, | ||
| inject, | ||
| waitForAsync, | ||
| } from "@angular/core/testing"; | ||
| import { NO_ERRORS_SCHEMA } from "@angular/core"; | ||
| import { | ||
| MockStore, | ||
| MockActivatedRoute, | ||
| createMock, | ||
| mockDataset, | ||
| } from "shared/MockStubs"; | ||
| import { Router, ActivatedRoute } from "@angular/router"; | ||
| import { StoreModule, Store } from "@ngrx/store"; | ||
| import { DatePipe, SlicePipe } from "@angular/common"; | ||
| import { FileSizePipe } from "shared/pipes/filesize.pipe"; | ||
| import { | ||
| changeDatasetsPageAction, | ||
| fetchProposalDatasetsAction, | ||
| } from "state-management/actions/proposals.actions"; | ||
| import { PageChangeEvent } from "shared/modules/table/table.component"; | ||
| import { MatTabsModule } from "@angular/material/tabs"; | ||
| import { MatIconModule } from "@angular/material/icon"; | ||
| import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; | ||
| import { AppConfigService } from "app-config.service"; | ||
| import { DatasetClass } from "@scicatproject/scicat-sdk-ts-angular"; | ||
| import { ProposalDatasetsComponent } from "./proposal-datasets.component"; | ||
|
|
||
| const getConfig = () => ({ | ||
| logbookEnabled: true, | ||
| }); | ||
|
|
||
| describe("ViewProposalPageComponent", () => { | ||
| let component: ProposalDatasetsComponent; | ||
| let fixture: ComponentFixture<ProposalDatasetsComponent>; | ||
|
|
||
| const router = { | ||
| navigateByUrl: jasmine.createSpy("navigateByUrl"), | ||
| }; | ||
| let store: MockStore; | ||
| let dispatchSpy; | ||
|
|
||
| beforeEach(waitForAsync(() => { | ||
| TestBed.configureTestingModule({ | ||
| schemas: [NO_ERRORS_SCHEMA], | ||
| declarations: [ProposalDatasetsComponent], | ||
| imports: [ | ||
| BrowserAnimationsModule, | ||
| MatIconModule, | ||
| MatTabsModule, | ||
| StoreModule.forRoot({}), | ||
| ], | ||
| providers: [DatePipe, FileSizePipe, SlicePipe], | ||
| }); | ||
| TestBed.overrideComponent(ProposalDatasetsComponent, { | ||
| set: { | ||
| providers: [ | ||
| { provide: Router, useValue: router }, | ||
| { provide: ActivatedRoute, useClass: MockActivatedRoute }, | ||
| { provide: AppConfigService, useValue: { getConfig } }, | ||
| ], | ||
| }, | ||
| }); | ||
| TestBed.compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(ProposalDatasetsComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| beforeEach(inject([Store], (mockStore: MockStore) => { | ||
| store = mockStore; | ||
| })); | ||
|
|
||
| afterEach(() => { | ||
| fixture.destroy(); | ||
| }); | ||
|
|
||
| it("should create", () => { | ||
| 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("#onPageChange()", () => { | ||
| it("should dispatch a changeDatasetsPageAction and a fetchProposalDatasetsAction", () => { | ||
| dispatchSpy = spyOn(store, "dispatch"); | ||
|
|
||
| const proposalId = "testId"; | ||
| component.proposalId = proposalId; | ||
| const event: PageChangeEvent = { | ||
| pageIndex: 0, | ||
| pageSize: 25, | ||
| length: 25, | ||
| }; | ||
| component.onPageChange(event); | ||
|
|
||
| expect(dispatchSpy).toHaveBeenCalledTimes(2); | ||
| expect(dispatchSpy).toHaveBeenCalledWith( | ||
| changeDatasetsPageAction({ | ||
| page: event.pageIndex, | ||
| limit: event.pageSize, | ||
| }), | ||
| ); | ||
| expect(dispatchSpy).toHaveBeenCalledWith( | ||
| fetchProposalDatasetsAction({ proposalId }), | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe("#onRowClick()", () => { | ||
| it("should navigate to a dataset", () => { | ||
| const dataset = createMock<DatasetClass>({}); | ||
| const pid = encodeURIComponent(dataset.pid); | ||
| component.onRowClick(dataset); | ||
|
|
||
| expect(router.navigateByUrl).toHaveBeenCalledTimes(1); | ||
| expect(router.navigateByUrl).toHaveBeenCalledWith("/datasets/" + pid); | ||
| }); | ||
| }); | ||
| }); |
111 changes: 111 additions & 0 deletions
111
src/app/proposals/proposal-datasets/proposal-datasets.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| import { DatePipe, SlicePipe } from "@angular/common"; | ||
| import { Component, Input, OnInit } from "@angular/core"; | ||
| import { Router } from "@angular/router"; | ||
| import { Store } from "@ngrx/store"; | ||
| import { | ||
| DatasetClass, | ||
| OutputDatasetObsoleteDto, | ||
| } from "@scicatproject/scicat-sdk-ts-angular"; | ||
| import { Subscription } from "rxjs"; | ||
| import { | ||
| PageChangeEvent, | ||
| TableColumn, | ||
| } from "shared/modules/table/table.component"; | ||
| import { FileSizePipe } from "shared/pipes/filesize.pipe"; | ||
| import { | ||
| changeDatasetsPageAction, | ||
| fetchProposalDatasetsAction, | ||
| } from "state-management/actions/proposals.actions"; | ||
| import { selectViewProposalPageViewModel } from "state-management/selectors/proposals.selectors"; | ||
|
|
||
| export interface TableData { | ||
| pid: string; | ||
| name: string; | ||
| sourceFolder: string; | ||
| size: string; | ||
| creationTime: string | null; | ||
| owner: string; | ||
| location: string; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: "app-proposal-datasets", | ||
| templateUrl: "./proposal-datasets.component.html", | ||
| styleUrls: ["./proposal-datasets.component.scss"], | ||
| }) | ||
| export class ProposalDatasetsComponent implements OnInit { | ||
| vm$ = this.store.select(selectViewProposalPageViewModel); | ||
|
|
||
| subscriptions: Subscription[] = []; | ||
| @Input() proposalId: string; | ||
|
|
||
| tablePaginate = true; | ||
| tableData: TableData[] = []; | ||
| tableColumns: TableColumn[] = [ | ||
| { name: "name", icon: "portrait", sort: false, inList: true }, | ||
| { name: "sourceFolder", icon: "explore", sort: false, inList: true }, | ||
| { name: "size", icon: "save", sort: false, inList: true }, | ||
| { name: "creationTime", icon: "calendar_today", sort: false, inList: true }, | ||
| { name: "owner", icon: "face", sort: false, inList: true }, | ||
| { name: "location", icon: "explore", sort: false, inList: true }, | ||
| ]; | ||
|
|
||
| constructor( | ||
| private datePipe: DatePipe, | ||
| private filesizePipe: FileSizePipe, | ||
| private slicePipe: SlicePipe, | ||
| private router: Router, | ||
| private store: Store, | ||
| ) {} | ||
|
|
||
| ngOnInit(): void { | ||
| this.subscriptions.push( | ||
| this.vm$.subscribe((vm) => { | ||
| this.tableData = this.formatTableData(vm.datasets); | ||
| }), | ||
| ); | ||
|
|
||
| if (!this.tableData.length) { | ||
| this.store.dispatch( | ||
| fetchProposalDatasetsAction({ proposalId: this.proposalId }), | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| formatTableData(datasets: OutputDatasetObsoleteDto[]): TableData[] { | ||
| let tableData: TableData[] = []; | ||
| if (datasets) { | ||
| tableData = datasets.map((dataset: any) => ({ | ||
| pid: dataset.pid, | ||
| name: dataset.datasetName, | ||
| sourceFolder: | ||
| "..." + this.slicePipe.transform(dataset.sourceFolder, -14), | ||
| size: this.filesizePipe.transform(dataset.size), | ||
| creationTime: this.datePipe.transform( | ||
| dataset.creationTime, | ||
| "yyyy-MM-dd HH:mm", | ||
| ), | ||
| owner: dataset.owner, | ||
| location: dataset.creationLocation, | ||
| })); | ||
| } | ||
| return tableData; | ||
| } | ||
|
|
||
| onPageChange(event: PageChangeEvent) { | ||
| this.store.dispatch( | ||
| changeDatasetsPageAction({ | ||
| page: event.pageIndex, | ||
| limit: event.pageSize, | ||
| }), | ||
| ); | ||
| this.store.dispatch( | ||
| fetchProposalDatasetsAction({ proposalId: this.proposalId }), | ||
| ); | ||
| } | ||
|
|
||
| onRowClick(dataset: DatasetClass) { | ||
| const pid = encodeURIComponent(dataset.pid); | ||
| this.router.navigateByUrl("/datasets/" + pid); | ||
| } | ||
| } |
2 changes: 1 addition & 1 deletion
2
src/app/proposals/proposal-logbook/proposal-logbook.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.