mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
692 lines
21 KiB
JavaScript
692 lines
21 KiB
JavaScript
import React, { useEffect, useState, useRef } from "react";
|
|
import axios from "axios";
|
|
import "./LegaDrive.css";
|
|
import loader from "../../assests/loader2.gif";
|
|
import PdfFileComponent from "./FolderDrive/legaDriveComponent";
|
|
import Modal from "react-bootstrap/Modal";
|
|
import ModalHeader from "react-bootstrap/esm/ModalHeader";
|
|
import { themeColor, iconColor } from "../../utils/ThemeColor/backColor";
|
|
import { getDrive } from "../../utils/Utils";
|
|
import AlertComponent from "../component/alertComponent";
|
|
|
|
function PdfFile() {
|
|
const scrollRef = useRef(null);
|
|
const [isList, setIsList] = useState(false);
|
|
const [selectedSort, setSelectedSort] = useState("Date");
|
|
const [sortingOrder, setSortingOrder] = useState("Decending");
|
|
const [pdfData, setPdfData] = useState([]);
|
|
const [isFolder, setIsFolder] = useState(false);
|
|
const [newFolderName, setNewFolderName] = useState();
|
|
const [error, setError] = useState();
|
|
const [folderLoader, setIsFolderLoader] = useState(false);
|
|
const [isShowSort, setIsShowSort] = useState(false);
|
|
const [isLoading, setIsLoading] = useState({
|
|
isLoad: true,
|
|
message: "This might take some time"
|
|
});
|
|
const [docId, setDocId] = useState();
|
|
const [handleError, setHandleError] = useState();
|
|
const [folderName, setFolderName] = useState([]);
|
|
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
|
|
const currentUser =
|
|
localStorage.getItem(
|
|
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
|
) &&
|
|
localStorage.getItem(
|
|
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
|
);
|
|
const jsonCurrentUser = JSON.parse(currentUser);
|
|
|
|
useEffect(() => {
|
|
if (docId) {
|
|
getPdfFolderDocumentList();
|
|
} else {
|
|
getPdfDocumentList();
|
|
}
|
|
}, [docId]);
|
|
|
|
//function for get all pdf document list
|
|
const getPdfDocumentList = async () => {
|
|
const load = {
|
|
isLoad: true,
|
|
message: "This might take some time"
|
|
};
|
|
setIsLoading(load);
|
|
const driveDetails = await getDrive();
|
|
if (driveDetails) {
|
|
if (driveDetails.length > 0) {
|
|
setPdfData(driveDetails);
|
|
}
|
|
const data = [
|
|
{
|
|
name: "OpenSignDrive™",
|
|
objectId: ""
|
|
}
|
|
];
|
|
setFolderName(data);
|
|
const loadObj = {
|
|
isLoad: false
|
|
};
|
|
setIsLoading(loadObj);
|
|
} else if (driveDetails === "Error: Something went wrong!") {
|
|
const loadObj = {
|
|
isLoad: false
|
|
};
|
|
setHandleError("Error: Something went wrong!");
|
|
setIsLoading(loadObj);
|
|
}
|
|
};
|
|
//function for get parent folder document list
|
|
const getPdfFolderDocumentList = async () => {
|
|
const load = {
|
|
isLoad: true,
|
|
message: "This might take some time"
|
|
};
|
|
setIsLoading(load);
|
|
const driveDetails = await getDrive(docId);
|
|
if (driveDetails) {
|
|
if (driveDetails.length > 0) {
|
|
setPdfData(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);
|
|
}
|
|
};
|
|
|
|
//function for get all pdf document list
|
|
const getParentFolder = async () => {
|
|
setIsFolder(true);
|
|
};
|
|
//function for handle folder name path
|
|
const handleRoute = (data) => {
|
|
let loadObj = {
|
|
isLoad: true,
|
|
message: "This might take some time"
|
|
};
|
|
if (data.name === "LegaDrive™") {
|
|
setIsLoading(loadObj);
|
|
if (docId) {
|
|
setDocId();
|
|
} else {
|
|
setTimeout(() => {
|
|
const loadObj = {
|
|
isLoad: false
|
|
};
|
|
setIsLoading(loadObj);
|
|
}, 1000);
|
|
}
|
|
} else if (data.name === folderName[folderName.length - 1].name) {
|
|
setIsLoading(loadObj);
|
|
setTimeout(() => {
|
|
const loadObj = {
|
|
isLoad: false
|
|
};
|
|
setIsLoading(loadObj);
|
|
}, 1000);
|
|
} else {
|
|
const findIndex = folderName.findIndex(
|
|
(fold) => fold.objectId === data.objectId
|
|
);
|
|
const newFolder = folderName.slice(0, findIndex + 1);
|
|
|
|
setFolderName(newFolder);
|
|
const getLastId = newFolder[newFolder.length - 1];
|
|
|
|
setDocId(getLastId.objectId);
|
|
setIsLoading(loadObj);
|
|
}
|
|
};
|
|
|
|
//function for add new folder name
|
|
const handleFolderName = (e) => {
|
|
setError();
|
|
const value = e.target.value;
|
|
setNewFolderName(value);
|
|
};
|
|
//function for add folder
|
|
const handleAddFolder = async () => {
|
|
if (newFolderName) {
|
|
setIsFolderLoader(true);
|
|
|
|
const getParentObjId = folderName[folderName.length - 1];
|
|
const parentId = getParentObjId && getParentObjId.objectId;
|
|
let data;
|
|
if (parentId) {
|
|
data = {
|
|
Name: newFolderName,
|
|
Type: "Folder",
|
|
Folder: {
|
|
__type: "Pointer",
|
|
className: `${localStorage.getItem("_appName")}_Document`,
|
|
objectId: parentId
|
|
},
|
|
CreatedBy: {
|
|
__type: "Pointer",
|
|
className: "_User",
|
|
objectId: jsonCurrentUser.objectId
|
|
}
|
|
};
|
|
} else {
|
|
data = {
|
|
Name: newFolderName,
|
|
Type: "Folder",
|
|
CreatedBy: {
|
|
__type: "Pointer",
|
|
className: "_User",
|
|
objectId: jsonCurrentUser.objectId
|
|
}
|
|
};
|
|
}
|
|
|
|
// console.log("data", data);
|
|
await axios
|
|
.post(
|
|
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
|
"_appName"
|
|
)}_Document`,
|
|
data,
|
|
{
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
|
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
|
}
|
|
}
|
|
)
|
|
|
|
.then((Listdata) => {
|
|
// console.log("Listdata ", Listdata);
|
|
const json = Listdata.data;
|
|
// console.log("json ", json);
|
|
if (json) {
|
|
setNewFolderName();
|
|
|
|
setIsFolderLoader(false);
|
|
setIsFolder(false);
|
|
if (docId) {
|
|
getPdfFolderDocumentList();
|
|
} else {
|
|
getPdfDocumentList();
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
setIsAlert({
|
|
isShow: true,
|
|
alertMessage: "something went wrong"
|
|
});
|
|
});
|
|
} else {
|
|
setError("Please fill out this field");
|
|
}
|
|
};
|
|
|
|
const sortingApp = (appInfo, type, order) => {
|
|
if (type === "Name") {
|
|
if (order === "Accending") {
|
|
return appInfo.sort((a, b) => (a.Name > b.Name ? 1 : -1));
|
|
} else if (order === "Decending") {
|
|
return appInfo.sort((a, b) => (a.Name > b.Name ? -1 : 1));
|
|
}
|
|
} else if (type === "Date") {
|
|
if (order === "Accending") {
|
|
return appInfo.sort((a, b) => (a.createdAt > b.createdAt ? 1 : -1));
|
|
} else if (order === "Decending") {
|
|
return appInfo.sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1));
|
|
}
|
|
}
|
|
};
|
|
|
|
const sortApps = () => {
|
|
const selectedSortType = selectedSort;
|
|
const sortOrder = sortingOrder;
|
|
|
|
let sortingData = pdfData;
|
|
if (selectedSortType === "Name") {
|
|
sortingApp(sortingData, "Name", sortOrder);
|
|
} else if (selectedSortType === "Date") {
|
|
sortingApp(sortingData, "Date", sortOrder);
|
|
}
|
|
|
|
setPdfData(sortingData);
|
|
};
|
|
|
|
//function for handle auto scroll on folder path
|
|
const handleMouseEnter = (e) => {
|
|
let side = "";
|
|
const container = scrollRef.current;
|
|
const containerRect = container.getBoundingClientRect();
|
|
const cursorX = e.clientX;
|
|
const containerX = containerRect.left;
|
|
const containerWidth = containerRect.width;
|
|
|
|
// Define a threshold (e.g., 10 pixels) for the start and end points
|
|
const threshold = 10;
|
|
|
|
if (cursorX - containerX <= threshold) {
|
|
side = "start";
|
|
} else if (containerX + containerWidth - cursorX <= threshold) {
|
|
side = "end";
|
|
} else {
|
|
side = "";
|
|
}
|
|
|
|
const scrollSpeed = 10;
|
|
let scrollAmount = 0;
|
|
|
|
const scroll = () => {
|
|
if (side === "start" && container.scrollLeft > 0) {
|
|
container.scrollLeft -= scrollAmount;
|
|
requestAnimationFrame(scroll);
|
|
} else if (
|
|
side === "end" &&
|
|
container.scrollLeft < container.scrollWidth - container.clientWidth
|
|
) {
|
|
container.scrollLeft += scrollAmount;
|
|
requestAnimationFrame(scroll);
|
|
}
|
|
};
|
|
|
|
container.addEventListener("mousemove", (e) => {
|
|
const rect = container.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const containerWidth = rect.width;
|
|
|
|
// Calculate the scroll amount based on the cursor's position
|
|
scrollAmount = (x / containerWidth) * scrollSpeed;
|
|
});
|
|
|
|
scroll();
|
|
};
|
|
|
|
//handle to close drop down menu onclick screen
|
|
useEffect(() => {
|
|
const closeMenuOnOutsideClick = (e) => {
|
|
if (isShowSort && !e.target.closest("#menu-container")) {
|
|
setIsShowSort(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("click", closeMenuOnOutsideClick);
|
|
|
|
return () => {
|
|
// Cleanup the event listener when the component unmounts
|
|
document.removeEventListener("click", closeMenuOnOutsideClick);
|
|
};
|
|
}, [isShowSort]);
|
|
|
|
return (
|
|
<div className="folderComponent ">
|
|
<div>
|
|
<AlertComponent
|
|
isShow={isAlert.isShow}
|
|
alertMessage={isAlert.alertMessage}
|
|
setIsAlert={setIsAlert}
|
|
/>
|
|
<Modal show={isFolder}>
|
|
<ModalHeader style={{ background: themeColor() }}>
|
|
<span style={{ color: "white" }}>Add New Folder</span>
|
|
{!folderLoader && (
|
|
<span
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => {
|
|
setNewFolderName("");
|
|
setIsFolder(false);
|
|
}}
|
|
>
|
|
X
|
|
</span>
|
|
)}
|
|
</ModalHeader>
|
|
|
|
<Modal.Body>
|
|
{folderLoader ? (
|
|
<div
|
|
style={{
|
|
height: "200px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
}}
|
|
>
|
|
<img
|
|
alt="loader img"
|
|
src={loader}
|
|
style={{ width: "50px", height: "50px" }}
|
|
/>
|
|
<span style={{ fontSize: "13px", color: "gray" }}>
|
|
Loading...
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<form style={{ display: "flex", flexDirection: "column" }}>
|
|
<label
|
|
style={{
|
|
margin: "10px 0px 10px 0px",
|
|
fontSize: "15px",
|
|
fontWeight: "400"
|
|
}}
|
|
>
|
|
Name*
|
|
</label>
|
|
|
|
<input
|
|
required
|
|
className="form-control"
|
|
type="text"
|
|
value={newFolderName}
|
|
onChange={(e) => handleFolderName(e)}
|
|
// className="addFolderInput"
|
|
/>
|
|
<span style={{ color: "red", fontSize: "12px" }}>{error}</span>
|
|
|
|
<div
|
|
style={{
|
|
margin: "20px 10px 10px 10px ",
|
|
display: "flex",
|
|
alignItems: "flex-end",
|
|
justifyContent: "flex-end",
|
|
alignContent: "flex-end"
|
|
}}
|
|
>
|
|
<button
|
|
type="submit"
|
|
style={{
|
|
borderRadius: "0px",
|
|
border: "1.5px solid #e3e2e1",
|
|
fontWeight: "600",
|
|
color: "black"
|
|
}}
|
|
className="finishBtn"
|
|
onClick={() => setIsFolder(false)}
|
|
>
|
|
Close
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleAddFolder()}
|
|
style={{
|
|
background: themeColor()
|
|
}}
|
|
type="button"
|
|
className="finishBtn"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Modal.Body>
|
|
</Modal>
|
|
|
|
{isLoading.isLoad ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
width: "100%",
|
|
flexDirection: "column"
|
|
}}
|
|
>
|
|
<img
|
|
alt="loader img"
|
|
src={loader}
|
|
style={{ width: "80px", height: "80px" }}
|
|
/>
|
|
<span style={{ fontSize: "13px", color: "gray" }}>
|
|
{isLoading.message}
|
|
</span>
|
|
</div>
|
|
) : handleError ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<span style={{ fontSize: "20px", color: "gray" }}>
|
|
{handleError}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="folderContainer">
|
|
<div
|
|
onMouseEnter={(e) => handleMouseEnter(e)}
|
|
ref={scrollRef}
|
|
style={{
|
|
width: "100%"
|
|
}}
|
|
className="folderPath"
|
|
>
|
|
{folderName.map((data, id) => {
|
|
return (
|
|
<span
|
|
key={id}
|
|
onClick={() => handleRoute(data)}
|
|
style={{
|
|
color: "#a64b4e",
|
|
fontWeight: "400",
|
|
cursor: "pointer"
|
|
}}
|
|
>
|
|
{data.name}
|
|
<span
|
|
style={{
|
|
color: "#a64b4e",
|
|
fontWeight: "200",
|
|
cursor: "pointer",
|
|
margin: "0 4px"
|
|
}}
|
|
>
|
|
>
|
|
</span>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="dropMenuBD">
|
|
<div
|
|
id="menu-container"
|
|
className={isShowSort ? "dropdown show" : "dropdown"}
|
|
onClick={() => setIsShowSort(!isShowSort)}
|
|
>
|
|
<div className=" sort " data-toggle="dropdown">
|
|
<i
|
|
className="fa fa-sort-amount-asc"
|
|
aria-hidden="true"
|
|
style={{
|
|
marginRight: "5px",
|
|
fontSize: "14px",
|
|
color: `${iconColor()}`
|
|
}}
|
|
></i>
|
|
<span
|
|
style={{
|
|
fontSize: "15px",
|
|
color: `${iconColor()}`
|
|
}}
|
|
>
|
|
{selectedSort}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={
|
|
isShowSort ? "dropdown-menu show" : "dropdown-menu"
|
|
}
|
|
aria-labelledby="dropdownMenuButton"
|
|
aria-expanded={isShowSort ? "true" : "false"}
|
|
>
|
|
<span
|
|
onClick={() => {
|
|
setSelectedSort("Name");
|
|
sortApps();
|
|
}}
|
|
className="dropdown-item itemColor"
|
|
>
|
|
{selectedSort !== "Name" ? (
|
|
<i
|
|
className="fa fa-arrow-up"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
) : (
|
|
<i
|
|
className="fa fa-check"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
)}
|
|
Name
|
|
</span>
|
|
<span
|
|
onClick={() => {
|
|
setSelectedSort("Date");
|
|
sortApps();
|
|
}}
|
|
className="dropdown-item itemColor"
|
|
>
|
|
{selectedSort !== "Date" ? (
|
|
<i
|
|
className="fa fa-arrow-up"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
) : (
|
|
<i
|
|
className="fa fa-check"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
)}
|
|
Date
|
|
</span>
|
|
<hr className="hrStyle" />
|
|
<span
|
|
onClick={() => {
|
|
setSortingOrder("Accending");
|
|
sortApps();
|
|
}}
|
|
className="dropdown-item itemColor"
|
|
>
|
|
{sortingOrder !== "Accending" ? (
|
|
<i
|
|
className="fa fa-arrow-up"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
) : (
|
|
<i
|
|
className="fa fa-check"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
)}
|
|
Accending
|
|
</span>
|
|
<span
|
|
onClick={() => {
|
|
setSortingOrder("Decending");
|
|
sortApps();
|
|
}}
|
|
className="dropdown-item itemColor"
|
|
>
|
|
{sortingOrder !== "Decending" ? (
|
|
<i
|
|
className="fa fa-arrow-up"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
) : (
|
|
<i
|
|
className="fa fa-check"
|
|
aria-hidden="true"
|
|
style={{ marginRight: "5px" }}
|
|
></i>
|
|
)}
|
|
Decending
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
{isList ? (
|
|
<div className="sort" onClick={() => setIsList(!isList)}>
|
|
<i
|
|
onClick={() => setIsList(!isList)}
|
|
className="fa fa-th-large"
|
|
style={{ fontSize: "24px", color: `${iconColor()}` }}
|
|
aria-hidden="true"
|
|
></i>
|
|
</div>
|
|
) : (
|
|
<div className="sort" onClick={() => setIsList(!isList)}>
|
|
<i
|
|
className="fa fa-list"
|
|
aria-hidden="true"
|
|
style={{ fontSize: "23px", color: `${iconColor()}` }}
|
|
></i>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="sort" onClick={() => getParentFolder()}>
|
|
<i
|
|
className="fa fa-plus-square"
|
|
aria-hidden="true"
|
|
style={{ fontSize: "25px", color: `${iconColor()}` }}
|
|
></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{pdfData && pdfData.length === 0 ? (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "50vh",
|
|
width: "100%"
|
|
}}
|
|
>
|
|
<span style={{ fontWeight: "bold" }}>No Data Found!</span>
|
|
</div>
|
|
) : (
|
|
<PdfFileComponent
|
|
pdfData={pdfData}
|
|
setFolderName={setFolderName}
|
|
setIsLoading={setIsLoading}
|
|
setDocId={setDocId}
|
|
getPdfFolderDocumentList={getPdfFolderDocumentList}
|
|
getPdfDocumentList={getPdfDocumentList}
|
|
isDocId={docId}
|
|
setPdfData={setPdfData}
|
|
isList={isList}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PdfFile;
|