@kenyaemr/esm-ward-app 8.5.3-pre.87 → 8.5.3-pre.89

package/src/ward-patients/awaiting-admission-patients.tsx

@@ -3,6 +3,8 @@ import {
   DataTableSkeleton,
   OverflowMenu,
   OverflowMenuItem,
+  Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
@@ -10,25 +12,30 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  Pagination,
 } from '@carbon/react';
 import { formatDatetime, launchWorkspace, parseDate, useAppContext, usePagination } from '@openmrs/esm-framework';
+import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import dayjs from 'dayjs';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type WardPatient, type WardPatientWorkspaceProps, type WardViewContext } from '../types';
 import { getOpenmrsId } from '../ward-view/ward-view.resource';
 import AdmitPatientButton from '../ward-workspace/admit-patient-button.component';
-import { EmptyState, ErrorState } from './table-state-components';
-import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import { HyperLinkPatientCell } from './patient-cells';
+import { EmptyState, ErrorState } from './table-state-components';
 
 const AwaitingAdmissionPatients = () => {
   const { t } = useTranslation();
+  const [search, setSearch] = useState('');
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { inpatientRequests, isLoading, error } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
   const [pageSize, setPageSize] = useState(5);
-  const { paginated, results, totalPages, currentPage, goTo } = usePagination(inpatientRequests, pageSize);
+  const searchResults = useMemo(() => {
+    return inpatientRequests?.filter((req) =>
+      req.patient?.person?.display.toLowerCase().includes(search.toLowerCase()),
+    );
+  }, [inpatientRequests, search]);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(searchResults, pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
 
   const headers = [
@@ -109,52 +116,55 @@ const AwaitingAdmissionPatients = () => {
   if (!inpatientRequests || !inpatientRequests.length)
     return <EmptyState message={t('noPatientInAdmisionQueue', 'No patients in admission queue')} />;
   return (
-    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
-      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
-        <TableContainer>
-          <Table {...getTableProps()} aria-label="sample table">
-            <TableHead>
-              <TableRow>
-                {headers.map((header) => (
-                  <TableHeader
-                    key={header.key}
-                    {...getHeaderProps({
-                      header,
-                    })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => {
-                return (
-                  <TableRow key={row.id} {...getRowProps({ row })}>
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id} {...getCellProps({ cell })}>
-                        {cell.value}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-          {paginated && !isLoading && (
-            <Pagination
-              page={currentPage}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              totalItems={(inpatientRequests ?? []).length}
-              onChange={({ page, pageSize }) => {
-                goTo(page);
-                setPageSize(pageSize);
-              }}
-            />
-          )}
-        </TableContainer>
-      )}
-    </DataTable>
+    <div>
+      <Search value={search} onChange={(e) => setSearch(e.target.value)} />
+      <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  return (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id} {...getCellProps({ cell })}>
+                          {cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {paginated && !isLoading && (
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={pageSizes}
+                totalItems={(inpatientRequests ?? []).length}
+                onChange={({ page, pageSize }) => {
+                  goTo(page);
+                  setPageSize(pageSize);
+                }}
+              />
+            )}
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
   );
 };
 

package/src/ward-patients/discharge-in-patients.tsx

@@ -3,6 +3,7 @@ import {
   OverflowMenu,
   OverflowMenuItem,
   Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
@@ -33,6 +34,7 @@ import { EmptyState } from './table-state-components';
 
 const DischargeInPatients = () => {
   const { t } = useTranslation();
+  const [search, setSearch] = useState('');
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { bedLayouts, wardAdmittedPatientsWithBed, isLoading } = wardPatientGroupDetails ?? {};
   const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
@@ -86,7 +88,10 @@ const DischargeInPatients = () => {
   }, [bedLayouts, wardAdmittedPatientsWithBed, config]);
 
   const [pageSize, setPageSize] = useState(5);
-  const { paginated, results, totalPages, currentPage, goTo } = usePagination(patients, pageSize);
+  const searchResults = useMemo(() => {
+    return patients?.filter((pat) => pat?.patient?.person?.display?.toLowerCase().includes(search.toLowerCase()));
+  }, [patients, search]);
+  const { paginated, results, totalPages, currentPage, goTo } = usePagination(searchResults, pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
 
   const tableRows = useMemo(() => {
@@ -147,52 +152,55 @@ const DischargeInPatients = () => {
   if (!patients.length) return <EmptyState message={t('noDischargeInpatients', 'No Discharge in patients')} />;
 
   return (
-    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
-      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
-        <TableContainer>
-          <Table {...getTableProps()} aria-label="sample table">
-            <TableHead>
-              <TableRow>
-                {headers.map((header) => (
-                  <TableHeader
-                    key={header.key}
-                    {...getHeaderProps({
-                      header,
-                    })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => {
-                return (
-                  <TableRow key={row.id} {...getRowProps({ row })}>
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id} {...getCellProps({ cell })}>
-                        {cell.value}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-          {paginated && !isLoading && (
-            <Pagination
-              page={currentPage}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              totalItems={(patients ?? []).length}
-              onChange={({ page, pageSize }) => {
-                goTo(page);
-                setPageSize(pageSize);
-              }}
-            />
-          )}
-        </TableContainer>
-      )}
-    </DataTable>
+    <div>
+      <Search value={search} onChange={(e) => setSearch(e.target.value)} />
+      <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  return (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id} {...getCellProps({ cell })}>
+                          {cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {paginated && !isLoading && (
+              <Pagination
+                page={currentPage}
+                pageSize={pageSize}
+                pageSizes={pageSizes}
+                totalItems={(patients ?? []).length}
+                onChange={({ page, pageSize }) => {
+                  goTo(page);
+                  setPageSize(pageSize);
+                }}
+              />
+            )}
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
   );
 };
 

package/src/ward-patients/discharge-patients.tsx

@@ -3,6 +3,8 @@ import {
   DataTableSkeleton,
   OverflowMenu,
   OverflowMenuItem,
+  Pagination,
+  Search,
   Table,
   TableBody,
   TableCell,
@@ -10,13 +12,13 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  Pagination,
 } from '@carbon/react';
-import React, { useMemo } from 'react';
+import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { EmptyState, ErrorState } from './table-state-components';
+import DischargeSummary from '../discharge-printouts/discharge-summary';
+import GatePassPrintout from '../discharge-printouts/gate-pass-printout';
 import { useIpdDischargeEncounter } from '../hooks/useIpdDischargeEncounter';
-import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
 import {
   HyperLinkPatientCell,
   PatientAdmissionDateCell,
@@ -24,11 +26,12 @@ import {
   PatientDayInWardCell,
   PatientGenderCell,
 } from './patient-cells';
-import DischargeSummary from '../discharge-printouts/discharge-summary';
-import GatePassPrintout from '../discharge-printouts/gate-pass-printout';
+import { EmptyState, ErrorState } from './table-state-components';
 
 const DischargePatients = () => {
   const { t } = useTranslation();
+  const [search, setSearch] = useState('');
+
   const {
     encounters,
     error,
@@ -53,44 +56,48 @@ const DischargePatients = () => {
     { key: 'action', header: t('action', 'Action') },
   ];
   const tableRows = useMemo(() => {
-    return encounters.map((encounter, index) => {
-      return {
-        id: encounter.uuid,
-        dischargeDate: encounter.encounterDateTime ? formatDatetime(parseDate(encounter.encounterDateTime)) : '--',
-        admissionDate: <PatientAdmissionDateCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
-        idNumber: encounter.patient.openmrsId,
-        name: <HyperLinkPatientCell patientName={encounter.patient.name} patientUuid={encounter.patient.uuid} />, //encounter.patient.name,
-        gender: <PatientGenderCell patientUuid={encounter.patient.uuid} />,
-        age: <PatientAgeCell patientUuid={encounter.patient.uuid} />,
-        bedNumber: '--',
-        daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
-        action: (
-          <OverflowMenu size={'sm'} flipped>
-            <OverflowMenuItem
-              itemText={t('dischargeSummary', 'Discharge Summary')}
-              onClick={() => {
-                const dispose = showModal('patient-discharge-document-preview-modal', {
-                  size: 'lg',
-                  onClose: () => dispose(),
-                  printout: <DischargeSummary dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
-                });
-              }}
-            />
-            <OverflowMenuItem
-              itemText={t('gatePass', 'Gate Pass')}
-              onClick={() => {
-                const dispose = showModal('patient-discharge-document-preview-modal', {
-                  size: 'lg',
-                  onClose: () => dispose(),
-                  printout: <GatePassPrintout dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
-                });
-              }}
-            />
-          </OverflowMenu>
-        ),
-      };
-    });
-  }, [encounters, t]);
+    return encounters
+      ?.filter((encounter) => encounter.patient.name.toLowerCase().includes(search.toLowerCase()))
+      ?.map((encounter, index) => {
+        return {
+          id: encounter.uuid,
+          dischargeDate: encounter.encounterDateTime ? formatDatetime(parseDate(encounter.encounterDateTime)) : '--',
+          admissionDate: (
+            <PatientAdmissionDateCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />
+          ),
+          idNumber: encounter.patient.openmrsId,
+          name: <HyperLinkPatientCell patientName={encounter.patient.name} patientUuid={encounter.patient.uuid} />, //encounter.patient.name,
+          gender: <PatientGenderCell patientUuid={encounter.patient.uuid} />,
+          age: <PatientAgeCell patientUuid={encounter.patient.uuid} />,
+          bedNumber: '--',
+          daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
+          action: (
+            <OverflowMenu size={'sm'} flipped>
+              <OverflowMenuItem
+                itemText={t('dischargeSummary', 'Discharge Summary')}
+                onClick={() => {
+                  const dispose = showModal('patient-discharge-document-preview-modal', {
+                    size: 'lg',
+                    onClose: () => dispose(),
+                    printout: <DischargeSummary dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
+                  });
+                }}
+              />
+              <OverflowMenuItem
+                itemText={t('gatePass', 'Gate Pass')}
+                onClick={() => {
+                  const dispose = showModal('patient-discharge-document-preview-modal', {
+                    size: 'lg',
+                    onClose: () => dispose(),
+                    printout: <GatePassPrintout dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
+                  });
+                }}
+              />
+            </OverflowMenu>
+          ),
+        };
+      });
+  }, [encounters, search, t]);
 
   if (isLoading) return <DataTableSkeleton />;
   if (error) return <ErrorState error={error} />;
@@ -98,57 +105,60 @@ const DischargePatients = () => {
   if (!encounters?.length) return <EmptyState message={t('noDischargedPatients', 'No Discharged patients')} />;
 
   return (
-    <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
-      {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
-        <TableContainer>
-          <Table {...getTableProps()} aria-label="sample table">
-            <TableHead>
-              <TableRow>
-                {headers.map((header) => (
-                  <TableHeader
-                    key={header.key}
-                    {...getHeaderProps({
-                      header,
-                    })}>
-                    {header.header}
-                  </TableHeader>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {rows.map((row) => {
-                return (
-                  <TableRow key={row.id} {...getRowProps({ row })}>
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id} {...getCellProps({ cell })}>
-                        {cell.value}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-          {paginated && !isLoading && (
-            <Pagination
-              forwardText=""
-              backwardText=""
-              page={currentPage}
-              pageSize={currPageSize}
-              pageSizes={pageSizes}
-              totalItems={totalCount}
-              size={'sm'}
-              onChange={({ page: newPage, pageSize }) => {
-                if (newPage !== currentPage) {
-                  goTo(newPage);
-                }
-                setCurrPageSize(pageSize);
-              }}
-            />
-          )}
-        </TableContainer>
-      )}
-    </DataTable>
+    <div>
+      <Search value={search} onChange={(e) => setSearch(e.target.value)} />
+      <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
+          <TableContainer>
+            <Table {...getTableProps()} aria-label="sample table">
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      key={header.key}
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => {
+                  return (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id} {...getCellProps({ cell })}>
+                          {cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {paginated && !isLoading && (
+              <Pagination
+                forwardText=""
+                backwardText=""
+                page={currentPage}
+                pageSize={currPageSize}
+                pageSizes={pageSizes}
+                totalItems={totalCount}
+                size={'sm'}
+                onChange={({ page: newPage, pageSize }) => {
+                  if (newPage !== currentPage) {
+                    goTo(newPage);
+                  }
+                  setCurrPageSize(pageSize);
+                }}
+              />
+            )}
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
   );
 };