mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-25 00:52:34 +02:00
Merge pull request #515 from OpenSignLabs/openSign_drive
fix: data fetching issue in openSign_drive
This commit is contained in:
prafull-opensignlabs
@@ -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,25 @@ function DriveBody({
|
||||
name: data.Name,
|
||||
objectId: data.objectId
|
||||
};
|
||||
setFolderName((prev) => [...prev, folderData]);
|
||||
const loadObj = {
|
||||
props.setFolderName((prev) => [...prev, folderData]);
|
||||
props.setIsLoading({
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
|
||||
setIsLoading(loadObj);
|
||||
setDocId(data.objectId);
|
||||
});
|
||||
props.setDocId(data.objectId);
|
||||
props.setPdfData([]);
|
||||
props.setSkip(0);
|
||||
};
|
||||
//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 +69,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 +90,7 @@ function DriveBody({
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("Err ", err);
|
||||
setIsAlert({
|
||||
props.setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "something went wrong"
|
||||
});
|
||||
@@ -199,13 +187,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 +250,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 +572,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 +585,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 +597,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 +612,7 @@ function DriveBody({
|
||||
isOpenModal={isOpenMoveModal}
|
||||
folderCls={"contracts_Document"}
|
||||
setIsOpenMoveModal={setIsOpenMoveModal}
|
||||
setPdfData={setPdfData}
|
||||
setPdfData={props.setPdfData}
|
||||
/>
|
||||
)}
|
||||
<ModalUi
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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,9 @@ 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 currentUser =
|
||||
localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
@@ -61,103 +64,82 @@ function Opensigndrive() {
|
||||
const jsonCurrentUser = JSON.parse(currentUser);
|
||||
|
||||
useEffect(() => {
|
||||
if (docId) {
|
||||
getPdfFolderDocumentList();
|
||||
} else {
|
||||
getPdfDocumentList();
|
||||
}
|
||||
getPdfDocumentList();
|
||||
// eslint-disable-next-line
|
||||
}, [docId]);
|
||||
|
||||
//function for get all pdf document list
|
||||
const getPdfDocumentList = async () => {
|
||||
const load = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
let driveDetails;
|
||||
setIsLoading(load);
|
||||
const getPdfDocumentList = async (disbaleLoading) => {
|
||||
setLoading(true);
|
||||
if (!disbaleLoading) {
|
||||
setIsLoading({ isLoad: true, message: "This might take some time" });
|
||||
}
|
||||
try {
|
||||
driveDetails = await getDrive();
|
||||
if (driveDetails) {
|
||||
if (driveDetails.length > 0) {
|
||||
setPdfData(driveDetails);
|
||||
sortApps(null, null, driveDetails);
|
||||
}
|
||||
const data = [
|
||||
{
|
||||
name: "OpenSign™ Drive",
|
||||
objectId: ""
|
||||
}
|
||||
];
|
||||
setFolderName(data);
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
} else if (driveDetails === "Error: Something went wrong!") {
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
const driveDetails = await getDrive(docId, skip, limit);
|
||||
if (driveDetails && driveDetails === "Error: Something went wrong!") {
|
||||
setHandleError("Error: Something went wrong!");
|
||||
setIsLoading(loadObj);
|
||||
} else if (driveDetails && driveDetails.length > 0) {
|
||||
setSkip((prevSkip) => prevSkip + limit);
|
||||
sortApps("Date", "Decending", driveDetails, true);
|
||||
}
|
||||
if (!docId) {
|
||||
setFolderName([{ name: "OpenSign™ Drive", objectId: "" }]);
|
||||
}
|
||||
} catch (e) {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "something went wrong"
|
||||
});
|
||||
}
|
||||
};
|
||||
//function for get parent folder document list
|
||||
const getPdfFolderDocumentList = async () => {
|
||||
const load = {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
setIsLoading(load);
|
||||
let driveDetails;
|
||||
try {
|
||||
driveDetails = await getDrive(docId);
|
||||
|
||||
if (driveDetails) {
|
||||
if (driveDetails.length > 0) {
|
||||
setPdfData(driveDetails);
|
||||
sortApps(null, null, driveDetails);
|
||||
} else {
|
||||
setPdfData([]);
|
||||
}
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
} else if (driveDetails === "Error: Something went wrong!") {
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setHandleError("Error: Something went wrong!");
|
||||
setIsLoading(loadObj);
|
||||
}
|
||||
} catch (e) {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "something went wrong!"
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setIsLoading({
|
||||
isLoad: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
//function for get all pdf document list
|
||||
const getParentFolder = async () => {
|
||||
setIsFolder(true);
|
||||
//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
|
||||
) {
|
||||
//disableLoading is used disable initial loader
|
||||
const disableLoading = true;
|
||||
// If the fetched data length is less than the limit, it means there's no more data to fetch
|
||||
if (!loading && pdfData.length % 100 === 0) {
|
||||
getPdfDocumentList(disableLoading);
|
||||
}
|
||||
}
|
||||
};
|
||||
//useEffect is used to call handleScroll function on scrolling event
|
||||
useEffect(() => {
|
||||
const documentList = document.getElementById("renderList");
|
||||
if (documentList) {
|
||||
documentList.addEventListener("scroll", handleScroll);
|
||||
return () => {
|
||||
documentList.removeEventListener("scroll", handleScroll);
|
||||
};
|
||||
}
|
||||
// eslint-disable-next-line
|
||||
}, [loading]); // Add/remove scroll event listener when loading changes
|
||||
|
||||
//function for handle folder name path
|
||||
const handleRoute = (index) => {
|
||||
setPdfData([]);
|
||||
setSkip(0);
|
||||
const updateFolderName = folderName.filter((x, i) => {
|
||||
if (i <= index) {
|
||||
return x;
|
||||
}
|
||||
});
|
||||
|
||||
setFolderName(updateFolderName);
|
||||
const getLastId = updateFolderName[updateFolderName.length - 1];
|
||||
setDocId(getLastId.objectId);
|
||||
@@ -244,18 +226,19 @@ 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";
|
||||
|
||||
let sortingData = driveDetails;
|
||||
if (selectedSortType === "Name") {
|
||||
sortingApp(sortingData, "Name", sortOrder);
|
||||
sortingApp(driveDetails, "Name", sortOrder);
|
||||
} else if (selectedSortType === "Date") {
|
||||
sortingApp(sortingData, "Date", sortOrder);
|
||||
sortingApp(driveDetails, "Date", sortOrder);
|
||||
}
|
||||
if (isInitial) {
|
||||
setPdfData([...pdfData, ...driveDetails]);
|
||||
} else {
|
||||
setPdfData(driveDetails);
|
||||
}
|
||||
|
||||
setPdfData(sortingData);
|
||||
};
|
||||
|
||||
//function for handle auto scroll on folder path
|
||||
@@ -322,6 +305,7 @@ function Opensigndrive() {
|
||||
// Cleanup the event listener when the component unmounts
|
||||
document.removeEventListener("click", closeMenuOnOutsideClick);
|
||||
};
|
||||
// eslint-disable-next-line
|
||||
}, [isShowSort, isNewFol]);
|
||||
|
||||
const handleFolderTab = (folderData) => {
|
||||
@@ -563,7 +547,7 @@ function Opensigndrive() {
|
||||
>
|
||||
<span
|
||||
className="dropdown-item itemColor"
|
||||
onClick={() => getParentFolder()}
|
||||
onClick={() => setIsFolder(true)}
|
||||
>
|
||||
<i
|
||||
style={{ marginRight: "5px" }}
|
||||
@@ -761,13 +745,16 @@ function Opensigndrive() {
|
||||
setFolderName={setFolderName}
|
||||
setIsLoading={setIsLoading}
|
||||
setDocId={setDocId}
|
||||
getPdfFolderDocumentList={getPdfFolderDocumentList}
|
||||
getPdfDocumentList={getPdfDocumentList}
|
||||
isDocId={docId}
|
||||
setPdfData={setPdfData}
|
||||
isList={isList}
|
||||
setIsAlert={setIsAlert}
|
||||
setSkip={setSkip}
|
||||
/>
|
||||
{loading && (
|
||||
<div style={{ textAlign: "center" }}>Loading...</div>
|
||||
)}
|
||||
</React.Suspense>
|
||||
)}
|
||||
</>
|
||||
|
||||
@@ -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, {
|
||||
|
||||
Reference in New Issue
Block a user