From e330285e240a3a25b032a28db156b1274d31669d Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Mon, 6 Nov 2023 13:17:01 +0530 Subject: [PATCH] add pagination in reports, fix navigation in signup --- .../src/components/fields/FileUpload.js | 2 +- .../src/primitives/GetReportDisplay.js | 110 ++++++++++++++---- apps/OpenSign/src/routes/Report.js | 65 +++++++++-- apps/OpenSign/src/routes/Signup.js | 2 +- 4 files changed, 149 insertions(+), 30 deletions(-) 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 && ( -
+
img
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) {