WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-20 06:35:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: data fetching issue in openSign_drive

Browse Source
This commit is contained in:
RaktimaNXG
2024-03-20 12:38:34 +05:30
parent c3a902dcc7
commit ba0c18b591
5 changed files with 131 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/opensigndrive/DriveBody.js
+19 -28
View File
@@ -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 ? (
<div className="container" style={{ overflowX: "auto" }}>
<Table striped bordered hover>
<thead>
@@ -597,7 +588,7 @@ function DriveBody({
</tr>
</thead>
<tbody>
{pdfData.map((data, ind) => {
{props.pdfData.map((data, ind) => {
return (
<React.Fragment key={ind}>
{handleFolderData(data, ind, "table")}
@@ -609,7 +600,7 @@ function DriveBody({
</div>
) : (
<div className="pdfContainer">
{pdfData.map((data, ind) => {
{props.pdfData.map((data, ind) => {
return (
<div className="box" key={ind}>
{handleFolderData(data, ind, "list")}
@@ -624,7 +615,7 @@ function DriveBody({
isOpenModal={isOpenMoveModal}
folderCls={"contracts_Document"}
setIsOpenMoveModal={setIsOpenMoveModal}
setPdfData={setPdfData}
setPdfData={props.setPdfData}
/>
)}
<ModalUi
apps/OpenSign/src/constant/Utils.js
+7 -5
View File
@@ -22,10 +22,12 @@ export const toDataUrl = (file) => {
});
};
//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) {
apps/OpenSign/src/layout/HomeLayout.js
+4 -1
View File
@@ -224,7 +224,10 @@ const HomeLayout = () => {
<div className="flex md:flex-row flex-col z-50">
<Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
<div className="relative h-screen flex flex-col justify-between w-full overflow-y-auto">
<div
id="renderList"
className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
>
<div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
<div className="z-30">
<Footer />
apps/OpenSign/src/pages/Opensigndrive.js
+97 -28
View File
@@ -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() {
<span style={{ fontWeight: "bold" }}>No Data Found!</span>
</div>
) : (
<React.Suspense fallback={<Loader />}>
<>
<DriveBody
pdfData={pdfData}
setFolderName={setFolderName}
@@ -767,8 +831,13 @@ function Opensigndrive() {
setPdfData={setPdfData}
isList={isList}
setIsAlert={setIsAlert}
setSkip={setSkip}
setLoadMore={setLoadMore}
/>
</React.Suspense>
{loading && (
<div style={{ textAlign: "center" }}>Loading...</div>
)}
</>
)}
</>
)}
apps/OpenSignServer/cloud/parsefunction/getDrive.js
+4 -3
View File
@@ -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, {