Skip to content

Commit 64638ac

Browse files
andrew-opensignlabsandrew-opensignlabs
authored
Merge pull request #141 from prafull-opensignlabs/staging
2 parents 344d945 + 133769d commit 64638ac

File tree

4 files changed

+149
-30
lines changed

4 files changed

+149
-30
lines changed

‎apps/OpenSign/src/components/fields/FileUpload.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const FileUpload = (props) => {
8282
progress: (progressValue, loaded, total, { type }) => {
8383
if (type === "upload" && progressValue !== null) {
8484
const percentCompleted = Math.round((loaded * 100) / total);
85-
console.log("percentCompleted ", percentCompleted);
85+
// console.log("percentCompleted ", percentCompleted);
8686
setpercentage(percentCompleted);
8787
}
8888
}

‎apps/OpenSign/src/primitives/GetReportDisplay.js‎

Lines changed: 90 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,37 @@
1-
import React from "react";
1+
import React, { useState, useEffect, useMemo } from "react";
22
import pad from "../assets/images/pad.svg";
33
import { useNavigate } from "react-router-dom";
44

5-
const ReportTable = ({ ReportName, List, actions }) => {
5+
const ReportTable = ({
6+
ReportName,
7+
List,
8+
actions,
9+
setIsNextRecord,
10+
isMoreDocs
11+
}) => {
612
const navigate = useNavigate();
13+
const [currentPage, setCurrentPage] = useState(1);
14+
const docPerPage = 10;
15+
// const pageNumbers = [];
16+
17+
// For loop is used to calculate page numbers visible below table
18+
// Initialize pageNumbers using useMemo to avoid unnecessary re-creation
19+
const pageNumbers = useMemo(() => {
20+
const calculatedPageNumbers = [];
21+
for (let i = 1; i <= Math.ceil(List.length / docPerPage); i++) {
22+
calculatedPageNumbers.push(i);
23+
}
24+
return calculatedPageNumbers;
25+
}, [List]);
26+
// below useEffect reset currenpage to 1 if user change route
27+
useEffect(() => {
28+
return () => setCurrentPage(1);
29+
}, []);
30+
31+
// `formatRow` is used to show data in poper manner like
32+
// if data is of array type then it will join array items with ","
33+
// if data is of object type then it Name values will be show in row
34+
// if no data available it will show hyphen "-"
735
const formatRow = (row) => {
836
if (Array.isArray(row)) {
937
let updateArr = row.map((x) => x.Name);
@@ -14,31 +42,35 @@ const ReportTable = ({ ReportName, List, actions }) => {
1442
return "-";
1543
}
1644
};
45+
// below useEffect is used to render next record if IsMoreDoc is true
46+
// second last value of pageNumber array is same as currentPage
47+
useEffect(() => {
48+
if (isMoreDocs && pageNumbers[pageNumbers.length - 1] === currentPage) {
49+
setIsNextRecord(true);
50+
}
51+
}, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
52+
53+
// `handlemicroapp` is used to open microapp
1754
const handlemicroapp = (item, url) => {
1855
localStorage.removeItem("rowlevel");
19-
// const params = new URLSearchParams(url);
20-
// let arr = [];
21-
// for (let [key, value] of params.entries()) {
22-
// if (key === "remoteUrl") {
23-
// arr.push(
24-
// `${key}=${window.btoa(
25-
// window.location.origin + "/mfbuild/remoteEntry.js"
26-
// )}`
27-
// );
28-
// } else {
29-
// arr.push(`${key}=${value}`);
30-
// }
31-
// }
32-
// const remoteUrl = arr.join("&");
33-
// console.log("arr", remoteUrl);
34-
3556
navigate("/rpmf/" + url);
3657
localStorage.setItem("rowlevel", JSON.stringify(item));
3758
// localStorage.setItem("rowlevelMicro");
3859
};
3960
const handlebtn = () => {
4061
console.log("clicked");
4162
};
63+
64+
// Get current list
65+
const indexOfLastDoc = currentPage * docPerPage;
66+
const indexOfFirstDoc = indexOfLastDoc - docPerPage;
67+
// `currentLists` is total record render on current page
68+
const currentLists = List.slice(indexOfFirstDoc, indexOfLastDoc);
69+
70+
// Change page
71+
const paginateFront = () => setCurrentPage(currentPage + 1);
72+
const paginateBack = () => setCurrentPage(currentPage - 1);
73+
4274
return (
4375
<div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
4476
<h2 className="text-[23px] font-light my-2">{ReportName}</h2>
@@ -60,7 +92,7 @@ const ReportTable = ({ ReportName, List, actions }) => {
6092
<tbody className="text-[12px]">
6193
{List?.length > 0 ? (
6294
<>
63-
{List.map((item, index) => (
95+
{currentLists.map((item, index) => (
6496
<tr className="border-t-[1px]" key={index}>
6597
<td className="px-4 py-2">{index + 1}</td>
6698
<td className="px-4 py-2 font-semibold">{item?.Name} </td>
@@ -121,8 +153,46 @@ const ReportTable = ({ ReportName, List, actions }) => {
121153
)}
122154
</tbody>
123155
</table>
156+
<div className="flex flex-wrap items-center gap-2 p-2 border-t-[1px]">
157+
{List.length > 10 && (
158+
<>
159+
{currentPage > 1 && (
160+
<button
161+
onClick={() => paginateBack()}
162+
className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
163+
>
164+
Prev
165+
</button>
166+
)}
167+
</>
168+
)}
169+
{pageNumbers.map((x) => (
170+
<button
171+
key={x}
172+
onClick={() => setCurrentPage(x)}
173+
className=" bg-sky-400 text-white rounded px-3 py-2 focus:outline-none"
174+
>
175+
{x}
176+
</button>
177+
))}
178+
{isMoreDocs && (
179+
<button className="text-black rounded px-1 py-2">...</button>
180+
)}
181+
{List.length > 10 && (
182+
<>
183+
{pageNumbers.includes(currentPage + 1) && (
184+
<button
185+
onClick={() => paginateFront()}
186+
className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none"
187+
>
188+
Next
189+
</button>
190+
)}
191+
</>
192+
)}
193+
</div>
124194
{List?.length <= 0 && (
125-
<div className="flex flex-col items-center justify-center w-full bg-white roundedm py-4">
195+
<div className="flex flex-col items-center justify-center w-full bg-white rounded py-4">
126196
<div className="w-[60px] h-[60px] overflow-hidden">
127197
<img className="w-full h-full object-contain" src={pad} alt="img" />
128198
</div>

‎apps/OpenSign/src/routes/Report.js‎

Lines changed: 57 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,37 @@ const Report = () => {
1212
const [isLoader, setIsLoader] = useState(true);
1313
const [reportName, setReportName] = useState("");
1414
const [actions, setActions] = useState([]);
15+
const [isNextRecord, setIsNextRecord] = useState(false);
16+
const [isMoreDocs, setIsMoreDocs] = useState(true);
17+
const abortController = new AbortController();
18+
19+
// below useEffect is call when id param change
1520
useEffect(() => {
1621
setReportName("");
22+
setList([]);
1723
getReportData();
24+
25+
// Function returned from useEffect is called on unmount
26+
return () => {
27+
setIsLoader(true);
28+
setList([]);
29+
setIsNextRecord(false);
30+
// Here it'll abort the fetch
31+
abortController.abort();
32+
};
1833
// eslint-disable-next-line
1934
}, [id]);
2035

21-
const getReportData = async () => {
22-
setIsLoader(true);
36+
// below useEffect call when isNextRecord state is true and fetch next record
37+
useEffect(() => {
38+
if (isNextRecord) {
39+
getReportData(List.length, 200);
40+
}
41+
// eslint-disable-next-line
42+
}, [isNextRecord]);
43+
44+
const getReportData = async (skipUserRecord = 0, limit = 200) => {
45+
// setIsLoader(true);
2346
const json = reportJson(id);
2447
if (json) {
2548
setActions(json.actions);
@@ -39,8 +62,11 @@ const Report = () => {
3962
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
4063
};
4164
try {
42-
const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&include=AuditTrail.UserPtr`;
43-
const res = await axios.get(url, { headers: headers });
65+
const url = `${serverURL}?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skipUserRecord}&limit=${limit}&include=AuditTrail.UserPtr`;
66+
const res = await axios.get(url, {
67+
headers: headers,
68+
signal: abortController.signal // is used to cancel fetch query
69+
});
4470
if (id === "4Hhwbp482K") {
4571
const listData = res.data?.results.filter(
4672
(x) => x.Signers.length > 0
@@ -66,14 +92,35 @@ const Report = () => {
6692
}
6793
}
6894
}
69-
setList(arr);
95+
if (arr.length === 10) {
96+
setIsMoreDocs(true);
97+
} else {
98+
setIsMoreDocs(false);
99+
}
100+
setList((prevRecord) =>
101+
prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
102+
);
70103
} else {
71-
setList(res.data?.results);
104+
if (res.data.results.length === 10) {
105+
setIsMoreDocs(true);
106+
console.log("here");
107+
} else {
108+
setIsMoreDocs(false);
109+
}
110+
setIsNextRecord(false);
111+
setList((prevRecord) =>
112+
prevRecord.length > 0
113+
? [...prevRecord, ...res.data.results]
114+
: res.data.results
115+
);
72116
}
73117
setIsLoader(false);
74118
} catch (err) {
75-
console.log("err ", err);
76-
setIsLoader(false);
119+
const isCancel = axios.isCancel(err);
120+
if (!isCancel) {
121+
console.log("err ", err);
122+
setIsLoader(false);
123+
}
77124
}
78125
} else {
79126
setIsLoader(false);
@@ -106,6 +153,8 @@ const Report = () => {
106153
ReportName={reportName}
107154
List={List}
108155
actions={actions}
156+
setIsNextRecord={setIsNextRecord}
157+
isMoreDocs={isMoreDocs}
109158
/>
110159
) : (
111160
<div className="flex items-center justify-center h-screen w-full bg-white rounded">

‎apps/OpenSign/src/routes/Signup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ const Signup = (props) => {
251251
element.pageType
252252
);
253253
setState({ loading: false });
254-
navigate("/login");
254+
navigate("/");
255255
} else {
256256
extendedInfo.forEach((x) => {
257257
if (x.TenantId) {

0 commit comments

Comments
 (0)