Skip to content

Commit 12a6a84

Browse files
nxglabsnxglabs
authored
Merge pull request #535 from OpenSignLabs/premium_alert
2 parents d9fd2a5 + 1f350fc commit 12a6a84

File tree

2 files changed

+239
-4
lines changed

2 files changed

+239
-4
lines changed

‎apps/OpenSign/src/components/opensigndrive/DriveBody.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { saveAs } from "file-saver";
88
import { useNavigate } from "react-router-dom";
99
import Table from "react-bootstrap/Table";
1010
import * as HoverCard from "@radix-ui/react-hover-card";
11-
import SelectFolder from "../shared/fields/SelectFolder"; //check this one
1211
import ModalUi from "../../primitives/ModalUi";
1312
import { themeColor } from "../../constant/const";
13+
import FolderModal from "../shared/fields/FolderModal";
1414

1515
function DriveBody(props) {
1616
const [rename, setRename] = useState("");
@@ -214,8 +214,8 @@ function DriveBody(props) {
214214
? true
215215
: false
216216
: selecFolderId
217-
? false
218-
: true;
217+
? false
218+
: true;
219219
if (!checkExist) {
220220
if (moveFolderId) {
221221
updateData = {
@@ -594,8 +594,9 @@ function DriveBody(props) {
594594
})}
595595
</div>
596596
)}
597+
597598
{isOpenMoveModal && (
598-
<SelectFolder
599+
<FolderModal
599600
onSuccess={handleMoveFolder}
600601
isOpenModal={isOpenMoveModal}
601602
folderCls={"contracts_Document"}

‎apps/OpenSign/src/components/shared/fields/FolderModal.js‎

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
import React, { useEffect, useState } from "react";
2+
import Parse from "parse";
3+
import CreateFolder from "./CreateFolder";
4+
import ModalUi from "../../../primitives/ModalUi";
5+
6+
const FolderModal = (props) => {
7+
const [clickFolder, setClickFolder] = useState("");
8+
const [folderList, setFolderList] = useState([]);
9+
const [tabList, setTabList] = useState([]);
10+
const [isLoader, setIsLoader] = useState(false);
11+
const [isAdd, setIsAdd] = useState(false);
12+
// below useEffect is called when user open popup
13+
useEffect(() => {
14+
if (props.isOpenModal) {
15+
fetchFolder();
16+
}
17+
// eslint-disable-next-line
18+
}, [props.isOpenModal]);
19+
20+
// `fetchFolder` is used to fetch of folder list created by user on basis of folderPtr or without folderPtr
21+
const fetchFolder = async (folderPtr) => {
22+
setIsLoader(true);
23+
try {
24+
const FolderQuery = new Parse.Query(props.folderCls);
25+
if (folderPtr) {
26+
FolderQuery.equalTo("Folder", folderPtr);
27+
FolderQuery.equalTo("Type", "Folder");
28+
} else {
29+
FolderQuery.doesNotExist("Folder");
30+
FolderQuery.equalTo("Type", "Folder");
31+
}
32+
33+
const res = await FolderQuery.find();
34+
if (res) {
35+
const result = JSON.parse(JSON.stringify(res));
36+
if (result) {
37+
setFolderList(result);
38+
setIsLoader(false);
39+
}
40+
setIsLoader(false);
41+
}
42+
} catch (error) {
43+
setIsLoader(false);
44+
}
45+
};
46+
47+
// `handleSelect` is used to save pointer of folder selected by user and it's path in state
48+
const handleSelect = (item) => {
49+
setFolderList([]);
50+
setClickFolder({ ObjectId: item.objectId, Name: item.Name });
51+
if (tabList.length > 0) {
52+
const tab = tabList.some((x) => x.objectId === item.objectId);
53+
if (!tab) {
54+
setTabList((tabs) => [...tabs, item]);
55+
const folderPtr = {
56+
__type: "Pointer",
57+
className: props.folderCls,
58+
objectId: item.objectId
59+
};
60+
fetchFolder(folderPtr);
61+
}
62+
} else {
63+
setTabList((tabs) => [...tabs, item]);
64+
const folderPtr = {
65+
__type: "Pointer",
66+
className: props.folderCls,
67+
objectId: item.objectId
68+
};
69+
70+
fetchFolder(folderPtr);
71+
}
72+
};
73+
74+
// `handleSubmit` is used to pass folderPtr to parent component
75+
const handleSubmit = () => {
76+
let url = "OpenSign™ Drive";
77+
tabList.forEach((t) => {
78+
url = url + " / " + t.Name;
79+
});
80+
if (props.onSuccess) {
81+
props.onSuccess(clickFolder);
82+
}
83+
// SetIsOpen(false);
84+
props.setIsOpenMoveModal(false);
85+
};
86+
87+
// `handleCancel` is used to clear list of folder, close popup and folderUrl
88+
const handleCancel = () => {
89+
// SetIsOpen(false);
90+
props.setIsOpenMoveModal(false);
91+
setClickFolder({});
92+
setFolderList([]);
93+
setTabList([]);
94+
};
95+
96+
// `handleCancel` is call when user click on folder name from path/tab in popup
97+
const removeTabListItem = async (e, i) => {
98+
e.preventDefault();
99+
// setEditable(false);
100+
if (!isAdd) {
101+
setIsLoader(true);
102+
let folderPtr;
103+
if (i) {
104+
setFolderList([]);
105+
let list = tabList.filter((itm, j) => {
106+
if (j <= i) {
107+
return itm;
108+
}
109+
});
110+
let _len = list.length - 1;
111+
folderPtr = {
112+
__type: "Pointer",
113+
className: props.folderCls,
114+
objectId: list[_len].objectId
115+
};
116+
setTabList(list);
117+
} else {
118+
setClickFolder({});
119+
setFolderList([]);
120+
setTabList([]);
121+
}
122+
fetchFolder(folderPtr);
123+
}
124+
};
125+
// `handleCreate` is used to open folder creation form in popup
126+
const handleCreate = () => {
127+
setIsAdd(!isAdd);
128+
};
129+
// `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
130+
const handleAddFolder = (newFolder) => {
131+
props.setPdfData((prev) => [...prev, newFolder?.toJSON()]);
132+
if (clickFolder && clickFolder.ObjectId) {
133+
fetchFolder({
134+
__type: "Pointer",
135+
className: props.folderCls,
136+
objectId: clickFolder.ObjectId
137+
});
138+
} else {
139+
fetchFolder();
140+
}
141+
handleCreate();
142+
};
143+
return (
144+
<div className="text-xs mt-2 ">
145+
<ModalUi
146+
title={"Select Folder"}
147+
isOpen={props.isOpenModal}
148+
handleClose={handleCancel}
149+
>
150+
<div className="w-full min-w-[300px] md:min-w-[500px] max-w-[500px] px-3">
151+
<div className="py-2 text-[#ac4848] text-[14px] font-[500]">
152+
<span
153+
className="cursor-pointer"
154+
title="OpenSign™ Drive"
155+
onClick={(e) => removeTabListItem(e)}
156+
>
157+
OpenSign™ Drive /{" "}
158+
</span>
159+
{tabList &&
160+
tabList.map((tab, i) => (
161+
<React.Fragment key={`${tab.objectId}-${i}`}>
162+
<span
163+
className="cursor-pointer"
164+
title={tab.Name}
165+
onClick={(e) => removeTabListItem(e, i)}
166+
>
167+
{tab.Name}
168+
</span>
169+
{" / "}
170+
</React.Fragment>
171+
))}
172+
<hr />
173+
</div>
174+
<div className="mt-2 mb-3">
175+
<div className="max-h-[210px] overflow-auto">
176+
{!isAdd &&
177+
folderList.length > 0 &&
178+
folderList.map((folder) => (
179+
<div
180+
key={folder.Name}
181+
className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
182+
onClick={() => handleSelect(folder)}
183+
>
184+
<div className="flex items-center gap-2">
185+
<i
186+
className="fa fa-folder text-[#33bbff] text-[1.4rem]"
187+
aria-hidden="true"
188+
></i>
189+
<span className="font-semibold">{folder.Name}</span>
190+
</div>
191+
</div>
192+
))}
193+
</div>
194+
{isAdd && (
195+
<CreateFolder
196+
parentFolderId={clickFolder && clickFolder.ObjectId}
197+
folderCls={props.folderCls}
198+
onSuccess={handleAddFolder}
199+
/>
200+
)}
201+
{isLoader && (
202+
<div className="flex justify-center">
203+
<i className="fa-solid fa-spinner fa-spin-pulse text-[30px]"></i>
204+
</div>
205+
)}
206+
</div>
207+
</div>
208+
<hr />
209+
<div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
210+
<div
211+
className="text-[30px] cursor-pointer text-[#32a3ac]"
212+
title="Save Here"
213+
onClick={handleCreate}
214+
>
215+
{isAdd ? (
216+
<i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
217+
) : (
218+
<i className="fa-solid fa-square-plus" aria-hidden="true"></i>
219+
)}
220+
</div>
221+
<div
222+
className="text-[30px] cursor-pointer"
223+
title="Save Here"
224+
onClick={handleSubmit}
225+
>
226+
<i className="fas fa-save" aria-hidden="true"></i>
227+
</div>
228+
</div>
229+
</ModalUi>
230+
</div>
231+
);
232+
};
233+
234+
export default FolderModal;

0 commit comments

Comments
 (0)