From c74dec0d755ae5a4ac6ac997b6421dac70f336eb Mon Sep 17 00:00:00 2001 From: Jesus Soto Date: Thu, 2 Apr 2020 16:12:50 -0500 Subject: [PATCH] feat: Added new proposed links to the sidebar (#1956) --- src/__tests__/components/Sidebar.test.tsx | 120 ++++++++++++++++ src/components/Navbar.tsx | 4 +- src/components/Sidebar.tsx | 134 +++++++++++++++++- .../enUs/translations/patients/index.ts | 4 +- .../enUs/translations/scheduling/index.ts | 7 +- 5 files changed, 253 insertions(+), 16 deletions(-) diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx index 7b25adf11c..fc7066d6a0 100644 --- a/src/__tests__/components/Sidebar.test.tsx +++ b/src/__tests__/components/Sidebar.test.tsx @@ -89,6 +89,66 @@ describe('Sidebar', () => { }) }) + describe('patients_list link', () => { + it('should render the patients_list link', () => { + const wrapper = setup('/patients') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(4).text().trim()).toEqual('patients.patientsList') + }) + + it('should be active when the current path is /patients', () => { + const wrapper = setup('/patients') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(4).prop('active')).toBeTruthy() + }) + + it('should navigate to /patients when the patients link is clicked', () => { + const wrapper = setup('/patients') + + const listItems = wrapper.find(ListItem) + + act(() => { + ;(listItems.at(4).prop('onClick') as any)() + }) + + expect(history.location.pathname).toEqual('/patients') + }) + }) + + describe('new_patient link', () => { + it('should render the new_patient link', () => { + const wrapper = setup('/patients') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(3).text().trim()).toEqual('patients.newPatient') + }) + + it('should be active when the current path is /patients/new', () => { + const wrapper = setup('/patients/new') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(3).prop('active')).toBeTruthy() + }) + + it('should navigate to /patients/new when the patients link is clicked', () => { + const wrapper = setup('/patients') + + const listItems = wrapper.find(ListItem) + + act(() => { + ;(listItems.at(3).prop('onClick') as any)() + }) + + expect(history.location.pathname).toEqual('/patients/new') + }) + }) + describe('appointments link', () => { it('should render the scheduling link', () => { const wrapper = setup('/appointments') @@ -118,4 +178,64 @@ describe('Sidebar', () => { expect(history.location.pathname).toEqual('/appointments') }) }) + + describe('appointment_schedule link', () => { + it('should render the appointment_schedule link', () => { + const wrapper = setup('/appointments') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(5).text().trim()).toEqual('scheduling.appointments.schedule') + }) + + it('should be active when the current path is /appointments', () => { + const wrapper = setup('/appointments') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(5).prop('active')).toBeTruthy() + }) + + it('should navigate to /appointments when the appointments_schedule link is clicked', () => { + const wrapper = setup('/appointments') + + const listItems = wrapper.find(ListItem) + + act(() => { + ;(listItems.at(5).prop('onClick') as any)() + }) + + expect(history.location.pathname).toEqual('/appointments') + }) + }) + + describe('new_appointment link', () => { + it('should render the new_appointment link', () => { + const wrapper = setup('/appointments/new') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(4).text().trim()).toEqual('scheduling.appointments.new') + }) + + it('should be active when the current path is /appointments/new', () => { + const wrapper = setup('/appointments/new') + + const listItems = wrapper.find(ListItem) + + expect(listItems.at(4).prop('active')).toBeTruthy() + }) + + it('should navigate to /appointments/new when the new_appointment link is clicked', () => { + const wrapper = setup('/appointments') + + const listItems = wrapper.find(ListItem) + + act(() => { + ;(listItems.at(4).prop('onClick') as any)() + }) + + expect(history.location.pathname).toEqual('/appointments/new') + }) + }) }) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index ebb8c1b682..d822410920 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -31,7 +31,7 @@ const Navbar = () => { { type: 'link-list', label: t('patients.label'), - className: 'patients-link-list', + className: 'patients-link-list d-md-none d-block', children: [ { type: 'link', @@ -52,7 +52,7 @@ const Navbar = () => { { type: 'link-list', label: t('scheduling.label'), - className: 'scheduling-link-list', + className: 'scheduling-link-list d-md-none d-block', children: [ { type: 'link', diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 528357d23d..8df357bc0b 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react' +import React, { useState, CSSProperties } from 'react' import { List, ListItem, Icon } from '@hospitalrun/components' import { useTranslation } from 'react-i18next' import { useLocation, useHistory } from 'react-router' @@ -14,6 +14,7 @@ const Sidebar = () => { const path = useLocation() const history = useHistory() const { pathname } = path + const splittedPath = pathname.split('/') const navigateTo = (location: string) => { history.push(location) @@ -23,6 +24,53 @@ const Sidebar = () => { cursor: 'pointer', } + const expandibleArrow: CSSProperties = { + marginRight: '20px', + } + + const iconMargin: CSSProperties = { + marginRight: '10px', + } + + const [expandedItem, setExpandedItem] = useState( + splittedPath[1].includes('patients') + ? 'patient' + : splittedPath[1].includes('appointments') + ? 'appointment' + : 'none', + ) + + const setExpansion = (item: string) => { + if (expandedItem === item) { + setExpandedItem('none') + return + } + + setExpandedItem(item.toString()) + } + + const listSubItemStyleNew: CSSProperties = { + cursor: 'pointer', + fontSize: 'small', + borderBottomWidth: 0, + color: + (splittedPath[1].includes('patients') || splittedPath[1].includes('appointments')) && + splittedPath.length > 2 + ? 'white' + : 'black', + } + + const listSubItemStyle: CSSProperties = { + cursor: 'pointer', + fontSize: 'small', + borderBottomWidth: 0, + color: + (splittedPath[1].includes('patients') || splittedPath[1].includes('appointments')) && + splittedPath.length < 3 + ? 'white' + : 'black', + } + return ( diff --git a/src/locales/enUs/translations/patients/index.ts b/src/locales/enUs/translations/patients/index.ts index 3f5874f4f5..3fb2f00905 100644 --- a/src/locales/enUs/translations/patients/index.ts +++ b/src/locales/enUs/translations/patients/index.ts @@ -1,11 +1,11 @@ export default { patients: { label: 'Patients', + patientsList: 'Patients List', viewPatients: 'View Patients', - editPatient: 'Edit Patient', viewPatient: 'View Patient', newPatient: 'New Patient', successfullyCreated: 'Successfully created patient', - successfullyAddedRelatedPerson: 'Successfully added a new related person', + successfullyAddedRelatedPerson: 'Successfully added the new related person', }, } diff --git a/src/locales/enUs/translations/scheduling/index.ts b/src/locales/enUs/translations/scheduling/index.ts index aaf7a1cf3f..13d2adbb57 100644 --- a/src/locales/enUs/translations/scheduling/index.ts +++ b/src/locales/enUs/translations/scheduling/index.ts @@ -4,9 +4,7 @@ export default { appointments: { label: 'Appointments', new: 'New Appointment', - deleteAppointment: 'Delete Appointment', - viewAppointment: 'Appointment', - editAppointment: 'Edit Appointment', + schedule: 'Appointment Schedule', }, appointment: { startDate: 'Start Date', @@ -20,7 +18,6 @@ export default { routine: 'Routine', walkIn: 'Walk In', }, - successfullyCreated: 'Appointment successfully created.', errors: { patientRequired: 'Patient is required.', errorCreatingAppointment: 'Error Creating Appointment!', @@ -28,8 +25,6 @@ export default { }, reason: 'Reason', patient: 'Patient', - successfullyDeleted: 'Appointment successfully deleted.', - deleteConfirmationMessage: 'Are you sure you want to delete this appointment?', }, }, }