diff --git a/packages/esm-appointments-app/src/appointments/scheduled/appointments-list.component.tsx b/packages/esm-appointments-app/src/appointments/scheduled/appointments-list.component.tsx index ff7fbb8f6b..c83e00067d 100644 --- a/packages/esm-appointments-app/src/appointments/scheduled/appointments-list.component.tsx +++ b/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; 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 = ({ appointmentServiceTypes, date, excludeCancelledAppointments = false, - status, - title, }) => { + const { t } = useTranslation(); + const { status, title = t('todays', "Today's") } = useConfig(); const { appointmentList, isLoading } = useAppointmentList(status, date); const appointmentsFilteredByServiceType = filterByServiceType(appointmentList, appointmentServiceTypes).map( diff --git a/packages/esm-appointments-app/src/appointments/scheduled/scheduled-appointments.component.tsx b/packages/esm-appointments-app/src/appointments/scheduled/scheduled-appointments.component.tsx index 5855e6b858..28ea0055e8 100644 --- a/packages/esm-appointments-app/src/appointments/scheduled/scheduled-appointments.component.tsx +++ b/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 = ({ appointme const [currentTab, setCurrentTab] = useState(null); const [dateType, setDateType] = useState('today'); - const scheduledAppointmentPanels = useConnectedExtensions(scheduledAppointmentsPanelsSlot); + const scheduledAppointmentPanels = useAssignedExtensions(scheduledAppointmentsPanelsSlot); const { allowedExtensions, showExtension, hideExtension } = useAllowedExtensions(); const shouldShowPanel = useCallback( (panel: Omit) => allowedExtensions[panel.name] ?? false, @@ -78,7 +80,7 @@ const ScheduledAppointments: React.FC = ({ appointme 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 (
{
); diff --git a/packages/esm-appointments-app/src/scheduled-appointments-config-schema.ts b/packages/esm-appointments-app/src/scheduled-appointments-config-schema.ts index 01961b1298..c5d7c2c905 100644 --- a/packages/esm-appointments-app/src/scheduled-appointments-config-schema.ts +++ b/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; +}