Merge pull request #1964 from oizuldan/master

feat(patient): add appointment button

src/__tests__/patients/appointments/AppointmentsList.test.tsx

@@ -0,0 +1,69 @@
+import '../../../__mocks__/matchMediaMock'
+import React from 'react'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+import Patient from 'model/Patient'
+import { Router } from 'react-router'
+import { Provider } from 'react-redux'
+import AppointmentsList from 'patients/appointments/AppointmentsList'
+import * as components from '@hospitalrun/components'
+import { act } from 'react-dom/test-utils'
+// import PatientRepository from 'clients/db/PatientRepository' # Lint warning: 'PatientRepository' is defined but never used
+
+const expectedPatient = {
+  id: '123',
+} as Patient
+const expectedAppointments = [
+  {
+    id: '123',
+    rev: '1',
+    patientId: '1234',
+    startDateTime: new Date().toISOString(),
+    endDateTime: new Date().toISOString(),
+    location: 'location',
+    reason: 'reason',
+  },
+]
+
+const mockStore = configureMockStore([thunk])
+const history = createMemoryHistory()
+
+let store: any
+
+const setup = (patient = expectedPatient, appointments = expectedAppointments) => {
+  store = mockStore({ patient, appointments: { appointments } })
+  const wrapper = mount(
+    <Router history={history}>
+      <Provider store={store}>
+        <AppointmentsList patientId={patient.id} />
+      </Provider>
+    </Router>,
+  )
+
+  return wrapper
+}
+
+describe('AppointmentsList', () => {
+  describe('add new appointment button', () => {
+    it('should render a new appointment button', () => {
+      const wrapper = setup()
+
+      const addNewAppointmentButton = wrapper.find(components.Button).at(0)
+      expect(addNewAppointmentButton).toHaveLength(1)
+      expect(addNewAppointmentButton.text().trim()).toEqual('scheduling.appointments.new')
+    })
+
+    it('should navigate to new appointment page', () => {
+      const wrapper = setup()
+
+      act(() => {
+        wrapper.find(components.Button).at(0).prop('onClick')()
+      })
+      wrapper.update()
+
+      expect(history.location.pathname).toEqual('/appointments/new')
+    })
+  })
+})

src/locales/enUs/translations/patient/index.ts

@@ -37,6 +37,9 @@ export default {
       },
       addRelatedPersonAbove: 'Add a related person using the button above.',
     },
+    appointments: {
+      new: 'Add Appointment',
+    },
     allergies: {
       label: 'Allergies',
       allergyName: 'Allergy Name',

src/patients/appointments/AppointmentsList.tsx

@@ -53,32 +53,48 @@ const AppointmentsList = (props: Props) => {
   }
 
   return (
-    <Container>
-      <form className="form" onSubmit={onSearchFormSubmit}>
+    <>
+      <div className="row">
+        <div className="col-md-12 d-flex justify-content-end">
+          <Button
+            key="newAppointmentButton"
+            outlined
+            color="success"
+            icon="appointment-add"
+            onClick={() => history.push('/appointments/new')}
+          >
+            {t('scheduling.appointments.new')}
+          </Button>
+        </div>
+      </div>
+      <br />
+      <Container>
+        <form className="form" onSubmit={onSearchFormSubmit}>
+          <Row>
+            <Column md={10}>
+              <TextInput
+                size="lg"
+                type="text"
+                onChange={onSearchBoxChange}
+                value={searchText}
+                placeholder={t('actions.search')}
+              />
+            </Column>
+            <Column md={2}>
+              <Button size="large" onClick={onSearchFormSubmit}>
+                {t('actions.search')}
+              </Button>
+            </Column>
+          </Row>
+        </form>
+
         <Row>
-          <Column md={10}>
-            <TextInput
-              size="lg"
-              type="text"
-              onChange={onSearchBoxChange}
-              value={searchText}
-              placeholder={t('actions.search')}
-            />
-          </Column>
-          <Column md={2}>
-            <Button size="large" onClick={onSearchFormSubmit}>
-              {t('actions.search')}
-            </Button>
-          </Column>
+          <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
+            {list}
+          </List>
         </Row>
-      </form>
-
-      <Row>
-        <List layout="flush" style={{ width: '100%', marginTop: '10px', marginLeft: '-25px' }}>
-          {list}
-        </List>
-      </Row>
-    </Container>
+      </Container>
+    </>
   )
 }