@openmrs/esm-appointments-app 8.3.2-pre.4972 → 8.3.2-pre.4994

package/src/form/appointments-form.test.tsx

@@ -15,7 +15,7 @@ import { mockUseAppointmentServiceData, mockSession, mockLocations, mockProvider
 import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { saveAppointment } from './appointments-form.resource';
 import { useProviders } from '../hooks/useProviders';
-import AppointmentForm from './appointments-form.component';
+import AppointmentForm from './appointments-form.workspace';
 
 const defaultProps = {
   context: 'creating',

package/src/index.ts

@@ -75,8 +75,6 @@ export const earlyAppointments = getAsyncLifecycle(
   options,
 );
 
-export const appointmentsForm = getAsyncLifecycle(() => import('./form/appointments-form.component'), options);
-
 export const searchPatient = getAsyncLifecycle(() => import('./patient-search/patient-search.component'), options);
 
 // t('Appointments', 'Appointments')
@@ -100,12 +98,13 @@ export const patientUpcomingAppointmentsWidget = getAsyncLifecycle(
   options,
 );
 
-export const patientAppointmentsCancelConfirmationDialog = getAsyncLifecycle(
+export const cancelAppointmentModal = getAsyncLifecycle(
   () => import('./patient-appointments/patient-appointments-cancel.modal'),
   options,
 );
 
-export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.component'), options);
+// t('createNewAppointment', 'Create new appointment')
+export const appointmentsFormWorkspace = getAsyncLifecycle(() => import('./form/appointments-form.workspace'), options);
 
 export const endAppointmentModal = getAsyncLifecycle(
   () => import('./appointments/common-components/end-appointment.modal'),

package/src/metrics/metrics-header.component.tsx

@@ -24,7 +24,7 @@ const MetricsHeader: React.FC = () => {
       mutate: () => {}, // TODO get this to mutate properly
     };
 
-    launchWorkspace('create-appointment', { ...props });
+    launchWorkspace('appointments-form-workspace', { ...props });
   };
 
   return (

package/src/patient-appointments/patient-appointments-action-menu.component.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useContext } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
-import { launchWorkspace, showModal, useLayoutType } from '@openmrs/esm-framework';
+import { showModal, useLayoutType } from '@openmrs/esm-framework';
 import type { Appointment } from '../types';
-import PatientAppointmentContext, { PatientAppointmentContextTypes } from '../hooks/patientAppointmentContext';
 import styles from './patient-appointments-action-menu.scss';
 
 interface appointmentsActionMenuProps {
@@ -15,25 +14,17 @@ interface appointmentsActionMenuProps {
 export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appointmentsActionMenuProps) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
-  const patientAppointmentContext = useContext(PatientAppointmentContext);
 
-  const launchEditAppointmentForm = useCallback(() => {
-    if (patientAppointmentContext === PatientAppointmentContextTypes.PATIENT_CHART) {
-      launchPatientWorkspace('appointments-form-workspace', {
-        workspaceTitle: t('editAppointment', 'Edit an appointment'),
-        appointment,
-        context: 'editing',
-      });
-    } else {
-      launchWorkspace('edit-appointments-form', {
-        context: 'editing',
-        appointment,
-      });
-    }
-  }, [appointment, patientAppointmentContext, t]);
+  const handleLaunchEditAppointmentForm = () => {
+    launchPatientWorkspace('appointments-form-workspace', {
+      appointment,
+      context: 'editing',
+      workspaceTitle: t('editAppointment', 'Edit appointment'),
+    });
+  };
 
-  const launchCancelAppointmentDialog = () => {
-    const dispose = showModal('patient-appointment-cancel-confirmation-dialog', {
+  const handleLaunchCancelAppointmentModal = () => {
+    const dispose = showModal('cancel-appointment-modal', {
       closeCancelModal: () => dispose(),
       appointmentUuid: appointment.uuid,
       patientUuid,
@@ -46,16 +37,16 @@ export const PatientAppointmentsActionMenu = ({ appointment, patientUuid }: appo
         <OverflowMenuItem
           className={styles.menuItem}
           id="editAppointment"
-          onClick={launchEditAppointmentForm}
           itemText={t('edit', 'Edit')}
+          onClick={handleLaunchEditAppointmentForm}
         />
         <OverflowMenuItem
           className={styles.menuItem}
+          hasDivider
           id="cancelAppointment"
-          itemText={t('cancel', 'Cancel')}
-          onClick={launchCancelAppointmentDialog}
           isDelete={true}
-          hasDivider
+          itemText={t('cancel', 'Cancel')}
+          onClick={handleLaunchCancelAppointmentModal}
         />
       </OverflowMenu>
     </Layer>

package/src/patient-appointments/patient-appointments-base.component.tsx

@@ -37,21 +37,26 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patie
     isValidating,
   } = usePatientAppointments(patientUuid, startDate, new AbortController());
 
-  const launchAppointmentsForm = () => {
+  const handleLaunchAppointmentsForm = () => {
     if (patientAppointmentContext === PatientAppointmentContextTypes.PATIENT_CHART) {
       launchPatientWorkspace('appointments-form-workspace');
     } else {
-      launchWorkspace('add-appointment', {
+      launchWorkspace('appointments-form-workspace', {
         context: 'creating',
         patientUuid,
+        workspaceTitle: t('createNewAppointment', 'Create new appointment'),
       });
     }
   };
 
-  if (isLoading) return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+  }
+
   if (error) {
     return <ErrorState headerTitle={headerTitle} error={error} />;
   }
+
   if (appointmentsData && Object.keys(appointmentsData)?.length) {
     return (
       <div className={styles.widgetCard}>
@@ -77,7 +82,7 @@ const PatientAppointmentsBase: React.FC<PatientAppointmentsBaseProps> = ({ patie
               kind="ghost"
               renderIcon={(props) => <Add size={16} {...props} />}
               iconDescription="Add Appointments"
-              onClick={launchAppointmentsForm}>
+              onClick={handleLaunchAppointmentsForm}>
               {t('add', 'Add')}
             </Button>
           </div>

package/src/patient-appointments/patient-appointments-cancel.modal.tsx

@@ -5,13 +5,13 @@ import { showSnackbar } from '@openmrs/esm-framework';
 import { changeAppointmentStatus, usePatientAppointments } from './patient-appointments.resource';
 import styles from './patient-appointments-cancel.scss';
 
-interface PatientCancelAppointmentModalProps {
+interface CancelAppointmentModalProps {
   closeCancelModal: () => void;
   appointmentUuid: string;
   patientUuid: string;
 }
 
-const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps> = ({
+const CancelAppointmentModal: React.FC<CancelAppointmentModalProps> = ({
   closeCancelModal,
   appointmentUuid,
   patientUuid,
@@ -20,21 +20,19 @@ const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps
   const { mutate } = usePatientAppointments(patientUuid, new Date().toUTCString(), new AbortController());
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleCancel = async () => {
+  const handleCancelAppointment = async () => {
     setIsSubmitting(true);
 
     changeAppointmentStatus('Cancelled', appointmentUuid)
-      .then(({ status }) => {
-        if (status === 200) {
-          mutate();
-          closeCancelModal();
-          showSnackbar({
-            isLowContrast: true,
-            kind: 'success',
-            subtitle: t('appointmentCancelledSuccessfully', 'Appointment cancelled successfully'),
-            title: t('appointmentCancelled', 'Appointment cancelled'),
-          });
-        }
+      .then(() => {
+        mutate();
+        closeCancelModal();
+        showSnackbar({
+          isLowContrast: true,
+          kind: 'success',
+          subtitle: t('appointmentCancelledSuccessfully', 'Appointment cancelled successfully'),
+          title: t('appointmentCancelled', 'Appointment cancelled'),
+        });
       })
       .catch((err) => {
         showSnackbar({
@@ -60,7 +58,7 @@ const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps
         <Button kind="secondary" onClick={closeCancelModal}>
           {t('discard', 'Discard')}
         </Button>
-        <Button kind="danger" onClick={handleCancel} disabled={isSubmitting}>
+        <Button kind="danger" onClick={handleCancelAppointment} disabled={isSubmitting}>
           {t('cancelAppointment', 'Cancel appointment')}
         </Button>
       </ModalFooter>
@@ -68,4 +66,4 @@ const PatientCancelAppointmentModal: React.FC<PatientCancelAppointmentModalProps
   );
 };
 
-export default PatientCancelAppointmentModal;
+export default CancelAppointmentModal;

package/src/patient-search/patient-search.component.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import { ExtensionSlot, launchWorkspace } from '@openmrs/esm-framework';
 import styles from './patient-search.scss';
-import { useTranslation } from 'react-i18next';
 
 const PatientSearch: React.FC = () => {
-  const { t } = useTranslation();
   const launchCreateAppointmentForm = (patient) => {
     const props = {
       patientUuid: patient.uuid,
       context: 'creating',
       mutate: () => {}, // TODO get this to mutate properly
     };
-    launchWorkspace('create-appointment', { ...props });
+
+    launchWorkspace('appointments-form-workspace', { ...props });
   };
 
   return (

package/src/routes.json

@@ -30,7 +30,6 @@
       "slot": "calendar-dashboard-slot",
       "component": "appointmentsCalendarDashboardLink"
     },
-
     {
       "name": "todays-appointments-dashboard",
       "slot": "todays-appointment-slot",
@@ -65,16 +64,6 @@
       "name": "early-appointments-panel",
       "component": "earlyAppointments"
     },
-    {
-      "name": "appointments-form-workspace",
-      "component": "appointmentsFormWorkspace",
-      "meta": {
-        "title": {
-          "key": "createNewAppointment",
-          "default": "Create new appointment"
-        }
-      }
-    },
     {
       "name": "patient-appointments-summary-dashboard",
       "component": "patientAppointmentsSummaryDashboardLink",
@@ -102,39 +91,9 @@
       "component": "patientUpcomingAppointmentsWidget",
       "slot": "visit-form-top-slot"
     },
-    {
-      "name": "edit-appointments-form",
-      "component": "appointmentsForm",
-      "meta": {
-        "title":{
-          "key":"editAppointment",
-          "default":"Edit Appointment"
-        }
-      }
-    },
     {
       "name": "search-patient",
       "component": "searchPatient"
-   },
-    {
-      "name": "create-appointment",
-      "component": "appointmentsForm",
-      "meta": {
-        "title": {
-          "key":"appointmentForm",
-          "default":"Appointment Form"
-        }
-      }
-    },
-    {
-      "name": "add-appointment",
-      "component": "appointmentsForm",
-      "meta": {
-        "title": {
-          "key": "createNewAppointment",
-          "default": "Create new appointment"
-        }
-      }
     },
     {
       "name": "home-appointments-tile",
@@ -148,8 +107,16 @@
       "component": "endAppointmentModal"
     },
     {
-      "name": "patient-appointment-cancel-confirmation-dialog",
-      "component": "patientAppointmentsCancelConfirmationDialog"
+      "name": "cancel-appointment-modal",
+      "component": "cancelAppointmentModal"
+    }
+  ],
+  "workspaces": [
+    {
+      "name": "appointments-form-workspace",
+      "component": "appointmentsFormWorkspace",
+      "title": "createNewAppointment",
+      "type": "form"
     }
   ]
 }

package/translations/en.json

@@ -77,8 +77,7 @@
   "durationInMinutes": "Duration (minutes)",
   "durationMins": "Duration min",
   "edit": "Edit",
-  "editAppointment": "Edit Appointment",
-  "editAppointments": "Edit Appointment",
+  "editAppointment": "Edit appointment",
   "emptyStateText": "There are no <1>{{displayText}}</1> to display",
   "encounters": "Encounters",
   "encounterType": "Encounter type",