Release 2023/05/17 (#238)

* add new choices

* feat(patient-middle-name): Add optional middle name in patient registration

* feat(patient-full-dob): Allow adding full birthday in patient registration

* fix(episode-choices-value-fix): Fix overlapping values in episode choices

* 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

* fix: change label of infection to Post-operative complications (#237)

* feat(): added none value checkbox and made it required field

* fix(): always show the comment box in follow up form

---------

Co-authored-by: Dimitris Papaspyros <[email protected]>
Co-authored-by: Panagiotis Vourtsis <[email protected]>
Co-authored-by: Elektra Bilali Simou <[email protected]>

Author: 4 people

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};

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;
+  }
+`;

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;

src/components/FormElements/Checkbox/index.tsx

@@ -0,0 +1 @@
+export { default } from './Checkbox';

src/hooks/api/patientHooks.ts

@@ -144,8 +144,12 @@ export const useRegisterPatient = () => {
     (params) => {
       const { request } = patientsAPI.single.registerPatient({
         hospital_id: params.hospital.value,
-        full_name: `${params.firstName} ${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,
         age: params.age,
         national_id: params.nationalId,
         patient_hospital_id: params.patientHospitalId,
@@ -261,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);
@@ -292,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);

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 = {
@@ -152,6 +160,8 @@ export interface RegisterPatientPayload {
   patient_hospital_id: number;
   age: number;
   year_of_birth: number;
+  month_of_birth: number;
+  day_of_birth: number;
   hospital_id: number;
   gender: string;
   phone_1: number;

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,15 @@ 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' },
+  { label: 'None' },
+];
+
 const Discharge: FC<{
   isOpen: boolean;
   discharge: DischargeAPI;
@@ -24,16 +35,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;
+  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 +121,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 +148,69 @@ 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>Post-operative complications</label>
+                  <CheckBoxWrapper>
+                    {POST_OPERATIVE_COMPLICATIONS.map((option) => (
+                      <div key={option.label}>
+                        <Field
+                          name={`infection`}
+                          type="checkbox"
+                          value={option.label}
+                          label={option.label}
+                          component={Checkbox}
+                          required={canSubmit}
+                          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>
@@ -151,7 +220,7 @@ const Discharge: FC<{
                   color={'blue-200'}
                   buttonType="button"
                   onClick={handleSubmit}
-                  disabled={isLoading || !canSubmit}
+                  disabled={isLoading || !canSubmit || !values.infection}
                   block
                   size="md"
                 >