Add suggestion chips instead of autofilling diagnosis (#8369)

* Add suggestion chips instead of autofilling diagnosis * shortfix * fixed onclick * Fix bug with chip click, and hid already entered diagnoses * revert hiding already entered diagnosis * added onselect to AddICD11DiagnosisProps
ohcnetwork · Sep 3, 2024 · 5e95d60 · 5e95d60
1 parent c1e5f32
commit 5e95d60
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 80 deletions.
diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/AddICD11Diagnosis.tsx
@@ -17,6 +17,8 @@ interface AddICD11DiagnosisProps {
   onAdd: (object: CreateDiagnosis) => Promise<boolean>;
   disallowed: ICD11DiagnosisModel[];
   disabled?: boolean;
+  prefill?: ICD11DiagnosisModel;
+  onSelect?: (selected: ICD11DiagnosisModel) => unknown;
 }
 
 export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
@@ -36,6 +38,8 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
     }
   }, [res?.status]);
 
+  useEffect(() => props.prefill && setSelected(props.prefill), [props.prefill]);
+
   const handleAdd = async (status: CreateDiagnosis["verification_status"]) => {
     if (!selected) return;
 
@@ -64,7 +68,10 @@ export default function AddICD11Diagnosis(props: AddICD11DiagnosisProps) {
         disabled={props.disabled || adding}
         placeholder={t("search_icd11_placeholder")}
         value={selected}
-        onChange={(e) => setSelected(e.value)}
+        onChange={(e) => {
+          setSelected(e.value);
+          props.onSelect?.(e.value);
+        }}
         options={mergeQueryOptions(
           selected ? [selected] : [],
           data ?? [],

diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx
@@ -11,6 +11,7 @@ import request from "../../../Utils/request/request";
 import DiagnosesRoutes from "../routes";
 import * as Notification from "../../../Utils/Notifications";
 import PrincipalDiagnosisSelect from "./PrincipalDiagnosisSelect";
+import CareIcon from "../../../CAREUI/icons/CareIcon";
 
 interface CreateDiagnosesProps {
   className?: string;
@@ -78,11 +79,14 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
 interface EditDiagnosesProps {
   className?: string;
   value: ConsultationDiagnosis[];
+  suggestions?: ICD11DiagnosisModel[];
+  onUpdate?: (diagnoses: ConsultationDiagnosis[]) => void;
 }
 
 export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
   const consultation = useSlug("consultation");
   const [diagnoses, setDiagnoses] = useState(props.value);
+  const [prefill, setPrefill] = useState<ICD11DiagnosisModel>();
 
   useEffect(() => {
     setDiagnoses(props.value);
@@ -129,16 +133,34 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
 
               if (res?.ok && data) {
                 setDiagnoses([...diagnoses, data]);
+                setPrefill(undefined);
+                props.onUpdate?.(diagnoses);
                 return true;
               }
 
               if (error) {
                 Notification.Error({ msg: error });
               }
-
               return false;
             }}
+            prefill={prefill}
+            onSelect={() => setPrefill(undefined)}
           />
+          {!!props.suggestions?.length && (
+            <div className="mb-4 flex flex-wrap gap-2">
+              {props.suggestions?.map((suggestion, i) => (
+                <button
+                  key={i}
+                  className="flex items-center gap-2 rounded-full border border-primary-500 px-4 py-1 text-sm text-primary-500 transition-all hover:bg-primary-400/10"
+                  onClick={() => setPrefill(suggestion)}
+                  type="button"
+                >
+                  <CareIcon icon="l-heart-medical" />
+                  {suggestion.label}
+                </button>
+              ))}
+            </div>
+          )}
         </div>
       </div>
 

diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
@@ -46,9 +46,8 @@ import { FieldLabel } from "../Form/FormFields/FormField";
 import useAuthUser from "../../Common/hooks/useAuthUser";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import SymptomsApi from "../Symptoms/api";
-import DiagnosesRoutes from "../Diagnosis/routes";
-import MedicineRoutes from "../Medicine/routes";
 import { scrollTo } from "../../Utils/utils";
+import { ICD11DiagnosisModel } from "../Facility/models";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -58,7 +57,9 @@ export const DailyRounds = (props: any) => {
   const { goBack } = useAppHistory();
   const { facilityId, patientId, consultationId, id } = props;
   const [symptomsSeed, setSymptomsSeed] = useState<number>(1);
-  const [prescriptionSeed, setPrescriptionSeed] = useState(1);
+  const [diagnosisSuggestions, setDiagnosisSuggestions] = useState<
+    ICD11DiagnosisModel[]
+  >([]);
 
   const initForm: any = {
     physical_examination_info: "",
@@ -489,6 +490,7 @@ export const DailyRounds = (props: any) => {
         <Scribe
           form={SCRIBE_FORMS.daily_round}
           onFormUpdate={async (fields) => {
+            setDiagnosisSuggestions([]);
             // Symptoms
             let rounds_type = fields.rounds_type || state.form.rounds_type;
             if (fields.additional_symptoms) {
@@ -522,74 +524,10 @@ export const DailyRounds = (props: any) => {
                   continue;
                 }
 
-                const availableDiagnosis = icdData?.[0]?.id;
+                const availableDiagnosis = icdData?.slice(0, 5);
 
-                if (!availableDiagnosis) {
-                  error({
-                    text: "Could not find the requested diagnosis. Please enter manually.",
-                  });
-                  continue;
-                }
-
-                const { res, data } = await request(
-                  DiagnosesRoutes.createConsultationDiagnosis,
-                  {
-                    pathParams: { consultation: consultationId },
-                    body: {
-                      ...diagnosis,
-                      diagnosis: availableDiagnosis,
-                    },
-                  },
-                );
-
-                if (res?.ok && data)
-                  setDiagnoses((diagnoses) => [...(diagnoses || []), data]);
-              }
-            }
-
-            // Prescriptions
-            if (fields.prescriptions || fields.prn_prescriptions) {
-              const combined_prescriptions = [
-                ...(fields.prescriptions || []),
-                ...(fields.prn_prescriptions || []),
-              ];
-              for (const prescription of combined_prescriptions) {
-                // fetch medicine
-                const { res: medicineRes, data: medicineData } = await request(
-                  routes.listMedibaseMedicines,
-                  {
-                    query: { query: prescription.medicine },
-                  },
-                );
-
-                if (!medicineRes?.ok) {
-                  error({
-                    text: "Failed to fetch medicine",
-                  });
-                  continue;
-                }
-
-                const availableMedicine = medicineData?.[0]?.id;
-
-                if (!availableMedicine) {
-                  error({
-                    text: "Could not find the requested medicine. Please enter manually.",
-                  });
-                  continue;
-                }
-
-                const { res } = await request(
-                  MedicineRoutes.createPrescription,
-                  {
-                    pathParams: { consultation: consultationId },
-                    body: {
-                      ...prescription,
-                      medicine: availableMedicine,
-                    },
-                  },
-                );
-
-                if (res?.ok) setPrescriptionSeed((s) => s + 1);
+                if (availableDiagnosis?.length)
+                  setDiagnosisSuggestions(availableDiagnosis);
               }
             }
 
@@ -598,8 +536,7 @@ export const DailyRounds = (props: any) => {
                 [
                   "investigations",
                   "icd11_diagnosis",
-                  "prescriptions",
-                  "prn_prescriptions",
+                  "additional_symptoms",
                 ].includes(f),
               ) &&
               roundTypes.some((t) => t.id === "DOCTORS_LOG")
@@ -850,7 +787,11 @@ export const DailyRounds = (props: any) => {
                   </h3>
                   {/*  */}
                   {diagnoses ? (
-                    <EditDiagnosesBuilder value={diagnoses} />
+                    <EditDiagnosesBuilder
+                      value={diagnoses}
+                      suggestions={diagnosisSuggestions}
+                      onUpdate={() => setDiagnosisSuggestions([])}
+                    />
                   ) : (
                     <div className="flex animate-pulse justify-center py-4 text-center font-medium text-secondary-800">
                       Fetching existing diagnosis of patient...
@@ -891,7 +832,6 @@ export const DailyRounds = (props: any) => {
                     discontinued={
                       showDiscontinuedPrescriptions ? undefined : false
                     }
-                    key={prescriptionSeed}
                     actions={["discontinue"]}
                   />
                 </div>
@@ -916,7 +856,6 @@ export const DailyRounds = (props: any) => {
                       showDiscontinuedPrescriptions ? undefined : false
                     }
                     actions={["discontinue"]}
-                    key={prescriptionSeed}
                   />
                 </div>
               </div>

diff --git a/src/Components/Scribe/formDetails.ts b/src/Components/Scribe/formDetails.ts
@@ -270,7 +270,7 @@ const DAILY_ROUND_FORM_SCRIBE_DATA: Field[] = [
       });
       return true;
     },
-  },
+  } /*
   {
     friendlyName: "Prescriptions",
     id: "prescriptions",
@@ -330,7 +330,7 @@ const DAILY_ROUND_FORM_SCRIBE_DATA: Field[] = [
       return true;
     },
   },
-  /*{
+  {
     friendlyName: "Round Type",
     id: "rounds_type",
     type: "string",
@@ -355,7 +355,7 @@ const DAILY_ROUND_FORM_SCRIBE_DATA: Field[] = [
       "A string to store the date and time at which the round was taken or measured. 'The round was taken yesterday/today' would amount to yesterday/today's date.",
     validator: (value) => typeof value === "string",
    },
-*/
+*/,
 ];
 
 export const SCRIBE_FORMS: { [key: string]: ScribeForm } = {