O3-2857 Add visit actions extension in visits (openmrs#1692)

* O3-2857 Add visit actions extension in visits * code review --------- Co-authored-by: Jamie Arodi <[email protected]>
icrc-jofrancisco · Mar 5, 2024 · 71a1638 · 71a1638
1 parent d62c5aa
commit 71a1638
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 0 deletions.
diff --git a/packages/esm-patient-chart-app/src/index.ts b/packages/esm-patient-chart-app/src/index.ts
@@ -263,3 +263,8 @@ export const deleteVisitActionButton = getAsyncLifecycle(
   () => import('./visit/visit-action-items/delete-visit-action-item.component'),
   { featureName: 'delete-visit', moduleName },
 );
+
+export const activeVisitActionsComponent = getAsyncLifecycle(
+  () => import('./visit/visits-widget/active-visit-buttons/active-visit-buttons'),
+  { featureName: 'active-visit-actions', moduleName },
+);
diff --git a/packages/esm-patient-chart-app/src/routes.json b/packages/esm-patient-chart-app/src/routes.json
@@ -234,6 +234,14 @@
       "online": true,
       "offline": true,
       "order": 1
+    },
+    {
+      "name": "active-visit-action-button",
+      "slot": "active-visit-actions",
+      "component": "activeVisitActionsComponent",
+      "online": true,
+      "offline": true,
+      "order": 1
     }
   ],
   "pages": [

diff --git a/...-patient-chart-app/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.scss b/...-patient-chart-app/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.scss
@@ -0,0 +1,7 @@
+@use '@carbon/styles/scss/spacing';
+
+.buttonsContainer {
+    display: flex;
+    gap: spacing.$spacing-02;
+    margin: spacing.$spacing-02;
+}
diff --git a/...m-patient-chart-app/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.tsx b/...m-patient-chart-app/src/visit/visits-widget/active-visit-buttons/active-visit-buttons.tsx
@@ -0,0 +1,170 @@
+import { launchPatientWorkspace, useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import React, { useCallback } from 'react';
+import styles from './active-visit-buttons.scss';
+import { useTranslation } from 'react-i18next';
+import { Button, MenuButton, MenuItem } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import type { Visit } from '@openmrs/esm-framework';
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
+
+export interface ActiveVisitActionsInterface {
+  visit: Visit;
+  patientUuid: string;
+}
+const ActiveVisitActions: React.FC<ActiveVisitActionsInterface> = ({ visit, patientUuid }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const isMobile = layout === 'phone';
+
+  return (
+    <div>
+      {isTablet || isMobile ? (
+        <div className={styles.buttonsContainer}>
+          <VisitActionsComponent patientUuid={patientUuid} />
+
+          <MenuButton label={t('more', 'More')} kind="ghost">
+            <MenuItem
+              kind="ghost"
+              label={t('addNote', 'Add note')}
+              onClick={useLaunchWorkspaceRequiringVisit('visit-notes-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addLabOrPrescription', 'Add lab or prescription')}
+              onClick={useLaunchWorkspaceRequiringVisit('order-basket')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addVitals', 'Add vitals')}
+              onClick={useLaunchWorkspaceRequiringVisit('patient-vitals-biometrics-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addCondition', 'Add condition')}
+              onClick={useLaunchWorkspaceRequiringVisit('conditions-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addAllergy', 'Add allergy')}
+              onClick={useLaunchWorkspaceRequiringVisit('patient-allergy-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addAppointment', 'Add appointment')}
+              onClick={useLaunchWorkspaceRequiringVisit('appointments-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('otherForm', 'Other form')}
+              onClick={useLaunchWorkspaceRequiringVisit('clinical-forms-workspace')}
+              renderIcon={Add}
+            />
+          </MenuButton>
+        </div>
+      ) : (
+        <div className={styles.buttonsContainer}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            iconDescription="Add visit note"
+            onClick={useLaunchWorkspaceRequiringVisit('visit-notes-form-workspace')}
+          >
+            {t('addNote', 'Add note')}
+          </Button>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            iconDescription="Add lab or prescription"
+            onClick={useLaunchWorkspaceRequiringVisit('order-basket')}
+          >
+            {t('addLabOrPrescription', 'Add lab or prescription')}
+          </Button>
+
+          <VisitActionsComponent patientUuid={patientUuid} />
+
+          <MenuButton label={t('more', 'More')} kind="ghost">
+            <MenuItem
+              kind="ghost"
+              label={t('addVitals', 'Add vitals')}
+              onClick={useLaunchWorkspaceRequiringVisit('patient-vitals-biometrics-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addCondition', 'Add condition')}
+              onClick={useLaunchWorkspaceRequiringVisit('conditions-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addAllergy', 'Add allergy')}
+              onClick={useLaunchWorkspaceRequiringVisit('patient-allergy-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('addAppointment', 'Add appointment')}
+              onClick={useLaunchWorkspaceRequiringVisit('appointments-form-workspace')}
+              renderIcon={Add}
+            />
+            <MenuItem
+              kind="ghost"
+              label={t('otherForm', 'Other form')}
+              onClick={useLaunchWorkspaceRequiringVisit('clinical-forms-workspace')}
+              renderIcon={Add}
+            />
+          </MenuButton>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ActiveVisitActions;
+
+interface VisitActionsProps {
+  patientUuid: string;
+}
+const VisitActionsComponent: React.FC<VisitActionsProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+
+  const openModal = useCallback(
+    (modalName) => {
+      const dispose = showModal(modalName, {
+        closeModal: () => dispose(),
+        patientUuid,
+      });
+    },
+    [patientUuid],
+  );
+
+  return (
+    <MenuButton label={t('endVisit', 'End visit')} kind="ghost">
+      <MenuItem
+        kind="ghost"
+        label={t('endVisit', 'End visit')}
+        onClick={() => openModal('end-visit-dialog')}
+        renderIcon={Add}
+      />
+      <MenuItem
+        kind="ghost"
+        label={t('cancelVisit', 'Cancel visit')}
+        onClick={() => openModal('cancel-visit-dialog')}
+        renderIcon={Add}
+      />
+      <MenuItem
+        kind="ghost"
+        label={t('deleteVisit', 'Delete visit')}
+        onClick={() => openModal('delete-visit-dialog')}
+        renderIcon={Add}
+      />
+    </MenuButton>
+  );
+};