Skip to content

Commit 5229b1d

Browse files
ndahimana154bahati10
ndahimana154
authored and
bahati10
committed
Fix: Added modal (#287)
1 parent ede8fcf commit 5229b1d

File tree

4 files changed

+240
-169
lines changed

4 files changed

+240
-169
lines changed

‎src/components/DocumentPreviewButton.tsx‎

Lines changed: 82 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,88 @@
1-
import React, { useState } from "react";
1+
import React, { useState } from 'react';
2+
import ViewExternalDocumentsModal from '../pages/viewExternalDocuments';
23

34
const DocumentSelector = ({ item }) => {
4-
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
5+
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
56

6-
const toggleDropdown = () => {
7-
setIsDropdownOpen(!isDropdownOpen);
8-
};
9-
const handleDocumentOnClick = (urls: string) => {
10-
const url = `#/view-external-document?fileUrl=${encodeURIComponent(urls)}&backUrl=${encodeURIComponent("/")}&title=${encodeURIComponent("Documents Preview")}`;
11-
window.open(url, "_blank");
12-
};
13-
return (
14-
<div className="relative inline-block">
15-
<button
16-
className="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
17-
onClick={toggleDropdown}
18-
>
19-
Select Attachment
20-
</button>
7+
const toggleDropdown = () => {
8+
setIsDropdownOpen(!isDropdownOpen);
9+
};
10+
const handleDocumentOnClick = (urls: string) => {
11+
const url = `#/view-external-document?fileUrl=${encodeURIComponent(
12+
urls
13+
)}&backUrl=${encodeURIComponent('/')}&title=${encodeURIComponent(
14+
'Documents Preview'
15+
)}`;
16+
window.open(url, '_blank');
17+
};
18+
const [show, setShow] = useState(false);
19+
const [fileUrl, setFileUrl] = useState('');
20+
const viewExternalDocumentsModal = (url: any) => {
21+
setFileUrl(url);
22+
setShow(true);
23+
};
24+
const onClose = () => {
25+
setShow(false);
26+
};
27+
return (
28+
<div className="relative inline-block">
29+
<button
30+
className="bg-blue-500 text-white py-2 px-4 rounded-lg font-semibold hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
31+
onClick={toggleDropdown}
32+
>
33+
Select Attachment
34+
</button>
2135

22-
{isDropdownOpen && (
23-
<ul className="dark:text-white dark:bg-dark-tertiary absolute mt-2 border border-gray-300 rounded-lg shadow-lg w-48 z-50">
24-
{item?.idDocumentUrl && (
25-
<li>
26-
<button
27-
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
28-
onClick={() => {
29-
handleDocumentOnClick(item.idDocumentUrl);
30-
setIsDropdownOpen(false);
31-
}}
32-
>
33-
ID Card
34-
</button>
35-
</li>
36-
)}
37-
{item?.resumeUrl && (
38-
<li>
39-
<button
40-
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
41-
onClick={() => {
42-
handleDocumentOnClick(item.resumeUrl);
43-
setIsDropdownOpen(false);
44-
}}
45-
>
46-
Resume
47-
</button>
48-
</li>
49-
)}
50-
{item?.coverLetterUrl && (
51-
<li>
52-
<button
53-
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
54-
onClick={() => {
55-
handleDocumentOnClick(item.coverLetterUrl);
56-
setIsDropdownOpen(false);
57-
}}
58-
>
59-
Cover Letter
60-
</button>
61-
</li>
62-
)}
63-
</ul>
64-
)}
65-
</div>
66-
);
36+
{isDropdownOpen && (
37+
<ul className="dark:text-white dark:bg-dark-tertiary absolute mt-2 border border-gray-300 rounded-lg shadow-lg w-48 z-50">
38+
{item?.idDocumentUrl && (
39+
<li>
40+
<button
41+
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
42+
onClick={() => {
43+
viewExternalDocumentsModal(item.idDocumentUrl);
44+
setIsDropdownOpen(false);
45+
}}
46+
>
47+
ID Card
48+
</button>
49+
</li>
50+
)}
51+
{item?.resumeUrl && (
52+
<li>
53+
<button
54+
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
55+
onClick={() => {
56+
viewExternalDocumentsModal(item.resumeUrl);
57+
setIsDropdownOpen(false);
58+
}}
59+
>
60+
Resume
61+
</button>
62+
</li>
63+
)}
64+
{item?.coverLetterUrl && (
65+
<li>
66+
<button
67+
className="w-full text-left px-4 py-2 text-white hover:bg-gray-100 hover:text-blue-500 focus:outline-none"
68+
onClick={() => {
69+
viewExternalDocumentsModal(item.coverLetterUrl);
70+
setIsDropdownOpen(false);
71+
}}
72+
>
73+
Cover Letter
74+
</button>
75+
</li>
76+
)}
77+
</ul>
78+
)}
79+
<ViewExternalDocumentsModal
80+
show={show}
81+
onClose={onClose}
82+
fileUrl={fileUrl}
83+
/>
84+
</div>
85+
);
6786
};
6887

69-
export default DocumentSelector;
88+
export default DocumentSelector;

‎src/pages/ApplicationCycle/myApplication.tsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,23 @@ import {
99
getCyclesStages,
1010
} from "../../redux/actions/applications";
1111
import { Link } from "react-router-dom";
12+
import ViewExternalDocumentsModal from "../../pages/viewExternalDocuments";
1213

1314
export const MyApplication = () => {
1415
const dispatch = useAppDispatch();
1516
const [isLoading, setIsLoading] = useState(true);
1617
const [application, setApplication] = useState<any>(null);
1718
const [attributes, setAttributes] = useState<any>(null);
1819
const [stages, setStages] = useState<any>(null);
19-
20+
const [show, setShow] = useState(false);
21+
const [fileUrl, setFileUrl] = useState("");
22+
const viewExternalDocumentsModal = (url: any) => {
23+
setFileUrl(url);
24+
setShow(true);
25+
};
26+
const onClose = () => {
27+
setShow(false);
28+
};
2029
useEffect(() => {
2130
const fetchApplications = async () => {
2231
try {
@@ -215,56 +224,47 @@ export const MyApplication = () => {
215224
<strong className="text-gray-700 dark:text-gray-200">
216225
ID Card
217226
</strong>
218-
<Link
219-
to={`/view-external-document?fileUrl=${encodeURIComponent(
220-
application.idDocumentUrl
221-
)}&backUrl=${encodeURIComponent(
222-
"/"
223-
)}&title=${encodeURIComponent("ID Document")}`}
224-
target="_blank"
227+
<button
228+
onClick={() =>
229+
viewExternalDocumentsModal(application.idDocumentUrl)
230+
}
225231
className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
226232
>
227233
<AiFillFilePdf size={20} className="text-red-600" />
228234
<span>View ID Card</span>
229-
</Link>
235+
</button>
230236
</li>
231237
)}
232238
{application?.resumeUrl && (
233239
<li className="flex flex-col">
234240
<strong className="text-gray-700 dark:text-gray-200">
235241
Resume
236242
</strong>
237-
<Link
238-
to={`/view-external-document?fileUrl=${encodeURIComponent(
239-
application.resumeUrl
240-
)}&backUrl=${encodeURIComponent(
241-
"/"
242-
)}&title=${encodeURIComponent("Resume Document")}`}
243-
target="_blank"
243+
<button
244+
onClick={() =>
245+
viewExternalDocumentsModal(application.resumeUrl)
246+
}
244247
className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
245248
>
246249
<AiFillFilePdf size={20} className="text-red-600" />
247250
<span>View Resume</span>
248-
</Link>
251+
</button>
249252
</li>
250253
)}
251254
{application?.coverLetterUrl && (
252255
<li className="flex flex-col">
253256
<strong className="text-gray-700 dark:text-gray-200">
254257
Cover Letter
255258
</strong>
256-
<Link
257-
to={`/view-external-document?fileUrl=${encodeURIComponent(
258-
application.coverLetterUrl
259-
)}&backUrl=${encodeURIComponent(
260-
"/"
261-
)}&title=${encodeURIComponent("Cover letter Document")}`}
262-
target="_blank"
259+
<button
260+
onClick={() =>
261+
viewExternalDocumentsModal(application.coverLetterUrl)
262+
}
263263
className="flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:underline mt-1"
264264
>
265265
<AiFillFilePdf size={20} className="text-red-600" />
266-
<span>View Cover Letter</span>
267-
</Link>
266+
<span>View Cover letter</span>
267+
</button>
268268
</li>
269269
)}
270270
</ul>
@@ -464,6 +464,11 @@ export const MyApplication = () => {
464464
</ul>
465465
</div>
466466
</section>
467+
<ViewExternalDocumentsModal
468+
show={show}
469+
onClose={onClose}
470+
fileUrl={fileUrl}
471+
/>
467472
</div>
468473
</div>
469474
</>

0 commit comments

Comments
 (0)