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

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>
   );
 };