From 3cee57808d00fc92057ab4cd5df0be4838ff166b Mon Sep 17 00:00:00 2001 From: oliv37 Date: Wed, 26 Feb 2020 20:24:12 +0100 Subject: [PATCH] fix(breadcrumb): add the breadcrumb for the edit appointment view fix #1854 --- src/__tests__/HospitalRun.test.tsx | 28 +++++++---- .../util/scheduling-appointment.util.test.ts | 46 +++++++++++++++++++ .../appointments/edit/EditAppointment.tsx | 14 ++++++ .../util/scheduling-appointment.util.ts | 9 ++++ .../appointments/view/ViewAppointment.tsx | 10 +--- 5 files changed, 90 insertions(+), 17 deletions(-) create mode 100644 src/__tests__/scheduling/appointments/util/scheduling-appointment.util.test.ts create mode 100644 src/scheduling/appointments/util/scheduling-appointment.util.ts diff --git a/src/__tests__/HospitalRun.test.tsx b/src/__tests__/HospitalRun.test.tsx index f352146852..bf7572ae68 100644 --- a/src/__tests__/HospitalRun.test.tsx +++ b/src/__tests__/HospitalRun.test.tsx @@ -327,15 +327,15 @@ describe('HospitalRun', () => { mockedAppointmentRepository.find.mockResolvedValue(appointment) mockedPatientRepository.find.mockResolvedValue(patient) + const store = mockStore({ + title: 'test', + user: { permissions: [Permissions.WriteAppointments, Permissions.ReadAppointments] }, + appointment: { appointment, patient: {} as Patient }, + breadcrumbs: { breadcrumbs: [] }, + }) + const wrapper = mount( - + @@ -343,6 +343,18 @@ describe('HospitalRun', () => { ) expect(wrapper.find(EditAppointment)).toHaveLength(1) + + expect(store.getActions()).toContainEqual( + addBreadcrumbs([ + { i18nKey: 'scheduling.appointments.label', location: '/appointments' }, + { text: '123', location: '/appointments/123' }, + { + i18nKey: 'scheduling.appointments.editAppointment', + location: '/appointments/edit/123', + }, + { i18nKey: 'dashboard.label', location: '/' }, + ]), + ) }) it('should render the Dashboard when the user does not have read appointment privileges', () => { diff --git a/src/__tests__/scheduling/appointments/util/scheduling-appointment.util.test.ts b/src/__tests__/scheduling/appointments/util/scheduling-appointment.util.test.ts new file mode 100644 index 0000000000..f802b15c66 --- /dev/null +++ b/src/__tests__/scheduling/appointments/util/scheduling-appointment.util.test.ts @@ -0,0 +1,46 @@ +import Appointment from 'model/Appointment' +import { getAppointmentLabel } from '../../../../scheduling/appointments/util/scheduling-appointment.util' + +describe('scheduling appointment util', () => { + describe('getAppointmentLabel', () => { + it('should return the locale string representation of the start time and end time', () => { + const appointment = { + id: '123', + startDateTime: '2020-03-07T18:15:00.000Z', + endDateTime: '2020-03-07T20:15:00.000Z', + } as Appointment + + expect(getAppointmentLabel(appointment)).toEqual( + `${new Date(appointment.startDateTime).toLocaleString()} - ${new Date( + appointment.endDateTime, + ).toLocaleString()}`, + ) + }) + + it('should return the appointment id when start time is not defined', () => { + const appointment = { + id: '123', + startDateTime: '2020-03-07T18:15:00.000Z', + } as Appointment + + expect(getAppointmentLabel(appointment)).toEqual('123') + }) + + it('should return the appointment id when end time is not defined', () => { + const appointment = { + id: '123', + endDateTime: '2020-03-07T20:15:00.000Z', + } as Appointment + + expect(getAppointmentLabel(appointment)).toEqual('123') + }) + + it('should return the appointment id when start time and end time are not defined', () => { + const appointment = { + id: '123', + } as Appointment + + expect(getAppointmentLabel(appointment)).toEqual('123') + }) + }) +}) diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx index ba88a17720..d2db65f976 100644 --- a/src/scheduling/appointments/edit/EditAppointment.tsx +++ b/src/scheduling/appointments/edit/EditAppointment.tsx @@ -10,6 +10,8 @@ import useTitle from '../../../page-header/useTitle' import Appointment from '../../../model/Appointment' import { updateAppointment, fetchAppointment } from '../appointment-slice' import { RootState } from '../../../store' +import { getAppointmentLabel } from '../util/scheduling-appointment.util' +import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs' const EditAppointment = () => { const { t } = useTranslation() @@ -22,6 +24,18 @@ const EditAppointment = () => { const { appointment: reduxAppointment, patient, isLoading } = useSelector( (state: RootState) => state.appointment, ) + const breadcrumbs = [ + { i18nKey: 'scheduling.appointments.label', location: '/appointments' }, + { + text: getAppointmentLabel(reduxAppointment), + location: `/appointments/${reduxAppointment.id}`, + }, + { + i18nKey: 'scheduling.appointments.editAppointment', + location: `/appointments/edit/${reduxAppointment.id}`, + }, + ] + useAddBreadcrumbs(breadcrumbs, true) useEffect(() => { setAppointment(reduxAppointment) diff --git a/src/scheduling/appointments/util/scheduling-appointment.util.ts b/src/scheduling/appointments/util/scheduling-appointment.util.ts new file mode 100644 index 0000000000..02f290174f --- /dev/null +++ b/src/scheduling/appointments/util/scheduling-appointment.util.ts @@ -0,0 +1,9 @@ +import Appointment from '../../../model/Appointment' + +export function getAppointmentLabel(appointment: Appointment) { + const { id, startDateTime, endDateTime } = appointment + + return startDateTime && endDateTime + ? `${new Date(startDateTime).toLocaleString()} - ${new Date(endDateTime).toLocaleString()}` + : id +} diff --git a/src/scheduling/appointments/view/ViewAppointment.tsx b/src/scheduling/appointments/view/ViewAppointment.tsx index b8f6297756..37a28fea2e 100644 --- a/src/scheduling/appointments/view/ViewAppointment.tsx +++ b/src/scheduling/appointments/view/ViewAppointment.tsx @@ -7,19 +7,11 @@ import { Spinner, Button, Modal } from '@hospitalrun/components' import { useTranslation } from 'react-i18next' import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider' import Permissions from 'model/Permissions' -import Appointment from 'model/Appointment' import { fetchAppointment, deleteAppointment } from '../appointment-slice' import AppointmentDetailForm from '../AppointmentDetailForm' +import { getAppointmentLabel } from '../util/scheduling-appointment.util' import useAddBreadcrumbs from '../../../breadcrumbs/useAddBreadcrumbs' -function getAppointmentLabel(appointment: Appointment) { - const { id, startDateTime, endDateTime } = appointment - - return startDateTime && endDateTime - ? `${new Date(startDateTime).toLocaleString()} - ${new Date(endDateTime).toLocaleString()}` - : id -} - const ViewAppointment = () => { const { t } = useTranslation() useTitle(t('scheduling.appointments.viewAppointment'))