Working on issue_104

parent 35803a39
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
import React from 'react'; import React from 'react';
import Moment from 'react-moment'; import Moment from 'react-moment';
import ReactTable from "react-table";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { Grid, Row, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Loading from '../../components/Loading.js'; import Loading from '../../components/Loading.js';
import DOIBadge from '../../components/doi/DOIBadge.js'; import DOIBadge from '../../components/doi/DOIBadge.js';
...@@ -8,9 +10,22 @@ import { stringifyBytesSize } from "../Helpers.js" ...@@ -8,9 +10,22 @@ import { stringifyBytesSize } from "../Helpers.js"
import _ from 'lodash'; import _ from 'lodash';
import { SAMPLE_COUNT, FILE_COUNT, VOLUME, DATASET_COUNT } from '../../constants/ParameterTypes.js'; import { SAMPLE_COUNT, FILE_COUNT, VOLUME, DATASET_COUNT } from '../../constants/ParameterTypes.js';
import './InvestigationTable.css'; import './InvestigationTable.css';
import 'react-table/react-table.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable2 from 'react-bootstrap-table-next';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';
import { getContainerSize } from "../../helpers/ContainerSizeHelper.js";
import ResponsiveTable from "../Table/ResponsiveTable.js";
class InvestigationTable extends React.Component { class InvestigationTable extends React.Component {
constructor() {
super();
this.state = {
width: 800,
height: 182
}
}
doiFormatter(cell, row) { doiFormatter(cell, row) {
return <DOIBadge doi={cell}></DOIBadge> return <DOIBadge doi={cell}></DOIBadge>
} }
...@@ -25,7 +40,7 @@ class InvestigationTable extends React.Component { ...@@ -25,7 +40,7 @@ class InvestigationTable extends React.Component {
return cell.toUpperCase(); return cell.toUpperCase();
} }
nameFormatter(cell, investigation, extraData) { nameFormatter(cell, investigation, rowIndex, extraData) {
if (extraData.props.linkProposal || extraData.props.user.isAdministrator){ if (extraData.props.linkProposal || extraData.props.user.isAdministrator){
return <Link to={`/investigation/${investigation.id}/datasets`}> return <Link to={`/investigation/${investigation.id}/datasets`}>
<span className="glyphicon glyphicon-circle-arrow-right"> {cell} </span> <span className="glyphicon glyphicon-circle-arrow-right"> {cell} </span>
...@@ -36,13 +51,13 @@ class InvestigationTable extends React.Component { ...@@ -36,13 +51,13 @@ class InvestigationTable extends React.Component {
} }
} }
logbookFormatter(cell, investigation, extraData) { logbookFormatter(cell, investigation, rowIndex, extraData) {
return <Link to={`/investigation/${investigation.id}/events`}> return <Link to={`/investigation/${investigation.id}/events`}>
<span className="glyphicon glyphicon-list-alt"> </span> <span className="glyphicon glyphicon-list-alt"> </span>
</Link>; </Link>;
} }
volumeFormatter(cell, investigation, extraData) { volumeFormatter(cell, investigation, rowIndex, extraData) {
var volume = _.find(investigation.parameters, function(o){ return o.name === VOLUME }); var volume = _.find(investigation.parameters, function(o){ return o.name === VOLUME });
if (volume){ if (volume){
if (volume.value){ if (volume.value){
...@@ -121,49 +136,97 @@ class InvestigationTable extends React.Component { ...@@ -121,49 +136,97 @@ class InvestigationTable extends React.Component {
return; return;
} }
*/ */
updateDimensions() {
if(window.innerWidth < 500) {
this.setState({ width: 450, height: 102 });
} else {
let update_width = window.innerWidth-100;
let update_height = Math.round(update_width/4.4);
this.setState({ width: update_width, height: update_height });
}
console.log(this.state.width);
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
render() { render() {
if (this.props.fetching) { if (this.props.fetching) {
return <Loading message="Loading investigations"></Loading>; return <Loading message="Loading investigations"></Loading>;
} }
return this.renderWithBootStrapTable2()
const options = {
paginationSize: 10,
sizePerPage: 10,
paginationShowsTotal: true,
hidePageListOnlyOnePage: true
};
return (
<div className='investigation-table-container'>
<BootstrapTable
data={ this.props.investigations }
options={ options }
//trClassName={ this.getRowClassFormat }
pagination
striped
search
hover
condensed>
<TableHeaderColumn width='10%' hidden isKey dataField='id'>id</TableHeaderColumn>
<TableHeaderColumn width='7%' dataFormat={ this.nameFormatter } dataField='name' formatExtraData={this}>Proposal</TableHeaderColumn>
<TableHeaderColumn width='2%' hidden={this.props.openData} dataFormat={ this.logbookFormatter } dataField='name' formatExtraData={this}></TableHeaderColumn>
<TableHeaderColumn dataSort width='5%' dataField='visitId' dataFormat={ this.beamlineFormatter }>Beamline</TableHeaderColumn>
<TableHeaderColumn dataSort dataField='summary'>Title</TableHeaderColumn>
<TableHeaderColumn width='7%' hidden={this.props.openData} dataFormat={ this.datasetCountFormatter } formatExtraData={this} >Datasets</TableHeaderColumn>
<TableHeaderColumn width='5%' hidden dataFormat= { this.sampleCountFormatter} formatExtraData={this} dataField='__sampleCount'>Samples</TableHeaderColumn>
<TableHeaderColumn width='5%' hidden dataFormat={ this.volumeFormatter } formatExtraData={this}>Size</TableHeaderColumn>
<TableHeaderColumn width='5%' hidden dataFormat={ this.fileCountFormatter } formatExtraData={this} >Files</TableHeaderColumn>
<TableHeaderColumn dataSort width='7%' hidden={this.props.openData} dataField='startDate' dataFormat={ this.dateFormatter }>Date</TableHeaderColumn>
<TableHeaderColumn dataSort width='7%'hidden={!this.props.openData} dataField='releaseDate' dataFormat={ this.dateFormatter }>Release</TableHeaderColumn>
<TableHeaderColumn width='20%' dataFormat={ this.doiFormatter } dataField='doi' dataAlign='center'></TableHeaderColumn>
</BootstrapTable>
</div>
);
} }
renderWithBootStrapTable2(){
const columns = [ {
text: 'id',
dataField: 'id'
},
{
text: 'Proposal',
dataField: 'name',
formatter:this.nameFormatter,
formatExtraData: this,
sort: true,
hidden : false,
headerStyle: (column, colIndex) => {
return { width: '50%', textAlign: 'center' };
},
responsiveHeaderStyle: {
xs : {width: '20%', textAlign: 'center' },
sm : {width: '50%', textAlign: 'center' },
md : {width: '70%', textAlign: 'center' },
lg : {width: '90%', hidden : true, textAlign: 'center' }
}
},
{
text: 'Beamline',
dataField: 'visitId',
formatter:this.beamlineFormatter,
sort: true
},
{
text: 'Title',
dataField: 'summary',
sort: true,
title: (cell, row, rowIndex, colIndex) => `this is custom title for ${cell}`
},
{
text: 'Release',
dataField: 'releaseDate',
formatter : this.dateFormatter,
sort: true
},
{
text: 'DOI',
dataField: 'doi',
formatter:this.doiFormatter,
sort: true
}]
var pageOptions = {
showTotal : true,
hidePageListOnlyOnePage : true,
sizePerPageList: [ {
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: 'All', value: this.props.investigations.length
} ]
};
return <ResponsiveTable
keyField='id'
data={this.props.investigations }
columns={columns}
pageOptions={pageOptions}
/>
}
} }
export default InvestigationTable; export default InvestigationTable;
\ No newline at end of file
import React from 'react';
import Moment from 'react-moment';
import ReactTable from "react-table";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { Grid, Row, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import Loading from '../../components/Loading.js';
import DOIBadge from '../../components/doi/DOIBadge.js';
import { stringifyBytesSize } from "../Helpers.js"
import _ from 'lodash';
import { SAMPLE_COUNT, FILE_COUNT, VOLUME, DATASET_COUNT } from '../../constants/ParameterTypes.js';
import 'react-table/react-table.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable2 from 'react-bootstrap-table-next';
import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
import paginationFactory from 'react-bootstrap-table2-paginator';
import { getContainerSize } from "../../helpers/ContainerSizeHelper.js";
class InvestigationTable extends React.Component {
constructor() {
super();
this.state = {
width: 800,
height: 182
}
}
updateDimensions() {
if(window.innerWidth < 500) {
this.setState({ width: 450, height: 102 });
} else {
let update_width = window.innerWidth-100;
let update_height = Math.round(update_width/4.4);
this.setState({ width: update_width, height: update_height });
}
console.log(this.state.width);
}
componentDidMount() {
this.updateDimensions();
window.addEventListener("resize", this.updateDimensions.bind(this));
}
/**
* This method will calculate the headerStyle based on the ResposiveHeaderStyle and the size of the window
* @param {array} columns BootstrapTable2 columns
*/
configure(columns){
var size = getContainerSize(window);
for (var i = 0; i < columns.length; i++){
var column = columns[i];
if (column.responsiveHeaderStyle){
if (column.responsiveHeaderStyle[size]){
column.headerStyle = (column, colIndex) => {
return column.responsiveHeaderStyle[size];
};
if (column.responsiveHeaderStyle[size].hidden){
column.hidden = column.responsiveHeaderStyle[size].hidden;
}
}
}
}
return columns;
}
render() {
if (this.props.fetching) {
return <Loading message="Loading investigations"></Loading>;
}
return <BootstrapTable2
keyField='id'
data={this.props.data }
columns={this.configure(this.props.columns)}
pagination={ paginationFactory(this.props.pageOptions) }
/>
}
}
export default InvestigationTable;
\ No newline at end of file
export const ContainerWidth = {
ExtraSmall: 768,
Small: 992,
Medium: 1200,
Large: 10000
}
export const ContainerSize = {
ExtraSmall: 'xs',
Small: 'xm',
Medium: 'md',
Large: 'lg'
}
import { ContainerWidth, ContainerSize } from '../constants/ContainerWidth.js';
/**
* Calculates the size of the window width based in the innerWidth and then returns the equivalent container size: ExtraSmall, Small, Medium, Large or ExtraLarge
* @param {window} window the window object that has as attribute innerWidth https://www.w3schools.com/jsref/prop_win_innerheight.asp
* @return {CONTAINERWITH} size the size of the container:
*/
export function getContainerSize(window) {
let width = window.innerWidth;
if (width) {
if (width < ContainerWidth.ExtraSmall){
return ContainerSize.ExtraSmall;
}
if (width < ContainerWidth.Small){
return ContainerSize.Small;
}
if (width < ContainerWidth.Medium){
return ContainerSize.Medium;
}
if (width < ContainerWidth.Large){
return ContainerSize.Large;
}
if (width < ContainerWidth.ExtraLarge){
return ContainerSize.ExtraLarge;
}
}
return ContainerSize.Medium;
}
\ No newline at end of file
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