fix: adding Prophylactic antibiotics and fix checkboxes for forms (#236)

* fix: adding Prophylactic antibiotics and fix checkboxes for forms * feat: adding new logic for form field on discharge and follow up forms
swiftss-org · Apr 11, 2023 · cc11283 · cc11283
1 parent bae7f5a
commit cc11283
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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<string | number, HTMLElement>) => {
+  return (
+    <Wrapper>
+      <input
+        type={'checkbox'}
+        onChange={input.onChange}
+        checked={input.checked}
+        disabled={disabled}
+      />
+      <label>{label}</label>
+    </Wrapper>
+  );
+};
+
+export default Checkbox;
diff --git a/src/components/FormElements/Checkbox/index.tsx 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
@@ -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
@@ -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,28 +100,34 @@ export type FollowUpForm = {
   seroma: SelectOption;
   infection: SelectOption;
   numbness: SelectOption;
+  further_surgery_need: SelectOption;
+  surgery_comments_box?: string;
 };
 
 export type DischargeAPI = {
   id: number;
   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
@@ -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,16 +34,37 @@ 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);
   };
 
   const canSubmit = discharge?.infection === undefined;
 
   return (
     <InternalContainer isOpen={isOpen} aria-expanded={isOpen}>
-      <Form onSubmit={handleSubmit}>
-        {({ handleSubmit }) => {
+      <Form
+        onSubmit={(values) => {
+          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 (
             <form
               onSubmit={handleSubmit}
@@ -89,17 +120,25 @@ const Discharge: FC<{
                           <Select
                             locked={!canSubmit}
                             id="aware_of_mesh"
-                            label="Mesh"
+                            label="Antibiotics given on discharge"
                             styleType="outlined"
                             size="md"
                             required={canSubmit}
                             status={hasError ? 'error' : 'hint'}
                             hintMsg={hasError ? props.meta.error : undefined}
                             options={BOOLEAN_OPTIONS}
                             {...omit(props.input, ['onFocus'])}
-                            selectedOption={BOOLEAN_OPTIONS.find(
-                              (option) => 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}
                           />
                         </SelectWrapper>
@@ -108,40 +147,68 @@ const Discharge: FC<{
                   </Field>
                 </FieldWrapper>
 
-                <FieldWrapper>
-                  <Field
-                    name="infection"
-                    initialValue={
-                      discharge?.infection !== undefined
-                        ? BOOLEAN_OPTIONS.find((option) =>
-                            discharge?.infection ? option.label === 'Yes' : option.label === 'No'
-                          )
-                        : undefined
-                    }
-                  >
-                    {(props) => {
-                      const hasError =
-                        props.meta.touched && props.meta.invalid && !props.meta.active;
-
-                      return (
-                        <SelectWrapper>
-                          <Select
-                            id="infection"
-                            label="Infection"
-                            styleType="outlined"
-                            size="md"
+                {values?.aware_of_mesh?.value === 0 && (
+                  <FieldWrapper>
+                    <Field
+                      name="discharge_duration"
+                      initialValue={discharge?.discharge_duration}
+                      parse={(value) => value}
+                    >
+                      {(props) => {
+                        const hasError =
+                          props.meta.touched && props.meta.invalid && !props.meta.active;
+                        return (
+                          <TextField
+                            id="discharge_duration"
                             locked={!canSubmit}
+                            label={'Duration (days)'}
                             required={canSubmit}
+                            styleType="outlined"
+                            size="md"
                             status={hasError ? 'error' : 'hint'}
                             hintMsg={hasError ? props.meta.error : undefined}
-                            options={BOOLEAN_OPTIONS}
-                            {...omit(props.input, ['onFocus'])}
-                            selectedOption={BOOLEAN_OPTIONS.find(
-                              (option) => option.value === props.input.value.value
-                            )}
-                            handleSelectedOption={props.input.onChange}
+                            {...props.input}
                           />
-                        </SelectWrapper>
+                        );
+                      }}
+                    </Field>
+                  </FieldWrapper>
+                )}
+
+                <FieldWrapper>
+                  <label>Infection</label>
+                  <CheckBoxWrapper>
+                    {POST_OPERATIVE_COMPLICATIONS.map((option) => (
+                      <div key={option.label}>
+                        <Field
+                          name={`infection`}
+                          type="checkbox"
+                          value={option.label}
+                          label={option.label}
+                          component={Checkbox}
+                          disabled={!canSubmit}
+                        />
+                      </div>
+                    ))}
+                  </CheckBoxWrapper>
+                </FieldWrapper>
+
+                <FieldWrapper>
+                  <label>Comments</label>
+                  <Field name="comments" initialValue={discharge?.comments}>
+                    {(props) => {
+                      const hasError =
+                        props.meta.touched && props.meta.invalid && !props.meta.active;
+                      return (
+                        <TextArea
+                          id="comments"
+                          required={canSubmit}
+                          styleType="outlined"
+                          status={hasError ? 'error' : 'hint'}
+                          hintMsg={hasError ? props.meta.error : undefined}
+                          disabled={!canSubmit}
+                          {...props.input}
+                        />
                       );
                     }}
                   </Field>