(fix) Tweaks to the today's appointments widget UI (#810)

openmrs · Sep 11, 2023 · 5972681 · 5972681
1 parent 6fcfbad
commit 5972681
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 85 deletions.
diff --git a/packages/esm-appointments-app/src/home-appointments/appointment-actions.component.tsx b/packages/esm-appointments-app/src/home-appointments/appointment-actions.component.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
 import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { navigate, useConfig } from '@openmrs/esm-framework';
-import { MappedAppointment } from '../types';
-import PatientSearch from '../patient-search/patient-search.component';
+import { isDesktop, navigate, useConfig } from '@openmrs/esm-framework';
+import type { MappedAppointment } from '../types';
 import { launchOverlay } from '../hooks/useOverlay';
-import styles from './appointments-list.scss';
 import { spaBasePath } from '../constants';
 import { launchCheckInAppointmentModal, handleUpdateStatus, handleComplete } from './common';
-import { useSWRConfig } from 'swr';
-import CancelAppointment from '../appointments/forms/cancel-form/cancel-appointment.component';
 import AppointmentForm from '../appointments/forms/create-edit-form/appointments-form.component';
+import CancelAppointment from '../appointments/forms/cancel-form/cancel-appointment.component';
+import PatientSearch from '../patient-search/patient-search.component';
+import styles from './appointments-list.scss';
 
 interface ActionMenuProps {
   appointment: MappedAppointment;
@@ -95,7 +95,11 @@ export const ActionsMenu = ({ appointment, useBahmniUI }: ActionMenuProps) => {
 
   return (
     <Layer>
-      <OverflowMenu ariaLabel="Edit appointment" selectorPrimaryFocus={'#editPatientDetails'} size="sm" flipped>
+      <OverflowMenu
+        ariaLabel="Edit appointment"
+        selectorPrimaryFocus={'#editPatientDetails'}
+        size={isDesktop ? 'sm' : 'lg'}
+        flipped>
         <EditOverflowItem />
         <OverflowMenuItem
           className={styles.menuItem}

diff --git a/packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx b/packages/esm-appointments-app/src/home-appointments/appointments-list.component.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
+import type { KeyedMutator } from 'swr';
 import { useTranslation } from 'react-i18next';
-import { useSWRConfig } from 'swr';
 import {
   Button,
   DataTable,
@@ -30,7 +30,7 @@ import { ActionsMenu } from './appointment-actions.component';
 import { EmptyDataIllustration } from './empty-data-illustration.component';
 import { launchCheckInAppointmentModal, handleComplete } from './common';
 import { SeeAllAppointmentsLink, AddAppointmentLink, ViewCalendarLink } from './links.component';
-import { MappedHomeAppointment } from '../types';
+import { Appointment, MappedHomeAppointment } from '../types';
 import { useTodaysAppointments } from './appointments-table.resource';
 import styles from './appointments-list.scss';
 
@@ -42,7 +42,16 @@ interface PaginationData {
 
 const ServiceColor = ({ color }) => <div className={styles.serviceColor} style={{ backgroundColor: `${color}` }} />;
 
-const RenderStatus = ({ status, t, appointmentUuid, mutate }) => {
+type RenderStatusProps = {
+  status: string;
+  t: (key: string, fallback: string) => string;
+  appointmentUuid: string;
+  mutate: KeyedMutator<{
+    data: Array<Appointment>;
+  }>;
+};
+
+const RenderStatus = ({ status, t, appointmentUuid, mutate }: RenderStatusProps) => {
   switch (status) {
     case 'Completed':
       return (
@@ -74,6 +83,7 @@ const RenderStatus = ({ status, t, appointmentUuid, mutate }) => {
     default:
       return (
         <Button
+          size="sm"
           kind="ghost"
           className={styles.actionButton}
           disabled={status === 'CheckedIn'}
@@ -88,9 +98,8 @@ const AppointmentsBaseTable = () => {
   const layout = useLayoutType();
   const { user } = useSession();
   const { t } = useTranslation();
-  const { mutate } = useSWRConfig();
   const { useBahmniAppointmentsUI: useBahmniUI, useFullViewPrivilege, fullViewPrivilege } = useConfig();
-  const { appointments, isLoading, isValidating } = useTodaysAppointments();
+  const { appointments, isLoading, mutate } = useTodaysAppointments();
 
   const fullView = userHasAccess(fullViewPrivilege, user) || !useFullViewPrivilege;
 
@@ -227,6 +236,7 @@ const AppointmentsBaseTable = () => {
           </div>
           <div className={styles.actionLinks}>
             <ViewCalendarLink />
+            <span className={styles.divider}>|</span>
             <AddAppointmentLink />
           </div>
         </div>
@@ -258,7 +268,7 @@ const AppointmentsBaseTable = () => {
                             <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
                           ))}
                           {fullView && (
-                            <TableCell className="cds--table-column-menu">
+                            <TableCell className={`cds--table-column-menu ${styles.overflowMenu}`}>
                               <ActionsMenu appointment={filteredAppointments?.[index]} useBahmniUI={useBahmniUI} />
                             </TableCell>
                           )}