Merge pull request 'Special Characters Shoulsd not Allowed in Name Fields' (#339) from Kartik_Bug#910 into Issues_Aug_1W

Reviewed-on: #339

src/components/Employee/ManageEmployee.jsx

@@ -16,13 +16,13 @@ import {
   getCachedData,
 } from "../../slices/apiDataManager";
 import { clearApiCacheKey } from "../../slices/apiCacheSlice";
-import {useMutation} from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 
 const mobileNumberRegex = /^[0-9]\d{9}$/;
 
-const ManageEmployee = ({ employeeId, onClosed,IsAllEmployee }) => {
+const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
   const dispatch = useDispatch();
-const { mutate: updateEmployee, isPending } = useUpdateEmployee();
+  const { mutate: updateEmployee, isPending } = useUpdateEmployee();
 
   const {
     employee,
@@ -130,12 +130,11 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
       .min(1, { message: "Phone Number is required" })
       .regex(mobileNumberRegex, { message: "Invalid phone number " }),
     jobRoleId: z.string().min(1, { message: "Role is required" }),
-  } );
-  
-  useEffect( () =>
-  {
+  });
+
+  useEffect(() => {
     refetch()
-  },[])
+  }, [])
 
   const {
     register,
@@ -169,19 +168,19 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
   });
 
   const AadharNumberValue = watch("aadharNumber") || "";
- 
- const onSubmit = (data) => {
-  if (data.email === "") {
-    data.email = null;
-   }
 
-  updateEmployee({...data,IsAllEmployee},{
-    onSuccess: () => {
-      reset();
-      onClosed();
-    },
-  });
-};
+  const onSubmit = (data) => {
+    if (data.email === "") {
+      data.email = null;
+    }
+
+    updateEmployee({ ...data, IsAllEmployee }, {
+      onSuccess: () => {
+        reset();
+        onClosed();
+      },
+    });
+  };
 
 
   useEffect(() => {
@@ -212,7 +211,7 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
           phoneNumber: currentEmployee.phoneNumber || "",
           jobRoleId: currentEmployee.jobRoleId?.toString() || "",
         }
-        : {} 
+        : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
     setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
@@ -220,66 +219,82 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
 
   return (
     <>
-      <form onSubmit={handleSubmit( onSubmit )} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
         <div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
-                <div className="row mb-3">
-                  <div className="col-sm-4">
-                    {" "}
-                    <div className="form-text text-start">First Name</div>
-                    <input
-                      type="text"
-                      name="FirstName"
-                      {...register("firstName")}
-                      className="form-control form-control-sm"
-                      id="firstName"
-                      placeholder="First Name"
-                    />
-                    {errors.firstName && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
-                        {errors.firstName.message}
-                      </div>
-                    )}
-                  </div>{" "}
-                  <div className="col-sm-4">
-                    <div className="form-text text-start">Middle Name</div>
-
+        <div className="row mb-3">
+          <div className="col-sm-4">
+            <div className="form-text text-start">First Name</div>
             <input
               type="text"
-              {...register("middleName")}
+              name="firstName"
+              {...register("firstName", {
+                required: "First name is required",
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
-              id="middleName"
-              placeholder="Middle Name"
+              id="firstName"
+              placeholder="First Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
-            {errors.middleName && (
-              <div
-                className="danger-text text-start "
-                style={{ fontSize: "12px" }}
-              >
-                {errors.middleName.message}
+            {errors.firstName && (
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                {errors.firstName.message}
               </div>
             )}
           </div>
+          <div className="col-sm-4">
+            <div className="form-text text-start">Middle Name</div>
+            <input
+              type="text"
+              {...register("middleName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
+              className="form-control form-control-sm"
+              id="middleName"
+              placeholder="Middle Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
+            />
+            {errors.middleName && (
+              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
+                {errors.middleName.message}
+              </div>
+            )}
+          </div>
+
           <div className="col-sm-4">
             <div className="form-text text-start">Last Name</div>
             <input
               type="text"
-              {...register("lastName")}
+              {...register("lastName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
               id="lastName"
               placeholder="Last Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
             {errors.lastName && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                 {errors.lastName.message}
               </div>
             )}
           </div>
+
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">