Commit 630737c2 authored by Loic Huder's avatar Loic Huder
Browse files

Added ParcelCondensedView for tables of small width

parent 20684a58
Pipeline #31598 passed with stage
in 3 minutes and 15 seconds
...@@ -43,7 +43,9 @@ class InvestigationTable extends React.Component { ...@@ -43,7 +43,9 @@ class InvestigationTable extends React.Component {
</Row> </Row>
<Row className="show-grid"> <Row className="show-grid">
<Col xs={12} md={12}> <Col xs={12} md={12}>
{beamlineFormatter(investigation, investigation.visitId)} <span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation, investigation.visitId)}
</span>
</Col> </Col>
</Row> </Row>
<Row className="show-grid"> <Row className="show-grid">
...@@ -183,8 +185,11 @@ class InvestigationTable extends React.Component { ...@@ -183,8 +185,11 @@ class InvestigationTable extends React.Component {
{ {
text: 'Beamline', text: 'Beamline',
dataField: 'visitId', dataField: 'visitId',
formatter: (visitId, investigation) => formatter: (visitId, investigation) => (
beamlineFormatter(investigation, visitId), <span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation, visitId)}
</span>
),
sort: true, sort: true,
responsiveHeaderStyle: { responsiveHeaderStyle: {
xs: { hidden: true }, xs: { hidden: true },
......
...@@ -22,11 +22,7 @@ export function dateFormatter(date) { ...@@ -22,11 +22,7 @@ export function dateFormatter(date) {
export function beamlineFormatter(investigation, placeHolder = '') { export function beamlineFormatter(investigation, placeHolder = '') {
const instrumentName = getInstrumentName(investigation); const instrumentName = getInstrumentName(investigation);
return ( return instrumentName ? instrumentName.toUpperCase() : placeHolder;
<span style={{ fontWeight: 'bold' }}>
{instrumentName ? instrumentName.toUpperCase() : placeHolder}
</span>
);
} }
export function nameFormatter( export function nameFormatter(
......
...@@ -11,14 +11,39 @@ import ParcelTable from './ParcelTable'; ...@@ -11,14 +11,39 @@ import ParcelTable from './ParcelTable';
import styles from './MyParcelsSummary.module.css'; import styles from './MyParcelsSummary.module.css';
import { itemsFormatter } from '../../helpers'; import { itemsFormatter } from '../../helpers';
import { useAllInvestigations } from '../../helpers/hooks'; import { useAllInvestigations } from '../../helpers/hooks';
import ParcelCondensedView from './ParcelCondensedView';
function getColumns(investigations) { function getColumns(investigations) {
return [ return [
{ text: '', dataField: '_id', hidden: true, searchable: false }, { text: '', dataField: '_id', hidden: true, searchable: false },
{
dataField: 'condensedView',
text: 'Parcel',
isDummyField: true,
formatter: (_, parcel, __, investigations) => {
const investigation =
investigations &&
investigations.find((inv) => inv.id === parcel.investigationId);
return (
<ParcelCondensedView parcel={parcel} investigation={investigation} />
);
},
formatExtraData: investigations,
responsiveHeaderStyle: {
xs: { width: '100%' },
sm: { width: '100%' },
md: { hidden: true },
lg: { hidden: true },
},
},
{ {
text: 'Name', text: 'Name',
dataField: 'name', dataField: 'name',
sort: true, sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
}, },
{ {
text: 'Proposal', text: 'Proposal',
...@@ -38,7 +63,11 @@ function getColumns(investigations) { ...@@ -38,7 +63,11 @@ function getColumns(investigations) {
const investigation = const investigation =
investigations && investigations &&
investigations.find((inv) => inv.id === parcel.investigationId); investigations.find((inv) => inv.id === parcel.investigationId);
return beamlineFormatter(investigation); return (
<span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation)}
</span>
);
}, },
onMatch: (searchText, _, parcel, investigations) => { onMatch: (searchText, _, parcel, investigations) => {
const investigation = const investigation =
......
import React from 'react';
import { ListGroup, ListGroupItem } from 'react-bootstrap';
import { STATUS_DEFS } from '../../constants/parcelStatuses';
import { beamlineFormatter } from '../Investigation/utils';
import { itemsFormatter } from '../../helpers';
function ParcelCondensedView(props) {
const { parcel, investigation } = props;
const { name, status, items, investigationName } = parcel;
return (
<ListGroup className="condensed-list-group">
<ListGroupItem>
<span style={{ fontWeight: 'bold' }}>Name: </span>
{name}
</ListGroupItem>
<ListGroupItem>
<span style={{ fontWeight: 'bold' }}>Proposal: </span>
{investigationName}
</ListGroupItem>
<ListGroupItem>
<span style={{ fontWeight: 'bold' }}>Beamline: </span>
{beamlineFormatter(investigation)}
</ListGroupItem>
<ListGroupItem>
<span style={{ fontWeight: 'bold' }}>Status: </span>
{STATUS_DEFS[status].label}
</ListGroupItem>
<ListGroupItem>
<span style={{ fontWeight: 'bold' }}>Items: </span>
{itemsFormatter(items)}
</ListGroupItem>
</ListGroup>
);
}
export default ParcelCondensedView;
...@@ -6,6 +6,7 @@ import { isEditable } from '../../helpers/statusUtils'; ...@@ -6,6 +6,7 @@ import { isEditable } from '../../helpers/statusUtils';
import ParcelResource from '../../resources/parcel'; import ParcelResource from '../../resources/parcel';
import DownloadLabelButton from './DownloadLabelButton'; import DownloadLabelButton from './DownloadLabelButton';
import styles from './ParcelHeader.module.css'; import styles from './ParcelHeader.module.css';
import { Link } from 'react-router-dom';
function ParcelHeader(props) { function ParcelHeader(props) {
const { parcel, setAlert } = props; const { parcel, setAlert } = props;
...@@ -21,7 +22,10 @@ function ParcelHeader(props) { ...@@ -21,7 +22,10 @@ function ParcelHeader(props) {
Parcel <b>{parcel.name}</b> Parcel <b>{parcel.name}</b>
</h2> </h2>
<h4 className={styles.investigation}> <h4 className={styles.investigation}>
Investigation <b>{parcel.investigationName}</b> Investigation{' '}
<Link to={`/investigation/${investigationId}/shipping`}>
{parcel.investigationName}
</Link>
</h4> </h4>
</div> </div>
<div> <div>
......
...@@ -25,12 +25,12 @@ function getActionColumn(handleView) { ...@@ -25,12 +25,12 @@ function getActionColumn(handleView) {
}} }}
> >
<Glyphicon glyph="eye-open" style={{ marginRight: 5 }} /> <Glyphicon glyph="eye-open" style={{ marginRight: 5 }} />
View <span className={styles.actionLabel}>View</span>
</Link> </Link>
), ),
responsiveHeaderStyle: { responsiveHeaderStyle: {
xs: { width: 70 }, xs: { width: 40 },
sm: { width: 70 }, sm: { width: 40 },
md: { width: 70 }, md: { width: 70 },
lg: { width: 70 }, lg: { width: 70 },
}, },
......
...@@ -12,6 +12,12 @@ ...@@ -12,6 +12,12 @@
} }
} }
@media (max-width: 50em) {
.actionLabel {
display: none;
}
}
.filter { .filter {
display: flex; display: flex;
} }
......
...@@ -11,14 +11,34 @@ import ParcelFormModal from '../Parcels/ParcelFormModal'; ...@@ -11,14 +11,34 @@ import ParcelFormModal from '../Parcels/ParcelFormModal';
import ParcelTable from '../Parcels/ParcelTable'; import ParcelTable from '../Parcels/ParcelTable';
import styles from './ParcelSection.module.css'; import styles from './ParcelSection.module.css';
import { itemsFormatter } from '../../helpers'; import { itemsFormatter } from '../../helpers';
import ParcelCondensedView from '../Parcels/ParcelCondensedView';
function getColumns(investigation) { function getColumns(investigation) {
return [ return [
{ text: '', dataField: '_id', hidden: true, searchable: false }, { text: '', dataField: '_id', hidden: true, searchable: false },
{
dataField: 'condensedView',
text: 'Parcel',
isDummyField: true,
formatter: (_, parcel, __, investigation) => (
<ParcelCondensedView parcel={parcel} investigation={investigation} />
),
formatExtraData: investigation,
responsiveHeaderStyle: {
xs: { width: '100%' },
sm: { width: '100%' },
md: { hidden: true },
lg: { hidden: true },
},
},
{ {
text: 'Name', text: 'Name',
dataField: 'name', dataField: 'name',
sort: true, sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
}, },
{ {
text: 'Proposal', text: 'Proposal',
...@@ -32,9 +52,11 @@ function getColumns(investigation) { ...@@ -32,9 +52,11 @@ function getColumns(investigation) {
{ {
text: 'Beamline', text: 'Beamline',
dataField: 'beamline', dataField: 'beamline',
formatter: (_, __, ___, investigation) => { formatter: (_, __, ___, investigation) => (
return beamlineFormatter(investigation); <span style={{ fontWeight: 'bold' }}>
}, {beamlineFormatter(investigation)}
</span>
),
formatExtraData: investigation, formatExtraData: investigation,
sort: true, sort: true,
responsiveHeaderStyle: { responsiveHeaderStyle: {
......
Supports Markdown
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