mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
fix: folder list display issue in move folder modal,add alert for delete document, change modal css
This commit is contained in:
RaktimaNXG
+183
-164
@@ -11,6 +11,8 @@ import { useNavigate } from "react-router-dom";
|
||||
import Table from "react-bootstrap/Table";
|
||||
import * as HoverCard from "@radix-ui/react-hover-card";
|
||||
import SelectFolder from "../../../premitives/SelectFolder";
|
||||
import ModalUi from "../../../premitives/ModalUi";
|
||||
import { themeColor } from "../../../utils/ThemeColor/backColor";
|
||||
|
||||
function PdfFileComponent({
|
||||
pdfData,
|
||||
@@ -25,6 +27,7 @@ function PdfFileComponent({
|
||||
const inputRef = useRef(null);
|
||||
const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
|
||||
const [selectDoc, setSelectDoc] = useState();
|
||||
const [isDeleteDoc, setIsDeleteDoc] = useState(false);
|
||||
const contextMenu = ["Download", "Rename", "Delete", "Move"];
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -163,9 +166,138 @@ function PdfFileComponent({
|
||||
}
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (selectType, data) => {
|
||||
switch (selectType) {
|
||||
case "Download":
|
||||
const pdfName = data && data.Name;
|
||||
const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
|
||||
saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
|
||||
break;
|
||||
case "Rename":
|
||||
setRenameValue(data.Name);
|
||||
setRename(data.objectId);
|
||||
break;
|
||||
case "Delete":
|
||||
setIsDeleteDoc(true);
|
||||
setSelectDoc(data);
|
||||
break;
|
||||
|
||||
case "Move":
|
||||
handleMoveDocument(data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
//function for delete document
|
||||
const handleDeleteDocument = async (docData) => {
|
||||
const docId = docData.objectId;
|
||||
const data = {
|
||||
IsArchive: true
|
||||
};
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Document/${docId}`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((result) => {
|
||||
const res = result.data;
|
||||
const updatedData = pdfData.filter((x) => x.objectId !== docId);
|
||||
setPdfData(updatedData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
};
|
||||
const handleMoveDocument = async (docData) => {
|
||||
setIsOpenMoveModal(true);
|
||||
setSelectDoc(docData);
|
||||
};
|
||||
//function for move document from one folder to another folder
|
||||
const handleMoveFolder = async (selectFolderData) => {
|
||||
const selecFolderId = selectDoc?.Folder?.objectId;
|
||||
const moveFolderId = selectFolderData?.ObjectId;
|
||||
let updateDocId = selectDoc?.objectId;
|
||||
let updateData;
|
||||
const checkExist = moveFolderId
|
||||
? selecFolderId === moveFolderId
|
||||
? true
|
||||
: false
|
||||
: false;
|
||||
|
||||
if (!checkExist) {
|
||||
if (moveFolderId) {
|
||||
updateData = {
|
||||
Folder: {
|
||||
__type: "Pointer",
|
||||
className: `${localStorage.getItem("_appName")}_Document`,
|
||||
objectId: moveFolderId
|
||||
}
|
||||
};
|
||||
} else {
|
||||
updateData = {
|
||||
Folder: { __op: "Delete" }
|
||||
};
|
||||
}
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Document/${updateDocId}`,
|
||||
updateData,
|
||||
{
|
||||
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;
|
||||
|
||||
const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
|
||||
setPdfData(updatedData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
|
||||
setIsOpenMoveModal(false);
|
||||
} else {
|
||||
alert("folder already exist!");
|
||||
setIsOpenMoveModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
const sanitizeFileName = (pdfName) => {
|
||||
// Replace spaces with underscore
|
||||
return pdfName.replace(/ /g, "_");
|
||||
};
|
||||
|
||||
const handleEnterPress = (e, data) => {
|
||||
if (e.key === "Enter") {
|
||||
handledRenameDoc(data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDraftDoc = (data) => {
|
||||
window.location.hash = `/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9MZWdhR2VuaWUtTWljcm9hcHBWMi9yZW1vdGVFbnRyeS5qcw==&moduleToLoad=AppRoutes&remoteName=legageniemicroapp/legagenie?${data.objectId}`;
|
||||
};
|
||||
|
||||
//component to handle type of document and render according to type
|
||||
const handleFolderData = (data, ind, listType) => {
|
||||
// console.log("data", data);
|
||||
let createddate,
|
||||
status,
|
||||
isDecline,
|
||||
@@ -210,86 +342,12 @@ function PdfFileComponent({
|
||||
}
|
||||
}
|
||||
|
||||
const handleDraftDoc = (data) => {
|
||||
window.location.hash = `/mf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9MZWdhR2VuaWUtTWljcm9hcHBWMi9yZW1vdGVFbnRyeS5qcw==&moduleToLoad=AppRoutes&remoteName=legageniemicroapp/legagenie?${data.objectId}`;
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (selectType, data) => {
|
||||
switch (selectType) {
|
||||
case "Download":
|
||||
const pdfName = data && data.Name;
|
||||
const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
|
||||
saveAs(
|
||||
pdfUrl,
|
||||
`${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`
|
||||
);
|
||||
break;
|
||||
case "Rename":
|
||||
setRenameValue(data.Name);
|
||||
setRename(data.objectId);
|
||||
break;
|
||||
case "Delete":
|
||||
handleDeleteDocument(data);
|
||||
break;
|
||||
|
||||
case "Move":
|
||||
handleMoveDocument(data);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
//function for delete document
|
||||
const handleDeleteDocument = async (docData) => {
|
||||
const docId = docData.objectId;
|
||||
const data = {
|
||||
IsArchive: true
|
||||
};
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Document/${docId}`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((result) => {
|
||||
const res = result.data;
|
||||
const updatedData = pdfData.filter((x) => x.objectId !== docId);
|
||||
setPdfData(updatedData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
};
|
||||
const handleMoveDocument = async (docData) => {
|
||||
setIsOpenMoveModal(true);
|
||||
setSelectDoc(docData);
|
||||
};
|
||||
const sanitizeFileName = (pdfName) => {
|
||||
// Replace spaces with underscore
|
||||
return pdfName.replace(/ /g, "_");
|
||||
};
|
||||
|
||||
const handleEnterPress = (e, data) => {
|
||||
if (e.key === "Enter") {
|
||||
handledRenameDoc(data);
|
||||
}
|
||||
};
|
||||
|
||||
const signersName = () => {
|
||||
const getSignersName = signerExist.map((data) => data.Name);
|
||||
const signerName = getSignersName.join(",");
|
||||
|
||||
return <span className="statusSpan">{signerName} </span>;
|
||||
};
|
||||
|
||||
return listType === "table" ? (
|
||||
data.Type === "Folder" ? (
|
||||
<tr onClick={() => handleOnclikFolder(data)}>
|
||||
@@ -383,7 +441,6 @@ function PdfFileComponent({
|
||||
}}
|
||||
autoFocus={true}
|
||||
type="text"
|
||||
// onFocus={()=>console.log("focus")}
|
||||
onBlur={() => handledRenameDoc(data)}
|
||||
onKeyDown={(e) => handleEnterPress(e, data)}
|
||||
ref={inputRef}
|
||||
@@ -448,7 +505,6 @@ function PdfFileComponent({
|
||||
}}
|
||||
autoFocus={true}
|
||||
type="text"
|
||||
// onFocus={()=>console.log("focus")}
|
||||
onBlur={() => handledRenameDoc(data)}
|
||||
onKeyDown={(e) => handleEnterPress(e, data)}
|
||||
ref={inputRef}
|
||||
@@ -568,33 +624,6 @@ function PdfFileComponent({
|
||||
</ContextMenu.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* <ContextMenu.Item
|
||||
onClick={() => handleMenuItemClick("Download", data)}
|
||||
// onSelect={(e) => console.log("event", e)}
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
Download
|
||||
</ContextMenu.Item>
|
||||
|
||||
<ContextMenu.Item
|
||||
onClick={() => handleMenuItemClick("Rename", data)}
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
Rename
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item
|
||||
onClick={() => handleMenuItemClick("Delete", data)}
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
Delete
|
||||
</ContextMenu.Item>
|
||||
<ContextMenu.Item
|
||||
onClick={() => handleMenuItemClick("Move", data)}
|
||||
className="ContextMenuItem"
|
||||
>
|
||||
Move
|
||||
</ContextMenu.Item> */}
|
||||
</ContextMenu.Content>
|
||||
</ContextMenu.Portal>
|
||||
</ContextMenu.Root>
|
||||
@@ -627,66 +656,6 @@ function PdfFileComponent({
|
||||
);
|
||||
};
|
||||
|
||||
//function for move document from one folder to another folder
|
||||
const handleMoveFolder = async (selectFolderData) => {
|
||||
const selecFolderId = selectDoc?.Folder?.objectId;
|
||||
const moveFolderId = selectFolderData?.ObjectId;
|
||||
let updateDocId = selectDoc?.objectId;
|
||||
let updateData;
|
||||
const checkExist = moveFolderId
|
||||
? selecFolderId === moveFolderId
|
||||
? true
|
||||
: false
|
||||
: false;
|
||||
|
||||
if (!checkExist) {
|
||||
if (moveFolderId) {
|
||||
updateData = {
|
||||
Folder: {
|
||||
__type: "Pointer",
|
||||
className: `${localStorage.getItem("_appName")}_Document`,
|
||||
objectId: moveFolderId
|
||||
}
|
||||
};
|
||||
} else {
|
||||
updateData = {
|
||||
Folder: undefined
|
||||
};
|
||||
}
|
||||
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
|
||||
"_appName"
|
||||
)}_Document/${updateDocId}`,
|
||||
updateData,
|
||||
{
|
||||
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;
|
||||
|
||||
const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
|
||||
setPdfData(updatedData);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("err", err);
|
||||
});
|
||||
|
||||
setIsOpenMoveModal(false);
|
||||
} else {
|
||||
alert("folder already exist!");
|
||||
setIsOpenMoveModal(false);
|
||||
}
|
||||
};
|
||||
|
||||
//component to handle type of document and render according to type
|
||||
return (
|
||||
<>
|
||||
@@ -730,8 +699,58 @@ function PdfFileComponent({
|
||||
isOpenModal={isOpenMoveModal}
|
||||
folderCls={"contracts_Document"}
|
||||
setIsOpenMoveModal={setIsOpenMoveModal}
|
||||
setPdfData={setPdfData}
|
||||
/>
|
||||
)}
|
||||
<ModalUi
|
||||
isOpen={isDeleteDoc}
|
||||
headerColor={themeColor()}
|
||||
title={"Delete Document"}
|
||||
handleClose={() => {
|
||||
setIsDeleteDoc(false);
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
<p>Are you sure you want to delete this document?</p>
|
||||
|
||||
<div
|
||||
style={{
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
></div>
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
handleDeleteDocument(selectDoc);
|
||||
}}
|
||||
style={{
|
||||
background: themeColor(),
|
||||
color: "white"
|
||||
}}
|
||||
type="button"
|
||||
className="docDeleteBtn"
|
||||
>
|
||||
YES
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsDeleteDoc(false);
|
||||
}}
|
||||
style={{
|
||||
background: "rgb(24 138 226)",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
type="button"
|
||||
className="docDeleteBtn"
|
||||
>
|
||||
NO
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -497,6 +497,27 @@ a {
|
||||
/* for Chrome, Safari, and Opera */
|
||||
}
|
||||
|
||||
.docDeleteBtn {
|
||||
/* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); */
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
padding: 7px 17px;
|
||||
color: white;
|
||||
font-weight: 600 !important;
|
||||
font-size: 12px !important;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.docDeleteBtn:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.docDeleteBtn:hover {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media screen and (max-width:766px) {
|
||||
.itemColor {
|
||||
font-size: 10px !important;
|
||||
|
||||
@@ -11,6 +11,7 @@ import AlertComponent from "../component/alertComponent";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Title from "../component/Title";
|
||||
import Parse from "parse";
|
||||
import ModalUi from "../../premitives/ModalUi";
|
||||
|
||||
function PdfFile() {
|
||||
const navigate = useNavigate();
|
||||
@@ -29,7 +30,7 @@ function PdfFile() {
|
||||
message: "This might take some time"
|
||||
});
|
||||
const [docId, setDocId] = useState();
|
||||
const [handleError, setHandleError] = useState();
|
||||
const [handleError, setHandleError] = useState("");
|
||||
const [folderName, setFolderName] = useState([]);
|
||||
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
|
||||
const [isNewFol, setIsNewFol] = useState(false);
|
||||
@@ -123,38 +124,6 @@ function PdfFile() {
|
||||
isLoad: true,
|
||||
message: "This might take some time"
|
||||
};
|
||||
// if (data.name === "OpenSign™ Drive") {
|
||||
// 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);
|
||||
// }
|
||||
|
||||
const updateFolderName = folderName.filter((x, i) => {
|
||||
if (i <= index) {
|
||||
@@ -173,77 +142,60 @@ function PdfFile() {
|
||||
const value = e.target.value;
|
||||
setNewFolderName(value);
|
||||
};
|
||||
//function for add folder
|
||||
//function for create 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
|
||||
}
|
||||
};
|
||||
}
|
||||
const foldercls = `${localStorage.getItem("_appName")}_Document`;
|
||||
const folderPtr = {
|
||||
__type: "Pointer",
|
||||
className: foldercls,
|
||||
objectId: parentId
|
||||
};
|
||||
const CreatedBy = {
|
||||
__type: "Pointer",
|
||||
className: "_User",
|
||||
objectId: jsonCurrentUser.objectId
|
||||
};
|
||||
|
||||
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")
|
||||
}
|
||||
}
|
||||
)
|
||||
try {
|
||||
const exsitQuery = new Parse.Query(foldercls);
|
||||
exsitQuery.equalTo("Name", newFolderName);
|
||||
exsitQuery.equalTo("Type", "Folder");
|
||||
if (parentId) {
|
||||
exsitQuery.equalTo("Folder", folderPtr);
|
||||
}
|
||||
const templExist = await exsitQuery.first();
|
||||
if (templExist) {
|
||||
setError("Folder already exist!");
|
||||
setIsFolderLoader(false);
|
||||
} else {
|
||||
const template = new Parse.Object(foldercls);
|
||||
template.set("Name", newFolderName);
|
||||
template.set("Type", "Folder");
|
||||
|
||||
.then((Listdata) => {
|
||||
// console.log("Listdata ", Listdata);
|
||||
const json = Listdata.data;
|
||||
// console.log("json ", json);
|
||||
if (json) {
|
||||
if (parentId) {
|
||||
template.set("Folder", folderPtr);
|
||||
}
|
||||
template.set("CreatedBy", CreatedBy);
|
||||
const res = await template.save();
|
||||
if (res) {
|
||||
const result = JSON.parse(JSON.stringify(res));
|
||||
|
||||
setPdfData((prev) => [...prev, result]);
|
||||
setNewFolderName();
|
||||
|
||||
setIsFolderLoader(false);
|
||||
setIsFolder(false);
|
||||
if (docId) {
|
||||
getPdfFolderDocumentList();
|
||||
} else {
|
||||
getPdfDocumentList();
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "something went wrong"
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
setIsAlert({
|
||||
isShow: true,
|
||||
alertMessage: "something went wrong"
|
||||
});
|
||||
}
|
||||
} else {
|
||||
setError("Please fill out this field");
|
||||
}
|
||||
@@ -383,23 +335,14 @@ function PdfFile() {
|
||||
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>
|
||||
<ModalUi
|
||||
isOpen={isFolder}
|
||||
title={"Add New Folder"}
|
||||
handleClose={() => {
|
||||
setIsFolder(false);
|
||||
}}
|
||||
>
|
||||
<div style={{ height: "100%", padding: 20 }}>
|
||||
{folderLoader ? (
|
||||
<div
|
||||
style={{
|
||||
@@ -420,7 +363,7 @@ function PdfFile() {
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<form style={{ display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ display: "flex", flexDirection: "column" }}>
|
||||
<label
|
||||
style={{
|
||||
margin: "10px 0px 10px 0px",
|
||||
@@ -439,46 +382,47 @@ function PdfFile() {
|
||||
onChange={(e) => handleFolderName(e)}
|
||||
// className="addFolderInput"
|
||||
/>
|
||||
<span style={{ color: "red", fontSize: "12px" }}>{error}</span>
|
||||
|
||||
<span
|
||||
style={{ color: "red", fontSize: "12px", marginTop: "6px" }}
|
||||
>
|
||||
{error}
|
||||
</span>
|
||||
<div
|
||||
style={{
|
||||
margin: "20px 10px 10px 10px ",
|
||||
display: "flex",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "flex-end",
|
||||
alignContent: "flex-end"
|
||||
height: "1px",
|
||||
backgroundColor: "#9f9f9f",
|
||||
width: "100%",
|
||||
marginTop: "15px",
|
||||
marginBottom: "15px"
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
borderRadius: "0px",
|
||||
border: "1.5px solid #e3e2e1",
|
||||
fontWeight: "600",
|
||||
color: "black"
|
||||
}}
|
||||
className="finishBtn"
|
||||
onClick={() => setIsFolder(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
|
||||
></div>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<button
|
||||
onClick={() => handleAddFolder()}
|
||||
style={{
|
||||
background: themeColor()
|
||||
}}
|
||||
type="button"
|
||||
className="finishBtn"
|
||||
className="docDeleteBtn"
|
||||
>
|
||||
Add
|
||||
ADD
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
style={{
|
||||
background: "rgb(24 138 226)",
|
||||
marginLeft: "10px"
|
||||
}}
|
||||
className="docDeleteBtn"
|
||||
onClick={() => setIsFolder(false)}
|
||||
>
|
||||
CLOSE
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
</div>
|
||||
</ModalUi>
|
||||
|
||||
{isLoading.isLoad ? (
|
||||
<div
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.hrStyle{
|
||||
border-top-width: 1px !important;
|
||||
color: inherit !important;
|
||||
color: #c3bcbc !important;
|
||||
height: 0px !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
@@ -75,6 +75,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
|
||||
const res = await template.save();
|
||||
if (res) {
|
||||
const result = JSON.parse(JSON.stringify(res));
|
||||
if (onSuccess) {
|
||||
setAlert({
|
||||
type: "success",
|
||||
@@ -84,7 +85,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
setTimeout(() => {
|
||||
setIsAlert(false);
|
||||
}, 1000);
|
||||
onSuccess(res);
|
||||
onSuccess(result);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,32 +106,36 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
{isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
|
||||
<div id="createFolder">
|
||||
<h1 style={{ fontWeight: "500", fontSize: "1rem" }}>Create Folder</h1>
|
||||
<div style={{ fontSize: "15px", marginTop: "2px" }}>
|
||||
<div style={{ fontSize: "12px", marginTop: "11px" }}>
|
||||
<label className="block">
|
||||
Name<span style={{ color: "red", fontSize: 13 }}> *</span>
|
||||
Name<span style={{ color: "red", fontSize: "13px" }}> *</span>
|
||||
</label>
|
||||
<input
|
||||
style={{
|
||||
padding: "2px 3px",
|
||||
padding: "8px 11px",
|
||||
width: "100%",
|
||||
border: "1px solid #c3bcbc",
|
||||
borderRadius: "5px"
|
||||
border: "1px solid rgb(195, 188, 188)",
|
||||
borderRadius: "5px",
|
||||
outline: "none",
|
||||
fontSize: "12px"
|
||||
}}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div style={{ fontSize: "15px", marginTop: "2px" }}>
|
||||
<div style={{ fontSize: "12px", marginTop: "7px" }}>
|
||||
<label className="block">Parent Folder</label>
|
||||
<select
|
||||
value={selectedParent}
|
||||
onChange={handleOptions}
|
||||
style={{
|
||||
padding: "2px 3px",
|
||||
padding: "8px 11px",
|
||||
width: "100%",
|
||||
border: "1px solid #c3bcbc",
|
||||
borderRadius: "5px"
|
||||
border: "1px solid rgb(195, 188, 188)",
|
||||
borderRadius: "5px",
|
||||
outline: "none",
|
||||
fontSize: "12px"
|
||||
}}
|
||||
>
|
||||
<option>select</option>
|
||||
@@ -154,7 +159,8 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
|
||||
marginTop: "22px",
|
||||
outline: "none",
|
||||
border: "none",
|
||||
padding: "4px 7px"
|
||||
padding: "10px 8px",
|
||||
fontSize: "14px"
|
||||
}}
|
||||
>
|
||||
<i className="fa-solid fa-plus mr-1"></i>
|
||||
|
||||
@@ -10,7 +10,8 @@ const SelectFolder = ({
|
||||
onSuccess,
|
||||
folderCls,
|
||||
isOpenModal,
|
||||
setIsOpenMoveModal
|
||||
setIsOpenMoveModal,
|
||||
setPdfData
|
||||
}) => {
|
||||
const [clickFolder, setClickFolder] = useState("");
|
||||
// const [selectFolder, setSelectedFolder] = useState({});
|
||||
@@ -28,39 +29,14 @@ const SelectFolder = ({
|
||||
fetchFolder();
|
||||
}
|
||||
}, []);
|
||||
//fetch folder data
|
||||
const fetchFolder = async (folderPtr) => {
|
||||
setIsLoader(true);
|
||||
|
||||
// try {
|
||||
// console.log("folder",folderCls,folderPtr)
|
||||
// const FolderQuery = new Parse.Query('contracts_Document');
|
||||
// console.log("folder",FolderQuery)
|
||||
// if (folderPtr) {
|
||||
// FolderQuery.equalTo("Folder", folderPtr);
|
||||
// FolderQuery.equalTo("Type", "Folder");
|
||||
// } else {
|
||||
// FolderQuery.doesNotExist("Folder");
|
||||
// FolderQuery.equalTo("Type", "Folder");
|
||||
// }
|
||||
// console.log("newres",FolderQuery)
|
||||
// const res = await FolderQuery.count();
|
||||
// console.log("res",res)
|
||||
// // if (res) {
|
||||
// // const result = JSON.parse(JSON.stringify(res));
|
||||
// // if (result) {
|
||||
// // setFolderList(result);
|
||||
// // setIsLoader(false);
|
||||
// // }
|
||||
// // setIsLoader(false);
|
||||
// // }
|
||||
// } catch (error) {
|
||||
// setIsLoader(false);
|
||||
// }
|
||||
let url;
|
||||
const classUrl = `${localStorage.getItem("baseUrl")}classes/${folderCls}`;
|
||||
|
||||
if (folderPtr) {
|
||||
url = `${classUrl}?where={"Folder": {"__type":"Pointer","className":${folderCls},"objectId":"${folderPtr.objectId}"},"Type":"Folder"}`;
|
||||
url = `${classUrl}?where={"Folder": {"__type":"Pointer","className":"${folderCls}","objectId":"${folderPtr.objectId}"},"Type":"Folder"}`;
|
||||
} else {
|
||||
url = `${classUrl}?where={"Folder":{"$exists":false},"Type":"Folder"}`;
|
||||
}
|
||||
@@ -160,7 +136,8 @@ const SelectFolder = ({
|
||||
const handleCreate = () => {
|
||||
setIsAdd(!isAdd);
|
||||
};
|
||||
const handleAddFolder = () => {
|
||||
const handleAddFolder = (res) => {
|
||||
setPdfData((prev) => [...prev, res]);
|
||||
setFolderList([]);
|
||||
if (clickFolder && clickFolder.ObjectId) {
|
||||
fetchFolder({
|
||||
@@ -174,39 +151,7 @@ const SelectFolder = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="text-xs mt-2">
|
||||
{/* <div>
|
||||
<label className="block">
|
||||
Select Folder
|
||||
{required && <span style={{ color: "red", fontSize: 13 }}> *</span>}
|
||||
</label>
|
||||
</div>
|
||||
<div className="rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
|
||||
<div>
|
||||
<i
|
||||
className="far fa-folder-open text-[40px] text-[#33bbff]"
|
||||
style={{ fontSize: "40px" }}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
<div className="font-semibold ">
|
||||
<div className="flex items-center gap-2">
|
||||
<p>
|
||||
{selectFolder && selectFolder.Name ? selectFolder.Name : "Root"}
|
||||
</p>
|
||||
<div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
|
||||
<i
|
||||
className="fa fa-pencil"
|
||||
title="Select Folder"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-400">
|
||||
{selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<ModalUi
|
||||
id="asd"
|
||||
title={"Select Folder"}
|
||||
@@ -309,7 +254,7 @@ const SelectFolder = ({
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
padding: "0 16px"
|
||||
padding: "0px 16px 12px 16px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@@ -332,101 +277,6 @@ const SelectFolder = ({
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{/* {isOpen && (
|
||||
<div
|
||||
className={`fixed z-40 top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm bg-white rounded `}
|
||||
>
|
||||
<div className="flex justify-between items-center py-[.75rem] px-[1.25rem] bg-[#f5f5f5]">
|
||||
<div className="font-semibold text-lg text-black">
|
||||
Select Folder
|
||||
</div>
|
||||
<div
|
||||
onClick={handleCancel}
|
||||
className="px-2 py-1 border-[1px] border-[#8a8a8a] bg-white rounded cursor-pointer"
|
||||
>
|
||||
<i className="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="w-full min-w-[300px] md:min-w-[500px] px-3">
|
||||
<div className="py-2 text-[#ac4848] text-[14px] font-[500]">
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
title="Root"
|
||||
onClick={(e) => removeTabListItem(e)}
|
||||
>
|
||||
Root /{" "}
|
||||
</span>
|
||||
{tabList &&
|
||||
tabList.map((tab, i) => (
|
||||
<React.Fragment key={`${tab.objectId}-${i}`}>
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
title={tab.Name}
|
||||
onClick={(e) => removeTabListItem(e, i)}
|
||||
>
|
||||
{tab.Name}
|
||||
</span>
|
||||
{" / "}
|
||||
</React.Fragment>
|
||||
))}
|
||||
<hr />
|
||||
</div>
|
||||
<div className="mt-2 mb-3">
|
||||
{!isAdd &&
|
||||
folderList.length > 0 &&
|
||||
folderList.map((folder) => (
|
||||
<div
|
||||
key={folder.Name}
|
||||
className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer"
|
||||
onClick={() => handleSelect(folder)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<i
|
||||
className="fa fa-folder text-[#33bbff] text-[1.4rem]"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span className="font-semibold">{folder.Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{isAdd && (
|
||||
<CreateFolder
|
||||
parentFolderId={clickFolder && clickFolder.ObjectId}
|
||||
folderCls={folderCls}
|
||||
onSuccess={handleAddFolder}
|
||||
/>
|
||||
)}
|
||||
{isLoader && (
|
||||
<div className="flex justify-center">
|
||||
<i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
|
||||
<div
|
||||
className="text-[30px] cursor-pointer text-[#33bbff]"
|
||||
title="Save Here"
|
||||
onClick={handleCreate}
|
||||
>
|
||||
{isAdd ? (
|
||||
<i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
|
||||
) : (
|
||||
<i className="fa-solid fa-square-plus" aria-hidden="true"></i>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="text-[30px] cursor-pointer"
|
||||
title="Save Here"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
<i className="fas fa-save" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user