Commit 552842b9 authored by Marjolaine Bodin's avatar Marjolaine Bodin
Browse files

#507 wip - pagination investigations table

parent c0d82654
......@@ -25,6 +25,7 @@ function InvestigationDateFilter(props) {
onClear,
instrumentName,
showStatisticsMenu,
placeHolder,
} = props;
return (
......@@ -32,7 +33,7 @@ function InvestigationDateFilter(props) {
<DayPickerInput
inputProps={{ className: styles.dateFilterInput }}
value={value}
placeholder=" Filter by date"
placeholder={placeHolder ? placeHolder : 'Filter by date'}
format={INVESTIGATION_DATE_FORMAT}
formatDate={formatDate}
parseDate={parseDate}
......
import React from 'react';
import { Glyphicon } from 'react-bootstrap';
import { Glyphicon, Col, Grid, Row } from 'react-bootstrap';
import moment from 'moment';
import DOIBadge from '../doi/DOIBadge';
import ResponsiveTable from '../Table/ResponsiveTable';
......@@ -15,10 +15,10 @@ import {
} from './utils';
import InvestigationDateFilter from './InvestigationDateFilter';
import styles from './InvestigationTable.module.css';
import { useHistory, useLocation } from 'react-router';
import { useQuery } from '../../helpers/hooks';
import { useSelector } from 'react-redux';
import { INVESTIGATION_DATE_FORMAT } from '../../constants';
import { useResource } from 'rest-hooks';
import InvestigationResource from '../../resources/investigation';
function getLgHeaderStyle(width, hidden) {
return {
......@@ -148,40 +148,78 @@ function getColumns({ showProposalLinks, showInvestigationStats, showFiles }) {
function InvestigationTable(props) {
const {
investigations,
withProposalLinks = false,
withInvestigationStats = false,
showStatisticsMenu = false,
instrumentName,
filter,
} = props;
const [sizePerPage, setSizePerPage] = React.useState(25);
const [page, setPage] = React.useState(1);
const [search, setSearch] = React.useState('');
const [startDate, setStartDate] = React.useState(undefined);
const [endDate, setEndDate] = React.useState(undefined);
let fetchingParams = {
limit: sizePerPage,
skip: sizePerPage * (page - 1),
};
if (filter) {
fetchingParams = { ...fetchingParams, filter };
}
if (search && search.length > 0) {
fetchingParams = { ...fetchingParams, search: search.toString() };
}
if (startDate) {
fetchingParams = {
...fetchingParams,
startDate: moment(startDate).format('YYYY-MM-DD'),
};
}
if (endDate) {
fetchingParams = {
...fetchingParams,
endDate: moment(endDate).format('YYYY-MM-DD'),
};
}
console.log(fetchingParams);
const data = useResource(InvestigationResource.listShape(), fetchingParams);
const totalSize = data && data.length > 0 ? data[0].meta?.page?.total : 0;
const user = useSelector((state) => state.user);
const { sessionId, isAdministrator } = user;
const history = useHistory();
const query = useQuery();
const location = useLocation();
function handleStartDateChange(date) {
setStartDate(date);
setPage(1);
}
const dateForFiltering = query.has('date')
? moment(query.get('date'), moment.HTML5_FMT.DATE)
: undefined;
function handleEndDateChange(date) {
setEndDate(date);
setPage(1);
}
function handleDateChange(date) {
const newQuery = new URLSearchParams(query);
function handleStartDateClear() {
setStartDate(undefined);
setPage(1);
}
if (date) {
newQuery.set('date', moment(date).format(moment.HTML5_FMT.DATE));
} else {
newQuery.delete('date');
}
function handleEndDateClear() {
setEndDate(undefined);
setPage(1);
}
history.replace(`${location.pathname}?${newQuery.toString()}`);
function handleTableChange(page, sizePerPage) {
setPage(page);
setSizePerPage(sizePerPage);
}
function handleDateClear() {
const newQuery = new URLSearchParams(query);
newQuery.delete('date');
history.replace(`${location.pathname}?${newQuery.toString()}`);
function onSearch(query) {
setSearch(query);
setPage(1);
}
const expandRow = {
......@@ -216,51 +254,58 @@ function InvestigationTable(props) {
),
};
function isInvestigationMatching(investigation) {
if (!dateForFiltering) {
return true;
}
return investigation.endDate
? dateForFiltering.isBetween(
investigation.startDate,
investigation.endDate,
'day',
'[]'
)
: dateForFiltering.isSame(investigation.startDate, 'day');
}
return (
<>
<div className={styles.wrapper}>
<InvestigationDateFilter
rootClassName={styles.filter}
value={dateForFiltering && dateForFiltering.toDate()}
onDayChange={handleDateChange}
onClear={handleDateClear}
showStatisticsMenu={showStatisticsMenu}
instrumentName={instrumentName}
<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>
<ResponsiveTable
data={investigations.filter(isInvestigationMatching)}
pageOptions={{
showTotal: true,
sizePerPageList: [
{ text: '25', value: 25 },
{ text: '50', value: 50 },
{ text: '100', value: 100 },
],
}}
columns={getColumns({
showProposalLinks: withProposalLinks || isAdministrator,
showInvestigationStats: withInvestigationStats || isAdministrator,
showFiles: isAdministrator,
})}
expandRow={expandRow}
/>
</>
</Row>
</Grid>
);
}
......
.wrapper {
position: relative;
}
@media (min-width: 50em) {
.filter {
display: flex;
......
......@@ -51,6 +51,7 @@ export default function ResponsiveTable(props) {
pageOptions,
rowEvents,
rowClasses,
delay,
} = props;
function onColumnMatch({ searchText, value, column, row }) {
......@@ -65,6 +66,12 @@ export default function ResponsiveTable(props) {
);
}
function handleTableChange(type, { page, sizePerPage }) {
if (props.handleTableChange) {
props.handleTableChange(page, sizePerPage);
}
}
return (
<ToolkitProvider
keyField={keyField || 'id'}
......@@ -92,24 +99,26 @@ export default function ResponsiveTable(props) {
<div className={styles.search}>
<SearchBar
searchText={searchProps.searchText}
delay={delay ? delay : 250}
onSearch={(query) => {
searchProps.onSearch(query);
if (onSearch) {
onSearch(query);
}
searchProps.onSearch(query);
}}
/>
</div>
</div>
<BootstrapTable2
remote
pagination={paginationFactory(pageOptions)}
onTableChange={handleTableChange}
striped
hover
condensed
showTotal
defaultSorted={defaultSorted}
selectRow={selectRow}
expandRow={expandRow}
pagination={paginationFactory(pageOptions)}
rowEvents={rowEvents}
rowClasses={rowClasses}
noDataIndication="No data to display"
......
import React from 'react';
import { useResource } from 'rest-hooks';
import InvestigationTable from '../../components/Investigation/InvestigationTable';
import InvestigationResource from '../../resources/investigation';
function EmbargoedInvestigationsTable() {
const investigations = useResource(InvestigationResource.listShape(), {
filter: 'embargoed',
});
return <InvestigationTable investigations={investigations} />;
return <InvestigationTable filter="embargoed" />;
}
export default EmbargoedInvestigationsTable;
import React from 'react';
import { useResource } from 'rest-hooks';
import InvestigationTable from '../../components/Investigation/InvestigationTable';
import InvestigationResource from '../../resources/investigation';
function ReleasedInvestigationsTable() {
const investigations = useResource(InvestigationResource.listShape(), {
filter: 'released',
});
return (
<InvestigationTable
investigations={investigations}
filter="released"
withInvestigationStats
withProposalLinks
/>
......
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