feat(pagecomponent): user can change page size

Add option to change the page size. feat #1969
HospitalRun · May 14, 2020 · 7411ad0 · 7411ad0
1 parent 71ac1ca
commit 7411ad0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 24 deletions.
diff --git a/src/__tests__/patients/list/ViewPatients.test.tsx b/src/__tests__/patients/list/ViewPatients.test.tsx
@@ -11,6 +11,7 @@ import { act } from 'react-dom/test-utils'
 import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import format from 'date-fns/format'
 import Page from 'clients/Page'
+import { defaultPageSize } from 'components/PageComponent'
 import ViewPatients from '../../../patients/list/ViewPatients'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as patientSlice from '../../../patients/patients-slice'
@@ -188,7 +189,7 @@ describe('Patients', () => {
         },
         {
           number: 1,
-          size: 1,
+          size: defaultPageSize.value,
           nextPageInfo: { index: null },
           direction: 'next',
           previousPageInfo: { index: null },

diff --git a/src/components/PageComponent.tsx b/src/components/PageComponent.tsx
@@ -1,13 +1,24 @@
 import React from 'react'
-import { Button } from '@hospitalrun/components'
+import { Button, Select } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 
+const pageSizes = [
+  { label: '25', value: 25 },
+  { label: '50', value: 50 },
+  { label: '100', value: 100 },
+  { label: '200', value: 200 },
+  { label: 'All', value: undefined },
+]
+
+export const defaultPageSize = pageSizes[0]
+
 const PageComponent = ({
   hasNext,
   hasPrevious,
   pageNumber,
   setPreviousPageRequest,
   setNextPageRequest,
+  onPageSizeChange,
 }: any) => {
   const { t } = useTranslation()
 
@@ -17,25 +28,34 @@ const PageComponent = ({
         key="actions.previous"
         outlined
         disabled={!hasPrevious}
-        style={{ float: 'left' }}
+        style={{ float: 'left', marginRight: '5px' }}
         color="success"
         onClick={setPreviousPageRequest}
       >
         {t('actions.previous')}
       </Button>
-      <div style={{ display: 'inline-block' }}>
-        {t('actions.page')} {pageNumber}
-      </div>
       <Button
         key="actions.next"
         outlined
-        style={{ float: 'right' }}
+        style={{ float: 'left' }}
         disabled={!hasNext}
         color="success"
         onClick={setNextPageRequest}
       >
         {t('actions.next')}
       </Button>
+      <div style={{ display: 'inline-block' }}>
+        {t('actions.page')} {pageNumber}
+      </div>
+      <div className="row float-right">
+        <Select onChange={onPageSizeChange} defaultValue={defaultPageSize.label}>
+          {pageSizes.map((pageSize) => (
+            <option key={pageSize.label} value={pageSize.value}>
+              {pageSize.label}
+            </option>
+          ))}
+        </Select>
+      </div>
     </div>
   )
 }

diff --git a/src/patients/list/ViewPatients.tsx b/src/patients/list/ViewPatients.tsx
@@ -7,7 +7,7 @@ import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import format from 'date-fns/format'
 import SortRequest from 'clients/db/SortRequest'
 import PageRequest from 'clients/db/PageRequest'
-import PageComponent from 'components/PageComponent'
+import PageComponent, { defaultPageSize } from 'components/PageComponent'
 import useUpdateEffect from 'hooks/useUpdateEffect'
 import { RootState } from '../../store'
 import { searchPatients } from '../patients-slice'
@@ -28,7 +28,7 @@ const ViewPatients = () => {
   const setButtonToolBar = useButtonToolbarSetter()
 
   const defaultPageRequest = useRef<PageRequest>({
-    size: 1,
+    size: defaultPageSize.value,
     number: 1,
     nextPageInfo: { index: null },
     previousPageInfo: { index: null },
@@ -131,29 +131,43 @@ const ViewPatients = () => {
     setSearchText(event.target.value)
   }
 
+  const onPageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newPageSize = parseInt(event.target.value, 10)
+    setUserPageRequest(() => ({
+      size: newPageSize,
+      number: 1,
+      nextPageInfo: { index: null },
+      previousPageInfo: { index: null },
+      direction: 'next',
+    }))
+  }
+
   return (
-    <Container>
-      <Row>
-        <Column md={12}>
-          <TextInput
-            size="lg"
-            type="text"
-            onChange={onSearchBoxChange}
-            value={searchText}
-            placeholder={t('actions.search')}
-          />
-        </Column>
-      </Row>
-
-      <Row> {isLoading ? loadingIndicator : table}</Row>
+    <div>
+      <Container>
+        <Row>
+          <Column md={12}>
+            <TextInput
+              size="lg"
+              type="text"
+              onChange={onSearchBoxChange}
+              value={searchText}
+              placeholder={t('actions.search')}
+            />
+          </Column>
+        </Row>
+
+        <Row> {isLoading ? loadingIndicator : table}</Row>
+      </Container>
       <PageComponent
         hasNext={patients.hasNext}
         hasPrevious={patients.hasPrevious}
         pageNumber={patients.pageRequest ? patients.pageRequest.number : 1}
         setPreviousPageRequest={setPreviousPageRequest}
         setNextPageRequest={setNextPageRequest}
+        onPageSizeChange={onPageSizeChange}
       />
-    </Container>
+    </div>
   )
 }