diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js
index 83a37eed7..226640d44 100644
--- a/apps/OpenSign/src/components/fields/FileUpload.js
+++ b/apps/OpenSign/src/components/fields/FileUpload.js
@@ -82,7 +82,7 @@ const FileUpload = (props) => {
progress: (progressValue, loaded, total, { type }) => {
if (type === "upload" && progressValue !== null) {
const percentCompleted = Math.round((loaded * 100) / total);
- console.log("percentCompleted ", percentCompleted);
+ // console.log("percentCompleted ", percentCompleted);
setpercentage(percentCompleted);
}
}
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 22cea983d..0bf111c1a 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1,9 +1,37 @@
-import React from "react";
+import React, { useState, useEffect, useMemo } from "react";
import pad from "../assets/images/pad.svg";
import { useNavigate } from "react-router-dom";
-const ReportTable = ({ ReportName, List, actions }) => {
+const ReportTable = ({
+ ReportName,
+ List,
+ actions,
+ setIsNextRecord,
+ isMoreDocs
+}) => {
const navigate = useNavigate();
+ const [currentPage, setCurrentPage] = useState(1);
+ const docPerPage = 10;
+ // const pageNumbers = [];
+
+ // For loop is used to calculate page numbers visible below table
+ // Initialize pageNumbers using useMemo to avoid unnecessary re-creation
+ const pageNumbers = useMemo(() => {
+ const calculatedPageNumbers = [];
+ for (let i = 1; i <= Math.ceil(List.length / docPerPage); i++) {
+ calculatedPageNumbers.push(i);
+ }
+ return calculatedPageNumbers;
+ }, [List]);
+ // below useEffect reset currenpage to 1 if user change route
+ useEffect(() => {
+ return () => setCurrentPage(1);
+ }, []);
+
+ // `formatRow` is used to show data in poper manner like
+ // if data is of array type then it will join array items with ","
+ // if data is of object type then it Name values will be show in row
+ // if no data available it will show hyphen "-"
const formatRow = (row) => {
if (Array.isArray(row)) {
let updateArr = row.map((x) => x.Name);
@@ -14,24 +42,17 @@ const ReportTable = ({ ReportName, List, actions }) => {
return "-";
}
};
+ // below useEffect is used to render next record if IsMoreDoc is true
+ // second last value of pageNumber array is same as currentPage
+ useEffect(() => {
+ if (isMoreDocs && pageNumbers[pageNumbers.length - 1] === currentPage) {
+ setIsNextRecord(true);
+ }
+ }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
+
+ // `handlemicroapp` is used to open microapp
const handlemicroapp = (item, url) => {
localStorage.removeItem("rowlevel");
- // const params = new URLSearchParams(url);
- // let arr = [];
- // for (let [key, value] of params.entries()) {
- // if (key === "remoteUrl") {
- // arr.push(
- // `${key}=${window.btoa(
- // window.location.origin + "/mfbuild/remoteEntry.js"
- // )}`
- // );
- // } else {
- // arr.push(`${key}=${value}`);
- // }
- // }
- // const remoteUrl = arr.join("&");
- // console.log("arr", remoteUrl);
-
navigate("/rpmf/" + url);
localStorage.setItem("rowlevel", JSON.stringify(item));
// localStorage.setItem("rowlevelMicro");
@@ -39,6 +60,17 @@ const ReportTable = ({ ReportName, List, actions }) => {
const handlebtn = () => {
console.log("clicked");
};
+
+ // Get current list
+ const indexOfLastDoc = currentPage * docPerPage;
+ const indexOfFirstDoc = indexOfLastDoc - docPerPage;
+ // `currentLists` is total record render on current page
+ const currentLists = List.slice(indexOfFirstDoc, indexOfLastDoc);
+
+ // Change page
+ const paginateFront = () => setCurrentPage(currentPage + 1);
+ const paginateBack = () => setCurrentPage(currentPage - 1);
+
return (
{ReportName}
@@ -60,7 +92,7 @@ const ReportTable = ({ ReportName, List, actions }) => {
{List?.length > 0 ? (
<>
- {List.map((item, index) => (
+ {currentLists.map((item, index) => (
| {index + 1} |
{item?.Name} |
@@ -121,8 +153,46 @@ const ReportTable = ({ ReportName, List, actions }) => {
)}
+
+ {List.length > 10 && (
+ <>
+ {currentPage > 1 && (
+
+ )}
+ >
+ )}
+ {pageNumbers.map((x) => (
+
+ ))}
+ {isMoreDocs && (
+
+ )}
+ {List.length > 10 && (
+ <>
+ {pageNumbers.includes(currentPage + 1) && (
+
+ )}
+ >
+ )}
+
{List?.length <= 0 && (
-
+
diff --git a/apps/OpenSign/src/routes/Report.js b/apps/OpenSign/src/routes/Report.js
index d82dc3630..efec224ac 100644
--- a/apps/OpenSign/src/routes/Report.js
+++ b/apps/OpenSign/src/routes/Report.js
@@ -12,14 +12,37 @@ const Report = () => {
const [isLoader, setIsLoader] = useState(true);
const [reportName, setReportName] = useState("");
const [actions, setActions] = useState([]);
+ const [isNextRecord, setIsNextRecord] = useState(false);
+ const [isMoreDocs, setIsMoreDocs] = useState(true);
+ const abortController = new AbortController();
+
+ // below useEffect is call when id param change
useEffect(() => {
setReportName("");
+ setList([]);
getReportData();
+
+ // Function returned from useEffect is called on unmount
+ return () => {
+ setIsLoader(true);
+ setList([]);
+ setIsNextRecord(false);
+ // Here it'll abort the fetch
+ abortController.abort();
+ };
// eslint-disable-next-line
}, [id]);
- const getReportData = async () => {
- setIsLoader(true);
+ // below useEffect call when isNextRecord state is true and fetch next record
+ useEffect(() => {
+ if (isNextRecord) {
+ getReportData(List.length, 200);
+ }
+ // eslint-disable-next-line
+ }, [isNextRecord]);
+
+ const getReportData = async (skipUserRecord = 0, limit = 200) => {
+ // setIsLoader(true);
const json = reportJson(id);
if (json) {
setActions(json.actions);
@@ -39,8 +62,11 @@ const Report = () => {
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
};
try {
- const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&include=AuditTrail.UserPtr`;
- const res = await axios.get(url, { headers: headers });
+ const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skipUserRecord}&limit=${limit}&include=AuditTrail.UserPtr`;
+ const res = await axios.get(url, {
+ headers: headers,
+ signal: abortController.signal // is used to cancel fetch query
+ });
if (id === "4Hhwbp482K") {
const listData = res.data?.results.filter(
(x) => x.Signers.length > 0
@@ -66,14 +92,35 @@ const Report = () => {
}
}
}
- setList(arr);
+ if (arr.length === 10) {
+ setIsMoreDocs(true);
+ } else {
+ setIsMoreDocs(false);
+ }
+ setList((prevRecord) =>
+ prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
+ );
} else {
- setList(res.data?.results);
+ if (res.data.results.length === 10) {
+ setIsMoreDocs(true);
+ console.log("here");
+ } else {
+ setIsMoreDocs(false);
+ }
+ setIsNextRecord(false);
+ setList((prevRecord) =>
+ prevRecord.length > 0
+ ? [...prevRecord, ...res.data.results]
+ : res.data.results
+ );
}
setIsLoader(false);
} catch (err) {
- console.log("err ", err);
- setIsLoader(false);
+ const isCancel = axios.isCancel(err);
+ if (!isCancel) {
+ console.log("err ", err);
+ setIsLoader(false);
+ }
}
} else {
setIsLoader(false);
@@ -106,6 +153,8 @@ const Report = () => {
ReportName={reportName}
List={List}
actions={actions}
+ setIsNextRecord={setIsNextRecord}
+ isMoreDocs={isMoreDocs}
/>
) : (
diff --git a/apps/OpenSign/src/routes/Signup.js b/apps/OpenSign/src/routes/Signup.js
index ea3481cb7..6378e6785 100644
--- a/apps/OpenSign/src/routes/Signup.js
+++ b/apps/OpenSign/src/routes/Signup.js
@@ -251,7 +251,7 @@ const Signup = (props) => {
element.pageType
);
setState({ loading: false });
- navigate("/login");
+ navigate("/");
} else {
extendedInfo.forEach((x) => {
if (x.TenantId) {