Commit 8b8890c6 authored by Marjolaine Bodin's avatar Marjolaine Bodin
Browse files

#521 proposal tab

parent 9bdbb679
Pipeline #52916 passed with stage
in 2 minutes and 58 seconds
......@@ -17,8 +17,7 @@ import SampleTrackingStatsPage from './containers/Stats/SampleTracking/SampleTra
import SearchPage from './containers/SearchPage';
import OpenDataPage from './containers/OpenData/OpenDataPage';
import ClosedDataPage from './containers/ClosedData/ClosedDataPage';
import SamplesPage from './containers/SamplesPage';
import ParticipantsPage from './containers/ParticipantsPage';
import InvestigationProposalPage from './containers/InvestigationProposalPage';
import DatasetsPage from './containers/DatasetsPage';
import EventTagPage from './containers/EventTagPage';
import EventsPage from './containers/EventsPage';
......@@ -183,12 +182,8 @@ function App() {
<ParcelPage />
</Route>
<Route path="/investigation/:investigationId/participants">
<ParticipantsPage />
</Route>
<Route path="/investigation/:investigationId/samples">
<SamplesPage />
<Route path="/investigation/:investigationId/proposal">
<InvestigationProposalPage />
</Route>
</LoadingBoundary>
</Route>
......
import React from 'react';
import { Well } from 'react-bootstrap';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import DOIBadge from '../doi/DOIBadge';
import { dateFormatter } from './utils';
function ProposalPanel(props) {
const { investigation } = props;
return (
<>
<h4>{investigation.title} </h4>
<div>
<p className="text-secondary">
{dateFormatter(investigation.startDate, 'DD/MM/YYYY hh:mm', false)}
{investigation.endDate && (
<>
{' '}
-{' '}
{dateFormatter(
investigation.endDate,
'DD/MM/YYYY hh:mm',
false
)}{' '}
</>
)}{' '}
{investigation.instrument && (
<>- on beamline: {investigation.instrument.name} </>
)}
{investigation.releaseDate && (
<>
- release date:{' '}
{dateFormatter(
investigation.releaseDate,
INVESTIGATION_DATE_FORMAT,
false
)}
</>
)}
{investigation.doi && (
<>
{' '}
<DOIBadge doi={investigation.doi} />
</>
)}
</p>
</div>
<Well>
<h4>Abstract</h4>
<p>{investigation.summary}</p>
</Well>
</>
);
}
export default ProposalPanel;
import React from 'react';
import { Panel, Glyphicon } from 'react-bootstrap';
import LoadingBoundary from '../LoadingBoundary';
import SamplesTable from './SamplesTable';
function SamplesPanel(props) {
const { investigationId } = props;
return (
<Panel bsStyle="info">
<Panel.Heading>
<Panel.Title componentClass="h3">
{' '}
<Glyphicon glyph="th-list" /> Samples
</Panel.Title>
</Panel.Heading>
<Panel.Body>
<LoadingBoundary message="Loading samples">
<SamplesTable investigationId={investigationId} />
</LoadingBoundary>
</Panel.Body>
</Panel>
);
}
export default SamplesPanel;
......@@ -75,17 +75,10 @@ function TabContainerMenu(props) {
)}
{!isAnonymous && (
<>
<LinkContainer to={`${routePrefix}/participants`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="user" />
<span style={{ marginLeft: 2 }}> Participants </span>
</NavItem>
</LinkContainer>
<LinkContainer to={`${routePrefix}/samples`}>
<NavItem eventKey="shipping" href="">
<Glyphicon glyph="user" />
<span style={{ marginLeft: 2 }}> Samples </span>
<LinkContainer to={`${routePrefix}/proposal`}>
<NavItem eventKey="summary" href="">
<Glyphicon glyph="cog" />
<span style={{ marginLeft: 2 }}> Proposal </span>
</NavItem>
</LinkContainer>
</>
......
......@@ -7,8 +7,10 @@ import PageNotFound from './PageNotFound';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../resources/investigation';
import ParticipantsPanel from '../components/Investigation/ParticipantsPanel';
import SamplesPanel from '../components/Investigation/SamplesPanel';
import ProposalPanel from '../components/Investigation/ProposalPanel';
function ParticipantsPage() {
function InvestigationProposalPage() {
const { investigationId } = useParams();
const user = useSelector((state) => state.user);
......@@ -25,16 +27,22 @@ function ParticipantsPage() {
<Row>
<Col sm={12}>
<TabContainerMenu />
<div style={{ margin: 20 }}>
<ProposalPanel investigation={investigation} />
</div>
<div style={{ margin: 20 }}>
<ParticipantsPanel
investigationId={investigationId}
name={user.name}
/>
</div>
<div style={{ margin: 20 }}>
<SamplesPanel investigationId={investigationId} />
</div>
</Col>
</Row>
</Grid>
);
}
export default ParticipantsPage;
export default InvestigationProposalPage;
import React from 'react';
import { Col, Grid, Row } from 'react-bootstrap';
import { useParams } from 'react-router';
import TabContainerMenu from '../components/TabContainerMenu/TabContainerMenu';
import LoadingBoundary from '../components/LoadingBoundary';
import SamplesTable from '../components/Investigation/SamplesTable';
function SamplesPage() {
const { investigationId } = useParams();
return (
<Grid fluid>
<Row>
<Col sm={12}>
<TabContainerMenu />
<div style={{ margin: 20 }}>
<LoadingBoundary message="Loading samples">
<SamplesTable investigationId={investigationId} />
</LoadingBoundary>
</div>
</Col>
</Row>
</Grid>
);
}
export default SamplesPage;
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