U4X-440 : Add end patient visit button in move to next service point…

… action (#186) U4X-440 : Add end patient visit button in move to next service point action (#186)
METS-Programme · Mar 17, 2024 · a85c2ac · a85c2ac
1 parent f5d4b89
commit a85c2ac
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -79,3 +79,4 @@ dist/
 !.yarn/versions
 
 .vscode/
+.turbo/
diff --git a/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx b/packages/esm-patient-queues-app/src/active-visits/change-status-dialog.component.tsx
@@ -11,9 +11,21 @@ import {
   TextArea,
 } from '@carbon/react';
 
-import { navigate, showNotification, showToast, useLocations, useSession } from '@openmrs/esm-framework';
+import {
+  navigate,
+  parseDate,
+  setCurrentVisit,
+  showNotification,
+  showSnackbar,
+  showToast,
+  updateVisit,
+  useLocations,
+  useSession,
+  useVisit,
+} from '@openmrs/esm-framework';
 
 import { addQueueEntry, getCareProvider, updateQueueEntry } from './active-visits-table.resource';
+import { first } from 'rxjs/operators';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -58,6 +70,8 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
 
   const [selectedProvider, setSelectedProvider] = useState('');
 
+  const { currentVisit, currentVisitIsRetrospective } = useVisit(queueEntry.patientUuid);
+
   useEffect(() => {
     getCareProvider(sessionUser?.user?.systemId).then(
       (response) => {
@@ -124,40 +138,67 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
       : [],
   );
   // endVisit
-  const endVisitStatus = useCallback(
-    (event) => {
-      event.preventDefault();
-      const comment = event?.target['nextNotes']?.value ?? 'Not Set';
-      updateQueueEntry(
-        QueueStatus.Completed,
-        provider,
-        queueEntry?.id,
-        contentSwitcherIndex,
-        priorityComment,
-        comment,
-      ).then(
-        () => {
-          showToast({
-            critical: true,
-            title: t('endVisit', 'End Vist'),
-            kind: 'success',
-            description: t('endVisitSuccessfully', 'You have successfully ended patient visit'),
-          });
-          closeModal();
-          mutate();
-        },
-        (error) => {
-          showNotification({
-            title: t('queueEntryUpdateFailed', 'Error ending visit'),
-            kind: 'error',
-            critical: true,
-            description: error?.message,
-          });
-        },
-      );
-    },
-    [closeModal, contentSwitcherIndex, mutate, priorityComment, provider, queueEntry?.id, t],
-  );
+  const endCurrentVisit = () => {
+    if (currentVisitIsRetrospective) {
+      setCurrentVisit(null, null);
+      closeModal();
+    } else {
+      const endVisitPayload = {
+        location: currentVisit.location.uuid,
+        startDatetime: parseDate(currentVisit.startDatetime),
+        visitType: currentVisit.visitType.uuid,
+        stopDatetime: new Date(),
+      };
+
+      const abortController = new AbortController();
+      updateVisit(currentVisit.uuid, endVisitPayload, abortController)
+        .pipe(first())
+        .subscribe(
+          (response) => {
+            if (response.status === 200) {
+              const comment = event?.target['nextNotes']?.value ?? 'Not Set';
+              updateQueueEntry(
+                QueueStatus.Completed,
+                provider,
+                queueEntry?.id,
+                contentSwitcherIndex,
+                priorityComment,
+                comment,
+              ).then(
+                () => {
+                  showSnackbar({
+                    isLowContrast: true,
+                    kind: 'success',
+                    subtitle: t('visitEndSuccessfully', `${response?.data?.visitType?.display} ended successfully`),
+                    title: t('visitEnded', 'Visit ended'),
+                  });
+                  closeModal();
+                  mutate();
+                },
+                (error) => {
+                  showNotification({
+                    title: t('queueEntryUpdateFailed', 'Error ending visit'),
+                    kind: 'error',
+                    critical: true,
+                    description: error?.message,
+                  });
+                },
+              );
+              mutate();
+              closeModal();
+            }
+          },
+          (error) => {
+            showSnackbar({
+              title: t('errorEndingVisit', 'Error ending visit'),
+              kind: 'error',
+              isLowContrast: false,
+              subtitle: error?.message,
+            });
+          },
+        );
+    }
+  };
 
   // change to picked
   const changeQueueStatus = useCallback(
@@ -426,7 +467,7 @@ const ChangeStatus: React.FC<ChangeStatusDialogProps> = ({ queueEntry, currentEn
             <Button kind="secondary" onClick={closeModal}>
               {t('cancel', 'Cancel')}
             </Button>
-            <Button kind="danger" onClick={endVisitStatus}>
+            <Button kind="danger" onClick={endCurrentVisit}>
               {t('endVisit', 'End Visit')}
             </Button>
             <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>

diff --git a/.../esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx b/.../esm-patient-queues-app/src/active-visits/change-status-move-to-next-dialog.component.tsx
@@ -12,12 +12,23 @@ import {
   TextArea,
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { navigate, showNotification, showToast, useLocations, useSession } from '@openmrs/esm-framework';
+import {
+  navigate,
+  parseDate,
+  setCurrentVisit,
+  showNotification,
+  showSnackbar,
+  showToast,
+  updateVisit,
+  useLocations,
+  useSession,
+  useVisit,
+} from '@openmrs/esm-framework';
 import { addQueueEntry, getCareProvider, updateQueueEntry } from './active-visits-table.resource';
 import { useQueueRoomLocations } from '../hooks/useQueueRooms';
 import { getCurrentPatientQueueByPatientUuid, useProviders } from '../visit-form/queue.resource';
-import { QueueRecord } from '../types';
 import styles from './change-status-dialog.scss';
+import { first } from 'rxjs/operators';
 import { QueueStatus, extractErrorMessagesFromResponse } from '../utils/utils';
 
 interface ChangeStatusDialogProps {
@@ -52,6 +63,8 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
 
   const [selectedProvider, setSelectedProvider] = useState('');
 
+  const { currentVisit, currentVisitIsRetrospective } = useVisit(patientUuid);
+
   useEffect(() => {
     getCareProvider(sessionUser?.user?.systemId).then(
       (response) => {
@@ -120,16 +133,83 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
       : [],
   );
 
+  // endVisit
+  const endCurrentVisit = () => {
+    if (currentVisitIsRetrospective) {
+      setCurrentVisit(null, null);
+      closeModal();
+    } else {
+      const endVisitPayload = {
+        location: currentVisit.location.uuid,
+        startDatetime: parseDate(currentVisit.startDatetime),
+        visitType: currentVisit.visitType.uuid,
+        stopDatetime: new Date(),
+      };
+
+      const abortController = new AbortController();
+      updateVisit(currentVisit.uuid, endVisitPayload, abortController)
+        .pipe(first())
+        .subscribe(
+          (response) => {
+            if (response.status === 200) {
+              const comment = event?.target['nextNotes']?.value ?? 'Not Set';
+
+              getCurrentPatientQueueByPatientUuid(patientUuid, sessionUser?.sessionLocation?.uuid).then(
+                (res) => {
+                  updateQueueEntry(
+                    QueueStatus.Completed,
+                    provider,
+                    res.data?.results[0]?.uuid,
+                    contentSwitcherIndex,
+                    priorityComment,
+                    comment,
+                  ).then(
+                    () => {
+                      showSnackbar({
+                        isLowContrast: true,
+                        kind: 'success',
+                        subtitle: t('visitEndSuccessfully', `${response?.data?.visitType?.display} ended successfully`),
+                        title: t('visitEnded', 'Visit ended'),
+                      });
+                      closeModal();
+                      mutate();
+                    },
+                    (error) => {
+                      showNotification({
+                        title: t('queueEntryUpdateFailed', 'Error ending visit'),
+                        kind: 'error',
+                        critical: true,
+                        description: error?.message,
+                      });
+                    },
+                  );
+                },
+                () => {},
+              );
+              mutate();
+              closeModal();
+            }
+          },
+          (error) => {
+            showSnackbar({
+              title: t('errorEndingVisit', 'Error ending visit'),
+              kind: 'error',
+              isLowContrast: false,
+              subtitle: error?.message,
+            });
+          },
+        );
+    }
+  };
+
   // change to picked
   const changeQueueStatus = useCallback(
     (event: { preventDefault: () => void; target: { [x: string]: { value: string } } }) => {
       event.preventDefault();
 
       // check status
-
       if (status === QueueStatus.Pending) {
         const comment = event?.target['nextNotes']?.value ?? 'Not Set';
-
         getCurrentPatientQueueByPatientUuid(patientUuid, sessionUser?.sessionLocation?.uuid).then(
           (res) => {
             updateQueueEntry(status, provider, res.data?.results[0].uuid, 0, priorityComment, comment).then(
@@ -352,7 +432,9 @@ const ChangeStatusMoveToNext: React.FC<ChangeStatusDialogProps> = ({ patientUuid
           <Button kind="secondary" onClick={closeModal}>
             {t('cancel', 'Cancel')}
           </Button>
-
+          <Button kind="danger" onClick={endCurrentVisit}>
+            {t('endVisit', 'End Visit')}
+          </Button>
           <Button type="submit">{status === 'pending' ? 'Save' : 'Move to the next queue room'}</Button>
         </ModalFooter>
       </Form>

diff --git a/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx b/packages/esm-patient-queues-app/src/patient-queue-metrics/clinic-metrics.component.tsx
@@ -1,5 +1,5 @@
 import { UserHasAccess, useSession } from '@openmrs/esm-framework';
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PRIVILEGE_RECEPTION_METRIC, PRIVILIGE_TRIAGE_METRIC } from '../constants';
 
@@ -15,7 +15,6 @@ import { useParentLocation } from '../active-visits/patient-queues.resource';
 import { usePatientQueuesList } from '../active-visit-patient-reception/active-visits-reception.resource';
 import { CheckmarkOutline, Pending, ProgressBarRound } from '@carbon/react/icons';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
-import { values } from 'lodash-es';
 
 const ClinicMetrics: React.FC = () => {
   const { t } = useTranslation();
Original file line number	Diff line number	Diff line change
Expand Up		@@ -79,3 +79,4 @@ dist/
		!.yarn/versions

		.vscode/
		.turbo/