fix: ensure form fields are marked as dirty on value change and updat…

…e submit button logic
ohcnetwork · Feb 22, 2025 · fbba84a · fbba84a
1 parent 327a2b8
commit fbba84a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 17 deletions.
diff --git a/src/components/Facility/FacilityForm.tsx b/src/components/Facility/FacilityForm.tsx
@@ -144,16 +144,20 @@ export default function FacilityForm({
 
   const handleFeatureChange = (value: string[]) => {
     const features = value.map((val) => Number(val));
-    form.setValue("features", features);
+    form.setValue("features", features, { shouldDirty: true });
   };
 
   const handleGetCurrentLocation = () => {
     if (navigator.geolocation) {
       setIsGettingLocation(true);
       navigator.geolocation.getCurrentPosition(
         (position) => {
-          form.setValue("latitude", position.coords.latitude);
-          form.setValue("longitude", position.coords.longitude);
+          form.setValue("latitude", position.coords.latitude, {
+            shouldDirty: true,
+          });
+          form.setValue("longitude", position.coords.longitude, {
+            shouldDirty: true,
+          });
           setIsGettingLocation(false);
           toast.success(t("location_updated_successfully"));
         },
@@ -346,7 +350,9 @@ export default function FacilityForm({
                       value={form.watch("geo_organization")}
                       selected={selectedLevels}
                       onChange={(value) =>
-                        form.setValue("geo_organization", value)
+                        form.setValue("geo_organization", value, {
+                          shouldDirty: true,
+                        })
                       }
                       required
                     />
@@ -418,6 +424,7 @@ export default function FacilityForm({
                         form.setValue(
                           "latitude",
                           e.target.value ? Number(e.target.value) : undefined,
+                          { shouldDirty: true },
                         );
                       }}
                       data-cy="facility-latitude"
@@ -445,6 +452,7 @@ export default function FacilityForm({
                         form.setValue(
                           "longitude",
                           e.target.value ? Number(e.target.value) : undefined,
+                          { shouldDirty: true },
                         );
                       }}
                       data-cy="facility-longitude"
@@ -493,7 +501,9 @@ export default function FacilityForm({
           type="submit"
           className="w-full"
           variant="primary"
-          disabled={facilityId ? isUpdatePending : isPending}
+          disabled={
+            facilityId ? isUpdatePending || !form.formState.isDirty : isPending
+          }
           data-cy={facilityId ? "update-facility" : "submit-facility"}
         >
           {facilityId ? (

diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
@@ -262,26 +262,32 @@ export default function PatientRegistration(
         patientQuery.data.geo_organization as unknown as Organization,
       ]);
       form.reset({
-        ...patientQuery.data,
+        name: patientQuery.data.name || "",
+        phone_number: patientQuery.data.phone_number || "",
+        emergency_phone_number: patientQuery.data.emergency_phone_number || "",
         same_phone_number:
           patientQuery.data.phone_number ===
           patientQuery.data.emergency_phone_number,
         same_address:
           patientQuery.data.address === patientQuery.data.permanent_address,
+        gender: patientQuery.data.gender as (typeof GENDERS)[number],
+        blood_group: patientQuery.data.blood_group,
         age_or_dob: patientQuery.data.date_of_birth ? "dob" : "age",
+        date_of_birth: patientQuery.data.date_of_birth || undefined,
         age:
           !patientQuery.data.date_of_birth && patientQuery.data.year_of_birth
             ? new Date().getFullYear() - patientQuery.data.year_of_birth
             : undefined,
-        date_of_birth: patientQuery.data.date_of_birth
-          ? patientQuery.data.date_of_birth
-          : undefined,
+        address: patientQuery.data.address || "",
+        permanent_address: patientQuery.data.permanent_address || "",
+        pincode: patientQuery.data.pincode || undefined,
+        nationality: patientQuery.data.nationality || "India",
         geo_organization: (
           patientQuery.data.geo_organization as unknown as Organization
         )?.id,
       } as unknown as z.infer<typeof formSchema>);
     }
-  }, [patientQuery.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [patientQuery.data]);
 
   const showDuplicate =
     !patientPhoneSearch.isLoading &&
@@ -733,7 +739,11 @@ export default function PatientRegistration(
               <Button
                 type="submit"
                 variant="primary"
-                disabled={isCreatingPatient || isUpdatingPatient}
+                disabled={
+                  isCreatingPatient ||
+                  isUpdatingPatient ||
+                  !form.formState.isDirty
+                }
               >
                 {patientId ? t("save") : t("save_and_continue")}
               </Button>

diff --git a/src/components/Resource/ResourceForm.tsx b/src/components/Resource/ResourceForm.tsx
@@ -202,17 +202,22 @@ export default function ResourceForm({ facilityId, id }: ResourceProps) {
   }));
 
   const handleUserChange = (user: UserBase) => {
-    form.setValue("assigned_to", user.id);
+    form.setValue("assigned_to", user.id, { shouldDirty: true });
     setAssignedToUser(user);
   };
 
   const fillMyDetails = () => {
     form.setValue(
       "referring_facility_contact_name",
       `${authUser.first_name} ${authUser.last_name}`.trim(),
+      { shouldDirty: true },
     );
     if (authUser.phone_number) {
-      form.setValue("referring_facility_contact_number", authUser.phone_number);
+      form.setValue(
+        "referring_facility_contact_number",
+        authUser.phone_number,
+        { shouldDirty: true },
+      );
     }
   };
 
@@ -292,7 +297,9 @@ export default function ResourceForm({ facilityId, id }: ResourceProps) {
                                   facilities?.results.find(
                                     (f) => f.id === value,
                                   ) ?? null;
-                                form.setValue("assigned_facility", facility);
+                                form.setValue("assigned_facility", facility, {
+                                  shouldDirty: true,
+                                });
                               }}
                             />
                           </FormControl>
@@ -551,7 +558,15 @@ export default function ResourceForm({ facilityId, id }: ResourceProps) {
                   >
                     {t("cancel")}
                   </Button>
-                  <Button type="submit" variant="default" disabled={isPending}>
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    disabled={
+                      id
+                        ? isUpdatePending || !form.formState.isDirty
+                        : isPending
+                    }
+                  >
                     {isPending && (
                       <CareIcon
                         icon="l-spinner"

diff --git a/src/pages/Facility/settings/locations/LocationForm.tsx b/src/pages/Facility/settings/locations/LocationForm.tsx
@@ -287,7 +287,12 @@ export default function LocationForm({
           />
         </div>
 
-        <Button type="submit" disabled={isPending}>
+        <Button
+          type="submit"
+          disabled={Boolean(
+            isPending || (location?.id && !form.formState.isDirty),
+          )}
+        >
           {isPending ? (
             <>{location?.id ? t("updating") : t("creating")}</>
           ) : (

diff --git a/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx b/src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx
@@ -263,7 +263,7 @@ const ScheduleTemplateEditor = ({
             <Button
               variant="primary"
               type="submit"
-              disabled={isUpdating}
+              disabled={isUpdating || !form.formState.isDirty}
               size="sm"
             >
               <SaveIcon />