add contactbook form in contactbook report

Author: prafull-opensignlabs

apps/OpenSign/src/components/AppendFormInForm.js

@@ -106,13 +106,18 @@ const AppendFormInForm = (props) => {
           const res = await contactQuery.save();
 
           const parseData = JSON.parse(JSON.stringify(res));
-          props.details({
-            value: parseData[props.valueKey],
-            label: parseData[props.displayKey]
-          });
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
+          }
           if (props.closePopup) {
             props.closePopup();
           }
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
 
           setIsLoader(false);
           // Reset the form fields
@@ -159,13 +164,18 @@ const AppendFormInForm = (props) => {
           const res = await contactQuery.save();
 
           const parseData = JSON.parse(JSON.stringify(res));
-          props.details({
-            value: parseData[props.valueKey],
-            label: parseData[props.displayKey]
-          });
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
+          }
           if (props.closePopup) {
             props.closePopup();
           }
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
           setIsLoader(false);
           // Reset the form fields
           setAddYourself(false);

apps/OpenSign/src/components/fields/CreateFolder.js

@@ -133,7 +133,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
         <div>
           <button
             onClick={handleCreateFolder}
-            className="flex items-center rounded p-2 bg-[#33bbff] text-white mt-3"
+            className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
           >
             <i className="fa-solid fa-plus mr-1"></i>
             <span>Create</span>

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

