(fix) O3-5368 Appointments - make appointment table always show rows of configured status

Author: chibongho

packages/esm-appointments-app/src/appointments/scheduled/appointments-list.component.tsx

@@ -2,22 +2,27 @@ import React, { useMemo } from 'react';
 import { filterByServiceType } from '../utils';
 import { useAppointmentList } from '../../hooks/useAppointmentList';
 import AppointmentsTable from '../common-components/appointments-table.component';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type AppointmentPanelConfig } from '../../scheduled-appointments-config-schema';
 
 interface AppointmentsListProps {
   appointmentServiceTypes?: Array<string>;
   date: string;
   excludeCancelledAppointments?: boolean;
-  status?: string;
-  title: string;
 }
 
+/**
+ * This component is both rendered as a regular componant and as an extension.
+ * As an extension, it can be configured to display appointments of certain status.
+ */
 const AppointmentsList: React.FC<AppointmentsListProps> = ({
   appointmentServiceTypes,
   date,
   excludeCancelledAppointments = false,
-  status,
-  title,
 }) => {
+  const { t } = useTranslation();
+  const { status, title = t('todays', "Today's") } = useConfig<AppointmentPanelConfig>();
   const { appointmentList, isLoading } = useAppointmentList(status, date);
 
   const appointmentsFilteredByServiceType = filterByServiceType(appointmentList, appointmentServiceTypes).map(

packages/esm-appointments-app/src/appointments/scheduled/scheduled-appointments.component.tsx

@@ -11,9 +11,11 @@ import {
   type ConfigObject,
   useLayoutType,
   isDesktop,
+  useAssignedExtensions,
 } from '@openmrs/esm-framework';
 import { useAppointmentsStore } from '../../store';
 import styles from './scheduled-appointments.scss';
+import { type AppointmentPanelConfig } from '../../scheduled-appointments-config-schema';
 
 dayjs.extend(isSameOrBefore);
 
@@ -37,7 +39,7 @@ const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ appointme
 
   const [currentTab, setCurrentTab] = useState(null);
   const [dateType, setDateType] = useState<DateType>('today');
-  const scheduledAppointmentPanels = useConnectedExtensions(scheduledAppointmentsPanelsSlot);
+  const scheduledAppointmentPanels = useAssignedExtensions(scheduledAppointmentsPanelsSlot);
   const { allowedExtensions, showExtension, hideExtension } = useAllowedExtensions();
   const shouldShowPanel = useCallback(
     (panel: Omit<ConnectedExtension, 'config'>) => allowedExtensions[panel.name] ?? false,
@@ -78,7 +80,7 @@ const ScheduledAppointments: React.FC<ScheduledAppointmentsProps> = ({ appointme
       <ContentSwitcher
         className={styles.switcher}
         size={responsiveSize}
-        onChange={({ name }) => setCurrentTab(name)}
+        onChange={({ name }) => setCurrentTab(name as string)}
         selectedIndex={panelsToShow.findIndex((panel) => panel.name == currentTab) ?? 0}
         selectionMode="manual">
         {panelsToShow.map((panel) => (
@@ -161,12 +163,18 @@ function ExtensionWrapper({
     ) {
       currentConfig.current = extension.config;
       currentDateType.current = dateType;
-      void (shouldDisplayExtensionTab(extension?.config, dateType)
-        ? showExtensionTab(extension.name)
-        : hideExtensionTab(extension.name));
+      if (shouldDisplayExtensionTab(extension?.config as AppointmentPanelConfig, dateType)) {
+        showExtensionTab(extension.name);
+      } else {
+        hideExtensionTab(extension.name);
+      }
     }
   }, [extension, dateType, showExtensionTab, hideExtensionTab]);
 
+  if (extension.config == null) {
+    return null;
+  }
+
   return (
     <div
       key={extension.name}
@@ -184,7 +192,7 @@ function ExtensionWrapper({
   );
 }
 
-function shouldDisplayExtensionTab(config: ConfigObject | undefined, dateType: DateType): boolean {
+function shouldDisplayExtensionTab(config: AppointmentPanelConfig | undefined, dateType: DateType): boolean {
   if (!config) {
     return false;
   }

packages/esm-appointments-app/src/home/home-appointments.component.tsx

@@ -13,7 +13,6 @@ const HomeAppointments = () => {
       <AppointmentsList
         date={toOmrsIsoString(dayjs().startOf('day').toDate())}
         excludeCancelledAppointments
-        title={t('todays', "Today's")}
       />
     </div>
   );

packages/esm-appointments-app/src/scheduled-appointments-config-schema.ts

@@ -167,3 +167,11 @@ export const earlyAppointmentsPanelConfigSchema = {
     _default: false,
   },
 };
+
+export interface AppointmentPanelConfig {
+  title: string;
+  status?: string;
+  showForPastDate: boolean;
+  showForToday: boolean;
+  showForFutureDate: boolean;
+}