Merge pull request #2304 from Bonymol-aot/feature/FWF-3757-formSettin…

…gs-optimization FWF-3757: [Feature] Added validations for form name and path in settings, removed placeholder
AOT-Technologies · Oct 28, 2024 · 3e57935 · 3e57935
2 parents cd764a4 + 596ba85
commit 3e57935
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/forms-flow-web/src/apiManager/services/FormServices.js b/forms-flow-web/src/apiManager/services/FormServices.js
@@ -93,6 +93,17 @@ export const validateFormName = (title, name, id) => {
   return RequestService.httpGETRequest(url);
 };
 
+export const validatePathName = (path, name, id) => {
+  let url = `${API.VALIDATE_FORM_NAME}?path=${path}`;
+  if (name) {
+    url += `&name=${encodeURIComponent(name)}`;
+  }
+  if (id) {
+    url += `&id=${encodeURIComponent(id)}`;
+  }
+  return RequestService.httpGETRequest(url);
+};
+
 export const getFormExport = (form_id) => {
   const exportFormUrl = replaceUrl(API.EXPORT_FORM, "<form_id>",form_id);
   return RequestService.httpGETRequest(exportFormUrl);

diff --git a/forms-flow-web/src/components/CustomComponents/MultiSelect.js b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
@@ -73,7 +73,6 @@ const RoleSelector = ({ allRoles = [], selectedRoles = [], setSelectedRoles }) =
           onChange={handleRoleInputChange}
           onFocus={() => setIsDropdownOpen(true)} // Open dropdown when input is focused
           className="role-input"
-          placeholder="Type to filter roles"
           ref={inputRef} // Reference to input for outside click handling
         />
       </div>

diff --git a/forms-flow-web/src/components/Form/EditForm/FormSettings.js b/forms-flow-web/src/components/Form/EditForm/FormSettings.js
@@ -21,6 +21,7 @@ import { useTranslation } from "react-i18next";
 import { copyText } from "../../../apiManager/services/formatterService";
 import _camelCase from "lodash/camelCase";
 import _cloneDeep from "lodash/cloneDeep";
+import { validateFormName, validatePathName } from "../../../apiManager/services/FormServices";
 
 //CONST VARIABLES
 const DESIGN = "DESIGN";
@@ -55,7 +56,10 @@ const FormSettings = forwardRef((props, ref) => {
     display: display,
   });
   const [isAnonymous, setIsAnonymous] = useState(processListData.anonymous);
-
+  const [errors, setErrors] = useState({
+    name: "",
+    path: "",
+  });
   const [formAccessCopy, setFormAccessCopy] = useState(_cloneDeep(formAccess));
   const [submissionAccessCopy, setSubmissionAccessCopy] = useState(
     _cloneDeep(submissionAccess)
@@ -81,21 +85,48 @@ const FormSettings = forwardRef((props, ref) => {
     },
   });
 
+    /* ------------------------- validating form name and path ------------------------ */
+
+  const validateField = async (field, value) => {
+    let errorMessage = "";
+    if (!value.trim()) {
+      errorMessage = `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
+    } else {
+      try {
+        const response = field === 'name' ? await validateFormName(value) : await validatePathName(value);
+        const data = response?.data;
+        if (data && data.code === "FORM_EXISTS") {
+          errorMessage = data.message;
+        }
+      } catch (error) {
+        errorMessage = error.response?.data?.message || 
+        `An error occurred while validating the ${field}.`;
+        console.error(`Error validating ${field}:`, errorMessage);
+      }
+    }
+    setErrors((prev) => ({ ...prev, [field]: errorMessage }));
+  };
+
+
+
   /* ---------------------- handling form details change ---------------------- */
+
   const handleFormDetailsChange = (e) => {
     const { name, value, type } = e.target;
     // if form name or path changed need to call validation api based on that
     let updatedValue =
       name === "path" ? _camelCase(value).toLowerCase() : value;
+
     if (type === "checkbox") {
-      updatedValue = e.target.checked ? "wizard" : "form";
+      setFormDetails((prev) => ({ ...prev, [name]: e.target.checked ? "wizard" : "form" }));
+    } else {
+      setFormDetails((prev) => ({ ...prev, [name]: updatedValue }));
+      if (name === "title" || name === "path") {
+        validateField(name === "title" ? 'name' : 'path', updatedValue);
+      }
     }
-    setFormDetails((prev) => ({ ...prev, [name]: updatedValue }));
-
-    // if(name == "path" || name =="title"){
-    //   validationapi call
-    // }
   };
+
 
   /* ---------------------------- Fetch user roles ---------------------------- */
   useEffect(() => {
@@ -178,7 +209,10 @@ const FormSettings = forwardRef((props, ref) => {
           dataTestid="form-name"
           name="title"
           ariaLabel={t("Form Name")}
-        />
+          isInvalid = {!!errors.name}
+          feedback = {errors.name}
+          onBlur={() => validateField('name', formDetails.title)}
+          />
         <FormTextArea
           label={t("Description")}
           name="description"
@@ -390,11 +424,13 @@ const FormSettings = forwardRef((props, ref) => {
               className="url-edit"
               name="path"
               onChange={handleFormDetailsChange}
-            />
+              onBlur={() => validateField('path', formDetails.path)}            />
             <InputGroup.Text className="url-copy" onClick={copyPublicUrl}>
               {copied ? <i className="fa fa-check" /> : <CopyIcon />}
             </InputGroup.Text>
           </InputGroup>
+          {errors.path && <div className="validation-text mt-2">{errors.path}</div>}
+
         </Form.Group>
       </div>
     </>