Update Resource Forms to Enhance Validation

cypress/e2e/resource_spec/ResourcesHomepage.cy.ts

@@ -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/Utils/utils.ts

@@ -544,3 +544,13 @@ export const fahrenheitToCelsius = (fahrenheit: number) => {
 export const keysOf = <T extends object>(obj: T) => {
   return Object.keys(obj) as (keyof T)[];
 };
+
+export const handleNegativeValue = (
+  event: React.FormEvent<HTMLInputElement>,
+): void => {
+  const input = event.currentTarget;
+  input.value = input.value.replace(/-/g, "");
+  if (isNaN(Number(input.value))) {
+    input.value = "";
+  }
+};

src/components/Form/FormFields/TextFormField.tsx

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

src/components/Resource/ResourceCreate.tsx

@@ -30,7 +30,7 @@ import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
-import { parsePhoneNumber } from "@/Utils/utils";
+import { handleNegativeValue, parsePhoneNumber } from "@/Utils/utils";
 
 interface resourceProps {
   facilityId: number;
@@ -300,8 +300,11 @@ 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}
+          onInput={handleNegativeValue}
         />
 
         <div className="md:col-span-2">

src/components/Resource/ResourceDetailsUpdate.tsx

@@ -25,6 +25,7 @@ import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
+import { handleNegativeValue } from "@/Utils/utils";
 
 interface resourceProps {
   id: string;
@@ -48,9 +49,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 +108,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 +159,7 @@ export const ResourceDetailsUpdate = (props: resourceProps) => {
   });
 
   const handleSubmit = async () => {
-    const validForm = validateForm();
+    const validForm = !validateForm();
 
     if (validForm) {
       setIsLoading(true);
@@ -233,7 +248,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,44 +258,49 @@ 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}
+                onInput={handleNegativeValue}
               />
             </div>
             <div>
               <TextFormField
                 name="assigned_quantity"
                 type="number"
+                min={1}
                 label="Approved Quantity"
                 value={state.form.assigned_quantity}
                 onChange={handleChange}
                 disabled={state.form.status !== "PENDING"}
+                onInput={handleNegativeValue}
               />
             </div>
 
             <div className="md:col-span-2">
               <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 +311,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>