Commit 5369b502 authored by Axel Bocciarelli's avatar Axel Bocciarelli
Browse files

Merge branch 'parcel-condensed-view' into 'master'

Added ParcelCondensedView for tables of small width

Closes #384 and #385

See merge request !409
parents d7b34289 630737c2
Pipeline #31724 passed with stages
in 5 minutes and 14 seconds
......@@ -43,7 +43,9 @@ class InvestigationTable extends React.Component {
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
{beamlineFormatter(investigation, investigation.visitId)}
<span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation, investigation.visitId)}
</span>
</Col>
</Row>
<Row className="show-grid">
......@@ -183,8 +185,11 @@ class InvestigationTable extends React.Component {
{
text: 'Beamline',
dataField: 'visitId',
formatter: (visitId, investigation) =>
beamlineFormatter(investigation, visitId),
formatter: (visitId, investigation) => (
<span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation, visitId)}
</span>
),
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
......
......@@ -22,11 +22,7 @@ export function dateFormatter(date) {
export function beamlineFormatter(investigation, placeHolder = '') {
const instrumentName = getInstrumentName(investigation);
return (
<span style={{ fontWeight: 'bold' }}>
{instrumentName ? instrumentName.toUpperCase() : placeHolder}
</span>
);
return instrumentName ? instrumentName.toUpperCase() : placeHolder;
}
export function nameFormatter(
......
......@@ -11,14 +11,39 @@ import ParcelTable from './ParcelTable';
import styles from './MyParcelsSummary.module.css';
import { itemsFormatter } from '../../helpers';
import { useAllInvestigations } from '../../helpers/hooks';
import ParcelCondensedView from './ParcelCondensedView';
function getColumns(investigations) {
return [
{ 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',
dataField: 'name',
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
},
{
text: 'Proposal',
......@@ -38,7 +63,11 @@ function getColumns(investigations) {
const investigation =
investigations &&
investigations.find((inv) => inv.id === parcel.investigationId);
return beamlineFormatter(investigation);
return (
<span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation)}
</span>
);
},
onMatch: (searchText, _, parcel, investigations) => {
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';
import ParcelResource from '../../resources/parcel';
import DownloadLabelButton from './DownloadLabelButton';
import styles from './ParcelHeader.module.css';
import { Link } from 'react-router-dom';
function ParcelHeader(props) {
const { parcel, setAlert } = props;
......@@ -21,7 +22,10 @@ function ParcelHeader(props) {
Parcel <b>{parcel.name}</b>
</h2>
<h4 className={styles.investigation}>
Investigation <b>{parcel.investigationName}</b>
Investigation{' '}
<Link to={`/investigation/${investigationId}/shipping`}>
{parcel.investigationName}
</Link>
</h4>
</div>
<div>
......
......@@ -25,12 +25,12 @@ function getActionColumn(handleView) {
}}
>
<Glyphicon glyph="eye-open" style={{ marginRight: 5 }} />
View
<span className={styles.actionLabel}>View</span>
</Link>
),
responsiveHeaderStyle: {
xs: { width: 70 },
sm: { width: 70 },
xs: { width: 40 },
sm: { width: 40 },
md: { width: 70 },
lg: { width: 70 },
},
......
......@@ -12,6 +12,12 @@
}
}
@media (max-width: 50em) {
.actionLabel {
display: none;
}
}
.filter {
display: flex;
}
......
......@@ -11,14 +11,34 @@ import ParcelFormModal from '../Parcels/ParcelFormModal';
import ParcelTable from '../Parcels/ParcelTable';
import styles from './ParcelSection.module.css';
import { itemsFormatter } from '../../helpers';
import ParcelCondensedView from '../Parcels/ParcelCondensedView';
function getColumns(investigation) {
return [
{ 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',
dataField: 'name',
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
},
{
text: 'Proposal',
......@@ -32,9 +52,11 @@ function getColumns(investigation) {
{
text: 'Beamline',
dataField: 'beamline',
formatter: (_, __, ___, investigation) => {
return beamlineFormatter(investigation);
},
formatter: (_, __, ___, investigation) => (
<span style={{ fontWeight: 'bold' }}>
{beamlineFormatter(investigation)}
</span>
),
formatExtraData: investigation,
sort: true,
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