Update Resource Forms to Enhance Validation

cypress/e2e/resource_spec/ResourcesHomepage.cy.ts

@@ -1,6 +1,6 @@
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import ResourcePage from "../../pageobject/Resource/ResourcePage";
-import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 
 describe("Resource Page", () => {
   let createdResource: string;
@@ -68,6 +68,10 @@ describe("Resource Page", () => {
     cy.visit(createdResource);
     resourcePage.clickUpdateStatus();
     resourcePage.updateStatus("APPROVED");
+    cy.clickAndSelectOption(
+      "input[name='assigned_facility_object']",
+      "Dummy Request Fulfilment Center, Ernakulam",
+    );
     resourcePage.clickSubmitButton();
     resourcePage.verifySuccessNotification(
       "Resource request updated successfully",

src/components/Form/FormFields/TextFormField.tsx

@@ -29,6 +29,8 @@ export type TextFormFieldProps = FormFieldBaseProps<string> &
     trailingPadding?: string | undefined;
     leadingPadding?: string | undefined;
     suggestions?: string[];
+    min?: number | string;
+    max?: number | string;
     clearable?: boolean | undefined;
   };
 
@@ -63,6 +65,8 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
         type={props.type === "password" ? getPasswordFieldType() : props.type}
         name={field.name}
         value={field.value}
+        min={Number(props?.min)}
+        max={Number(props?.max)}
         required={field.required}
         onChange={(e) => field.handleChange(e.target.value)}
       />

src/components/Resource/ResourceCreate.tsx

@@ -300,6 +300,8 @@ export default function ResourceCreate(props: resourceProps) {
         <TextFormField
           label={t("required_quantity")}
           name="requested_quantity"
+          type="number"
+          min={1}
           value={state.form.required_quantity}
           onChange={handleChange}
         />

src/components/Resource/ResourceDetailsUpdate.tsx

@@ -48,9 +48,15 @@ const requiredFields: any = {
   approving_facility_object: {
     errorText: "Resource approving facility can not be empty.",
   },
-  assigned_facility_type: {
+  assigned_facility_object: {
     errorText: "Please Select Facility Type",
   },
+  title: {
+    errorText: "Title is required.",
+  },
+  reason: {
+    errorText: "Description is required.",
+  },
 };
 
 const initError = Object.assign(
@@ -101,7 +107,15 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
     const errors = { ...initError };
     let isInvalidForm = false;
     Object.keys(requiredFields).forEach((field) => {
-      if (!state.form[field] || !state.form[field].length) {
+      if (
+        field === "approving_facility_object" ||
+        field === "assigned_facility_object"
+      ) {
+        if (!state.form[field] || !state.form[field]?.name) {
+          errors[field] = requiredFields[field].errorText;
+          isInvalidForm = true;
+        }
+      } else if (!state.form[field] || state.form[field].trim().length === 0) {
         errors[field] = requiredFields[field].errorText;
         isInvalidForm = true;
       }
@@ -144,7 +158,7 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
   });
 
   const handleSubmit = async () => {
-    const validForm = validateForm();
+    const validForm = !validateForm();
 
     if (validForm) {
       setIsLoading(true);
@@ -233,7 +247,7 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
                 setSelected={(obj) =>
                   setFacility(obj, "approving_facility_object")
                 }
-                errors={state.errors.approving_facility}
+                errors={state.errors.approving_facility_object}
               />
             </div>
 
@@ -243,20 +257,21 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
               </FieldLabel>
               <FacilitySelect
                 multiple={false}
-                name="assigned_facility"
+                name="assigned_facility_object"
                 facilityType={1510}
                 selected={state.form.assigned_facility_object}
                 setSelected={(obj) =>
                   setFacility(obj, "assigned_facility_object")
                 }
-                errors={state.errors.assigned_facility}
+                errors={state.errors.assigned_facility_object}
               />
             </div>
             <div>
               <TextFormField
                 label="Required Quantity"
                 name="requested_quantity"
                 type="number"
+                min={1}
                 value={state.form.requested_quantity}
                 onChange={handleChange}
               />
@@ -265,6 +280,7 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
               <TextFormField
                 name="assigned_quantity"
                 type="number"
+                min={1}
                 label="Approved Quantity"
                 value={state.form.assigned_quantity}
                 onChange={handleChange}
@@ -276,11 +292,12 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
               <TextFormField
                 name="title"
                 type="text"
-                label="Request Title*"
+                label="Request Title"
                 placeholder="Type your title here"
                 value={state.form.title}
                 onChange={handleChange}
                 error={state.errors.title}
+                required
               />
             </div>
 
@@ -291,8 +308,9 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
                 placeholder="Type your description here"
                 value={state.form.reason}
                 onChange={handleChange}
-                label="Description of request*"
+                label="Description of request"
                 error={state.errors.reason}
+                required
               />
             </div>