Commit e626833f authored by Marjolaine Bodin's avatar Marjolaine Bodin
Browse files

#507 adapt per beamline to pagination

parent 8217011a
......@@ -20,31 +20,56 @@ const getHrefByInstrument = (instrumentName) => {
function InvestigationDateFilter(props) {
const {
rootClassName,
value,
onDayChange,
onClear,
startValue,
onStartDayChange,
onStartClear,
startPlaceHolder,
endValue,
onEndDayChange,
onEndClear,
endPlaceHolder,
instrumentName,
showStatisticsMenu,
placeHolder,
} = props;
return (
<div className={rootClassName}>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={value}
placeholder={placeHolder ? placeHolder : 'Filter by date'}
value={startValue}
placeholder={startPlaceHolder ? startPlaceHolder : 'Filter by date'}
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={onDayChange}
onDayChange={onStartDayChange}
dayPickerProps={{
todayButton: 'Today',
}}
/>
<Button
disabled={!value}
onClick={onClear}
disabled={!startValue}
onClick={onStartClear}
bsStyle="link"
className={styles.clearButton}
>
<Glyphicon glyph="remove" />
</Button>
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={endValue}
placeholder={endPlaceHolder ? endPlaceHolder : 'Filter by date'}
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
onDayChange={onEndDayChange}
dayPickerProps={{
todayButton: 'Today',
}}
/>
<Button
disabled={!endValue}
onClick={onEndClear}
bsStyle="link"
className={styles.clearButton}
>
......
import React from 'react';
import { Glyphicon, Col, Grid, Row } from 'react-bootstrap';
import { Glyphicon } from 'react-bootstrap';
import moment from 'moment';
import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
......@@ -163,17 +163,39 @@ function InvestigationTable(props) {
const [sortField, setSortField] = React.useState('startDate');
const [sortOrder, setSortOrder] = React.useState(-1);
const fetchingParams = {
let fetchingParams = {
limit: sizePerPage,
skip: sizePerPage * (page - 1),
filter,
sortBy: sortField,
sortOrder,
search,
startDate: startDate ? moment(startDate).format('YYYY-MM-DD') : undefined,
endDate: endDate ? moment(endDate).format('YYYY-MM-DD') : undefined,
sortBy: sortField ? sortField : 'startDate',
sortOrder: sortOrder ? sortOrder : -1,
};
if (filter) {
fetchingParams = { ...fetchingParams, filter };
}
if (startDate) {
fetchingParams = {
...fetchingParams,
startDate: moment(startDate).format('YYYY-MM-DD'),
};
}
if (endDate) {
fetchingParams = {
...fetchingParams,
endDate: moment(endDate).format('YYYY-MM-DD'),
};
}
if (instrumentName) {
fetchingParams = { ...fetchingParams, instrument: instrumentName };
}
if (search) {
fetchingParams = { ...fetchingParams, search };
}
const data = useResource(InvestigationResource.listShape(), fetchingParams);
const totalSize = data && data.length > 0 ? data[0].meta?.page?.total : 0;
......@@ -246,57 +268,45 @@ function InvestigationTable(props) {
};
return (
<Grid fluid>
<Row>
<Col md={2} sm={3} xs={12}>
<InvestigationDateFilter
rootClassName={styles.filter}
placeHolder={'startDate'}
value={startDate}
onDayChange={handleStartDateChange}
onClear={handleStartDateClear}
showStatisticsMenu={showStatisticsMenu}
instrumentName={instrumentName}
/>
</Col>
<Col md={2} sm={3} xs={12}>
<InvestigationDateFilter
rootClassName={styles.filter}
placeHolder={'endDate'}
value={endDate}
onDayChange={handleEndDateChange}
onClear={handleEndDateClear}
showStatisticsMenu={showStatisticsMenu}
instrumentName={instrumentName}
/>
</Col>
</Row>
<Row>
<ResponsiveTable
data={data}
pageOptions={{
showTotal: true,
sizePerPageList: [
{ text: '1', value: 1 },
{ text: '25', value: 25 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
sizePerPage,
totalSize,
}}
columns={getColumns({
showProposalLinks: withProposalLinks || isAdministrator,
showInvestigationStats: withInvestigationStats || isAdministrator,
showFiles: isAdministrator,
})}
expandRow={expandRow}
handleTableChange={handleTableChange}
onSearch={onSearch}
delay={750}
<>
<div className={styles.wrapper}>
<InvestigationDateFilter
rootClassName={styles.filter}
startValue={startDate}
onStartDayChange={handleStartDateChange}
onStartClear={handleStartDateClear}
startPlaceHolder={'startDate'}
endValue={endDate}
onEndDayChange={handleEndDateChange}
onEndClear={handleEndDateClear}
endPlaceHolder={'endDate'}
showStatisticsMenu={showStatisticsMenu}
instrumentName={instrumentName}
/>
</Row>
</Grid>
</div>
<ResponsiveTable
data={data}
pageOptions={{
showTotal: true,
sizePerPageList: [
{ text: '25', value: 25 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
sizePerPage,
totalSize,
}}
columns={getColumns({
showProposalLinks: withProposalLinks || isAdministrator,
showInvestigationStats: withInvestigationStats || isAdministrator,
showFiles: isAdministrator,
})}
expandRow={expandRow}
handleTableChange={handleTableChange}
onSearch={onSearch}
delay={750}
/>
</>
);
}
......
.wrapper {
position: relative;
}
@media (min-width: 50em) {
.filter {
display: flex;
......
import React from 'react';
import InvestigationTable from '../../components/Investigation/InvestigationTable';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../../resources/investigation';
import { useParams } from 'react-router';
function BeamlineDataTable(props) {
const { name } = useParams();
const { showStatisticsMenu = false } = props;
const investigations = useResource(InvestigationResource.listShape(), {
instrument: name,
});
return (
<InvestigationTable
investigations={investigations}
withInvestigationStats
withProposalLinks
showStatisticsMenu={showStatisticsMenu}
......
......@@ -2,11 +2,6 @@ import React from 'react';
import InvestigationTable from '../../components/Investigation/InvestigationTable';
function MyInvestigationsTable() {
// TODO replace `inv.visitId` with `inv.type !== "PROPOSAL"` when available
/* const mySessions = myInvestigations.filter((inv) => {
return inv.visitId !== 'PROPOSAL';
});*/
return (
<InvestigationTable
filter="participant"
......
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