Fix log update submit button disabled even after symptoms changed (oh…

…cnetwork#7992) * Fix log update submit button disabled even after symptoms changed * logic for checking symptoms changed
Sulochan-khadka · Jun 7, 2024 · bb2ef69 · bb2ef69
1 parent ed7b307
commit bb2ef69
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 28 deletions.
diff --git a/src/Components/Patient/DailyRounds.tsx b/src/Components/Patient/DailyRounds.tsx
@@ -32,7 +32,6 @@ import routes from "../../Redux/api";
 import { Scribe } from "../Scribe/Scribe";
 import { DAILY_ROUND_FORM_SCRIBE_DATA } from "../Scribe/formDetails";
 import { DailyRoundsModel } from "./models";
-import { fetchEventTypeByName } from "../Facility/ConsultationDetails/Events/types";
 import InvestigationBuilder from "../Common/prescription-builder/InvestigationBuilder";
 import { FieldErrorText } from "../Form/FormFields/FormField";
 import { error } from "@pnotify/core";
@@ -61,6 +60,7 @@ const initForm: any = {
   systolic: null,
   investigations: [],
   investigations_dirty: false,
+  symptoms_dirty: false,
   diastolic: null,
   pulse: null,
   resp: null,
@@ -139,6 +139,7 @@ export const DailyRounds = (props: any) => {
     "review_interval",
     "bp",
     "pulse",
+    "temperature",
     "resp",
     "investigations",
     "ventilator_spo2",
@@ -149,7 +150,6 @@ export const DailyRounds = (props: any) => {
 
   const fetchRoundDetails = useCallback(async () => {
     setIsLoading(true);
-    fetchEventTypeByName("");
     let formData: any = initialData;
     if (id) {
       const { data } = await request(routes.getDailyReport, {
@@ -271,8 +271,7 @@ export const DailyRounds = (props: any) => {
     return !invalidForm;
   };
 
-  const handleSubmit = async (e: React.SyntheticEvent) => {
-    e.preventDefault();
+  const handleSubmit = async () => {
     const validForm = validateForm();
     if (validForm) {
       setIsLoading(true);
@@ -420,6 +419,32 @@ export const DailyRounds = (props: any) => {
     return <Loading />;
   }
 
+  const submitButtonDisabled = (() => {
+    if (buttonText !== "Save") {
+      return false;
+    }
+
+    if (["VENTILATOR", "DOCTORS_LOG"].includes(state.form.rounds_type)) {
+      return false;
+    }
+
+    if (state.form["symptoms_dirty"]) {
+      return false;
+    }
+
+    if (
+      formFields.every(
+        (field) =>
+          JSON.stringify(state.form[field]) ===
+          JSON.stringify(initialData[field]),
+      )
+    ) {
+      return true;
+    }
+
+    return false;
+  })();
+
   return (
     <Page
       title={headerText}
@@ -448,10 +473,7 @@ export const DailyRounds = (props: any) => {
           }}
         />
       </div>
-      <form
-        onSubmit={(e) => handleSubmit(e)}
-        className="w-full max-w-4xl rounded-lg bg-white px-8 py-5 shadow md:m-4 md:px-16 md:py-11"
-      >
+      <form className="w-full max-w-4xl rounded-lg bg-white px-8 py-5 shadow md:m-4 md:px-16 md:py-11">
         <DraftSection
           handleDraftSelect={(newState) => {
             dispatch({ type: "set_state", state: newState });
@@ -504,7 +526,14 @@ export const DailyRounds = (props: any) => {
         <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
           <div className="pb-6 md:col-span-2">
             <FieldLabel>Symptoms</FieldLabel>
-            <EncounterSymptomsBuilder />
+            <EncounterSymptomsBuilder
+              onChange={() => {
+                handleFormFieldChange({
+                  name: "symptoms_dirty",
+                  value: true,
+                });
+              }}
+            />
           </div>
 
           <TextAreaFormField
@@ -722,19 +751,11 @@ export const DailyRounds = (props: any) => {
         <div className="mt-4 flex flex-col-reverse justify-end gap-2 md:flex-row">
           <Cancel onClick={() => goBack()} />
           <Submit
-            disabled={
-              buttonText === "Save" &&
-              formFields.every(
-                (field: string) =>
-                  JSON.stringify(state.form[field]) ===
-                  JSON.stringify(initialData[field]),
-              ) &&
-              (state.form.temperature == initialData.temperature ||
-                isNaN(state.form.temperature)) &&
-              state.form.rounds_type !== "VENTILATOR" &&
-              state.form.rounds_type !== "DOCTORS_LOG"
-            }
-            onClick={(e) => handleSubmit(e)}
+            disabled={submitButtonDisabled}
+            onClick={(e) => {
+              e.preventDefault();
+              handleSubmit();
+            }}
             label={buttonText}
           />
         </div>

diff --git a/src/Components/Symptoms/SymptomsBuilder.tsx b/src/Components/Symptoms/SymptomsBuilder.tsx
@@ -68,7 +68,10 @@ export const CreateSymptomsBuilder = (props: {
   );
 };
 
-export const EncounterSymptomsBuilder = (props: { showAll?: boolean }) => {
+export const EncounterSymptomsBuilder = (props: {
+  showAll?: boolean;
+  onChange?: () => void;
+}) => {
   const consultationId = useSlug("consultation");
 
   const [isProcessing, setIsProcessing] = useState(false);
@@ -104,20 +107,26 @@ export const EncounterSymptomsBuilder = (props: { showAll?: boolean }) => {
         {items.map((symptom) => {
           const handleUpdate = async (event: FieldChangeEvent<unknown>) => {
             setIsProcessing(true);
-            await request(SymptomsApi.partialUpdate, {
+            const { res } = await request(SymptomsApi.partialUpdate, {
               pathParams: { consultationId, external_id: symptom.id },
               body: { [event.name]: event.value },
             });
-            await refetch();
+            if (res?.ok) {
+              props.onChange?.();
+              await refetch();
+            }
             setIsProcessing(false);
           };
 
           const handleMarkAsEnteredInError = async () => {
             setIsProcessing(true);
-            await request(SymptomsApi.markAsEnteredInError, {
+            const { res } = await request(SymptomsApi.markAsEnteredInError, {
               pathParams: { consultationId, external_id: symptom.id },
             });
-            await refetch();
+            if (res?.ok) {
+              props.onChange?.();
+              await refetch();
+            }
             setIsProcessing(false);
           };
 
@@ -147,7 +156,10 @@ export const EncounterSymptomsBuilder = (props: { showAll?: boolean }) => {
         <AddSymptom
           existing={data.results}
           consultationId={consultationId}
-          onAdd={() => refetch()}
+          onAdd={() => {
+            props.onChange?.();
+            refetch();
+          }}
         />
       </div>
     </div>