Prevent Unnecessary Update Request in all usages of Form components and Facilities Section

cypress/e2e/facility_spec/FacilityCreation.cy.ts

@@ -50,11 +50,7 @@ describe("Facility Creation", () => {
     "Required",
     "Invalid Phone Number",
   ];
-  const bedErrorMessage = [
-    "This field is required",
-    "Total capacity cannot be 0",
-    "This field is required",
-  ];
+  const bedErrorMessage = ["This field is required", "This field is required"];
   const doctorErrorMessage = [
     "This field is required",
     "This field is required",
@@ -313,11 +309,13 @@ describe("Facility Creation", () => {
     facilityPage.submitForm();
     // add no bed capacity and verify form error message
     facilityPage.isVisibleselectBedType();
+    facilityPage.selectBedType("Oxygen Supported Bed");
     facilityPage.saveAndExitBedCapacityForm();
     cy.verifyErrorMessages(bedErrorMessage);
     facilityPage.clickcancelbutton();
     // add no doctor capacity and verify form error message
     facilityPage.isVisibleAreaOfSpecialization();
+    facilityPage.selectAreaOfSpecialization("Pulmonology");
     facilityPage.clickdoctorcapacityaddmore();
     cy.verifyErrorMessages(doctorErrorMessage);
     facilityPage.clickcancelbutton();

cypress/e2e/facility_spec/FacilityManage.cy.ts

@@ -128,8 +128,9 @@ describe("Facility Manage Functions", () => {
     facilityManage.verifyTotalDoctorCapacity(doctorCapacity);
     // edit a existing doctor
     facilityManage.clickEditFacilityDoctorCapacity();
+    cy.get('button[type="submit"]').should("be.disabled");
     facilityPage.fillDoctorCount(doctorModifiedCapacity);
-    facilityPage.clickdoctorcapacityaddmore();
+    facilityPage.saveAndExitDoctorForm();
     facilityManage.verifySuccessMessageVisibilityAndContent(
       "Staff count updated successfully",
     );
@@ -157,9 +158,10 @@ describe("Facility Manage Functions", () => {
     facilityManage.verifyFacilityBedCapacity(currentOccupied);
     // edit a existing bed
     facilityManage.clickEditFacilityBedCapacity();
+    cy.get('button[type="submit"]').should("be.disabled");
     facilityPage.fillTotalCapacity(totalUpdatedCapacity);
     facilityPage.fillCurrentlyOccupied(currentUpdatedOccupied);
-    facilityPage.clickbedcapcityaddmore();
+    facilityPage.saveAndExitBedCapacityForm();
     facilityManage.verifySuccessMessageVisibilityAndContent(
       "Bed capacity updated successfully",
     );

public/locale/en.json

@@ -354,7 +354,6 @@
   "asset_type": "Asset Type",
   "assets": "Assets",
   "assign": "Assign",
-  "unassign":"Unassign",
   "assign_a_volunteer_to": "Assign a volunteer to {{name}}",
   "assign_bed": "Assign Bed",
   "assign_to_volunteer": "Assign to a Volunteer",
@@ -1444,6 +1443,7 @@
   "type_your_comment": "Type your comment",
   "type_your_reason_here": "Type your reason here",
   "unable_to_get_current_position": "Unable to get current position.",
+  "unassign": "Unassign",
   "unconfirmed": "Unconfirmed",
   "unique_id": "Unique Id",
   "unknown": "Unknown",
@@ -1558,8 +1558,8 @@
   "voice_autofill": "Voice Autofill",
   "volunteer_assigned": "Volunteer assigned successfully",
   "volunteer_contact": "Volunteer Contact",
-  "volunteer_update" : "Volunteer updated successfully",
   "volunteer_unassigned": "Volunteer unassigned successfully",
+  "volunteer_update": "Volunteer updated successfully",
   "ward": "Ward",
   "warranty_amc_expiry": "Warranty / AMC Expiry",
   "weekly_working_hours_error": "Average weekly working hours must be a number between 0 and 168",

src/components/Facility/BedCapacity.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Cancel, Submit } from "@/components/Common/ButtonV2";
 import { CapacityModal, OptionsType } from "@/components/Facility/models";
+import Form from "@/components/Form/Form";
 import { SelectFormField } from "@/components/Form/FormFields/SelectFormField";
 import TextFormField from "@/components/Form/FormFields/TextFormField";
-import { FieldChangeEvent } from "@/components/Form/FormFields/Utils";
 
 import { BED_TYPES } from "@/common/constants";
 
@@ -55,17 +54,11 @@ export const BedCapacity = (props: BedCapacityProps) => {
   const { t } = useTranslation();
   const { facilityId, handleClose, handleUpdate, className, id } = props;
   const [state, dispatch] = useReducer(bedCountReducer, initialState);
-  const [isLastOptionType, setIsLastOptionType] = useState(false);
   const [bedTypes, setBedTypes] = useState<OptionsType[]>(
     BED_TYPES.map((o) => ({ id: o, text: t(`bed_type__${o}`) })),
   );
   const [isLoading, setIsLoading] = useState(false);
 
-  const headerText = !id ? "Add Bed Capacity" : "Edit Bed Capacity";
-  const buttonText = !id
-    ? `Save ${!isLastOptionType ? "& Add More" : "Bed Capacity"}`
-    : "Update Bed Capacity";
-
   async function fetchCapacityBed() {
     setIsLoading(true);
     if (!id) {
@@ -117,64 +110,62 @@ export const BedCapacity = (props: BedCapacityProps) => {
     fetchCapacityBed();
   }, []);
 
-  useEffect(() => {
-    const lastBedType =
-      bedTypes.filter((i: OptionsType) => i.disabled).length ===
-      BED_TYPES.length - 1;
-    setIsLastOptionType(lastBedType);
-  }, [bedTypes]);
-
-  const handleChange = (e: FieldChangeEvent<unknown>) => {
-    const form = { ...state.form };
-    form[e.name] = e.value;
-    dispatch({ type: "set_form", form });
-  };
-
-  const validateData = () => {
+  //checking validation of the new form data comming from handle submit
+  const validateData = (form: typeof initForm) => {
     const errors = { ...initForm };
-    let invalidForm = false;
-    Object.keys(state.form).forEach((field) => {
-      if (!state.form[field]) {
+    let validForm = true;
+    Object.keys(form).forEach((field) => {
+      if (!form[field]) {
         errors[field] = t("field_required");
-        invalidForm = true;
-      } else if (
-        field === "currentOccupancy" &&
-        Number(state.form[field] < 0)
-      ) {
-        errors[field] = "Occupied cannot be negative";
-        invalidForm = true;
-      } else if (
-        field === "currentOccupancy" &&
-        Number(state.form[field]) > Number(state.form.totalCapacity)
-      ) {
-        errors[field] = "Occupied must be less than or equal to total capacity";
-        invalidForm = true;
-      }
-      if (field === "totalCapacity" && Number(state.form[field]) === 0) {
-        errors[field] = "Total capacity cannot be 0";
-        invalidForm = true;
-      } else if (field === "totalCapacity" && Number(state.form[field]) < 0) {
-        errors[field] = "Total capacity cannot be negative";
-        invalidForm = true;
+        validForm = false;
+      } else if (field === "currentOccupancy") {
+        if (Number(form[field] < 0)) {
+          errors[field] = "Occupied cannot be negative";
+          validForm = false;
+        } else if (Number(form[field]) > Number(form.totalCapacity)) {
+          errors[field] =
+            "Occupied must be less than or equal to total capacity";
+          validForm = false;
+        } else if (isNaN(Number(form[field]))) {
+          errors[field] = "Only numbers are allowed";
+          validForm = false;
+        }
+      } else if (field === "totalCapacity" && Number(form[field]) === 0) {
+        if (Number(form[field]) === 0) {
+          errors[field] = "Total capacity cannot be 0";
+          validForm = false;
+        } else if (Number(form[field]) < 0) {
+          errors[field] = "Total capacity cannot be negative";
+          validForm = false;
+        } else if (isNaN(Number(form[field]))) {
+          errors[field] = "Only numbers are allowed";
+          validForm = false;
+        }
       }
     });
-    if (invalidForm) {
+    if (!validForm) {
       dispatch({ type: "set_error", errors });
       return false;
     }
     dispatch({ type: "set_error", errors });
     return true;
   };
 
-  const handleSubmit = async (e: any, btnType = "Save") => {
-    e.preventDefault();
-    const valid = validateData();
+  const headerText = !id ? "Add Bed Capacity" : "Edit Bed Capacity";
+  const buttonText = !id ? "Save Bed Capacity" : "Update Bed Capacity";
+
+  const isLastOptionType =
+    bedTypes.filter((i: OptionsType) => i.disabled).length ===
+    BED_TYPES.length - 1;
+
+  const handleSubmit = async (form: typeof initForm, source?: string) => {
+    const valid = validateData(form);
     if (valid) {
       setIsLoading(true);
       const bodyData = {
-        room_type: Number(state.form.bedType),
-        total_capacity: Number(state.form.totalCapacity),
-        current_capacity: Number(state.form.currentOccupancy),
+        room_type: Number(form.bedType),
+        total_capacity: Number(form.totalCapacity),
+        current_capacity: Number(form.currentOccupancy),
       };
       const { data } = await request(
         id ? routes.updateCapacity : routes.createCapacity,
@@ -184,8 +175,9 @@ export const BedCapacity = (props: BedCapacityProps) => {
         },
       );
       setIsLoading(false);
+      let updatedBedTypes;
       if (data) {
-        const updatedBedTypes = bedTypes.map((type) => {
+        updatedBedTypes = bedTypes.map((type) => {
           return {
             ...type,
             disabled: data.room_type !== type.id ? type.disabled : true,
@@ -206,10 +198,23 @@ export const BedCapacity = (props: BedCapacityProps) => {
         }
         handleUpdate();
       }
-      if (btnType == "Save and Exit") handleClose();
+      const disabledBedTypesLength = updatedBedTypes?.filter(
+        (item) => item.disabled,
+      ).length;
+
+      if (
+        source !== "bed-capacity-save" ||
+        disabledBedTypesLength === BED_TYPES.length
+      )
+        handleClose();
     }
   };
 
+  const additionalButtonLabel =
+    !isLastOptionType && headerText === "Add Bed Capacity"
+      ? "Save & Add More"
+      : "";
+
   return (
     <div className={className}>
       {isLoading ? (
@@ -236,64 +241,72 @@ export const BedCapacity = (props: BedCapacityProps) => {
         </div>
       ) : (
         <div className={className}>
-          <SelectFormField
-            name="bedType"
-            id="bed-type"
-            label="Bed Type"
-            required
-            value={state.form.bedType}
-            options={bedTypes.filter((type) => !type.disabled)}
-            optionLabel={(option) => option.text}
-            optionValue={(option) => option.id}
-            onChange={handleChange}
-            disabled={!!id}
-            error={state.errors.bedType}
-          />
-          <div className="flex flex-col gap-7 md:flex-row">
-            <TextFormField
-              className="w-full"
-              id="total-capacity"
-              name="totalCapacity"
-              label="Total Capacity"
-              required
-              type="number"
-              value={state.form.totalCapacity}
-              onChange={handleChange}
-              error={state.errors.totalCapacity}
-              min={1}
-            />
-            <TextFormField
-              className="w-full"
-              id="currently-occupied"
-              label="Currently Occupied"
-              required
-              name="currentOccupancy"
-              type="number"
-              value={state.form.currentOccupancy}
-              onChange={handleChange}
-              error={state.errors.currentOccupancy}
-              min={0}
-              max={state.form.totalCapacity}
-            />
-          </div>
-
-          <div className="cui-form-button-group mt-4">
-            <Cancel onClick={handleClose} />
-            {headerText === "Add Bed Capacity" && (
-              <Submit
-                id="bed-capacity-save-and-exit"
-                onClick={(e) => handleSubmit(e, "Save and Exit")}
-                label="Save Bed Capacity"
-              />
+          <Form
+            defaults={state.form}
+            onSubmit={handleSubmit}
+            submitBtnId="bed-capacity-save-and-exit"
+            onCancel={handleClose}
+            submitLabel={buttonText}
+            className="my-auto p-0"
+            noPadding
+            hideRestoreDraft
+            additionalButtons={
+              isLastOptionType || headerText !== "Add Bed Capacity"
+                ? []
+                : [
+                    {
+                      id: "bed-capacity-save",
+                      type: "submit",
+                      label: additionalButtonLabel,
+                    },
+                  ]
+            }
+          >
+            {(field) => (
+              <>
+                <SelectFormField
+                  name="bedType"
+                  id="bed-type"
+                  label="Bed Type"
+                  required
+                  value={field("bedType").value}
+                  options={bedTypes.filter((type) => !type.disabled)}
+                  optionLabel={(option) => option.text}
+                  optionValue={(option) => option.id}
+                  onChange={(e: any) => field("bedType").onChange(e)}
+                  disabled={!!id}
+                  error={state.errors.bedType}
+                />
+                <div className="flex flex-col gap-7 md:flex-row">
+                  <TextFormField
+                    className="w-full"
+                    id="total-capacity"
+                    name="totalCapacity"
+                    label="Total Capacity"
+                    required
+                    type="number"
+                    value={field("totalCapacity").value}
+                    onChange={(e: any) => field("totalCapacity").onChange(e)}
+                    error={state.errors.totalCapacity}
+                    min={1}
+                  />
+                  <TextFormField
+                    className="w-full"
+                    id="currently-occupied"
+                    label="Currently Occupied"
+                    required
+                    name="currentOccupancy"
+                    type="number"
+                    value={field("currentOccupancy").value}
+                    onChange={(e: any) => field("currentOccupancy").onChange(e)}
+                    error={state.errors.currentOccupancy}
+                    min={0}
+                    max={state.form.totalCapacity}
+                  />
+                </div>
+              </>
             )}
-            {!isLastOptionType && (
-              <Submit
-                id="bed-capacity-save"
-                onClick={(e) => handleSubmit(e)}
-                label={buttonText}
-              />
-            )}
-          </div>
+          </Form>
         </div>
       )}
     </div>

src/components/Facility/FacilityBedCapacity.tsx

@@ -96,6 +96,7 @@ export const FacilityBedCapacity = (props: any) => {
             id="facility-add-bedtype"
             className="w-full md:w-auto"
             onClick={() => setBedCapacityModalOpen(true)}
+            disabled={BED_TYPES.length === capacityQuery.data?.count}
             authorizeFor={NonReadOnlyUsers}
           >
             <CareIcon icon="l-bed" className="mr-2 text-lg text-white" />