Commit f219c609 authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos

Merge branch 'issue_35' into 'master'

Fixes #35

Closes #35

See merge request !27
parents 2bc2e268 acb7c7f5
......@@ -18,7 +18,7 @@ class App extends Component {
<div>
<MenuContainer></MenuContainer>
<LoginContainer></LoginContainer>
<Route exact path="/home" component={InvestigationsContainer} />
<Route exact path="/investigations" component={InvestigationsContainer} />
<Route exact path="/investigation/:investigationId/datasets" render={(props) => <InvestigationContainer activeTab={1} {...props} />} />
<Route exact path="/investigation/:investigationId/files" render={(props) => <InvestigationContainer activeTab={2} {...props} />} />
......
......@@ -76,7 +76,7 @@ class DatasetDOIList extends React.Component {
if (this.state.dataCollections.length == 0){
return <Alert bsStyle="default">
This dataset has not any <strong>DOI</strong>
This dataset has not got any <strong>DOI</strong>
</Alert>;
}
return <div style={{ marginTop: '20px' }}>
......
import React from 'react';
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import { Glyphicon, Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import './DatasetFooter.css';
import { getDownloadURLByDatasetId } from "../../../config/icat/ids.js"
......@@ -30,7 +30,8 @@ class DatasetFooter extends React.Component {
render() {
return (
<div className="container-fluid">
<div className="pull-left">
<div className="pull-left">
<span> <Glyphicon glyph="folder-open" /> {this.props.location}</span>
</div>
<div className="pull-right">
{this.getStorageStatus()}
......
......@@ -64,8 +64,7 @@ class DatasetHeader extends React.Component {
<div className="container-fluid">
<div className="pull-left" >
{this.getCheckboxComponent(this.props.datasetId, this.props.selected)}
<span className="left-margin dataset-name">{this.props.name}</span>
<span className="left-margin dataset-location">{this.props.location}</span>
<span className="left-margin dataset-name">{this.props.name}</span>
</div>
<div className="pull-right">
{this.props.techniques.map(function(technique, i){
......
import React from 'react';
import PropTypes from 'prop-types';
import { Glyphicon, Grid, Row, Col, Tab, Tabs, Panel } from 'react-bootstrap';
import { ToggleButtonGroup, ToggleButton, DropdownButton, InputGroup, FormGroup, FormControl, Nav, NavItem, NavDropdown, MenuItem, ButtonToolbar, ButtonGroup, Button, Navbar, Pager, Pagination, Glyphicon, Grid, Row, Col, Tab, Tabs, Panel } from 'react-bootstrap';
import './DatasetTable.css';
import Moment from 'react-moment';
import DatasetHeader from './DatasetHeader/DatasetHeader.js';
......@@ -18,12 +18,39 @@ class DatasetTable extends React.Component {
constructor(props) {
super(props);
this.techniques = TECHNIQUES;
this.state = {
datasetsPerPage: 8,
activePage: 0,
datasets: [],
filter: null
};
this.handlePageChanged = this.handlePageChanged.bind(this);
this.searchTextBoxChanged = this.searchTextBoxChanged.bind(this);
}
handlePageChanged(event) {
this.setState({ activePage: Number(event.target.id) });
}
searchTextBoxChanged(event) {
this.setState({
activePage: 0,
filter: event.target.value
});
}
/**
* It returns an array with the techniques of the dataset
* Example: ["KMAP", "TOMO"]
*/
getTechniquesByDataset(dataset) {
var techniques = [];
this.techniques.map(function (technique, i) {
var params =dataset.parameters.filter(parameter => parameter.name.startsWith(technique.shortname));
this.techniques.map(function (technique, i) {
var params = dataset.parameters.filter(parameter => parameter.name.startsWith(technique.shortname));
if (params.length > 0) {
techniques.push(technique);
}
......@@ -36,7 +63,7 @@ class DatasetTable extends React.Component {
if (technique.length > 0) {
techniques.push(technique[0]);
}
}
}
return techniques;
}
/**
......@@ -48,18 +75,94 @@ class DatasetTable extends React.Component {
}
return "default";
}
isFiltered() {
return ((this.state.filter) && (this.state.filter != ""));
}
render() {
if (this.props.fetching) {
return <Loading message="Loading datasets"></Loading>;
}
let datasets = this.props.datasets;
let resultsFilteringCount = 0;
/** If filter then apply it */
if (this.isFiltered()) {
/** Aplying filter */
var filter = this.state.filter;
datasets = datasets.filter(function (o) { return o.name.indexOf(filter) != -1 });
resultsFilteringCount = datasets.length;
}
/** Datasets pagination*/
let currentFirstElementIndex = this.state.activePage * this.state.datasetsPerPage;
/** It slices datasets */
datasets = datasets.slice(currentFirstElementIndex, currentFirstElementIndex + this.state.datasetsPerPage);
let totalPages = 0;
if (datasets.length != 0) {
if (this.isFiltered()) {
totalPages = resultsFilteringCount / this.state.datasetsPerPage;
}
else {
totalPages = this.props.datasets.length / this.state.datasetsPerPage;
}
}
let items = [];
for (let number = 0; number < totalPages; number++) {
items.push(
<Pagination.Item id={number} onClick={this.handlePageChanged} active={number === this.state.activePage}>{number + 1}</Pagination.Item>
);
}
var foundMessage = null;
if (this.isFiltered()) {
foundMessage = <span style={{ width: '30px' }}>{resultsFilteringCount} found</span>
}
return (
<div className='dataset-table-container' >
<div className="pull-right" >
</div>
<Grid fluid >
<Row>
<Col xs={3} md={1}>
</Col>
<Col xs={3} md={7}>
<ButtonToolbar>
<ToggleButtonGroup type="radio" name="view" defaultValue={1}>
<ToggleButton value={1}><Glyphicon glyph="list" /> List</ToggleButton>
<ToggleButton value={2}><Glyphicon glyph="list-alt" /> Details</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
</Col>
<Col xs={3} md={4}>
<div className="pull-right" >
<FormGroup pullRight>
<InputGroup onKeyUp={this.searchTextBoxChanged} style={{ width: '300px' }}>
<FormControl type="text" placeholder="Search by name" />
<InputGroup.Addon>
{foundMessage}
</InputGroup.Addon>
</InputGroup>
</FormGroup>
</div>
</Col>
</Row>
{
this.props.datasets.sort(function (a, b) { return b.id - a.id; }).map((dataset, id) => (
datasets.sort(function (a, b) { return b.id - a.id; }).map((dataset, id) => (
<Row key={id} className="show-grid dataset-table-row" >
<Col xs={1} md={1}>
<Col xs={3} md={1}>
<div style={{ 'margin': '2px', height: '10px' }}>
<Glyphicon glyph='glyphicon glyphicon-time'></Glyphicon>
<span style={{ 'margin': '10px' }}>
......@@ -71,7 +174,7 @@ class DatasetTable extends React.Component {
</span>
</div>
</Col>
<Col xs={11} md={11}>
<Col xs={9} md={11}>
<Panel bsStyle={this.getPanelbsStyle(dataset.id, this.props.selection.datasetIds)}>
<Panel.Heading >
<Panel.Title toggle>
......@@ -79,7 +182,6 @@ class DatasetTable extends React.Component {
definition={dataset.definition}
name={dataset.name}
startDate={dataset.startDate}
location={dataset.location}
techniques={this.getTechniquesByDataset(dataset)}
datasetId={dataset.id}
addDatasetById={this.props.addDatasetById}
......@@ -95,8 +197,8 @@ class DatasetTable extends React.Component {
<DatasetSummary dataset={dataset} sessionId={this.props.sessionId} ></DatasetSummary>
</Tab>
{this.techniques.map(function (technique, i) {
var params =dataset.parameters.filter(parameter => parameter.name.startsWith(technique.shortname));
var params = dataset.parameters.filter(parameter => parameter.name.startsWith(technique.shortname));
if (params.length > 0) {
return <Tab eventKey={i + 2} title={technique.name}>
<DatasetTechniqueTab dataset={dataset} params={params}></DatasetTechniqueTab>
......@@ -108,15 +210,15 @@ class DatasetTable extends React.Component {
<DatasetMetadataTab dataset={dataset} ></DatasetMetadataTab>
</Tab>
<Tab eventKey={11} title="Files" mountOnEnter={true}>
<DatasetFileTree dataset={dataset} sessionId={this.props.sessionId}> ></DatasetFileTree>
<DatasetFileTree dataset={dataset} sessionId={this.props.sessionId}> ></DatasetFileTree>
</Tab>
<Tab eventKey={12} title="DOI" mountOnEnter={true}>
<Tab eventKey={12} title="DOI" mountOnEnter={true}>
<DatasetDOIList dataset={dataset} sessionId={this.props.sessionId}> ></DatasetDOIList>
</Tab>
</Tabs>
</Panel.Body>
<Panel.Footer>
<DatasetFooter sessionId={this.props.sessionId} dataset={dataset} ></DatasetFooter>
<DatasetFooter location={dataset.location} sessionId={this.props.sessionId} dataset={dataset} ></DatasetFooter>
</Panel.Footer>
</Panel>
</Panel>
......@@ -125,10 +227,15 @@ class DatasetTable extends React.Component {
</Row>
))
}
<Row>
<Col>
<div className="text-right" style={{ marginRight: '30px' }} >
<Pagination bsSize="medium">{items}</Pagination>
</div>
</Col>
</Row>
</Grid>
</div>
);
}
}
......
......@@ -43,7 +43,7 @@ export class Menu extends React.Component {
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="/investigations">
<LinkContainer to="/home">
<NavItem>
<Glyphicon glyph="glyphicon glyphicon-home" /><span style={{ margin: 5 }}>Home </span>
</NavItem>
......
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