Skip to content

Commit 2ed987f

Browse files
raktima-opensignlabsraktima-opensignlabs
committed
feat: implement document delete and move funationality in openSign-drive
1 parent 7aaa187 commit 2ed987f

File tree

8 files changed

+506
-237
lines changed

8 files changed

+506
-237
lines changed

‎microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js‎

Lines changed: 196 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { getHostUrl } from "../../../utils/Utils";
1010
import { useNavigate } from "react-router-dom";
1111
import Table from "react-bootstrap/Table";
1212
import * as HoverCard from "@radix-ui/react-hover-card";
13+
import SelectFolder from "../../../premitives/SelectFolder";
1314

1415
function PdfFileComponent({
1516
pdfData,
@@ -22,7 +23,9 @@ function PdfFileComponent({
2223
const [rename, setRename] = useState("");
2324
const [renameValue, setRenameValue] = useState("");
2425
const inputRef = useRef(null);
25-
26+
const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
27+
const [selectDoc, setSelectDoc] = useState();
28+
const contextMenu = ["Download", "Rename", "Delete", "Move"];
2629
const navigate = useNavigate();
2730

2831
//to focus input box on press rename to change doc name
@@ -212,19 +215,63 @@ function PdfFileComponent({
212215
};
213216

214217
const handleMenuItemClick = (selectType, data) => {
215-
// console.log("data",data)
216-
if (selectType === "Download") {
217-
// console.log("download")
218-
const pdfName = data && data.Name;
219-
const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
220-
saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
221-
} else if (selectType === "Rename") {
222-
// console.log("rename")
223-
setRenameValue(data.Name);
224-
setRename(data.objectId);
218+
switch (selectType) {
219+
case "Download":
220+
const pdfName = data && data.Name;
221+
const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
222+
saveAs(
223+
pdfUrl,
224+
`${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`
225+
);
226+
break;
227+
case "Rename":
228+
setRenameValue(data.Name);
229+
setRename(data.objectId);
230+
break;
231+
case "Delete":
232+
handleDeleteDocument(data);
233+
break;
234+
235+
case "Move":
236+
handleMoveDocument(data);
237+
break;
225238
}
226239
};
227240

241+
//function for delete document
242+
const handleDeleteDocument = async (docData) => {
243+
const docId = docData.objectId;
244+
const data = {
245+
IsArchive: true
246+
};
247+
248+
await axios
249+
.put(
250+
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
251+
"_appName"
252+
)}_Document/${docId}`,
253+
data,
254+
{
255+
headers: {
256+
"Content-Type": "application/json",
257+
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
258+
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
259+
}
260+
}
261+
)
262+
.then((result) => {
263+
const res = result.data;
264+
const updatedData = pdfData.filter((x) => x.objectId !== docId);
265+
setPdfData(updatedData);
266+
})
267+
.catch((err) => {
268+
console.log("err", err);
269+
});
270+
};
271+
const handleMoveDocument = async (docData) => {
272+
setIsOpenMoveModal(true);
273+
setSelectDoc(docData);
274+
};
228275
const sanitizeFileName = (pdfName) => {
229276
// Replace spaces with underscore
230277
return pdfName.replace(/ /g, "_");
@@ -236,6 +283,13 @@ function PdfFileComponent({
236283
}
237284
};
238285

286+
const signersName = () => {
287+
const getSignersName = signerExist.map((data) => data.Name);
288+
const signerName = getSignersName.join(",");
289+
290+
return <span className="statusSpan">{signerName} </span>;
291+
};
292+
239293
return listType === "table" ? (
240294
data.Type === "Folder" ? (
241295
<tr onClick={() => handleOnclikFolder(data)}>
@@ -355,14 +409,6 @@ function PdfFileComponent({
355409
sideOffset={5}
356410
align="end"
357411
>
358-
{/* <ContextMenu.Item
359-
onClick={() => handleMenuItemClick("Download", data)}
360-
onSelect={(e) => console.log("event", e)}
361-
className="ContextMenuItem"
362-
>
363-
Download
364-
</ContextMenu.Item> */}
365-
366412
<ContextMenu.Item
367413
onClick={() => handleMenuItemClick("Rename", data)}
368414
className="ContextMenuItem"
@@ -428,14 +474,6 @@ function PdfFileComponent({
428474
sideOffset={5}
429475
align="end"
430476
>
431-
{/* <ContextMenu.Item
432-
onClick={() => handleMenuItemClick("Download", data)}
433-
onSelect={(e) => console.log("event", e)}
434-
className="ContextMenuItem"
435-
>
436-
Download
437-
</ContextMenu.Item> */}
438-
439477
<ContextMenu.Item
440478
onClick={() => handleMenuItemClick("Rename", data)}
441479
className="ContextMenuItem"
@@ -447,7 +485,7 @@ function PdfFileComponent({
447485
</ContextMenu.Root>
448486
</div>
449487
) : (
450-
<HoverCard.Root>
488+
<HoverCard.Root openDelay={0} closeDelay={100}>
451489
<HoverCard.Trigger asChild>
452490
<div>
453491
<ContextMenu.Root>
@@ -518,9 +556,22 @@ function PdfFileComponent({
518556
sideOffset={5}
519557
align="end"
520558
>
521-
<ContextMenu.Item
559+
{contextMenu.map((menuType, ind) => {
560+
return (
561+
<ContextMenu.Item
562+
key={ind}
563+
onClick={() => handleMenuItemClick(menuType, data)}
564+
// onSelect={(e) => console.log("event", e)}
565+
className="ContextMenuItem"
566+
>
567+
{menuType}
568+
</ContextMenu.Item>
569+
);
570+
})}
571+
572+
{/* <ContextMenu.Item
522573
onClick={() => handleMenuItemClick("Download", data)}
523-
onSelect={(e) => console.log("event", e)}
574+
// onSelect={(e) => console.log("event", e)}
524575
className="ContextMenuItem"
525576
>
526577
Download
@@ -532,6 +583,18 @@ function PdfFileComponent({
532583
>
533584
Rename
534585
</ContextMenu.Item>
586+
<ContextMenu.Item
587+
onClick={() => handleMenuItemClick("Delete", data)}
588+
className="ContextMenuItem"
589+
>
590+
Delete
591+
</ContextMenu.Item>
592+
<ContextMenu.Item
593+
onClick={() => handleMenuItemClick("Move", data)}
594+
className="ContextMenuItem"
595+
>
596+
Move
597+
</ContextMenu.Item> */}
535598
</ContextMenu.Content>
536599
</ContextMenu.Portal>
537600
</ContextMenu.Root>
@@ -554,13 +617,7 @@ function PdfFileComponent({
554617
{signerExist && (
555618
<>
556619
<strong style={{ fontSize: "13px" }}>Signers: </strong>
557-
{signerExist.map((data, key) => {
558-
return (
559-
<React.Fragment key={key}>
560-
<span className="statusSpan">{data.Name}, </span>
561-
</React.Fragment>
562-
);
563-
})}
620+
{signersName()}
564621
</>
565622
)}
566623
<HoverCard.Arrow className="HoverCardArrow" />
@@ -569,41 +626,113 @@ function PdfFileComponent({
569626
</HoverCard.Root>
570627
);
571628
};
572-
//component to handle type of document and render according to type
573629

574-
return isList ? (
575-
<div className="container" style={{ overflowX: "auto" }}>
576-
<Table striped bordered hover>
577-
<thead>
578-
<tr>
579-
<th>Name</th>
580-
<th>Created Date</th>
581-
<th>Type</th>
582-
<th>Status</th>
583-
<th>Action</th>
584-
</tr>
585-
</thead>
586-
<tbody>
630+
//function for move document from one folder to another folder
631+
const handleMoveFolder = async (selectFolderData) => {
632+
const selecFolderId = selectDoc?.Folder?.objectId;
633+
const moveFolderId = selectFolderData?.ObjectId;
634+
let updateDocId = selectDoc?.objectId;
635+
let updateData;
636+
const checkExist = moveFolderId
637+
? selecFolderId === moveFolderId
638+
? true
639+
: false
640+
: false;
641+
642+
if (!checkExist) {
643+
if (moveFolderId) {
644+
updateData = {
645+
Folder: {
646+
__type: "Pointer",
647+
className: `${localStorage.getItem("_appName")}_Document`,
648+
objectId: moveFolderId
649+
}
650+
};
651+
} else {
652+
updateData = {
653+
Folder: undefined
654+
};
655+
}
656+
657+
await axios
658+
.put(
659+
`${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
660+
"_appName"
661+
)}_Document/${updateDocId}`,
662+
updateData,
663+
{
664+
headers: {
665+
"Content-Type": "application/json",
666+
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
667+
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
668+
}
669+
}
670+
)
671+
672+
.then((Listdata) => {
673+
// console.log("Listdata ", Listdata);
674+
const json = Listdata.data;
675+
676+
const updatedData = pdfData.filter((x) => x.objectId !== updateDocId);
677+
setPdfData(updatedData);
678+
})
679+
.catch((err) => {
680+
console.log("err", err);
681+
});
682+
683+
setIsOpenMoveModal(false);
684+
} else {
685+
alert("folder already exist!");
686+
setIsOpenMoveModal(false);
687+
}
688+
};
689+
690+
//component to handle type of document and render according to type
691+
return (
692+
<>
693+
{isList ? (
694+
<div className="container" style={{ overflowX: "auto" }}>
695+
<Table striped bordered hover>
696+
<thead>
697+
<tr>
698+
<th>Name</th>
699+
<th>Created Date</th>
700+
<th>Type</th>
701+
<th>Status</th>
702+
<th>Action</th>
703+
</tr>
704+
</thead>
705+
<tbody>
706+
{pdfData.map((data, ind) => {
707+
return (
708+
<React.Fragment key={ind}>
709+
{handleFolderData(data, ind, "table")}
710+
</React.Fragment>
711+
);
712+
})}
713+
</tbody>
714+
</Table>
715+
</div>
716+
) : (
717+
<div className="pdfContainer">
587718
{pdfData.map((data, ind) => {
588719
return (
589-
<React.Fragment key={ind}>
590-
{handleFolderData(data, ind, "table")}
591-
</React.Fragment>
720+
<div className="box" key={ind}>
721+
{handleFolderData(data, ind, "list")}
722+
</div>
592723
);
593724
})}
594-
</tbody>
595-
</Table>
596-
</div>
597-
) : (
598-
<div className="pdfContainer">
599-
{pdfData.map((data, ind) => {
600-
return (
601-
<div className="box" key={ind}>
602-
{handleFolderData(data, ind, "list")}
603-
</div>
604-
);
605-
})}
606-
</div>
725+
</div>
726+
)}
727+
{isOpenMoveModal && (
728+
<SelectFolder
729+
onSuccess={handleMoveFolder}
730+
isOpenModal={isOpenMoveModal}
731+
folderCls={"contracts_Document"}
732+
setIsOpenMoveModal={setIsOpenMoveModal}
733+
/>
734+
)}
735+
</>
607736
);
608737
}
609738

‎microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
overflow: hidden;
1313
padding: 5px;
1414
box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
15+
z-index: 99;
1516
}
1617

1718
.ContextMenuItem,
@@ -502,6 +503,7 @@ a {
502503
}
503504

504505
}
506+
505507
@media (min-width: 310px) and (max-width:550px) {
506508

507509
.pdfContainer {

0 commit comments

Comments
 (0)