@@ -170,84 +170,88 @@ const SelectFolder = ({ required, onSuccess, folderCls }) => {
           </p>
         </div>
       </div>
-      <ModalUi title={"Select Folder"} isOpen={isOpen} handleClose={handleCancel}>
-      <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
-            <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
-              <span
-                className="cursor-pointer"
-                title="Root"
-                onClick={(e) => removeTabListItem(e)}
-              >
-                Root /{" "}
-              </span>
-              {tabList &&
-                tabList.map((tab, i) => (
-                  <React.Fragment key={`${tab.objectId}-${i}`}>
-                    <span
-                      className="cursor-pointer"
-                      title={tab.Name}
-                      onClick={(e) => removeTabListItem(e, i)}
-                    >
-                      {tab.Name}
-                    </span>
-                    {" / "}
-                  </React.Fragment>
-                ))}
-              <hr />
-            </div>
-            <div className="mt-2 mb-3">
-              {!isAdd &&
-                folderList.length > 0 &&
-                folderList.map((folder) => (
-                  <div
-                    key={folder.Name}
-                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
-                    onClick={() => handleSelect(folder)}
+      <ModalUi
+        title={"Select Folder"}
+        isOpen={isOpen}
+        handleClose={handleCancel}
+      >
+        <div className="w-full min-w-[300px] md:min-w-[500px] px-3">
+          <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+            <span
+              className="cursor-pointer"
+              title="Root"
+              onClick={(e) => removeTabListItem(e)}
+            >
+              Root /{" "}
+            </span>
+            {tabList &&
+              tabList.map((tab, i) => (
+                <React.Fragment key={`${tab.objectId}-${i}`}>
+                  <span
+                    className="cursor-pointer"
+                    title={tab.Name}
+                    onClick={(e) => removeTabListItem(e, i)}
                   >
-                    <div className="flex items-center gap-2">
-                      <i
-                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
-                        aria-hidden="true"
-                      ></i>
-                      <span className="font-semibold">{folder.Name}</span>
-                    </div>
+                    {tab.Name}
+                  </span>
+                  {" / "}
+                </React.Fragment>
+              ))}
+            <hr />
+          </div>
+          <div className="mt-2 mb-3">
+            {!isAdd &&
+              folderList.length > 0 &&
+              folderList.map((folder) => (
+                <div
+                  key={folder.Name}
+                  className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
+                  onClick={() => handleSelect(folder)}
+                >
+                  <div className="flex items-center gap-2">
+                    <i
+                      className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                      aria-hidden="true"
+                    ></i>
+                    <span className="font-semibold">{folder.Name}</span>
                   </div>
-                ))}
-              {isAdd && (
-                <CreateFolder
-                  parentFolderId={clickFolder && clickFolder.ObjectId}
-                  folderCls={folderCls}
-                  onSuccess={handleAddFolder}
-                />
-              )}
-              {isLoader && (
-                <div className="flex justify-center">
-                  <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
                 </div>
-              )}
-            </div>
+              ))}
+            {isAdd && (
+              <CreateFolder
+                parentFolderId={clickFolder && clickFolder.ObjectId}
+                folderCls={folderCls}
+                onSuccess={handleAddFolder}
+              />
+            )}
+            {isLoader && (
+              <div className="flex justify-center">
+                <i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
+              </div>
+            )}
           </div>
-          <hr />
-          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
-            <div
-              className="text-[30px] cursor-pointer text-[#33bbff]"
-              title="Save Here"
-              onClick={handleCreate}
-            >
-              {isAdd ? (
-                <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
-              ) : (
-                <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
-              )}
-            </div>
-            <div
-              className="text-[30px] cursor-pointer"
-              title="Save Here"
-              onClick={handleSubmit}
-            >
-              <i className="fas fa-save" aria-hidden="true"></i>
-            </div>
+        </div>
+        <hr />
+        <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+          <div
+            className="text-[30px] cursor-pointer text-[#32a3ac]"
+            title="Save Here"
+            onClick={handleCreate}
+          >
+            {isAdd ? (
+              <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+            ) : (
+              <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+            )}
           </div>
+          <div
+            className="text-[30px] cursor-pointer"
+            title="Save Here"
+            onClick={handleSubmit}
+          >
+            <i className="fas fa-save" aria-hidden="true"></i>
+          </div>
+        </div>
       </ModalUi>
       {/* {isOpen && (
         <div

apps/OpenSign/src/json/FormJson.js

@@ -113,7 +113,7 @@ export const formJson = (id) => {
     });
     formData = {
       jsonSchema: {
-        title: "New Document",
+        title: "Request signatures",
         description: "",
         type: "object",
         required: ["URL", "Name", "Note", "TimeToCompleteDays", "Signers"],

apps/OpenSign/src/json/ReportJson.js

@@ -161,7 +161,8 @@ export default function reportJson(id) {
             textColor: "white",
             btnIcon: "fa-solid fa-trash"
           }
-        ]
+        ],
+        form:"ContactBook"
       };
     // template report
     case "6TeaPr321t":

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -3,6 +3,8 @@ import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../styles/report.css";
+import ModalUi from "./ModalUi";
+import AppendFormInForm from "../components/AppendFormInForm";
 const ReportTable = ({
   ReportName,
   List,
@@ -11,13 +13,15 @@ const ReportTable = ({
   heading,
   setIsNextRecord,
   isMoreDocs,
-  docPerPage
+  docPerPage,
+  form
 }) => {
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
   const [actLoader, setActLoader] = useState({});
   const [isAlert, setIsAlert] = useState(false);
   const [isErr, setIsErr] = useState(false);
+  const [isPopup, setIsPopup] = useState(false);
   // For loop is used to calculate page numbers visible below table
   // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
   const pageNumbers = useMemo(() => {
@@ -57,9 +61,9 @@ const ReportTable = ({
   // `handlemicroapp` is used to open microapp
   const handlemicroapp = async (item, url, btnLabel) => {
     if (ReportName === "Templates") {
-      if(btnLabel === "Edit"){
+      if (btnLabel === "Edit") {
         navigate(`/asmf/${url}/${item.objectId}`);
-      }else{
+      } else {
         setActLoader({ [item.objectId]: true });
         try {
           const params = {
@@ -76,13 +80,13 @@ const ReportTable = ({
               }
             }
           );
-  
+
           // console.log("templateDeatils.data ", templateDeatils.data);
           const templateData =
             templateDeatils.data && templateDeatils.data.result;
           if (!templateData.error) {
             const Doc = templateData;
-  
+
             let placeholdersArr = [];
             if (Doc.Placeholders?.length > 0) {
               placeholdersArr = Doc.Placeholders;
@@ -119,7 +123,7 @@ const ReportTable = ({
               },
               Signers: signers
             };
-  
+
             const res = await axios.post(
               `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
                 "_appName"
@@ -133,7 +137,7 @@ const ReportTable = ({
                 }
               }
             );
-  
+
             // console.log("Res ", res.data);
             if (res.data && res.data.objectId) {
               setActLoader({});
@@ -200,6 +204,13 @@ const ReportTable = ({
   const paginateFront = () => setCurrentPage(currentPage + 1);
   const paginateBack = () => setCurrentPage(currentPage - 1);
 
+  const handlePopup = () => {
+    setIsPopup(!isPopup);
+  };
+
+  const handleUserData = (data) => {
+    setList((prevData) => [data, ...prevData]);
+  };
   return (
     <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
       {isAlert && (
@@ -214,7 +225,14 @@ const ReportTable = ({
         </div>
       )}
 
-      <h2 className="text-[23px] font-light my-2">{ReportName}</h2>
+      <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
+        <div className="font-light">{ReportName}</div>
+        {form && (
+          <div className="cursor-pointer" onClick={() => handlePopup()}>
+            <i className="fa-solid fa-square-plus text-sky-400 text-[25px]"></i>
+          </div>
+        )}
+      </div>
       <table className="table-auto w-full border-collapse">
         <thead className="text-[14px]">
           <tr className="border-y-[1px]">
@@ -316,7 +334,11 @@ const ReportTable = ({
                             key={index}
                             onClick={() =>
                               act?.redirectUrl
-                                ? handlemicroapp(item, act.redirectUrl, act.btnLabel)
+                                ? handlemicroapp(
+                                    item,
+                                    act.redirectUrl,
+                                    act.btnLabel
+                                  )
                                 : handlebtn(item)
                             }
                             className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`}
@@ -399,6 +421,12 @@ const ReportTable = ({
           <div className="text-sm font-semibold">No Data Available</div>
         </div>
       )}
+      <ModalUi title={"Add Contact"} isOpen={isPopup} handleClose={handlePopup}>
+        <AppendFormInForm
+          handleUserData={handleUserData}
+          closePopup={handlePopup}
+        />
+      </ModalUi>
     </div>
   );
 };

apps/OpenSign/src/primitives/ModalUi.js

@@ -5,7 +5,7 @@ const ModalUi = ({ children, title, isOpen, handleClose }) => {
     <>
       {isOpen && (
         <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
-          <div className="fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 md:min-w-500px overflow-y-auto hide-scrollbar">
+          <div className="fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 md:min-w-[500px] overflow-y-auto hide-scrollbar">
             <div className="flex justify-between bg-[#32a3ac] rounded-t items-center py-[10px] px-[20px] text-white">
               <div className="text-[1.2rem] font-normal">{title}</div>
               <div

apps/OpenSign/src/routes/Report.js

@@ -15,6 +15,7 @@ const Report = () => {
   const [heading, setHeading] = useState([]);
   const [isNextRecord, setIsNextRecord] = useState(false);
   const [isMoreDocs, setIsMoreDocs] = useState(true);
+  const [form, setForm]= useState("")
   const abortController = new AbortController();
   const docPerPage = 10;
 
@@ -50,6 +51,7 @@ const Report = () => {
       setActions(json.actions);
       setHeading(json.heading);
       setReportName(json.reportName);
+      setForm(json.form)
       Parse.serverURL = localStorage.getItem("BaseUrl12");
       Parse.initialize(localStorage.getItem("AppID12"));
       const currentUser = Parse.User.current().id;
@@ -154,6 +156,7 @@ const Report = () => {
               setIsNextRecord={setIsNextRecord}
               isMoreDocs={isMoreDocs}
               docPerPage={docPerPage}
+              form={form}
             />
           ) : (
             <div className="flex items-center justify-center h-screen w-full bg-white rounded">