From 0aa0cf93b3f9e3153592684ce05babee2e0c5379 Mon Sep 17 00:00:00 2001
From: Jack Meyer <jackcmeyer@gmail.com>
Date: Tue, 19 May 2020 23:15:49 -0500
Subject: [PATCH] feat(careplan): adds ability to add a new care plan

---
 .../input/SelectWithLableFormGroup.tsx        |  25 ++-
 .../enUs/translations/patient/index.ts        |  12 ++
 src/model/CarePlan.ts                         |  28 +++
 src/model/Patient.ts                          |   2 +
 src/model/Permissions.ts                      |   2 +
 src/patients/care-plans/AddCarePlanModal.tsx  | 197 ++++++++++++++++++
 src/patients/care-plans/CarePlanTab.tsx       |  70 +++++++
 src/patients/patient-slice.ts                 |  31 +++
 src/patients/view/ViewPatient.tsx             |   9 +
 src/user/user-slice.ts                        |   2 +
 10 files changed, 375 insertions(+), 3 deletions(-)
 create mode 100644 src/model/CarePlan.ts
 create mode 100644 src/patients/care-plans/AddCarePlanModal.tsx
 create mode 100644 src/patients/care-plans/CarePlanTab.tsx

diff --git a/src/components/input/SelectWithLableFormGroup.tsx b/src/components/input/SelectWithLableFormGroup.tsx
index be9874aca1..fff067037c 100644
--- a/src/components/input/SelectWithLableFormGroup.tsx
+++ b/src/components/input/SelectWithLableFormGroup.tsx
@@ -10,18 +10,37 @@ interface Props {
   value: string
   label: string
   name: string
+  isRequired?: boolean
   isEditable?: boolean
   options: Option[]
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void
+  feedback?: string
+  isInvalid?: boolean
 }
 
 const SelectWithLabelFormGroup = (props: Props) => {
-  const { value, label, name, isEditable, options, onChange } = props
+  const {
+    value,
+    label,
+    name,
+    isEditable,
+    options,
+    onChange,
+    isRequired,
+    feedback,
+    isInvalid,
+  } = props
   const id = `${name}Select`
   return (
     <div className="form-group">
-      <Label text={label} htmlFor={id} />
-      <Select disabled={!isEditable} onChange={onChange} value={value}>
+      <Label text={label} htmlFor={id} isRequired={isRequired} />
+      <Select
+        disabled={!isEditable}
+        onChange={onChange}
+        value={value}
+        feedback={feedback}
+        isInvalid={isInvalid}
+      >
         <option disabled value="">
           -- Choose --
         </option>
diff --git a/src/locales/enUs/translations/patient/index.ts b/src/locales/enUs/translations/patient/index.ts
index 5bbbedc04d..9f331021a8 100644
--- a/src/locales/enUs/translations/patient/index.ts
+++ b/src/locales/enUs/translations/patient/index.ts
@@ -93,6 +93,18 @@ export default {
       },
       noLabsMessage: 'No labs requests for this person.',
     },
+    carePlan: {
+      new: 'Add Care Plan',
+      label: 'Care Plans',
+      title: 'Title',
+      description: 'Description',
+      status: 'Status',
+      condition: 'Condition',
+      intent: 'Intent',
+      startDate: 'Start Date',
+      endDate: 'End Date',
+      note: 'Note',
+    },
     types: {
       charity: 'Charity',
       private: 'Private',
diff --git a/src/model/CarePlan.ts b/src/model/CarePlan.ts
new file mode 100644
index 0000000000..2a2d282197
--- /dev/null
+++ b/src/model/CarePlan.ts
@@ -0,0 +1,28 @@
+export enum CarePlanStatus {
+  Draft = 'draft',
+  Active = 'active',
+  OnHold = 'on hold',
+  Revoked = 'revoked',
+  Completed = 'completed',
+  Unknown = 'unknown',
+}
+
+export enum CarePlanIntent {
+  Proposal = 'proposal',
+  Plan = 'plan',
+  Order = 'order',
+  Option = 'option',
+}
+
+export default interface CarePlan {
+  id: string
+  status: CarePlanStatus
+  intent: CarePlanIntent
+  title: string
+  description: string
+  startDate: string
+  endDate: string
+  createdOn: string
+  diagnosisId: string
+  note: string
+}
diff --git a/src/model/Patient.ts b/src/model/Patient.ts
index 56b33def3f..82da9c4ae7 100644
--- a/src/model/Patient.ts
+++ b/src/model/Patient.ts
@@ -1,5 +1,6 @@
 import AbstractDBModel from './AbstractDBModel'
 import Allergy from './Allergy'
+import CarePlan from './CarePlan'
 import ContactInformation from './ContactInformation'
 import Diagnosis from './Diagnosis'
 import Name from './Name'
@@ -18,4 +19,5 @@ export default interface Patient extends AbstractDBModel, Name, ContactInformati
   allergies?: Allergy[]
   diagnoses?: Diagnosis[]
   notes?: Note[]
+  carePlans: CarePlan[]
 }
diff --git a/src/model/Permissions.ts b/src/model/Permissions.ts
index 91a407cd2d..2adda626ac 100644
--- a/src/model/Permissions.ts
+++ b/src/model/Permissions.ts
@@ -14,6 +14,8 @@ enum Permissions {
   ViewIncidents = 'read:incidents',
   ViewIncident = 'read:incident',
   ReportIncident = 'write:incident',
+  AddCarePlan = 'write:care_plan',
+  ReadCarePlan = 'read:care_plan',
 }
 
 export default Permissions
diff --git a/src/patients/care-plans/AddCarePlanModal.tsx b/src/patients/care-plans/AddCarePlanModal.tsx
new file mode 100644
index 0000000000..e2021bb204
--- /dev/null
+++ b/src/patients/care-plans/AddCarePlanModal.tsx
@@ -0,0 +1,197 @@
+import { Modal, Column, Row } from '@hospitalrun/components'
+import { addMonths } from 'date-fns'
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDispatch, useSelector } from 'react-redux'
+
+import DatePickerWithLabelFormGroup from '../../components/input/DatePickerWithLabelFormGroup'
+import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup'
+import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup'
+import TextInputWithLabelFormGroup from '../../components/input/TextInputWithLabelFormGroup'
+import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../model/CarePlan'
+import { RootState } from '../../store'
+import { addCarePlan } from '../patient-slice'
+
+interface Props {
+  show: boolean
+  onCloseButtonClick: () => void
+}
+
+const initialCarePlanState = {
+  title: '',
+  description: '',
+  startDate: new Date().toISOString(),
+  endDate: addMonths(new Date(), 1).toISOString(),
+  note: '',
+  intent: '',
+  status: '',
+  diagnosisId: '',
+}
+
+const AddCarePlanModal = (props: Props) => {
+  const { show, onCloseButtonClick } = props
+  const dispatch = useDispatch()
+  const { t } = useTranslation()
+  const { carePlanError, patient } = useSelector((state: RootState) => state.patient)
+  const [carePlan, setCarePlan] = useState(initialCarePlanState)
+
+  useEffect(() => {
+    setCarePlan(initialCarePlanState)
+  }, [show])
+
+  const onFieldChange = (name: string, value: string) => {
+    setCarePlan((previousCarePlan) => ({
+      ...previousCarePlan,
+      [name]: value,
+    }))
+  }
+
+  const onSaveButtonClick = () => {
+    dispatch(addCarePlan(patient.id, carePlan as CarePlan))
+  }
+
+  const onClose = () => {
+    onCloseButtonClick()
+  }
+
+  const body = (
+    <>
+      <form>
+        <Row>
+          <Column sm={12}>
+            <TextInputWithLabelFormGroup
+              isRequired
+              value={carePlan.title}
+              label={t('patient.carePlan.title')}
+              name="title"
+              feedback={carePlanError?.title}
+              isInvalid={!!carePlanError?.title}
+              isEditable
+              onChange={(event) => onFieldChange('title', event.currentTarget.value)}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column sm={12}>
+            <TextFieldWithLabelFormGroup
+              isRequired
+              value={carePlan.description}
+              label={t('patient.carePlan.description')}
+              name="title"
+              feedback={carePlanError?.description}
+              isInvalid={!!carePlanError?.description}
+              isEditable
+              onChange={(event) => onFieldChange('description', event.currentTarget.value)}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column sm={12}>
+            <SelectWithLabelFormGroup
+              isRequired
+              value={carePlan.diagnosisId}
+              label={t('patient.carePlan.condition')}
+              name="title"
+              feedback={carePlanError?.condition}
+              isInvalid={!!carePlanError?.condition}
+              isEditable
+              onChange={(event) => onFieldChange('diagnosisId', event.currentTarget.value)}
+              options={patient.diagnoses?.map((d) => ({ label: d.name, value: d.id })) || []}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column sm={6}>
+            <SelectWithLabelFormGroup
+              isRequired
+              value={carePlan.status}
+              label={t('patient.carePlangi.condition')}
+              name="status"
+              feedback={carePlanError?.status}
+              isInvalid={!!carePlanError?.status}
+              isEditable
+              options={Object.values(CarePlanStatus).map((v) => ({ label: v, value: v }))}
+              onChange={(event) => onFieldChange('status', event.currentTarget.value)}
+            />
+          </Column>
+          <Column sm={6}>
+            <SelectWithLabelFormGroup
+              isRequired
+              value={carePlan.intent}
+              label={t('patient.carePlan.intent')}
+              name="intent"
+              feedback={carePlanError?.intent}
+              isInvalid={!!carePlanError?.intent}
+              isEditable
+              options={Object.values(CarePlanIntent).map((v) => ({ label: v, value: v }))}
+              onChange={(event) => onFieldChange('intent', event.currentTarget.value)}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column sm={6}>
+            <DatePickerWithLabelFormGroup
+              isRequired
+              value={carePlan.startDate ? new Date(carePlan.startDate) : new Date()}
+              label={t('patient.carePlan.startDate')}
+              name="startDate"
+              feedback={carePlanError?.startDate}
+              isInvalid={!!carePlanError?.startDate}
+              isEditable
+              onChange={(date) => onFieldChange('startDate', date.toISOString())}
+            />
+          </Column>
+          <Column sm={6}>
+            <DatePickerWithLabelFormGroup
+              isRequired
+              value={carePlan.endDate ? new Date(carePlan.endDate) : new Date()}
+              label={t('patient.carePlan.endDate')}
+              name="endDate"
+              feedback={carePlanError?.endDate}
+              isInvalid={!!carePlanError?.endDate}
+              isEditable
+              onChange={(date) => onFieldChange('endDate', date.toISOString())}
+            />
+          </Column>
+        </Row>
+        <Row>
+          <Column sm={12}>
+            <TextFieldWithLabelFormGroup
+              isRequired
+              value={carePlan.note}
+              label={t('patient.carePlan.note')}
+              name="note"
+              feedback={carePlanError?.note}
+              isInvalid={!!carePlanError?.note}
+              isEditable
+              onChange={(event) => onFieldChange('note', event.currentTarget.value)}
+            />
+          </Column>
+        </Row>
+      </form>
+    </>
+  )
+
+  return (
+    <Modal
+      show={show}
+      toggle={onClose}
+      title={t('patient.carePlan.new')}
+      body={body}
+      closeButton={{
+        children: t('actions.cancel'),
+        color: 'danger',
+        onClick: onClose,
+      }}
+      successButton={{
+        children: t('patient.carePlan.new'),
+        color: 'success',
+        icon: 'add',
+        iconLocation: 'left',
+        onClick: onSaveButtonClick,
+      }}
+    />
+  )
+}
+
+export default AddCarePlanModal
diff --git a/src/patients/care-plans/CarePlanTab.tsx b/src/patients/care-plans/CarePlanTab.tsx
new file mode 100644
index 0000000000..25f4a5860a
--- /dev/null
+++ b/src/patients/care-plans/CarePlanTab.tsx
@@ -0,0 +1,70 @@
+import { Button } from '@hospitalrun/components'
+import format from 'date-fns/format'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+import Permissions from '../../model/Permissions'
+import { RootState } from '../../store'
+import AddCarePlanModal from './AddCarePlanModal'
+
+interface Props {
+  patientId: string
+}
+
+export const CarePlanTab = (props: Props) => {
+  const { t } = useTranslation()
+
+  const { permissions } = useSelector((state: RootState) => state.user)
+  const { patient } = useSelector((state: RootState) => state.patient)
+  const [showAddCarePlanModal, setShowAddCarePlanModal] = useState(false)
+  const { patientId } = props
+  console.log(patientId)
+  console.log(patient.carePlans)
+  return (
+    <>
+      <div className="row">
+        <div className="col-md-12 d-flex justify-content-end">
+          {permissions.includes(Permissions.AddCarePlan) && (
+            <Button
+              outlined
+              color="success"
+              icon="add"
+              iconLocation="left"
+              onClick={() => setShowAddCarePlanModal(true)}
+            >
+              {t('patient.carePlan.new')}
+            </Button>
+          )}
+        </div>
+      </div>
+      <br />
+      <table className="table table-hover">
+        <thead className="thead-light ">
+          <tr>
+            <th>{t('patient.carePlan.title')}</th>
+            <th>{t('patient.carePlan.startDate')}</th>
+            <th>{t('patient.carePlan.endDate')}</th>
+            <th>{t('patient.carePlan.status')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {patient.carePlans?.map((carePlan) => (
+            <tr key={carePlan.id}>
+              <td>{carePlan.title}</td>
+              <td>{format(new Date(carePlan.startDate), 'yyyy-MM-dd')}</td>
+              <td>{format(new Date(carePlan.endDate), 'yyyy-MM-dd')}</td>
+              <td>{carePlan.status}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <AddCarePlanModal
+        show={showAddCarePlanModal}
+        onCloseButtonClick={() => setShowAddCarePlanModal(false)}
+      />
+    </>
+  )
+}
+
+export default CarePlanTab
diff --git a/src/patients/patient-slice.ts b/src/patients/patient-slice.ts
index 1e3b25dbad..e9857d2a37 100644
--- a/src/patients/patient-slice.ts
+++ b/src/patients/patient-slice.ts
@@ -5,6 +5,7 @@ import validator from 'validator'
 
 import PatientRepository from '../clients/db/PatientRepository'
 import Allergy from '../model/Allergy'
+import CarePlan from '../model/CarePlan'
 import Diagnosis from '../model/Diagnosis'
 import Note from '../model/Note'
 import Patient from '../model/Patient'
@@ -23,6 +24,7 @@ interface PatientState {
   diagnosisError?: AddDiagnosisError
   noteError?: AddNoteError
   relatedPersonError?: AddRelatedPersonError
+  carePlanError?: AddCarePlanError
 }
 
 interface Error {
@@ -59,6 +61,17 @@ interface AddNoteError {
   note?: string
 }
 
+interface AddCarePlanError {
+  title?: string
+  description?: string
+  status?: string
+  intent?: string
+  startDate?: string
+  endDate?: string
+  note?: string
+  condition?: string
+}
+
 const initialState: PatientState = {
   status: 'loading',
   isUpdatedSuccessfully: false,
@@ -70,6 +83,7 @@ const initialState: PatientState = {
   diagnosisError: undefined,
   noteError: undefined,
   relatedPersonError: undefined,
+  carePlanError: undefined,
 }
 
 function start(state: PatientState) {
@@ -377,4 +391,21 @@ export const addNote = (
   }
 }
 
+export const addCarePlan = (
+  patientId: string,
+  carePlan: CarePlan,
+  onSuccess?: (patient: Patient) => void,
+): AppThunk => async (dispatch) => {
+  const patient = await PatientRepository.find(patientId)
+  const carePlans = patient.carePlans || ([] as CarePlan[])
+  carePlans.push({
+    id: uuid(),
+    createdOn: new Date(Date.now().valueOf()).toISOString(),
+    ...carePlan,
+  })
+  patient.carePlans = carePlans
+
+  await dispatch(updatePatient(patient, onSuccess))
+}
+
 export default patientSlice.reducer
diff --git a/src/patients/view/ViewPatient.tsx b/src/patients/view/ViewPatient.tsx
index f966a8b9b6..3e6432868b 100644
--- a/src/patients/view/ViewPatient.tsx
+++ b/src/patients/view/ViewPatient.tsx
@@ -19,6 +19,7 @@ import Note from '../notes/NoteTab'
 import { fetchPatient } from '../patient-slice'
 import RelatedPerson from '../related-persons/RelatedPersonTab'
 import { getPatientFullName } from '../util/patient-name-util'
+import CarePlanTab from "../care-plans/CarePlanTab";
 
 const getPatientCode = (p: Patient): string => {
   if (p) {
@@ -119,6 +120,11 @@ const ViewPatient = () => {
           label={t('patient.labs.label')}
           onClick={() => history.push(`/patients/${patient.id}/labs`)}
         />
+        <Tab
+          active={location.pathname === `/patients/${patient.id}/care-plans`}
+          label={t('patient.carePlan.label')}
+          onClick={() => history.push(`/patients/${patient.id}/care-plans`)}
+        />
       </TabsHeader>
       <Panel>
         <Route exact path="/patients/:id">
@@ -142,6 +148,9 @@ const ViewPatient = () => {
         <Route exact path="/patients/:id/labs">
           <Labs patientId={patient.id} />
         </Route>
+        <Route exact path="/patients/:id/care-plans">
+          <CarePlanTab patientId={patient.id} />
+        </Route>
       </Panel>
     </div>
   )
diff --git a/src/user/user-slice.ts b/src/user/user-slice.ts
index afcb489b76..c48dd0bc2a 100644
--- a/src/user/user-slice.ts
+++ b/src/user/user-slice.ts
@@ -25,6 +25,8 @@ const initialState: UserState = {
     Permissions.ViewIncident,
     Permissions.ViewIncidents,
     Permissions.ReportIncident,
+    Permissions.AddCarePlan,
+    Permissions.ReadCarePlan
   ],
   user: {
     id: 'some-hardcoded-id',