add action to move to next service point

Author: jabahum

packages/esm-patient-queues-app/src/active-visits/active-visits-table.component.tsx

@@ -15,6 +15,7 @@ import {
   TableToolbarSearch,
   Tag,
   Tile,
+  Toggle,
 } from '@carbon/react';
 
 import { isDesktop, useLayoutType, usePagination, userHasAccess, useSession } from '@openmrs/esm-framework';
@@ -38,6 +39,7 @@ import NotesActionsMenu from './notes-action-menu.components';
 import { PRIVILEGE_ENABLE_EDIT_DEMOGRAPHICS } from '../constants';
 import PatientSearch from '../patient-search/patient-search.component';
 import { QueueStatus } from '../utils/utils';
+import MovetoNextPointAction from './move-patient-to-next-action-menu.components';
 
 interface ActiveVisitsTableProps {
   status: string;
@@ -202,10 +204,11 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
               </>
             )}
 
-            {entry.status === 'COMPLETED' && (
-              <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/chart`} from={fromPage} />
-            )}
+            <ViewActionsMenu to={`\${openmrsSpaBase}/patient/${entry?.patientUuid}/chart`} from={fromPage} />
+
             <NotesActionsMenu note={entry} />
+            {entry.status === 'SERVING' ||
+              (entry.status === 'PENDING' && <MovetoNextPointAction patientUuid={entry?.patientUuid} />)}
           </div>
         ),
       },
@@ -229,7 +232,7 @@ const ActiveVisitsTable: React.FC<ActiveVisitsTableProps> = ({ status }) => {
           <TableContainer className={styles.tableContainer}>
             <TableToolbar style={{ position: 'static', height: '3rem', overflow: 'visible', backgroundColor: 'color' }}>
               <TableToolbarContent className={styles.toolbarContent}>
-                <Layer>
+                <Layer className={styles.toolbarContentLayer}>
                   <TableToolbarSearch
                     expanded
                     className={styles.search}

packages/esm-patient-queues-app/src/active-visits/active-visits-table.scss

@@ -139,13 +139,13 @@
   td {
     padding: 0.5rem;
 
-    > div {
+    >div {
       max-height: max-content !important;
       background-color: $ui-02;
     }
   }
 
-  th[colspan] td[colspan] > div:first-child {
+  th[colspan] td[colspan]>div:first-child {
     padding: 0 1rem;
   }
 }
@@ -273,4 +273,4 @@
   color: $interactive-01;
   margin-top: 0.5rem;
   cursor: pointer;
-}
+}

packages/esm-patient-queues-app/src/active-visits/move-patient-to-next-action-menu.components.tsx

@@ -0,0 +1,30 @@
+import { Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+
+interface MovetoNextPointActionProps {
+  patientUuid: string;
+}
+
+const MovetoNextPointAction: React.FC<MovetoNextPointActionProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const openModal = useCallback(() => {
+    const dispose = showModal('queue-table-move-to-next-service-point-modal', {
+      patientUuid,
+      closeModal: () => dispose(),
+    });
+  }, [patientUuid]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={openModal}
+      iconDescription={t('movePatient', 'Move Patient')}
+      renderIcon={(props) => <ArrowRight size={16} {...props} />}
+    />
+  );
+};
+export default MovetoNextPointAction;

packages/esm-patient-queues-app/src/active-visits/notes-dialog.component.tsx

@@ -32,9 +32,6 @@ const NotesDialog: React.FC<NotesDialogProps> = ({ queueEntry, closeModal }) =>
           <Button kind="secondary" onClick={closeModal}>
             {t('cancel', 'Cancel')}
           </Button>
-          <Button type="submit" onClick={closeModal}>
-            {t('submit', 'Submit')}
-          </Button>
         </ModalFooter>
       </Form>
     </div>