diff --git a/src/common.style.tsx b/src/common.style.tsx index 215a7c0..eabaa8a 100644 --- a/src/common.style.tsx +++ b/src/common.style.tsx @@ -15,7 +15,7 @@ export const PageWrapper = styled.div<{ isDesktop: boolean }>` isDesktop && ` justify-content: flex-start; - + `} `; @@ -26,6 +26,12 @@ export const CheckBoxContainer = styled.div<{ error?: boolean; checked?: boolean fill: white; } `; +export const CheckBoxWrapper = styled.div<{ error?: boolean; checked?: boolean }>` + display: flex; + flex-direction: row; + margin-top: 10px; + position: relative; +`; export const FieldsContainer = styled.div<{ withMargin?: boolean }>` ${grid}; diff --git a/src/components/FormElements/Checkbox/Checkbox.style.tsx b/src/components/FormElements/Checkbox/Checkbox.style.tsx new file mode 100644 index 0000000..c2ec4b2 --- /dev/null +++ b/src/components/FormElements/Checkbox/Checkbox.style.tsx @@ -0,0 +1,12 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + margin-right: 10px; + + input { + height: 20px; + margin-right: 10px; + width: 20px; + } +`; diff --git a/src/components/FormElements/Checkbox/Checkbox.tsx b/src/components/FormElements/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..02b6464 --- /dev/null +++ b/src/components/FormElements/Checkbox/Checkbox.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { FieldRenderProps } from 'react-final-form'; + +import { Wrapper } from './Checkbox.style'; + +const Checkbox = ({ input, label, disabled }: FieldRenderProps) => { + return ( + + + + + ); +}; + +export default Checkbox; diff --git a/src/components/FormElements/Checkbox/index.tsx b/src/components/FormElements/Checkbox/index.tsx new file mode 100644 index 0000000..dd6385d --- /dev/null +++ b/src/components/FormElements/Checkbox/index.tsx @@ -0,0 +1 @@ +export { default } from './Checkbox'; diff --git a/src/hooks/api/patientHooks.ts b/src/hooks/api/patientHooks.ts index 5e87207..7f26999 100644 --- a/src/hooks/api/patientHooks.ts +++ b/src/hooks/api/patientHooks.ts @@ -144,7 +144,9 @@ export const useRegisterPatient = () => { (params) => { const { request } = patientsAPI.single.registerPatient({ hospital_id: params.hospital.value, - full_name: `${params.firstName}${params.middleName ? " " + params.middleName : ""} ${params.lastName}`, + full_name: `${params.firstName}${params.middleName ? ' ' + params.middleName : ''} ${ + params.lastName + }`, year_of_birth: params.yearOfBirth, month_of_birth: params.monthOfBirth, day_of_birth: params.dayOfBirth, @@ -263,8 +265,10 @@ export const useDischarge = (episodeID: string) => { const payload = { episode_id: parseInt(episodeID), date: params?.date, + discharge_duration: params?.discharge_duration, aware_of_mesh: params?.aware_of_mesh.label === 'Yes', - infection: params?.infection.label === 'Yes', + comments: params?.comments, + infection: params?.infection || '', }; const { request } = patientsAPI.single.dischargePatient(payload); @@ -294,6 +298,8 @@ export const useFollowUp = (episodeID: string) => { infection: params?.infection.label === 'Yes', numbness: params?.numbness.label === 'Yes', pain_severity: params?.pain_severity.label, + further_surgery_need: params?.further_surgery_need.label === 'Yes', + surgery_comments_box: params?.surgery_comments_box, }; const { request } = patientsAPI.single.followUpPatient(payload); diff --git a/src/models/apiTypes.tsx b/src/models/apiTypes.tsx index 9b5633a..4a4d75f 100644 --- a/src/models/apiTypes.tsx +++ b/src/models/apiTypes.tsx @@ -75,6 +75,8 @@ export type FollowUpAPI = { seroma: boolean; infection: boolean; numbness: boolean; + further_surgery_need: boolean; + surgery_comments_box?: string; }; export type FollowUpPayload = { @@ -98,6 +100,8 @@ export type FollowUpForm = { seroma: SelectOption; infection: SelectOption; numbness: SelectOption; + further_surgery_need: SelectOption; + surgery_comments_box?: string; }; export type DischargeAPI = { @@ -105,21 +109,25 @@ export type DischargeAPI = { episode: EpisodesAPI; date: string; aware_of_mesh: boolean; - infection: boolean; + infection: string; + discharge_duration?: string; + comments?: string; }; export type DischargePayload = { episode_id: number; date: string; aware_of_mesh: boolean; - infection: boolean; + infection: string; }; export type DischargeForm = { episode_id: number; date: string; + discharge_duration?: string; aware_of_mesh: SelectOption; - infection: SelectOption; + infection?: string; + comments?: string; }; export type RegisterEpisodePayload = { diff --git a/src/pages/EpisodeDetails/components/ExpandableContainer/components/Discharge.tsx b/src/pages/EpisodeDetails/components/ExpandableContainer/components/Discharge.tsx index b8432bb..7908b31 100644 --- a/src/pages/EpisodeDetails/components/ExpandableContainer/components/Discharge.tsx +++ b/src/pages/EpisodeDetails/components/ExpandableContainer/components/Discharge.tsx @@ -1,13 +1,15 @@ /** @jsxImportSource @emotion/react */ import React, { FC } from 'react'; -import { Button, Select, TextField } from '@orfium/ictinus'; +import { Button, Select, TextArea, TextField } from '@orfium/ictinus'; import { omit } from 'lodash'; import { Field, Form } from 'react-final-form'; import { useRouteMatch } from 'react-router-dom'; +import { CheckBoxWrapper } from '../../../../../common.style'; +import Checkbox from '../../../../../components/FormElements/Checkbox'; import { useDischarge } from '../../../../../hooks/api/patientHooks'; -import { DischargeAPI, DischargeForm } from '../../../../../models/apiTypes'; +import { DischargeAPI, SelectOption } from '../../../../../models/apiTypes'; import { FormHeadingContainer, SelectWrapper, @@ -16,6 +18,14 @@ import { BOOLEAN_OPTIONS } from '../../../../RegisterEpisode/constants'; import { InternalContainer } from '../style'; import { FieldWrapper } from './style'; +const POST_OPERATIVE_COMPLICATIONS = [ + { label: 'Bleeding' }, + { label: 'Haematoma' }, + { label: 'Urinary Retention' }, + { label: 'Return to theatre' }, + { label: 'Death' }, +]; + const Discharge: FC<{ isOpen: boolean; discharge: DischargeAPI; @@ -24,7 +34,14 @@ const Discharge: FC<{ const { episodeID } = match.params; const { mutate, isLoading } = useDischarge(episodeID); - const handleSubmit = (form: DischargeForm) => { + const handleSubmit = (form: { + date: string; + aware_of_mesh: SelectOption; + infection: string; + episode_id: number; + comments?: string; + discharge_duration?: string; + }) => { mutate(form); }; @@ -32,8 +49,22 @@ const Discharge: FC<{ return ( -
- {({ handleSubmit }) => { + { + const newValues = { + ...values, + infection: (values.infection ? values.infection.join(',') : 'none') as string, + }; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + handleSubmit(newValues); + }} + initialValues={{ + ...discharge, + infection: discharge && discharge.infection ? discharge.infection?.split(',') : undefined, + }} + > + {({ handleSubmit, values }) => { return ( option.value === props.input.value.value - )} + selectedOption={ + discharge?.aware_of_mesh !== undefined + ? BOOLEAN_OPTIONS.find((option) => + discharge?.aware_of_mesh + ? option.label === 'Yes' + : option.label === 'No' + ) + : BOOLEAN_OPTIONS.find( + (option) => option.value === props.input.value.value + ) + } handleSelectedOption={props.input.onChange} /> @@ -108,40 +147,68 @@ const Discharge: FC<{ - - - discharge?.infection ? option.label === 'Yes' : option.label === 'No' - ) - : undefined - } - > - {(props) => { - const hasError = - props.meta.touched && props.meta.invalid && !props.meta.active; - - return ( - -