Skip to content

GitLab

Commit 223e5ae1 authored by GAONACH Mael's avatar GAONACH Mael
Browse files

converts DataCollectionTable to function component

parent 716ff17e
Pipeline #59129 passed with stage
in 3 minutes and 27 seconds
Hide whitespace changes
Inline Side-by-side
src/components/DataCollection/DataCollectionTable.js
View file @ 223e5ae1
import React from 'react';
import { Button, Col, Glyphicon, Grid, Label, Row } from 'react-bootstrap';
import { Button, Col, Glyphicon, Grid, Row } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import {
INSTRUMENT_NAMES,
......@@ -10,197 +10,185 @@ import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
import UI from '../../config/ui';
class DataCollectionTable extends React.Component {
doiFormatter(cell) {
return <DOIBadge doi={cell} />;
}
function doiFormatter(cell) {
return <DOIBadge doi={cell} />;
}
titleFormatter(_, collection) {
const title = collection.parameters.find((o) => o.name === TITLE);
if (title && title.value) {
return title.value;
}
function titleFormatter(_, collection) {
const title = collection.parameters.find((o) => o.name === TITLE);
if (title && title.value) {
return title.value;
}
}
nameFormatter(_, collection) {
const names = collection.parameters.find(
(o) => o.name === INVESTIGATION_NAMES
);
if (names && names.value) {
let short = JSON.parse(JSON.stringify(names.value));
if (!UI.investigationContainer.isDatasetListVisible) {
return short;
}
function nameFormatter(_, collection) {
const names = collection.parameters.find(
(o) => o.name === INVESTIGATION_NAMES
);
if (names && names.value) {
let short = JSON.parse(JSON.stringify(names.value));
if (short.length > 13) {
short = `${short.slice(0, 10)}...`;
}
if (!UI.investigationContainer.isDatasetListVisible) {
return short;
}
return (
<Link to={`/public/${collection.doi}`}>
<Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
<Glyphicon glyph="circle-arrow-right" />
<span style={{ marginLeft: 10 }}>{short} </span>
</Button>
</Link>
);
if (short.length > 13) {
short = `${short.slice(0, 10)}...`;
}
}
beamlineFormatter(_, collection) {
const names = collection.parameters.find(
(o) => o.name === INSTRUMENT_NAMES
return (
<Link to={`/public/${collection.doi}`}>
<Button bsSize="xsmall" style={{ width: 120, textAlign: 'left' }}>
<Glyphicon glyph="circle-arrow-right" />
<span style={{ marginLeft: 10 }}>{short} </span>
</Button>
</Link>
);
if (names && names.value) {
return names.value;
}
}
}
releaseFormatter() {
return <Label bsStyle="primary">RELEASED</Label>;
function beamlineFormatter(_, collection) {
const names = collection.parameters.find((o) => o.name === INSTRUMENT_NAMES);
if (names && names.value) {
return names.value;
}
}
datasetCountFormmater(_, collection) {
return collection.dataCollectionDatasets.length;
}
function datasetCountFormmater(_, collection) {
return collection.dataCollectionDatasets.length;
}
dataCollectionFormatter(cell, collection, _, extraData) {
return (
<Grid style={{ textAlign: 'center' }}>
<Row className="show-grid">
<Col xs={12} md={12}>
{extraData.nameFormatter(cell, collection, extraData)}
</Col>
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
{extraData.beamlineFormatter(cell, collection, extraData)}
</Col>
</Row>
<Row className="show-grid">
<Col xs={12}>
<div style={{ color: 'gray', fontStyle: 'italic' }}>
{' '}
{extraData.titleFormatter(cell, collection, extraData)}
</div>
</Col>
</Row>
<Row className="show-grid" style={{ fontSize: 10 }}>
<Col xs={12}>
<span>
{extraData.doiFormatter(collection.doi, collection, extraData)}
</span>
</Col>
</Row>
</Grid>
);
}
function dataCollectionFormatter(cell, collection, _, extraData) {
return (
<Grid style={{ textAlign: 'center' }}>
<Row className="show-grid">
<Col xs={12} md={12}>
{extraData.nameFormatter(cell, collection, extraData)}
</Col>
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
{extraData.beamlineFormatter(cell, collection, extraData)}
</Col>
</Row>
<Row className="show-grid">
<Col xs={12}>
<div style={{ color: 'gray', fontStyle: 'italic' }}>
{' '}
{extraData.titleFormatter(cell, collection, extraData)}
</div>
</Col>
</Row>
<Row className="show-grid" style={{ fontSize: 10 }}>
<Col xs={12}>
<span>
{extraData.doiFormatter(collection.doi, collection, extraData)}
</span>
</Col>
</Row>
</Grid>
);
}
getColumns() {
return [
{
text: 'id',
dataField: 'id',
hidden: true,
},
{
text: 'Experiment',
dataField: 'name',
formatter: this.dataCollectionFormatter,
formatExtraData: this,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
responsiveHeaderStyle: {
xs: { width: '100%' },
sm: { width: '100%' },
md: { hidden: true },
lg: { hidden: true },
},
},
{
text: 'Proposal',
dataField: 'investigationNames',
formatter: this.nameFormatter,
formatExtraData: this,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 140, textAlign: 'center' },
lg: { width: 140, textAlign: 'center' },
},
},
{
text: 'Beamline',
dataField: 'instrumentNames',
formatter: this.beamlineFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 140, textAlign: 'center' },
lg: { width: 140, textAlign: 'center' },
},
},
{
text: 'Title',
dataField: 'title',
isDummyField: true,
formatter: this.titleFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
},
{
text: 'Datasets',
dataField: 'nbDatasets',
isDummyField: true,
formatter: this.datasetCountFormmater,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 100, textAlign: 'center' },
lg: { width: 100, textAlign: 'center' },
},
},
function appendParamsFieldsToData(data) {
data = JSON.parse(JSON.stringify(data));
data.forEach((dataEntry) => {
dataEntry.parameters.forEach((param) => {
dataEntry[param.name] = param.value;
});
dataEntry.nbDatasets = dataEntry.dataCollectionDatasets.length;
});
return data;
}
const columns = [
{
text: 'id',
dataField: 'id',
hidden: true,
},
{
text: 'Experiment',
dataField: 'name',
formatter: dataCollectionFormatter,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
responsiveHeaderStyle: {
xs: { width: '100%' },
sm: { width: '100%' },
md: { hidden: true },
lg: { hidden: true },
},
},
{
text: 'Proposal',
dataField: 'investigationNames',
formatter: nameFormatter,
sort: true,
hidden: false,
headerStyle: () => ({ width: '50%', textAlign: 'center' }),
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 140, textAlign: 'center' },
lg: { width: 140, textAlign: 'center' },
},
},
{
text: 'Beamline',
dataField: 'instrumentNames',
formatter: beamlineFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 140, textAlign: 'center' },
lg: { width: 140, textAlign: 'center' },
},
},
{
text: 'Title',
dataField: 'title',
isDummyField: true,
formatter: titleFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
},
},
{
text: 'Datasets',
dataField: 'nbDatasets',
isDummyField: true,
formatter: datasetCountFormmater,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { width: 100, textAlign: 'center' },
lg: { width: 100, textAlign: 'center' },
},
},
{
text: 'DOI',
dataField: 'doi',
formatter: this.doiFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { hidden: true },
lg: { width: 300, textAlign: 'center' },
},
},
];
}
{
text: 'DOI',
dataField: 'doi',
formatter: doiFormatter,
sort: true,
responsiveHeaderStyle: {
xs: { hidden: true },
sm: { hidden: true },
md: { hidden: true },
lg: { width: 300, textAlign: 'center' },
},
},
];
appendParamsFieldsToData(data) {
data = JSON.parse(JSON.stringify(data));
data.forEach((dataEntry) => {
dataEntry.parameters.forEach((param) => {
dataEntry[param.name] = param.value;
});
dataEntry.nbDatasets = dataEntry.dataCollectionDatasets.length;
});
return data;
}
function DataCollectionTable(props) {
const data = appendParamsFieldsToData(props.data);
render() {
const data = this.appendParamsFieldsToData(this.props.data);
return <ResponsiveTable data={data} columns={this.getColumns()} />;
}
return <ResponsiveTable data={data} columns={columns} />;
}
export default DataCollectionTable;
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