Commit 76420def authored by Alejandro De Maria Antolinos's avatar Alejandro De Maria Antolinos

Merge branch 'issue_36' into 'master'

It fixes #36

Closes #36

See merge request !29
parents dcccc194 a0c9cfd9
...@@ -24,9 +24,9 @@ export function setLoginInfo(user) { ...@@ -24,9 +24,9 @@ export function setLoginInfo(user) {
}; };
} }
export function doSignIn(username, password) { export function doSignIn(plugin, username, password) {
let connection = { let connection = {
plugin : ICAT.connection.plugins[0], plugin : plugin,
credentials : [ credentials : [
{ {
"username" : username, "username" : username,
......
...@@ -19,7 +19,8 @@ class DatasetDOIList extends React.Component { ...@@ -19,7 +19,8 @@ class DatasetDOIList extends React.Component {
this.mintedByFormatter = this.mintedByFormatter.bind(this); this.mintedByFormatter = this.mintedByFormatter.bind(this);
} }
doiFormatter(cell, row) {
doiFormatter(cell, row) {
return <DOIBadge doi={cell}></DOIBadge> return <DOIBadge doi={cell}></DOIBadge>
} }
......
...@@ -23,10 +23,6 @@ class DatasetFooter extends React.Component { ...@@ -23,10 +23,6 @@ class DatasetFooter extends React.Component {
} }
render() { render() {
return ( return (
<div className="container-fluid"> <div className="container-fluid">
......
...@@ -14,13 +14,17 @@ class DatasetSummary extends React.Component { ...@@ -14,13 +14,17 @@ class DatasetSummary extends React.Component {
getImageFromGalleyByIndex(index){ getImageFromGalleyByIndex(index){
/** Checking gallery **/ /** Checking gallery **/
var gallery = []; var gallery = this.props.dataset.parameters.filter(function(o){return o.name=="ResourcesGallery"});
if (this.props.dataset.ResourcesGallery != null){
gallery = this.props.dataset.ResourcesGallery.split(" "); if (gallery != null){
if (gallery.length > 0){
if (gallery.length > index){ debugger
var url = ICATPlus.server + "/investigations/" + this.props.dataset.id +"/events/" + gallery[index] + "/file?sessionId=" + this.props.sessionId; gallery = gallery[0].value.split(" ");
return <div><br /><Image src={url} thumbnail /></div>;
if (gallery.length > index){
var url = ICATPlus.server + "/investigations/" + this.props.dataset.id +"/events/" + gallery[index] + "/file?sessionId=" + this.props.sessionId;
return <div><br /><Image src={url} thumbnail /></div>;
}
} }
} }
return null; return null;
......
...@@ -12,7 +12,8 @@ import DatasetTechniqueTab from './DatasetTechniqueTab/DatasetTechniqueTab.js'; ...@@ -12,7 +12,8 @@ import DatasetTechniqueTab from './DatasetTechniqueTab/DatasetTechniqueTab.js';
import TECHNIQUES from '../../config/techniques/techniques.js'; import TECHNIQUES from '../../config/techniques/techniques.js';
import DatasetFileTree from '../../components/File/DatasetFileTree.js'; import DatasetFileTree from '../../components/File/DatasetFileTree.js';
import Loading from '../../components/Loading.js'; import Loading from '../../components/Loading.js';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { getDownloadURLByDatasetId } from "../../config/icat/ids.js"
class DatasetTable extends React.Component { class DatasetTable extends React.Component {
constructor(props) { constructor(props) {
...@@ -23,13 +24,24 @@ class DatasetTable extends React.Component { ...@@ -23,13 +24,24 @@ class DatasetTable extends React.Component {
datasetsPerPage: 8, datasetsPerPage: 8,
activePage: 0, activePage: 0,
datasets: [], datasets: [],
filter: null filter: null,
view : 'list' // Allowed values are 'list' and 'details'
}; };
this.handlePageChanged = this.handlePageChanged.bind(this); this.handlePageChanged = this.handlePageChanged.bind(this);
this.searchTextBoxChanged = this.searchTextBoxChanged.bind(this); this.searchTextBoxChanged = this.searchTextBoxChanged.bind(this);
this.setDetailsView = this.setDetailsView.bind(this);
this.setListView = this.setListView.bind(this);
}
setDetailsView(event) {
this.setState({ view: 'details'});
} }
setListView(event) {
this.setState({ view: 'list'});
}
handlePageChanged(event) { handlePageChanged(event) {
this.setState({ activePage: Number(event.target.id) }); this.setState({ activePage: Number(event.target.id) });
...@@ -79,11 +91,9 @@ class DatasetTable extends React.Component { ...@@ -79,11 +91,9 @@ class DatasetTable extends React.Component {
isFiltered() { isFiltered() {
return ((this.state.filter) && (this.state.filter != "")); return ((this.state.filter) && (this.state.filter != ""));
} }
render() {
if (this.props.fetching) {
return <Loading message="Loading datasets"></Loading>;
}
renderDetailsView(){
let datasets = this.props.datasets; let datasets = this.props.datasets;
let resultsFilteringCount = 0; let resultsFilteringCount = 0;
/** If filter then apply it */ /** If filter then apply it */
...@@ -101,7 +111,7 @@ class DatasetTable extends React.Component { ...@@ -101,7 +111,7 @@ class DatasetTable extends React.Component {
datasets = datasets.slice(currentFirstElementIndex, currentFirstElementIndex + this.state.datasetsPerPage); datasets = datasets.slice(currentFirstElementIndex, currentFirstElementIndex + this.state.datasetsPerPage);
let totalPages = 0; let totalPages = 0;
/** It calculates the number of pages taking into account the filtered datasets if any */
if (datasets.length != 0) { if (datasets.length != 0) {
if (this.isFiltered()) { if (this.isFiltered()) {
totalPages = resultsFilteringCount / this.state.datasetsPerPage; totalPages = resultsFilteringCount / this.state.datasetsPerPage;
...@@ -111,7 +121,7 @@ class DatasetTable extends React.Component { ...@@ -111,7 +121,7 @@ class DatasetTable extends React.Component {
} }
} }
/** Creating pagination */
let items = []; let items = [];
for (let number = 0; number < totalPages; number++) { for (let number = 0; number < totalPages; number++) {
items.push( items.push(
...@@ -119,46 +129,10 @@ class DatasetTable extends React.Component { ...@@ -119,46 +129,10 @@ class DatasetTable extends React.Component {
); );
} }
var foundMessage = null;
if (this.isFiltered()) {
foundMessage = <span style={{ width: '30px' }}>{resultsFilteringCount} found</span>
}
return ( return (
<div className='dataset-table-container' > <div className='dataset-table-container' >
<div className="pull-right" > <DatasetTableToolBar setDetailsView={this.setDetailsView} setListView={this.setListView} searchTextBoxChanged={this.searchTextBoxChanged} filteredCount={resultsFilteringCount}></DatasetTableToolBar>
<Grid fluid >
</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>
{ {
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" > <Row key={id} className="show-grid dataset-table-row" >
...@@ -197,7 +171,6 @@ class DatasetTable extends React.Component { ...@@ -197,7 +171,6 @@ class DatasetTable extends React.Component {
<DatasetSummary dataset={dataset} sessionId={this.props.sessionId} ></DatasetSummary> <DatasetSummary dataset={dataset} sessionId={this.props.sessionId} ></DatasetSummary>
</Tab> </Tab>
{this.techniques.map(function (technique, i) { {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) { if (params.length > 0) {
return <Tab eventKey={i + 2} title={technique.name}> return <Tab eventKey={i + 2} title={technique.name}>
...@@ -222,7 +195,6 @@ class DatasetTable extends React.Component { ...@@ -222,7 +195,6 @@ class DatasetTable extends React.Component {
</Panel.Footer> </Panel.Footer>
</Panel> </Panel>
</Panel> </Panel>
</Col> </Col>
</Row> </Row>
)) ))
...@@ -237,6 +209,71 @@ class DatasetTable extends React.Component { ...@@ -237,6 +209,71 @@ class DatasetTable extends React.Component {
</Grid> </Grid>
</div> </div>
); );
}
dateFormatter(cell, row) {
if (cell != null) {
return <Moment parse="YYYY-MM-DD HH:mm" format="DD/MM/YYYY HH:mm">${cell}</Moment>;
}
}
downloadFormatter(cell, row, extraData){
var downloadURL = getDownloadURLByDatasetId(extraData.props.sessionId,row.id);
return <Button bsStyle="primary" bsSize="xsmall">
<span class="glyphicon glyphicon-download-alt"></span><a style={{color:'#FFFFFF'}} href={downloadURL}> Download</a>
</Button>;
}
techniquesFormatter(cell, row) {
if (row != null) {
var definition = row.parameters.filter(function(o){ return o.name=="definition"});
if (definition){
if (definition.length > 0){
return definition[0].value;
}
}
}
}
render() {
if (this.props.fetching) {
return <Loading message="Loading datasets"></Loading>;
}
/** Render the details view */
if (this.state.view == "details"){
return this.renderDetailsView();
}
const options = {
paginationSize: 10,
sizePerPage: 200,
paginationShowsTotal: true,
hidePageListOnlyOnePage: true
};
return <div className='dataset-table-container'>
<DatasetTableToolBar
setDetailsView={this.setDetailsView}
setListView={this.setListView}
searchTextBoxChanged={this.searchTextBoxChanged}
filteredCount={0}></DatasetTableToolBar>
<BootstrapTable
data={ this.props.datasets }
options={ options }
pagination
striped
search
hover
condensed>
<TableHeaderColumn hidden isKey dataField='id'>id</TableHeaderColumn>
<TableHeaderColumn width='20%' dataField='name'>Name</TableHeaderColumn>
<TableHeaderColumn width='50%' dataField='location'>Location</TableHeaderColumn>
<TableHeaderColumn width='10%' dataFormat={ this.techniquesFormatter } >Techniques</TableHeaderColumn>
<TableHeaderColumn dataSort width='10%' dataField='startDate' dataFormat={ this.dateFormatter }>Date</TableHeaderColumn>
<TableHeaderColumn width='10%' dataField='name' formatExtraData={this} dataFormat={ this.downloadFormatter }>Download</TableHeaderColumn>
</BootstrapTable>
</div>;
} }
} }
...@@ -245,3 +282,48 @@ DatasetTable.propTypes = { ...@@ -245,3 +282,48 @@ DatasetTable.propTypes = {
}; };
export default DatasetTable; export default DatasetTable;
/**
* This class is the toolbar with button and the search bar
*/
class DatasetTableToolBar extends React.Component {
constructor(props) {
super(props);
}
render() {
var foundMessage = "";
if (this.props.filteredCount > 0){
foundMessage = <span style={{ width: '30px' }}>{this.props.filteredCount} found</span>
}
return <Grid fluid ><Row>
<Col xs={3} md={3}>
<ButtonToolbar>
<ToggleButtonGroup type="radio" name="view" defaultValue={1}>
<ToggleButton value={1} onClick={this.props.setListView}><Glyphicon glyph="list" /> List</ToggleButton>
<ToggleButton value={2} onClick={this.props.setDetailsView}><Glyphicon glyph="list-alt" /> Details</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
</Col>
<Col xs={3} md={5}>
</Col>
<Col xs={3} md={4}>
<div className="pull-right" >
<FormGroup pullRight>
<InputGroup onKeyUp={this.props.searchTextBoxChanged} style={{ width: '300px' }}>
<FormControl type="text" placeholder="Search by name" />
<InputGroup.Addon>
{foundMessage}
</InputGroup.Addon>
</InputGroup>
</FormGroup>
</div>
</Col>
</Row>
</Grid>
}
}
\ No newline at end of file
...@@ -3,12 +3,14 @@ import PropTypes from 'prop-types' ...@@ -3,12 +3,14 @@ import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import {Alert, Glyphicon, Modal, Form, FormGroup, Col, ControlLabel, FormControl } from 'react-bootstrap/lib'; import {Alert, Glyphicon, Modal, Form, FormGroup, Col, ControlLabel, FormControl } from 'react-bootstrap/lib';
import Button from 'react-bootstrap-button-loader'; import Button from 'react-bootstrap-button-loader';
import ICAT from '../../config/icat/icat.js'
class LoginForm extends React.Component { class LoginForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.onSignInClicked = this.onSignInClicked.bind(this); this.onSignInClicked = this.onSignInClicked.bind(this);
this.onSignInAsAnonymous = this.onSignInAsAnonymous.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this);
this.state = { this.state = {
isLoading : false, isLoading : false,
...@@ -23,10 +25,16 @@ class LoginForm extends React.Component { ...@@ -23,10 +25,16 @@ class LoginForm extends React.Component {
} }
onSignInClicked(e) { onSignInClicked(e) {
this.setState({ isLoading: true }); this.setState({ isLoading: true });
this.props.doSignIn(this.loginID.value, this.password.value); this.props.doSignIn(ICAT.connection.plugin, this.loginID.value, this.password.value);
} }
onSignInAsAnonymous(e) {
this.setState({ isLoading: true });
this.props.doSignIn( ICAT.anonymous.plugin, ICAT.anonymous.username, ICAT.anonymous.password);
}
componentDidMount() { componentDidMount() {
this.setState({ isLoading: false }); this.setState({ isLoading: false });
} }
...@@ -82,7 +90,7 @@ class LoginForm extends React.Component { ...@@ -82,7 +90,7 @@ class LoginForm extends React.Component {
<Glyphicon glyph="glyphicon glyphicon-log-in" /> Log in <Glyphicon glyph="glyphicon glyphicon-log-in" /> Log in
</Button> </Button>
<br /><br /> <br /><br />
<span><Link to="/"> or Log in as anonymous</Link></span> <span><Link onClick={this.onSignInAsAnonymous} to="/home"> or Log in as anonymous</Link></span>
</div> </div>
<div className="center-block text-center" style={{marginTop: '10px'}}> <div className="center-block text-center" style={{marginTop: '10px'}}>
<LoginAlertMessage error={error}></LoginAlertMessage> <LoginAlertMessage error={error}></LoginAlertMessage>
......
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