Skip to content

Commit f6b6f47

Browse files
Daphne210Daphne210
authored
U4X-1018: Fix the continous time count down of patients who are completed (#325)
* Fix the continous time count down of patients who are completed * Fix build errors
1 parent 4c1751f commit f6b6f47

File tree

4 files changed

+105
-42
lines changed

4 files changed

+105
-42
lines changed

‎packages/esm-patient-queues-app/src/active-visits/queue-patients-clinical/queue-clinical-table.component.tsx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
formatWaitTime,
2828
getProviderTagColor,
2929
getTagColor,
30+
getWaitTimeInMinutes,
3031
trimVisitNumber,
3132
} from '../../helpers/functions';
3233
import PickPatientActionMenu from '../pick-queue-patient-action-action.component';
@@ -52,6 +53,7 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
5253
const session = useSession();
5354
const layout = useLayoutType();
5455
const [searchTerm, setSearchTerm] = useState('');
56+
const [tick, setTick] = useState(0);
5557

5658
const { clinicalRoomTag } = useConfig<PatientQueueConfig>();
5759

@@ -157,6 +159,14 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
157159
return entries;
158160
}, [items, searchTerm, status, clinicalRoomTag]);
159161

162+
useEffect(() => {
163+
const interval = setInterval(() => {
164+
setTick((prev) => prev + 1);
165+
}, 60000);
166+
167+
return () => clearInterval(interval);
168+
}, []);
169+
160170
const tableRows = useMemo(() => {
161171
return filteredPatientQueueEntries.map((patientqueue, index) => ({
162172
...patientqueue,
@@ -191,16 +201,22 @@ const ActiveClinicalVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status })
191201
),
192202
},
193203
waitTime: {
194-
content: (
195-
<Tag>
196-
<span
197-
className={styles.statusContainer}
198-
style={{ color: getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`) }}
199-
>
200-
{formatWaitTime(patientqueue?.dateCreated, t)}
201-
</span>
202-
</Tag>
203-
),
204+
content: (() => {
205+
const minutes = getWaitTimeInMinutes(patientqueue);
206+
207+
return (
208+
<Tag>
209+
<span
210+
className={styles.statusContainer}
211+
style={{
212+
color: getTagColor((minutes ?? 0).toString()),
213+
}}
214+
>
215+
{formatWaitTime(minutes, t)}
216+
</span>
217+
</Tag>
218+
);
219+
})(),
204220
},
205221
actions: {
206222
content: (

‎packages/esm-patient-queues-app/src/active-visits/queue-patients-triage/queue-triage-table.component.tsx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
formatWaitTime,
2828
getProviderTagColor,
2929
getTagColor,
30+
getWaitTimeInMinutes,
3031
trimVisitNumber,
3132
} from '../../helpers/functions';
3233
import PickQueuePatientActionMenu from '../pick-queue-patient-action-action.component';
@@ -53,6 +54,7 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
5354
const layout = useLayoutType();
5455

5556
const { triageRoomTag } = useConfig<PatientQueueConfig>();
57+
const [tick, setTick] = useState(0);
5658

5759
const [isToggled, setIsToggled] = useState(false);
5860
const [searchTerm, setSearchTerm] = useState('');
@@ -145,6 +147,14 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
145147
return entries;
146148
}, [items, status, searchTerm, triageRoomTag]);
147149

150+
useEffect(() => {
151+
const interval = setInterval(() => {
152+
setTick((prev) => prev + 1);
153+
}, 60000);
154+
155+
return () => clearInterval(interval);
156+
}, []);
157+
148158
const tableRows = useMemo(() => {
149159
return filteredPatientQueueEntries.map((patientqueue, index) => ({
150160
...patientqueue,
@@ -177,16 +187,22 @@ const ActiveTriageVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) =
177187
),
178188
},
179189
waitTime: {
180-
content: (
181-
<Tag>
182-
<span
183-
className={styles.statusContainer}
184-
style={{ color: getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`) }}
185-
>
186-
{formatWaitTime(patientqueue?.dateCreated, t)}
187-
</span>
188-
</Tag>
189-
),
190+
content: (() => {
191+
const minutes = getWaitTimeInMinutes(patientqueue);
192+
193+
return (
194+
<Tag>
195+
<span
196+
className={styles.statusContainer}
197+
style={{
198+
color: getTagColor((minutes ?? 0).toString()),
199+
}}
200+
>
201+
{formatWaitTime(minutes, t)}
202+
</span>
203+
</Tag>
204+
);
205+
})(),
190206
},
191207
actions: {
192208
content: (

‎packages/esm-patient-queues-app/src/helpers/functions.ts‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,16 @@ export const trimVisitNumber = (visitNumber: string) => {
2020
return visitNumber.substring(15);
2121
};
2222

23-
export const formatWaitTime = (dateCreated: string, t) => {
24-
if (!dateCreated) return t('unknown', 'Unknown');
23+
export const formatWaitTime = (minutes: number | null, t) => {
24+
if (minutes === null || isNaN(minutes)) return t('unknown', 'Unknown');
2525

26-
const now = dayjs();
27-
const createdTime = dayjs(dateCreated);
28-
const diffInMinutes = now.diff(createdTime, 'minute');
29-
30-
const hours = Math.floor(diffInMinutes / 60);
31-
const minutes = diffInMinutes % 60;
26+
const hours = Math.floor(minutes / 60);
27+
const remainingMinutes = minutes % 60;
3228

3329
if (hours > 0) {
34-
return `${hours} ${t('hoursAnd', 'hours and')} ${minutes} ${t('minutes', 'minutes')}`;
30+
return `${hours} ${t('hoursAnd', 'hours and')} ${remainingMinutes} ${t('minutes', 'minutes')}`;
3531
} else {
36-
return `${minutes} ${t('minutes', 'minutes')}`;
32+
return `${remainingMinutes} ${t('minutes', 'minutes')}`;
3733
}
3834
};
3935

@@ -71,3 +67,17 @@ export const convertTime12to24 = (time12h, timeFormat: amPm) => {
7167

7268
return [hours, minutes];
7369
};
70+
71+
export const getWaitTimeInMinutes = (queue) => {
72+
if (!queue) return null;
73+
74+
if (queue.status === 'COMPLETED') {
75+
if (queue.dateCreated && queue.dateChanged) {
76+
return dayjs(queue.dateChanged).diff(dayjs(queue.dateCreated), 'minutes');
77+
}
78+
} else if (queue.dateCreated) {
79+
return dayjs().diff(dayjs(queue.dateCreated), 'minutes');
80+
}
81+
82+
return null;
83+
};

‎packages/esm-patient-queues-app/src/queue-reception-home.component.tsx‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useMemo, useState } from 'react';
1+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
22
import PatientQueueHeader from './components/patient-queue-header/patient-queue-header.component';
33
import { useTranslation } from 'react-i18next';
44
import dayjs from 'dayjs';
@@ -12,7 +12,13 @@ import {
1212
} from './active-visits/patient-queues.resource';
1313
import { useServicePointCount } from './components/patient-queue-metrics/clinic-metrics.resource';
1414
import { ExtensionSlot, useSession, closeWorkspace } from '@openmrs/esm-framework';
15-
import { buildStatusString, formatWaitTime, getTagColor, trimVisitNumber } from './helpers/functions';
15+
import {
16+
buildStatusString,
17+
formatWaitTime,
18+
getTagColor,
19+
getWaitTimeInMinutes,
20+
trimVisitNumber,
21+
} from './helpers/functions';
1622
import EditActionsMenu from './active-visits/edit-action-menu.components';
1723
import QueueLauncher from './components/queue-launcher/queue-launcher.component';
1824

@@ -43,6 +49,7 @@ const ReceptionHome: React.FC = () => {
4349
const { t } = useTranslation();
4450
const session = useSession();
4551
const { location } = useParentLocation(session?.sessionLocation?.uuid);
52+
const [tick, setTick] = useState(0);
4653

4754
const { isPatientSearchOpen, hidePatientSearch, showPatientSearch } = usePatientSearchVisibility();
4855

@@ -100,6 +107,14 @@ const ReceptionHome: React.FC = () => {
100107
return entries;
101108
}, [items, searchTerm]);
102109

110+
useEffect(() => {
111+
const interval = setInterval(() => {
112+
setTick((prev) => prev + 1);
113+
}, 60000);
114+
115+
return () => clearInterval(interval);
116+
}, []);
117+
103118
// Prepare table rows
104119
const tableRows = useMemo(() => {
105120
return filteredPatientQueueEntries.map((patientqueue, index) => ({
@@ -117,16 +132,22 @@ const ReceptionHome: React.FC = () => {
117132
),
118133
},
119134
waitTime: {
120-
content: (
121-
<Tag>
122-
<span
123-
className={styles.statusContainer}
124-
style={{ color: `${getTagColor(`${dayjs().diff(dayjs(patientqueue?.dateCreated), 'minutes')}`)}` }}
125-
>
126-
{formatWaitTime(patientqueue?.dateCreated, t)}
127-
</span>
128-
</Tag>
129-
),
135+
content: (() => {
136+
const minutes = getWaitTimeInMinutes(patientqueue);
137+
138+
return (
139+
<Tag>
140+
<span
141+
className={styles.statusContainer}
142+
style={{
143+
color: getTagColor((minutes ?? 0).toString()),
144+
}}
145+
>
146+
{formatWaitTime(minutes, t)}
147+
</span>
148+
</Tag>
149+
);
150+
})(),
130151
},
131152
actions: {
132153
content: (

0 commit comments

Comments
 (0)