Commit 30f33a47 authored by Valeriy Panov's avatar Valeriy Panov
Browse files

#184 UI Dataset details - list of accessions

parent 76c456c6
import * as React from 'react';
import {Page} from 'model/common.model';
import {AccessionIdentifier} from 'model/dataset.model';
import {Table, TableRow, TableCell} from 'ui/common/tables';
import PaginationComponent from 'ui/common/pagination';
import DOI from 'ui/common/DOI';
interface IAccessionIdentifiersTableProps extends React.ClassAttributes<any> {
accessionIdentifiers: AccessionIdentifier[];
}
class AccessionIdentifiersTable extends React.Component<IAccessionIdentifiersTableProps, any> {
constructor(props: IAccessionIdentifiersTableProps, context: any) {
super(props, context);
const {accessionIdentifiers} = props;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length);
this.state = {
paged,
};
}
public componentWillReceiveProps(nextProps) {
const {accessionIdentifiers} = nextProps;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length);
this.setState({paged});
}
protected onPaginationChange = (page, results, sortBy) => {
const { accessionIdentifiers } = this.props;
const paged = Page.from(accessionIdentifiers, accessionIdentifiers.length, page, results, sortBy);
this.setState({paged});
}
public render() {
const {paged} = this.state;
return paged && paged.content && (
<div>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ this.onPaginationChange }/>
<Table widths={ ['10px', '40%', null, null, '10px'] } headers={ (
<TableRow>
<TableCell>Institute code</TableCell>
<TableCell>Accession number</TableCell>
<TableCell>Genus</TableCell>
<TableCell>DOI</TableCell>
</TableRow>
) }>
{ paged.content.map((row, i) => (
<TableRow key={ i }>
<TableCell>{ row.instCode }</TableCell>
<TableCell>{ row.acceNumb }</TableCell>
<TableCell>{ row.genus }</TableCell>
<TableCell><DOI value={ row.doi } noPrefix /></TableCell>
</TableRow>
),
) }
</Table>
<PaginationComponent displayName="records" pageObj={ paged } onChange={ this.onPaginationChange }/>
</div>
);
}
}
export default AccessionIdentifiersTable;
......@@ -26,7 +26,7 @@ import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
import List, { ListItem, ListItemText } from 'material-ui/List';
import AccessionIdentifiersList from 'ui/common/dataset/AccessionIdentifiersList';
import AccessionIdentifiersTable from 'ui/common/dataset/AccessionIdentifiersTable';
import Card, {CardHeader, CardContent, CardActions } from 'ui/common/Card';
......@@ -415,7 +415,7 @@ class DetailInfo extends React.Component<IDetailInfoProps, any> {
<Grid item xs={ 12 } md={ 12 } lg={ 12 } className="p-10">
<Section title="Accessions evaluated">
<div className="p-20">
<AccessionIdentifiersList accessionIdentifiers={ dataset.accessionIdentifiers } />
<AccessionIdentifiersTable accessionIdentifiers={ dataset.accessionIdentifiers } />
</div>
</Section>
</Grid>
......
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