vertically center button in reports, add title for template route and placeholder route

2026-08-17 21:25:54 +02:00 · 2023-12-30 19:52:36 +05:30
parent 4648ace84e
commit c185c42b80
3 changed files with 85 additions and 51 deletions
@@ -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>
  );
 };
@@ -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!");
@@ -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} />