diff --git a/src/app/src/components/FacilityListItemsTable.jsx b/src/app/src/components/FacilityListItemsTable.jsx index 6348fdc72..5ac40c921 100644 --- a/src/app/src/components/FacilityListItemsTable.jsx +++ b/src/app/src/components/FacilityListItemsTable.jsx @@ -115,6 +115,128 @@ class FacilityListItemsTable extends Component { } } + handleChangePage = (_, newPage) => { + const { + fetchListItems, + match: { + params: { + listID, + }, + }, + history: { + push, + location: { + search, + }, + }, + } = this.props; + + const { + rowsPerPage, + } = createPaginationOptionsFromQueryString(search); + + const params = createParamsFromQueryString(search); + + push(makePaginatedFacilityListItemsDetailLinkWithRowCount( + listID, + (newPage + 1), + rowsPerPage, + params, + )); + fetchListItems(listID, newPage + 1, rowsPerPage, params); + } + + handleChangeRowsPerPage = (e) => { + const { + fetchListItems, + match: { + params: { + listID, + }, + }, + history: { + push, + location: { + search, + }, + }, + } = this.props; + + const { page } = createPaginationOptionsFromQueryString(search); + + const params = createParamsFromQueryString(search); + + push(makePaginatedFacilityListItemsDetailLinkWithRowCount( + listID, + page, + getValueFromEvent(e), + params, + )); + fetchListItems(listID, page, getValueFromEvent(e), params); + } + + handleChangeStatusFilter = (selected) => { + const { + fetchListItems, + match: { + params: { + listID, + }, + }, + history: { + push, + location: { + search, + }, + }, + } = this.props; + + const { rowsPerPage } = createPaginationOptionsFromQueryString(search); + const params = createParamsFromQueryString(search); + const newParams = update(params, { + status: { $set: selected ? selected.map(x => x.value) : null }, + }); + + push(makePaginatedFacilityListItemsDetailLinkWithRowCount( + listID, + 1, + rowsPerPage, + newParams, + )); + fetchListItems(listID, 1, rowsPerPage, newParams); + } + + handleShowAllClicked = () => { + const { + fetchListItems, + match: { + params: { + listID, + }, + }, + history: { + push, + location: { + search, + }, + }, + } = this.props; + + const { rowsPerPage } = createPaginationOptionsFromQueryString(search); + const params = createParamsFromQueryString(search); + + const newParams = update(params, { + $unset: ['status'], + }); + push(makePaginatedFacilityListItemsDetailLinkWithRowCount( + listID, + 1, + rowsPerPage, + newParams, + )); + fetchListItems(listID, 1, rowsPerPage, newParams); + } + render() { const { list, @@ -123,19 +245,18 @@ class FacilityListItemsTable extends Component { fetchingItems, selectedFacilityListItemsRowIndex, makeSelectListItemTableRowFunction, - fetchListItems, match: { params: { listID, }, }, history: { - push, location: { search, }, }, } = this.props; + const { page, rowsPerPage, @@ -143,53 +264,6 @@ class FacilityListItemsTable extends Component { const params = createParamsFromQueryString(search); - const handleChangePage = (_, newPage) => { - push(makePaginatedFacilityListItemsDetailLinkWithRowCount( - listID, - (newPage + 1), - rowsPerPage, - params, - )); - fetchListItems(listID, newPage + 1, rowsPerPage, params); - }; - - const handleChangeRowsPerPage = (e) => { - push(makePaginatedFacilityListItemsDetailLinkWithRowCount( - listID, - page, - getValueFromEvent(e), - params, - )); - fetchListItems(listID, page, getValueFromEvent(e), params); - }; - - const handleChangeStatusFilter = (selected) => { - const newParams = update(params, { - status: { $set: selected ? selected.map(x => x.value) : null }, - }); - push(makePaginatedFacilityListItemsDetailLinkWithRowCount( - listID, - 1, - rowsPerPage, - newParams, - )); - fetchListItems(listID, 1, rowsPerPage, newParams); - }; - - const handleShowAllClicked = () => { - const newParams = update(params, { - $unset: ['status'], - }); - push(makePaginatedFacilityListItemsDetailLinkWithRowCount( - listID, - 1, - rowsPerPage, - newParams, - )); - fetchListItems(listID, 1, rowsPerPage, newParams); - }; - - const paginationControlsRow = ( @@ -330,14 +404,14 @@ class FacilityListItemsTable extends Component { options={facilityListStatusFilterChoices} placeholder="Filter by item status..." value={createSelectedStatusChoicesFromParams(params)} - onChange={handleChangeStatusFilter} + onChange={this.handleChangeStatusFilter} /> Showing {filteredCount} of {list.item_count} items. -