Commit 6ad93281 authored by Axel Bocciarelli's avatar Axel Bocciarelli

Remove InvestigationContainer and refactor InvestigationTable props

parent b8ce1662
Pipeline #32620 passed with stage
in 3 minutes and 12 seconds
......@@ -16,6 +16,7 @@ import InvestigationDateFilter from './InvestigationDateFilter';
import styles from './InvestigationTable.module.css';
import { useHistory, useLocation } from 'react-router';
import { useQuery } from '../../helpers/hooks';
import { useSelector } from 'react-redux';
function getLgHeaderStyle(width, hidden) {
return {
......@@ -26,7 +27,7 @@ function getLgHeaderStyle(width, hidden) {
};
}
function getColumns(props) {
function getColumns({ showProposalLinks, showInvestigationStats, showFiles }) {
return [
{
text: 'id',
......@@ -36,8 +37,8 @@ function getColumns(props) {
{
text: 'Experiment',
dataField: 'name',
formatter: experimentFormatter,
formatExtraData: props,
formatter: (_, investigation) =>
experimentFormatter(investigation, showProposalLinks),
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
......@@ -51,10 +52,8 @@ function getColumns(props) {
{
text: 'Proposal',
dataField: 'name',
formatter: (_, investigation, __, showLink) =>
nameFormatter(investigation, showLink),
formatExtraData:
props.withProposalLinks || props.user.isUserAdministrator,
formatter: (_, investigation) =>
nameFormatter(investigation, showProposalLinks),
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
......@@ -101,21 +100,15 @@ function getColumns(props) {
text: 'Datasets',
dataField: 'datasets',
formatter: datasetCountFormatter,
responsiveHeaderStyle: getLgHeaderStyle(
130,
!props.showInvestigationStats
),
responsiveHeaderStyle: getLgHeaderStyle(130, !showInvestigationStats),
},
{
text: 'Files',
hidden: !props.user.isAdministrator,
hidden: !showFiles,
dataField: 'dummy-1',
isDummyField: true,
formatter: fileCountFormatter,
responsiveHeaderStyle: getLgHeaderStyle(
80,
!props.showInvestigationStats
),
responsiveHeaderStyle: getLgHeaderStyle(80, !showInvestigationStats),
},
{
text: 'Release',
......@@ -135,7 +128,13 @@ function getColumns(props) {
}
function InvestigationTable(props) {
const { expanded, user, investigations } = props;
const {
investigations,
showProposalLinks = false,
showInvestigationStats = false,
} = props;
const user = useSelector((state) => state.user);
const history = useHistory();
const query = useQuery();
......@@ -165,7 +164,6 @@ function InvestigationTable(props) {
const expandRow = {
showExpandColumn: true,
expanded,
expandColumnPosition: 'right',
expandHeaderColumnRenderer: ({ isAnyExpands }) => {
if (isAnyExpands) {
......@@ -222,7 +220,11 @@ function InvestigationTable(props) {
</div>
<ResponsiveTable
data={investigations.filter(isInvestigationMatching)}
columns={getColumns(props)}
columns={getColumns({
showProposalLinks: showProposalLinks || user.isAdministrator,
showInvestigationStats,
showFiles: user.isAdministrator,
})}
expandRow={expandRow}
/>
</>
......
......@@ -46,22 +46,19 @@ export function nameFormatter(investigation, showLink) {
);
}
export function volumeFormatter(cell, investigation) {
export function volumeFormatter(_, investigation) {
const volume = investigation.parameters.find((o) => o.name === VOLUME);
if (volume && volume.value && volume.value !== 0) {
return stringifyBytesSize(volume.value);
}
}
export function experimentFormatter(cell, investigation, rowIndex, props) {
export function experimentFormatter(investigation, showLink) {
return (
<Grid style={{ textAlign: 'center' }}>
<Row className="show-grid">
<Col xs={12} md={12}>
{nameFormatter(
investigation,
props.withProposalLinks || props.user.isAdministrator
)}
{nameFormatter(investigation, showLink)}
</Col>
</Row>
<Row className="show-grid">
......@@ -99,7 +96,7 @@ export function getParameter(investigation, parameterName) {
}
}
export function fileCountFormatter(cell, investigation) {
export function fileCountFormatter(_, investigation) {
const fileCount = getParameter(investigation, FILE_COUNT);
if (!fileCount) {
......
......@@ -97,7 +97,7 @@ class ResponsiveTable extends React.Component {
pagination={paginationFactory(this.props.pageOptions)}
rowEvents={this.props.rowEvents}
rowClasses={this.props.rowClasses}
noDataIndication="This is no data to display"
noDataIndication="No data to display"
{...baseProps}
/>
</>
......
import React, { useEffect } from 'react';
import InvestigationsContainer from './InvestigationsContainer';
import { Panel, Glyphicon } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { useParams } from 'react-router';
import { filterInvestigations } from '../helpers';
import Loader from '../components/Loader';
import InvestigationTable from '../components/Investigation/InvestigationTable';
function BeamlineDataPage() {
const scientistInstrumentInvestigations = useSelector(
......@@ -36,11 +37,15 @@ function BeamlineDataPage() {
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<InvestigationsContainer
investigations={beamlineInvestigations}
showInvestigationStats
withProposalLinks
/>
{beamlineInvestigations.fetching ? (
<Loader inPanel message="Loading investigations..." />
) : (
<InvestigationTable
investigations={beamlineInvestigations}
showInvestigationStats
showProposalLinks
/>
)}
</Panel.Body>
</Panel>
</div>
......
import React, { useEffect } from 'react';
import InvestigationsContainer from './InvestigationsContainer';
import { Panel, Glyphicon } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import Loader from '../components/Loader';
import InvestigationTable from '../components/Investigation/InvestigationTable';
function ClosedDataPage() {
const isAdministrator = useSelector((state) => state.user.isAdministrator);
......@@ -24,11 +25,14 @@ function ClosedDataPage() {
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<InvestigationsContainer
investigations={investigations}
showInvestigationStats={isAdministrator}
inPanel
/>
{investigations.fetching ? (
<Loader inPanel message="Loading investigations..." />
) : (
<InvestigationTable
investigations={investigations.data}
showInvestigationStats={isAdministrator}
/>
)}
</Panel.Body>
</Panel>
</div>
......
import React from 'react';
import { useSelector } from 'react-redux';
import InvestigationTable from '../components/Investigation/InvestigationTable';
import Loader from '../components/Loader';
function InvestigationsContainer(props) {
const {
investigations,
showInvestigationStats = false,
withProposalLinks = false,
inPanel = false,
} = props;
const user = useSelector((state) => state.user);
if (!investigations) {
return null;
}
if (investigations.fetching) {
return <Loader inPanel={inPanel} message="Loading investigations..." />;
}
if (investigations.data.length === 0) {
return (
<p style={{ marginBottom: 0, fontStyle: 'italic' }}>Nothing to display</p>
);
}
return (
<InvestigationTable
user={user}
investigations={investigations.data}
showInvestigationStats={showInvestigationStats}
withProposalLinks={withProposalLinks}
/>
);
}
export default InvestigationsContainer;
......@@ -3,7 +3,8 @@ import { Panel, Glyphicon } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import { filterInvestigations } from '../helpers';
import InvestigationsContainer from './InvestigationsContainer';
import Loader from '../components/Loader';
import InvestigationTable from '../components/Investigation/InvestigationTable';
const INDUSTRY_PROPOSAL_REGEX = /^(IX|FX|IN|IM)/;
......@@ -25,7 +26,6 @@ function MyDataPage() {
inv.visitId === 'PROPOSAL' && INDUSTRY_PROPOSAL_REGEX.test(inv.name)
); // TODO replace with `inv.type !== "PROPOSAL"` when available
// Otherwise, display the user's investigations
return (
<div className="app__inner">
<Panel bsStyle="primary">
......@@ -36,12 +36,15 @@ function MyDataPage() {
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<InvestigationsContainer
investigations={mySessions}
showInvestigationStats
withProposalLinks
inPanel
/>
{mySessions.fetching ? (
<Loader inPanel message="Loading investigations..." />
) : (
<InvestigationTable
investigations={mySessions.data}
showInvestigationStats
showProposalLinks
/>
)}
</Panel.Body>
</Panel>
{myIndustryProposals.data.length > 0 && (
......@@ -57,12 +60,15 @@ function MyDataPage() {
You may create parcels for the proposals below if no sessions have
been scheduled for them.
</p>
<InvestigationsContainer
investigations={myIndustryProposals}
showInvestigationStats
withProposalLinks
inPanel
/>
{myIndustryProposals.fetching ? (
<Loader inPanel message="Loading proposals..." />
) : (
<InvestigationTable
investigations={myIndustryProposals.data}
showInvestigationStats
showProposalLinks
/>
)}
</Panel.Body>
</Panel>
)}
......
import React, { useEffect } from 'react';
import { Panel, Glyphicon } from 'react-bootstrap';
import InvestigationsContainer from './InvestigationsContainer';
import { useSelector, useDispatch } from 'react-redux';
import { setBreadCrumbs } from '../actions/breadcrumbs';
import Loader from '../components/Loader';
import DataCollectionTable from '../components/DataCollection/DataCollectionTable';
import { fetchDataCollections } from '../actions/datacollections';
import InvestigationTable from '../components/Investigation/InvestigationTable';
function OpenDataPage() {
const sessionId = useSelector((state) => state.user.sessionId);
......@@ -82,13 +82,15 @@ function OpenDataPage() {
</Panel.Heading>
<Panel.Body>
<InvestigationsContainer
investigations={releasedInvestigations}
showInvestigationStats
withProposalLinks
isOpenData
inPanel
/>
{releasedInvestigations.fetching ? (
<Loader inPanel message="Loading investigations..." />
) : (
<InvestigationTable
investigations={releasedInvestigations.data}
showInvestigationStats
showProposalLinks
/>
)}
</Panel.Body>
</Panel>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment