diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js index 41e5a6110..11ad95a8f 100644 --- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js +++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js @@ -12,15 +12,7 @@ import SelectFolder from "../shared/fields/SelectFolder"; //check this one import ModalUi from "../../primitives/ModalUi"; import { themeColor } from "../../constant/const"; -function DriveBody({ - pdfData, - setFolderName, - setDocId, - setIsLoading, - setPdfData, - isList, - setIsAlert -}) { +function DriveBody(props) { const [rename, setRename] = useState(""); const [renameValue, setRenameValue] = useState(""); const inputRef = useRef(null); @@ -50,28 +42,28 @@ function DriveBody({ name: data.Name, objectId: data.objectId }; - setFolderName((prev) => [...prev, folderData]); + props.setFolderName((prev) => [...prev, folderData]); const loadObj = { isLoad: true, message: "This might take some time" }; - setIsLoading(loadObj); - setDocId(data.objectId); + props.setIsLoading(loadObj); + props.setDocId(data.objectId); + props.setPdfData([]); + props.setSkip(0); + props.setLoadMore(true); }; //function for change doc name and update doc name in _document class const handledRenameDoc = async (data) => { setRename(""); const trimmedValue = renameValue.trim(); - if (trimmedValue.length > 0) { const updateName = { Name: renameValue }; const docId = data.objectId; - - const docData = pdfData; - + const docData = props.pdfData; const updatedData = docData.map((item) => { if (item.objectId === docId) { // If the item's ID matches the target ID, update the name @@ -80,8 +72,7 @@ function DriveBody({ // If the item's ID doesn't match, keep it unchanged return item; }); - - setPdfData(updatedData); + props.setPdfData(updatedData); await axios .put( `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( @@ -102,7 +93,7 @@ function DriveBody({ }) .catch((err) => { console.log("Err ", err); - setIsAlert({ + props.setIsAlert({ isShow: true, alertMessage: "something went wrong" }); @@ -199,13 +190,13 @@ function DriveBody({ .then((result) => { const res = result.data; if (res) { - const updatedData = pdfData.filter((x) => x.objectId !== docId); - setPdfData(updatedData); + const updatedData = props.pdfData.filter((x) => x.objectId !== docId); + props.setPdfData(updatedData); } }) .catch((err) => { console.log("Err ", err); - setIsAlert({ + props.setIsAlert({ isShow: true, alertMessage: "something went wrong" }); @@ -262,10 +253,10 @@ function DriveBody({ // console.log("Listdata ", Listdata); const res = Listdata.data; if (res) { - const updatedData = pdfData.filter( + const updatedData = props.pdfData.filter( (x) => x.objectId !== updateDocId ); - setPdfData(updatedData); + props.setPdfData(updatedData); } }) .catch((err) => { @@ -584,7 +575,7 @@ function DriveBody({ //component to handle type of document and render according to type return ( <> - {isList ? ( + {props.isList ? (
@@ -597,7 +588,7 @@ function DriveBody({ - {pdfData.map((data, ind) => { + {props.pdfData.map((data, ind) => { return ( {handleFolderData(data, ind, "table")} @@ -609,7 +600,7 @@ function DriveBody({ ) : (
- {pdfData.map((data, ind) => { + {props.pdfData.map((data, ind) => { return (
{handleFolderData(data, ind, "list")} @@ -624,7 +615,7 @@ function DriveBody({ isOpenModal={isOpenMoveModal} folderCls={"contracts_Document"} setIsOpenMoveModal={setIsOpenMoveModal} - setPdfData={setPdfData} + setPdfData={props.setPdfData} /> )} { }); }; -//function for getting document details for getDrive -export const getDrive = async (documentId) => { +//function for getting document details for getDrive cloud function +export const getDrive = async (documentId, skip = 0, limit = 100) => { const data = { - docId: documentId && documentId + docId: documentId && documentId, + limit: limit, + skip: skip }; const driveDeatils = await axios .post(`${localStorage.getItem("baseUrl")}functions/getDrive`, data, { @@ -1078,8 +1080,8 @@ export const multiSignEmbed = async ( position.type === radioButtonWidget ? 10 : position.type === "checkbox" - ? 10 - : newUpdateHeight; + ? 10 + : newUpdateHeight; const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight; if (signyourself) { diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js index d3cfd8188..0cfccf180 100644 --- a/apps/OpenSign/src/layout/HomeLayout.js +++ b/apps/OpenSign/src/layout/HomeLayout.js @@ -224,7 +224,10 @@ const HomeLayout = () => {
-
+
{}
diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js index b682c9b39..21ee616f9 100644 --- a/apps/OpenSign/src/pages/Opensigndrive.js +++ b/apps/OpenSign/src/pages/Opensigndrive.js @@ -7,8 +7,8 @@ import { useNavigate } from "react-router-dom"; import Title from "../components/Title"; import Parse from "parse"; import ModalUi from "../primitives/ModalUi"; -const DriveBody = React.lazy(() => - import("../components/opensigndrive/DriveBody") +const DriveBody = React.lazy( + () => import("../components/opensigndrive/DriveBody") ); const Loader = () => { return ( @@ -51,6 +51,10 @@ function Opensigndrive() { const [folderName, setFolderName] = useState([]); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isNewFol, setIsNewFol] = useState(false); + const [skip, setSkip] = useState(0); + const limit = 100; + const [loading, setLoading] = useState(false); + const [loadMore, setLoadMore] = useState(true); const currentUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -70,19 +74,27 @@ function Opensigndrive() { }, [docId]); //function for get all pdf document list - const getPdfDocumentList = async () => { - const load = { - isLoad: true, - message: "This might take some time" - }; + const getPdfDocumentList = async (disbaleLoading) => { + setLoading(true); + if (!disbaleLoading) { + const load = { + isLoad: true, + message: "This might take some time" + }; + + setIsLoading(load); + } let driveDetails; - setIsLoading(load); try { - driveDetails = await getDrive(); + driveDetails = await getDrive(null, skip, limit); if (driveDetails) { if (driveDetails.length > 0) { - setPdfData(driveDetails); - sortApps(null, null, driveDetails); + setSkip((prevSkip) => prevSkip + limit); + // If the fetched data length is less than the limit, it means there's no more data to fetch + if (driveDetails.length < limit) { + setLoadMore(false); + } + sortApps(null, null, driveDetails, true); } const data = [ { @@ -107,25 +119,33 @@ function Opensigndrive() { isShow: true, alertMessage: "something went wrong" }); + } finally { + setLoading(false); } }; + //function for get parent folder document list - const getPdfFolderDocumentList = async () => { - const load = { - isLoad: true, - message: "This might take some time" - }; - setIsLoading(load); + const getPdfFolderDocumentList = async (disableLoading) => { + setLoading(true); + if (!disableLoading) { + const load = { + isLoad: true, + message: "This might take some time" + }; + setIsLoading(load); + } + let driveDetails; try { - driveDetails = await getDrive(docId); - + driveDetails = await getDrive(docId, skip, limit); if (driveDetails) { if (driveDetails.length > 0) { - setPdfData(driveDetails); - sortApps(null, null, driveDetails); - } else { - setPdfData([]); + setSkip((prevSkip) => prevSkip + limit); + // If the fetched data length is less than the limit, it means there's no more data to fetch + if (driveDetails.length < limit) { + setLoadMore(false); + } + sortApps(null, null, driveDetails, true); } const loadObj = { isLoad: false @@ -143,15 +163,55 @@ function Opensigndrive() { isShow: true, alertMessage: "something went wrong!" }); + } finally { + setLoading(false); } }; + //function to fetch drive details list on scroll bottom + const handleScroll = () => { + //get document of render openSign-drive component using id + const documentList = document.getElementById("renderList"); + //documentList.clientHeight property returns the height of an element's content area, including padding but not including borders, margins, or scrollbars. + //documentList.scrollHeight property returns the entire height of an element,including the parts that are not visible due to overflow.. + // documentList.scrollTop property show height of element, how much the content has been scrolled from the top. + // When the sum of scrollTop and clientHeight is equal to scrollHeight, it means that the user has scrolled to the bottom of the div. + if ( + documentList && + documentList.scrollTop + documentList.clientHeight >= + documentList.scrollHeight + ) { + if (!loading && loadMore) { + //disableLoading + let disableLoading = true; + if (docId) { + getPdfFolderDocumentList(disableLoading); + } else { + getPdfDocumentList(disableLoading); + } + } + } + }; + //useEffect + useEffect(() => { + const documentList = document.getElementById("renderList"); + if (documentList) { + documentList.addEventListener("scroll", handleScroll); + return () => { + documentList.removeEventListener("scroll", handleScroll); + }; + } + // eslint-disable-next-line + }, [loading, loadMore]); // Add/remove scroll event listener when loading or hasMore changes //function for get all pdf document list const getParentFolder = async () => { setIsFolder(true); }; //function for handle folder name path const handleRoute = (index) => { + setPdfData([]); + setSkip(0); + setLoadMore(true); const updateFolderName = folderName.filter((x, i) => { if (i <= index) { return x; @@ -244,7 +304,7 @@ function Opensigndrive() { } }; - const sortApps = (type, order, driveDetails) => { + const sortApps = (type, order, driveDetails, isInitial) => { const selectedSortType = type ? type : selectedSort ? selectedSort : "Date"; const sortOrder = order ? order : sortingOrder ? sortingOrder : "Decending"; @@ -254,8 +314,11 @@ function Opensigndrive() { } else if (selectedSortType === "Date") { sortingApp(sortingData, "Date", sortOrder); } - - setPdfData(sortingData); + if (isInitial) { + setPdfData([...pdfData, ...sortingData]); + } else { + setPdfData(sortingData); + } }; //function for handle auto scroll on folder path @@ -322,6 +385,7 @@ function Opensigndrive() { // Cleanup the event listener when the component unmounts document.removeEventListener("click", closeMenuOnOutsideClick); }; + // eslint-disable-next-line }, [isShowSort, isNewFol]); const handleFolderTab = (folderData) => { @@ -755,7 +819,7 @@ function Opensigndrive() { No Data Found!
) : ( - }> + <> - + {loading && ( +
Loading...
+ )} + )} )} diff --git a/apps/OpenSignServer/cloud/parsefunction/getDrive.js b/apps/OpenSignServer/cloud/parsefunction/getDrive.js index 516ca9764..524b2f2b2 100644 --- a/apps/OpenSignServer/cloud/parsefunction/getDrive.js +++ b/apps/OpenSignServer/cloud/parsefunction/getDrive.js @@ -2,7 +2,8 @@ import axios from 'axios'; export default async function getDrive(request) { const serverUrl = process.env.SERVER_URL; const appId = process.env.APP_ID; - + const limit = request.params.limit; + const skip = request.params.skip; const classUrl = serverUrl + '/classes/contracts_Document'; const docId = request.params.docId; try { @@ -16,9 +17,9 @@ export default async function getDrive(request) { if (userId) { let url; if (docId) { - url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder`; + url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers,Folder&skip=${skip}&limit=${limit}`; } else { - url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers`; + url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"},"IsArchive":{"$ne":true}}&include=ExtUserPtr,Signers&skip=${skip}&limit=${limit}`; } try { const res = await axios.get(url, {