Commit 8f12b74a authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Combine participants by role

parent b80ddb36
Pipeline #31913 passed with stage
in 3 minutes and 12 seconds
import axios from 'axios';
import React, { Suspense } from 'react';
import { Panel, Tab, Tabs } from 'react-bootstrap';
import { NetworkErrorBoundary } from 'rest-hooks';
import { getInvestigationUsersByInvestigationId } from '../../api/icat/icatPlus';
import Loader from '../Loader';
import ResponsiveTable from '../Table/ResponsiveTable';
import SamplesTable from './SamplesTable';
import ParticipantsPanel from './ParticipantsPanel';
class InvestigationWidget extends React.Component {
constructor(props) {
super(props);
function InvestigationWidget(props) {
const { investigation } = props;
this.state = {
investigationUsers: [],
fetched: false,
fetching: false,
};
}
componentDidMount() {
axios
.get(
getInvestigationUsersByInvestigationId(
this.props.sessionId,
this.props.investigation.id
)
)
.then((res) => {
this.setState({
investigationUsers: res.data,
fetching: false,
fetched: true,
});
})
.catch(() => {
this.setState({
fetching: false,
fetched: false,
});
});
}
getColumns() {
return [
{
text: 'id',
dataField: 'name',
hidden: true,
},
{
text: 'Name',
dataField: 'fullName',
},
{
text: 'Role',
dataField: 'role',
},
];
}
render() {
return (
<Panel>
<Panel.Body>
<Tabs id="tabs">
<Tab style={{ margin: 30 }} eventKey={1} title="Participants">
<ResponsiveTable
keyField="name"
data={this.state.investigationUsers}
columns={this.getColumns()}
/>
</Tab>
<Tab style={{ margin: 30 }} eventKey={2} title="Samples">
<Suspense fallback={<Loader message="Loading samples" />}>
<NetworkErrorBoundary>
<SamplesTable investigationId={this.props.investigation.id} />
</NetworkErrorBoundary>
</Suspense>
</Tab>
</Tabs>
</Panel.Body>
<Panel.Footer></Panel.Footer>
</Panel>
);
}
return (
<Panel>
<Panel.Body>
<Tabs id="tabs">
<Tab style={{ margin: 30 }} eventKey={1} title="Participants">
<ParticipantsPanel investigationId={investigation.id} />
</Tab>
<Tab style={{ margin: 30 }} eventKey={2} title="Samples">
<Suspense fallback={<Loader message="Loading samples" />}>
<NetworkErrorBoundary>
<SamplesTable investigationId={investigation.id} />
</NetworkErrorBoundary>
</Suspense>
</Tab>
</Tabs>
</Panel.Body>
<Panel.Footer></Panel.Footer>
</Panel>
);
}
export default InvestigationWidget;
import React, { useEffect, useState } from 'react';
import { Alert } from 'react-bootstrap';
import { getInvestigationUsersByInvestigationId } from '../../api/icat/icatPlus';
import { groupBy } from 'lodash-es';
import axios from 'axios';
import ResponsiveTable from '../Table/ResponsiveTable';
import Loader from '../Loader';
import { useSelector } from 'react-redux';
function ParticipantsPanel(props) {
const { investigationId } = props;
const sessionId = useSelector((state) => state.user.sessionId);
const [state, setState] = useState({});
const { participants, fetching, error } = state;
useEffect(() => {
setState({ fetching: true });
axios
.get(getInvestigationUsersByInvestigationId(sessionId, investigationId))
.then((res) => groupBy(res.data, (user) => user.name))
.then((participantsById) => {
setState({
participants: Object.entries(participantsById).map(([id, users]) => ({
id,
name: users[0].fullName,
role: users.map((user) => user.role).join(', '),
})),
});
})
.catch(() => {
setState({ error: true });
});
}, [sessionId, investigationId]);
if (fetching) {
return <Loader message="Loading participants..." />;
}
if (error) {
return <Alert bsStyle="danger">Unable to retrieve participants</Alert>;
}
if (!participants) {
return null;
}
return (
<ResponsiveTable
keyField="id"
data={participants}
columns={[
{ text: 'id', dataField: 'id', hidden: true, searchable: false },
{ text: 'Name', dataField: 'name' },
{ text: 'Role', dataField: 'role' },
]}
/>
);
}
export default ParticipantsPanel;
......@@ -30,8 +30,8 @@ function LoginPage() {
Create a new account
</a>
</ListGroupItem>
<li class="list-group-item">
<h4 class="list-group-item-heading">
<li className="list-group-item">
<h4 className="list-group-item-heading">
<a href="mailto:dataportal-feedback@esrf.fr">
I need further assistance
</a>
......
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