feat: Add current date appointments and fix issue with displaying pas…

…t and upcoming appointments (openmrs#867) * feat: Add current date `today` appointments tab * Add translation * Fix failing test * fix failing test
icrc-agomes · Dec 19, 2022 · 3bc5f58 · 3bc5f58
1 parent 52011be
commit 3bc5f58
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 8 deletions.
diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-base.component.tsx
@@ -14,8 +14,9 @@ interface AppointmentsBaseProps {
 }
 
 enum AppointmentTypes {
-  UPCOMING = 0,
-  PAST = 1,
+  TODAY = 0,
+  UPCOMING = 1,
+  PAST = 2,
 }
 
 const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
@@ -48,6 +49,7 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
           ) : null}
           <div className={styles.contentSwitcherWrapper}>
             <ContentSwitcher size="md" onChange={({ index }) => setContentSwitcherValue(index)}>
+              <Switch name={'today'} text={t('today', 'Today')} />
               <Switch name={'upcoming'} text={t('upcoming', 'Upcoming')} />
               <Switch name={'past'} text={t('past', 'Past')} />
             </ContentSwitcher>
@@ -63,6 +65,24 @@ const AppointmentsBase: React.FC<AppointmentsBaseProps> = ({ patientUuid }) => {
           </div>
         </CardHeader>
         {(() => {
+          if (contentSwitcherValue === AppointmentTypes.TODAY) {
+            if (appointmentsData.todaysAppointments?.length) {
+              return <AppointmentsTable patientAppointments={appointmentsData?.todaysAppointments} />;
+            }
+            return (
+              <Layer>
+                <Tile className={styles.tile}>
+                  <EmptyDataIllustration />
+                  <p className={styles.content}>
+                    {t(
+                      'noCurrentAppointments',
+                      'There are no appointments scheduled for today to display for this patient',
+                    )}
+                  </p>
+                </Tile>
+              </Layer>
+            );
+          }
           if (contentSwitcherValue === AppointmentTypes.UPCOMING) {
             if (appointmentsData.upcomingAppointments?.length) {
               return <AppointmentsTable patientAppointments={appointmentsData?.upcomingAppointments} />;

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-base.test.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-base.test.tsx
@@ -88,7 +88,9 @@ describe('AppointmensOverview', () => {
     expect(screen.getByRole('tablist')).toContainElement(upcomingAppointmentsTab);
     expect(screen.getByRole('tablist')).toContainElement(pastAppointmentsTab);
     expect(screen.getByTitle(/Empty data illustration/i)).toBeInTheDocument();
-    expect(screen.getByText(/There are no upcoming appointments to display for this patient/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/There are no appointments scheduled for today to display for this patient/i),
+    ).toBeInTheDocument();
 
     await waitFor(() => user.click(pastAppointmentsTab));
     expect(screen.getByRole('table')).toBeInTheDocument();

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments-table.component.tsx
@@ -34,6 +34,7 @@ const AppointmentsTable: React.FC<AppointmentTableProps> = ({ patientAppointment
       { key: 'date', header: t('date', 'Date') },
       { key: 'location', header: t('location', 'Location') },
       { key: 'service', header: t('service', 'Service') },
+      { key: 'status', header: t('status', 'Status') },
     ],
     [t],
   );
@@ -46,6 +47,7 @@ const AppointmentsTable: React.FC<AppointmentTableProps> = ({ patientAppointment
           date: formatDatetime(parseDate(appointment.startDateTime), { mode: 'wide' }),
           location: appointment?.location?.name ?? '--',
           service: appointment.service.name,
+          status: appointment.status,
         };
       }),
     [paginatedAppointments],

diff --git a/packages/esm-patient-appointments-app/src/appointments/appointments.resource.tsx b/packages/esm-patient-appointments-app/src/appointments/appointments.resource.tsx
@@ -2,6 +2,8 @@ import dayjs from 'dayjs';
 import useSWR from 'swr';
 import { openmrsFetch } from '@openmrs/esm-framework';
 import { AppointmentPayload, AppointmentService, AppointmentsFetchResponse } from '../types';
+import isToday from 'dayjs/plugin/isToday';
+dayjs.extend(isToday);
 
 export const appointmentsSearchUrl = `/ws/rest/v1/appointments/search`;
 
@@ -29,16 +31,20 @@ export function useAppointments(patientUuid: string, startDate: string, abortCon
     ? data.data.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
     : null;
 
-  const pastAppointments = appointments?.filter((appointment) =>
-    dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs()),
+  const pastAppointments = appointments?.filter(({ startDateTime }) =>
+    dayjs(new Date(startDateTime).toLocaleDateString()).isBefore(new Date().setHours(0, 0, 0, 0)),
   );
 
-  const upcomingAppointments = appointments?.filter((appointment) =>
-    dayjs((appointment.startDateTime / 1000) * 1000).isAfter(dayjs()),
+  const upcomingAppointments = appointments?.filter(({ startDateTime }) =>
+    dayjs(new Date(startDateTime).toLocaleDateString()).isAfter(new Date()),
+  );
+
+  const todaysAppointments = appointments?.filter(({ startDateTime }) =>
+    dayjs(new Date(startDateTime).toLocaleDateString()).isToday(),
   );
 
   return {
-    data: data ? { pastAppointments, upcomingAppointments } : null,
+    data: data ? { pastAppointments, upcomingAppointments, todaysAppointments } : null,
     isError: error,
     isLoading: !data && !error,
     isValidating,

diff --git a/packages/esm-patient-appointments-app/translations/en.json b/packages/esm-patient-appointments-app/translations/en.json
@@ -15,6 +15,7 @@
   "discard": "Discard",
   "loading": "Loading",
   "location": "Location",
+  "noCurrentAppointments": "There are no appointments scheduled for today to display for this patient",
   "noPastAppointments": "There are no past appointments to display for this patient",
   "note": "Note",
   "noUpcomingAppointments": "There are no upcoming appointments to display for this patient",
@@ -24,6 +25,9 @@
   "selectLocation": "Select a location",
   "selectService": "Select service",
   "service": "Service",
+  "serviceType": "Service type",
+  "status": "Status",
   "time": "Time",
+  "today": "Today",
   "upcoming": "Upcoming"
 }