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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,8 @@ import {
3
3
  DataTableSkeleton,
4
4
  OverflowMenu,
5
5
  OverflowMenuItem,
6
+ Pagination,
7
+ Search,
6
8
  Table,
7
9
  TableBody,
8
10
  TableCell,
@@ -10,13 +12,13 @@ import {
10
12
  TableHead,
11
13
  TableHeader,
12
14
  TableRow,
13
- Pagination,
14
15
  } from '@carbon/react';
15
- import React, { useMemo } from 'react';
16
+ import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
17
+ import React, { useMemo, useState } from 'react';
16
18
  import { useTranslation } from 'react-i18next';
17
- import { EmptyState, ErrorState } from './table-state-components';
19
+ import DischargeSummary from '../discharge-printouts/discharge-summary';
20
+ import GatePassPrintout from '../discharge-printouts/gate-pass-printout';
18
21
  import { useIpdDischargeEncounter } from '../hooks/useIpdDischargeEncounter';
19
- import { formatDatetime, parseDate, showModal } from '@openmrs/esm-framework';
20
22
  import {
21
23
  HyperLinkPatientCell,
22
24
  PatientAdmissionDateCell,
@@ -24,11 +26,12 @@ import {
24
26
  PatientDayInWardCell,
25
27
  PatientGenderCell,
26
28
  } from './patient-cells';
27
- import DischargeSummary from '../discharge-printouts/discharge-summary';
28
- import GatePassPrintout from '../discharge-printouts/gate-pass-printout';
29
+ import { EmptyState, ErrorState } from './table-state-components';
29
30
 
30
31
  const DischargePatients = () => {
31
32
  const { t } = useTranslation();
33
+ const [search, setSearch] = useState('');
34
+
32
35
  const {
33
36
  encounters,
34
37
  error,
@@ -53,44 +56,48 @@ const DischargePatients = () => {
53
56
  { key: 'action', header: t('action', 'Action') },
54
57
  ];
55
58
  const tableRows = useMemo(() => {
56
- return encounters.map((encounter, index) => {
57
- return {
58
- id: encounter.uuid,
59
- dischargeDate: encounter.encounterDateTime ? formatDatetime(parseDate(encounter.encounterDateTime)) : '--',
60
- admissionDate: <PatientAdmissionDateCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
61
- idNumber: encounter.patient.openmrsId,
62
- name: <HyperLinkPatientCell patientName={encounter.patient.name} patientUuid={encounter.patient.uuid} />, //encounter.patient.name,
63
- gender: <PatientGenderCell patientUuid={encounter.patient.uuid} />,
64
- age: <PatientAgeCell patientUuid={encounter.patient.uuid} />,
65
- bedNumber: '--',
66
- daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
67
- action: (
68
- <OverflowMenu size={'sm'} flipped>
69
- <OverflowMenuItem
70
- itemText={t('dischargeSummary', 'Discharge Summary')}
71
- onClick={() => {
72
- const dispose = showModal('patient-discharge-document-preview-modal', {
73
- size: 'lg',
74
- onClose: () => dispose(),
75
- printout: <DischargeSummary dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
76
- });
77
- }}
78
- />
79
- <OverflowMenuItem
80
- itemText={t('gatePass', 'Gate Pass')}
81
- onClick={() => {
82
- const dispose = showModal('patient-discharge-document-preview-modal', {
83
- size: 'lg',
84
- onClose: () => dispose(),
85
- printout: <GatePassPrintout dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
86
- });
87
- }}
88
- />
89
- </OverflowMenu>
90
- ),
91
- };
92
- });
93
- }, [encounters, t]);
59
+ return encounters
60
+ ?.filter((encounter) => encounter.patient.name.toLowerCase().includes(search.toLowerCase()))
61
+ ?.map((encounter, index) => {
62
+ return {
63
+ id: encounter.uuid,
64
+ dischargeDate: encounter.encounterDateTime ? formatDatetime(parseDate(encounter.encounterDateTime)) : '--',
65
+ admissionDate: (
66
+ <PatientAdmissionDateCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />
67
+ ),
68
+ idNumber: encounter.patient.openmrsId,
69
+ name: <HyperLinkPatientCell patientName={encounter.patient.name} patientUuid={encounter.patient.uuid} />, //encounter.patient.name,
70
+ gender: <PatientGenderCell patientUuid={encounter.patient.uuid} />,
71
+ age: <PatientAgeCell patientUuid={encounter.patient.uuid} />,
72
+ bedNumber: '--',
73
+ daysAdmitted: <PatientDayInWardCell patientUuid={encounter.patient.uuid} encounterUuid={encounter.uuid} />,
74
+ action: (
75
+ <OverflowMenu size={'sm'} flipped>
76
+ <OverflowMenuItem
77
+ itemText={t('dischargeSummary', 'Discharge Summary')}
78
+ onClick={() => {
79
+ const dispose = showModal('patient-discharge-document-preview-modal', {
80
+ size: 'lg',
81
+ onClose: () => dispose(),
82
+ printout: <DischargeSummary dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
83
+ });
84
+ }}
85
+ />
86
+ <OverflowMenuItem
87
+ itemText={t('gatePass', 'Gate Pass')}
88
+ onClick={() => {
89
+ const dispose = showModal('patient-discharge-document-preview-modal', {
90
+ size: 'lg',
91
+ onClose: () => dispose(),
92
+ printout: <GatePassPrintout dischargeEncounterUuid={encounter.uuid} patient={encounter.patient} />,
93
+ });
94
+ }}
95
+ />
96
+ </OverflowMenu>
97
+ ),
98
+ };
99
+ });
100
+ }, [encounters, search, t]);
94
101
 
95
102
  if (isLoading) return <DataTableSkeleton />;
96
103
  if (error) return <ErrorState error={error} />;
@@ -98,57 +105,60 @@ const DischargePatients = () => {
98
105
  if (!encounters?.length) return <EmptyState message={t('noDischargedPatients', 'No Discharged patients')} />;
99
106
 
100
107
  return (
101
- <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
102
- {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
103
- <TableContainer>
104
- <Table {...getTableProps()} aria-label="sample table">
105
- <TableHead>
106
- <TableRow>
107
- {headers.map((header) => (
108
- <TableHeader
109
- key={header.key}
110
- {...getHeaderProps({
111
- header,
112
- })}>
113
- {header.header}
114
- </TableHeader>
115
- ))}
116
- </TableRow>
117
- </TableHead>
118
- <TableBody>
119
- {rows.map((row) => {
120
- return (
121
- <TableRow key={row.id} {...getRowProps({ row })}>
122
- {row.cells.map((cell) => (
123
- <TableCell key={cell.id} {...getCellProps({ cell })}>
124
- {cell.value}
125
- </TableCell>
126
- ))}
127
- </TableRow>
128
- );
129
- })}
130
- </TableBody>
131
- </Table>
132
- {paginated && !isLoading && (
133
- <Pagination
134
- forwardText=""
135
- backwardText=""
136
- page={currentPage}
137
- pageSize={currPageSize}
138
- pageSizes={pageSizes}
139
- totalItems={totalCount}
140
- size={'sm'}
141
- onChange={({ page: newPage, pageSize }) => {
142
- if (newPage !== currentPage) {
143
- goTo(newPage);
144
- }
145
- setCurrPageSize(pageSize);
146
- }}
147
- />
148
- )}
149
- </TableContainer>
150
- )}
151
- </DataTable>
108
+ <div>
109
+ <Search value={search} onChange={(e) => setSearch(e.target.value)} />
110
+ <DataTable rows={tableRows} headers={headers} isSortable useZebraStyles>
111
+ {({ rows, headers, getHeaderProps, getRowProps, getTableProps, getCellProps }) => (
112
+ <TableContainer>
113
+ <Table {...getTableProps()} aria-label="sample table">
114
+ <TableHead>
115
+ <TableRow>
116
+ {headers.map((header) => (
117
+ <TableHeader
118
+ key={header.key}
119
+ {...getHeaderProps({
120
+ header,
121
+ })}>
122
+ {header.header}
123
+ </TableHeader>
124
+ ))}
125
+ </TableRow>
126
+ </TableHead>
127
+ <TableBody>
128
+ {rows.map((row) => {
129
+ return (
130
+ <TableRow key={row.id} {...getRowProps({ row })}>
131
+ {row.cells.map((cell) => (
132
+ <TableCell key={cell.id} {...getCellProps({ cell })}>
133
+ {cell.value}
134
+ </TableCell>
135
+ ))}
136
+ </TableRow>
137
+ );
138
+ })}
139
+ </TableBody>
140
+ </Table>
141
+ {paginated && !isLoading && (
142
+ <Pagination
143
+ forwardText=""
144
+ backwardText=""
145
+ page={currentPage}
146
+ pageSize={currPageSize}
147
+ pageSizes={pageSizes}
148
+ totalItems={totalCount}
149
+ size={'sm'}
150
+ onChange={({ page: newPage, pageSize }) => {
151
+ if (newPage !== currentPage) {
152
+ goTo(newPage);
153
+ }
154
+ setCurrPageSize(pageSize);
155
+ }}
156
+ />
157
+ )}
158
+ </TableContainer>
159
+ )}
160
+ </DataTable>
161
+ </div>
152
162
  );
153
163
  };
154
164