diff --git a/src/dataEntryApp/views/search/SubjectSearchTable.js b/src/dataEntryApp/views/search/SubjectSearchTable.js index d6416bbb9..1b0db9a00 100644 --- a/src/dataEntryApp/views/search/SubjectSearchTable.js +++ b/src/dataEntryApp/views/search/SubjectSearchTable.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import MaterialTable from "material-table"; import http from "common/utils/httpClient"; import Chip from "@material-ui/core/Chip"; @@ -12,14 +12,12 @@ import { useSelector } from "react-redux"; import { selectSubjectTypes } from "../../reducers/metadataReducer"; import SubjectProfilePicture from "../../components/SubjectProfilePicture"; import materialTableIcons from "../../../common/material-table/MaterialTableIcons"; +import TablePagination from "@material-ui/core/TablePagination"; const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { const { i18n, t } = useTranslation(); const subjectTypes = useSelector(selectSubjectTypes); - const searchExtensions = filter( - get(organisationConfigs, "organisationConfig.extensions", []), - ({ extensionScope }) => extensionScope.scopeType === extensionScopeTypes.searchResults - ); + const [extensions, setExtensions] = useState(); const customSearchFields = get(organisationConfigs, "organisationConfig.searchResultFields", []); const subjectType = find(subjectTypes, ({ uuid }) => uuid === get(searchRequest, "subjectType")); const isPerson = get(subjectType, "type", "Person") === "Person"; @@ -28,6 +26,25 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { ? getResultConcepts(customSearchFields) : getResultConcepts(filter(customSearchFields, ({ subjectTypeUUID }) => subjectTypeUUID === subjectType.uuid)); + useEffect(() => { + setExtensions(get(organisationConfigs, "organisationConfig.extensions", [])); + }, []); + const [pageSortCriteria, setPageSortCriteria] = useState({ + pageSize: 10, + page: 0, + orderDirection: "", + orderBy: null + }); + const [searchResults, setSearchResults] = useState([]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true); + fetchData(pageSortCriteria) + .then(response => setSearchResults(response.data)) + .finally(() => setLoading(false)); + }, [pageSortCriteria]); + const renderNameWithIcon = ({ uuid, fullName, firstName, profilePicture, subjectTypeName }) => { return ( @@ -51,11 +68,17 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { ); }; + const labelDisplayedRows = ({ from, to }) => { + const reachedEnd = searchResults.length < pageSortCriteria.pageSize; + return `${searchResults.length === 0 && pageSortCriteria.page === 0 ? 0 : from}–${ + reachedEnd ? from - 1 + searchResults.length : to + } of ${reachedEnd ? from - 1 + searchResults.length : `more than ${to}`}`; + }; + const columnsToDisplay = [ { title: t("name"), field: "fullName", - defaultSort: "asc", render: rowData => renderNameWithIcon(rowData) }, ...map(flatten(customColumns), ({ name }) => ({ @@ -82,6 +105,7 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { { title: t("Address"), field: "addressLevel", + sorting: false, render: row => row.addressLevel }, { @@ -118,10 +142,10 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { if (isNil(searchRequest.subjectType) && !isNil(firstSubjectTypeUUID)) { searchRequest.subjectType = firstSubjectTypeUUID; } - pageElement.pageNumber = query.page; - pageElement.numberOfRecordPerPage = query.pageSize; - pageElement.sortColumn = query.orderBy.field; - pageElement.sortOrder = query.orderDirection; + pageElement.pageNumber = pageSortCriteria.page; + pageElement.numberOfRecordPerPage = pageSortCriteria.pageSize; + pageElement.sortColumn = pageSortCriteria.orderBy && pageSortCriteria.orderBy.field; + pageElement.sortOrder = pageSortCriteria.orderBy && pageSortCriteria.orderDirection; searchRequest.pageElement = pageElement; http .post(apiUrl, searchRequest) @@ -129,8 +153,7 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { .then(result => { resolve({ data: result.listOfRecords, - page: query.page, - totalCount: result.totalElements + page: query.page }); }); }); @@ -142,10 +165,13 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { title="" tableRef={tableRef} columns={columns} - data={fetchData} + data={searchResults} + onOrderChange={(orderBy, orderDirection) => + setPageSortCriteria(prevState => ({ ...prevState, orderBy: columns[orderBy], orderDirection })) + } + isLoading={loading} options={{ - pageSize: 10, - pageSizeOptions: [10, 15, 20], + paging: false, addRowPosition: "first", sorting: true, headerStyle: { @@ -153,7 +179,7 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { }, debounceInterval: 500, search: false, - selection: !isEmpty(searchExtensions) + selection: !isEmpty(filter(extensions, ({ extensionScope }) => extensionScope.scopeType === extensionScopeTypes.searchResults)) }} components={{ Toolbar: props => ( @@ -161,12 +187,24 @@ const SubjectSearchTable = ({ searchRequest, organisationConfigs }) => { ) }} /> + setPageSortCriteria(prevState => ({ ...prevState, page }))} + onRowsPerPageChange={e => setPageSortCriteria(prevState => ({ ...prevState, pageSize: e.target.value }))} + /> ); };