Merge pull request #486 from OpenSignLabs/fix_formreset

fix: reset button not working in forms

Author: prafull-opensignlabs

apps/OpenSign/src/components/shared/fields/SelectFolder.js

@@ -4,7 +4,7 @@ import CreateFolder from "./CreateFolder";
 import ModalUi from "../../../primitives/ModalUi";
 import Tooltip from "../../../primitives/Tooltip";
 
-const SelectFolder = ({ required, onSuccess, folderCls }) => {
+const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
   const [isOpen, SetIsOpen] = useState(false);
   const [clickFolder, setClickFolder] = useState("");
   const [selectFolder, setSelectedFolder] = useState({});
@@ -23,6 +23,21 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     // eslint-disable-next-line
   }, [isOpen]);
+  // below useEffect is used to reset folder selection if user pass isReset = true from parent component
+  useEffect(() => {
+    if (isReset == true) {
+      handleReset();
+    }
+  }, [isReset]);
+  const handleReset = () => {
+    setFolderPath({});
+    setSelectedFolder("");
+    setClickFolder("");
+    setIsAdd(false);
+    setFolderList([]);
+    setTabList([]);
+  };
+  // `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
   const fetchFolder = async (folderPtr) => {
     setIsLoader(true);
     try {
@@ -48,6 +63,8 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       setIsLoader(false);
     }
   };
+
+  // `handleSelect` is used to save pointer of folder selected by user and it's path in state
   const handleSelect = (item) => {
     setFolderList([]);
     setClickFolder({ ObjectId: item.objectId, Name: item.Name });
@@ -74,6 +91,7 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
   };
 
+  // `handleSubmit` is used to pass folderPtr to parent component
   const handleSubmit = () => {
     let url = "Root";
     tabList.forEach((t) => {
@@ -86,13 +104,16 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
     }
     SetIsOpen(false);
   };
+
+  // `handleCancel` is used to clear list of folder, close popup and folderUrl
   const handleCancel = () => {
     SetIsOpen(false);
     setClickFolder({});
     setFolderList([]);
     setTabList([]);
   };
 
+  // `handleCancel` is call when user click on folder name from path/tab in popup
   const removeTabListItem = async (e, i) => {
     e.preventDefault();
     // setEditable(false);
@@ -122,9 +143,11 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
       fetchFolder(folderPtr);
     }
   };
+  // `handleCreate` is used to open folder creation form in popup
   const handleCreate = () => {
     setIsAdd(!isAdd);
   };
+  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
   const handleAddFolder = () => {
     setFolderList([]);
     if (clickFolder && clickFolder.ObjectId) {

apps/OpenSign/src/components/shared/fields/SignersInput.js

@@ -19,7 +19,7 @@ const SignersInput = (props) => {
   Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
-  const [selected, setSelected] = React.useState([]);
+  const [selected, setSelected] = useState([]);
   const [isModal, setIsModel] = useState(false);
   const onChange = (selectedOptions) => setSelected(selectedOptions);
   const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -63,6 +63,11 @@ const SignersInput = (props) => {
   useEffect(() => {
     GetSelectListData();
   }, []);
+  useEffect(() => {
+    if (props.isReset && props.isReset === true) {
+      setSelected([]);
+    }
+  }, [props.isReset]);
 
   useEffect(() => {
     if (selected && selected.length) {

apps/OpenSign/src/pages/Form.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { formJson } from "../json/FormJson";
 import AddUser from "../components/AddUser";
@@ -11,6 +11,7 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 
+// `Form` render all type of Form on this basis of their provided in path
 function Form() {
   const { id } = useParams();
 
@@ -40,13 +41,16 @@ const Forms = (props) => {
   const [fileupload, setFileUpload] = useState([]);
   const [fileload, setfileload] = useState(false);
   const [percentage, setpercentage] = useState(0);
+  const [isReset, setIsReset] = useState(false);
   const [isAlert, setIsAlert] = useState(false);
   const [isSubmit, setIsSubmit] = useState(false);
   const [isErr, setIsErr] = useState("");
   const handleStrInput = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
-
+  useEffect(() => {
+    handleReset();
+  }, [props.title]);
   const handleFileInput = (e) => {
     setpercentage(0);
     try {
@@ -222,15 +226,19 @@ const Forms = (props) => {
   };
 
   const handleReset = () => {
+    setIsReset(true);
     setSigners([]);
     setFolder({ ObjectId: "", Name: "" });
     setFormData({
       Name: "",
       Description: "",
-      Note: ""
+      Note: "Please review and sign this document",
+      TimeToCompleteDays: 15,
+      SendinOrder: "false"
     });
     setFileUpload([]);
     setpercentage(0);
+    setTimeout(() => setIsReset(false), 50);
   };
   return (
     <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
@@ -334,7 +342,9 @@ const Forms = (props) => {
               onChange={(e) => handleStrInput(e)}
             />
           </div>
-          {props.signers && <SignersInput onChange={handleSigners} required />}
+          {props.signers && (
+            <SignersInput onChange={handleSigners} isReset={isReset} required />
+          )}
           <div className="text-xs mt-2">
             <label className="block">
               Note<span className="text-red-500 text-[13px]">*</span>
@@ -347,7 +357,11 @@ const Forms = (props) => {
               required
             />
           </div>
-          <SelectFolder onSuccess={handleFolder} folderCls={props.Cls} />
+          <SelectFolder
+            onSuccess={handleFolder}
+            folderCls={props.Cls}
+            isReset={isReset}
+          />
 
           {props.title === "Request Signatures" && (
             <div className="text-xs mt-2">
@@ -402,7 +416,7 @@ const Forms = (props) => {
               Submit
             </button>
             <div
-              className="bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+              className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
               onClick={() => handleReset()}
             >
               Reset