From c185c42b80d1d756d9600b8b31d11f459afa7b99 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Sat, 30 Dec 2023 19:52:36 +0530
Subject: [PATCH] vertically center button in reports, add title for template
 route and placeholder route

---
 .../src/primitives/GetReportDisplay.js        | 128 +++++++++++-------
 .../src/Component/TemplatePlaceholder.js      |   3 +-
 .../src/Component/placeHolderSign.js          |   5 +-
 3 files changed, 85 insertions(+), 51 deletions(-)

diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 8471d98de..fc8fa414d 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -21,8 +21,11 @@ const ReportTable = ({
   const [actLoader, setActLoader] = useState({});
   const [isAlert, setIsAlert] = useState(false);
   const [isErr, setIsErr] = useState(false);
+  const [isDocErr, setIsDocErr] = useState(false);
   const [isContactform, setIsContactform] = useState(false);
   const [isDeleteModal, setIsDeleteModal] = useState({});
+  const startIndex = (currentPage - 1) * docPerPage;
+
   // For loop is used to calculate page numbers visible below table
   // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
   const pageNumbers = useMemo(() => {
@@ -65,7 +68,7 @@ const ReportTable = ({
       if (btnLabel === "Edit") {
         navigate(`/asmf/${url}/${item.objectId}`);
       } else {
-        setActLoader({ [item.objectId]: true });
+        setActLoader({ [`${item.objectId}_${btnLabel}`]: true });
         try {
           const params = {
             templateId: item.objectId
@@ -104,46 +107,59 @@ const ReportTable = ({
                   signers.push(obj);
                 }
               });
-            }
-            const data = {
-              Name: Doc.Name,
-              URL: Doc.URL,
-              SignedUrl: Doc.SignedUrl,
-              Description: Doc.Description,
-              Note: Doc.Note,
-              Placeholders: placeholdersArr,
-              ExtUserPtr: {
-                __type: "Pointer",
-                className: "contracts_Users",
-                objectId: Doc.ExtUserPtr.objectId
-              },
-              CreatedBy: {
-                __type: "Pointer",
-                className: "_User",
-                objectId: Doc.CreatedBy.objectId
-              },
-              Signers: signers
-            };
+              const data = {
+                Name: Doc.Name,
+                URL: Doc.URL,
+                SignedUrl: Doc.SignedUrl,
+                Description: Doc.Description,
+                Note: Doc.Note,
+                Placeholders: placeholdersArr,
+                ExtUserPtr: {
+                  __type: "Pointer",
+                  className: "contracts_Users",
+                  objectId: Doc.ExtUserPtr.objectId
+                },
+                CreatedBy: {
+                  __type: "Pointer",
+                  className: "_User",
+                  objectId: Doc.CreatedBy.objectId
+                },
+                Signers: signers
+              };
+              try {
+                const res = await axios.post(
+                  `${localStorage.getItem(
+                    "baseUrl"
+                  )}classes/${localStorage.getItem("_appName")}_Document`,
+                  data,
+                  {
+                    headers: {
+                      "Content-Type": "application/json",
+                      "X-Parse-Application-Id":
+                        localStorage.getItem("parseAppId"),
+                      "X-Parse-Session-Token":
+                        localStorage.getItem("accesstoken")
+                    }
+                  }
+                );
 
-            const res = await axios.post(
-              `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-                "_appName"
-              )}_Document`,
-              data,
-              {
-                headers: {
-                  "Content-Type": "application/json",
-                  "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                  "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+                // console.log("Res ", res.data);
+                if (res.data && res.data.objectId) {
+                  setActLoader({});
+                  setIsAlert(true);
+                  navigate(`/asmf/${url}/${res.data.objectId}`, {
+                    state: { title: "Use Template" }
+                  });
                 }
+              } catch (err) {
+                console.log("Err", err);
+                setIsAlert(true);
+                setIsErr(true);
+                setActLoader({});
               }
-            );
-
-            // console.log("Res ", res.data);
-            if (res.data && res.data.objectId) {
+            } else {
+              setIsDocErr(true);
               setActLoader({});
-              setIsAlert(true);
-              navigate(`/asmf/${url}/${res.data.objectId}`);
             }
           } else {
             setIsAlert(true);
@@ -190,7 +206,7 @@ const ReportTable = ({
   };
 
   const handleDelete = async (item) => {
-    setIsDeleteModal({})
+    setIsDeleteModal({});
     setActLoader({ [item.objectId]: true });
     try {
       const url =
@@ -264,12 +280,12 @@ const ReportTable = ({
                 ReportName === "Contactbook" ? (
                   <tr className="border-y-[1px]" key={index}>
                     {heading.includes("Sr.No") && (
-                      <td className="px-4 py-2">{index + 1}</td>
+                      <td className="px-4 py-2">{startIndex + index + 1}</td>
                     )}
                     <td className="px-4 py-2 font-semibold">{item?.Name} </td>
                     <td className="px-4 py-2">{item?.Email || "-"}</td>
                     <td className="px-4 py-2">{item?.Phone || "-"}</td>
-                    <td className="px-4 py-2 flex flex-col justify-center items-center gap-2 text-white">
+                    <td className="px-3 py-2 text-white">
                       {actions?.length > 0 &&
                         actions.map((act, index) => (
                           <button
@@ -279,7 +295,7 @@ const ReportTable = ({
                                 ? handlemicroapp(item, act.redirectUrl)
                                 : handlebtn(item)
                             }
-                            className={`flex justify-center items-center gap-1 px-2 py-1 rounded shadow`}
+                            className={`mb-1 flex justify-center items-center gap-1 px-2 py-1 rounded shadow`}
                             style={{
                               backgroundColor: act.btnColor
                                 ? act.btnColor
@@ -306,7 +322,11 @@ const ReportTable = ({
                           </button>
                         ))}
                       {isDeleteModal[item.objectId] && (
-                        <ModalUi isOpen title={"Delete Contact"} handleClose={handleCloseDeleteModal}>
+                        <ModalUi
+                          isOpen
+                          title={"Delete Contact"}
+                          handleClose={handleCloseDeleteModal}
+                        >
                           <div className="m-[20px]">
                             <div className="text-lg font-normal text-black">
                               Are you sure you want to delete this contact?
@@ -334,9 +354,11 @@ const ReportTable = ({
                 ) : (
                   <tr className="border-y-[1px]" key={index}>
                     {heading.includes("Sr.No") && (
-                      <td className="px-4 py-2">{index + 1}</td>
+                      <td className="px-4 py-2">{startIndex + index + 1}</td>
                     )}
-                    <td className="px-4 py-2 font-semibold">{item?.Name} </td>
+                    <td className="px-4 py-2 font-semibold w-56">
+                      {item?.Name}{" "}
+                    </td>
                     {heading.includes("Note") && (
                       <td className="px-4 py-2">{item?.Note || "-"}</td>
                     )}
@@ -362,7 +384,7 @@ const ReportTable = ({
                     <td className="px-4 py-2">
                       {item?.Signers ? formatRow(item?.Signers) : "-"}
                     </td>
-                    <td className="px-4 py-2 flex flex-col justify-center items-center gap-2 text-white">
+                    <td className="px-3 py-2 text-white">
                       {actions?.length > 0 &&
                         actions.map((act, index) => (
                           <button
@@ -376,7 +398,7 @@ const ReportTable = ({
                                   )
                                 : handlebtn(item)
                             }
-                            className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`}
+                            className={`mb-1 flex justify-center items-center gap-1 px-2 py-1 rounded shadow`}
                             style={{
                               backgroundColor: act.btnColor
                                 ? act.btnColor
@@ -388,7 +410,9 @@ const ReportTable = ({
                               {act?.btnIcon && (
                                 <i
                                   className={
-                                    actLoader[item.objectId]
+                                    actLoader[
+                                      `${item.objectId}_${act.btnLabel}`
+                                    ]
                                       ? "fa-solid fa-spinner fa-spin-pulse"
                                       : act.btnIcon
                                   }
@@ -466,6 +490,16 @@ const ReportTable = ({
           closePopup={handleContactFormModal}
         />
       </ModalUi>
+      <ModalUi
+        headColor={"#dc3545"}
+        isOpen={isDocErr}
+        title={"Receipent required"}
+        handleClose={() => setIsDocErr(false)}
+      >
+        <div style={{ height: "100%", padding: 20 }}>
+          <p>Please add receipent in template!</p>
+        </div>
+      </ModalUi>
     </div>
   );
 };
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
index 04c1b6210..3136e89ee 100644
--- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
@@ -197,7 +197,6 @@ const TemplatePlaceholder = () => {
           }
         }
       );
-      // console.log("templateDeatils.data ", templateDeatils.data);
       const documentData =
         templateDeatils.data && templateDeatils.data.result
           ? [templateDeatils.data.result]
@@ -780,7 +779,7 @@ const TemplatePlaceholder = () => {
     // handle create document
     const res = await createDocument(pdfDetails, signerPos, signersdata);
     if (res.status === "success") {
-      navigate(`${hostUrl}placeHolderSign/${res.id}`);
+      navigate(`${hostUrl}placeHolderSign/${res.id}`,{state: {title:"Use Template"}});
       setIsCreateDoc(false);
     } else {
       setHandleError("Error: Something went wrong!");
diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
index 00c03f030..3af21f33f 100644
--- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js
+++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js
@@ -11,7 +11,7 @@ import { useDrag, useDrop } from "react-dnd";
 import RenderAllPdfPage from "./component/renderAllPdfPage";
 import FieldsComponent from "./component/fieldsComponent";
 import Tour from "reactour";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import Loader from "./component/loader";
 import HandleError from "./component/HandleError";
 import Nodata from "./component/Nodata";
@@ -34,6 +34,7 @@ import Title from "./component/Title";
 
 function PlaceHolderSign() {
   const navigate = useNavigate();
+  const {state}= useLocation()
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isMailSend, setIsMailSend] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -876,7 +877,7 @@ function PlaceHolderSign() {
   };
   return (
     <>
-      <Title title={"placeholder"} />
+      <Title title={state?.title ? state.title: "New Document"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
           <Loader isLoading={isLoading} />