Skip to content

Commit 6d28181

Browse files
RuoxiZhang08RuoxiZhang08
committed
PODCAT-1686: Change link label for pdf download and open consolidated pdf in browser pdf viewer
1 parent 365cdca commit 6d28181

File tree

3 files changed

+90
-87
lines changed

3 files changed

+90
-87
lines changed

‎public/CCDC_Release_Notes.pdf‎

1.26 MB
Binary file not shown.

‎src/assets/img/ReleaseNoteDownloadIcon.svg‎

Lines changed: 2 additions & 5 deletions
Loading

‎src/pages/siteUpdatePageNew/SiteUpdateResult/SiteUpdateResult.js‎

Lines changed: 88 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import styled from 'styled-components';
33
import PropTypes from 'prop-types';
44
import Collapse from 'react-bootstrap/Collapse';
55
import ReactHtmlParser from "html-react-parser";
6-
import html2pdf from "html2pdf.js";
6+
// import html2pdf from "html2pdf.js";
77
import { OverlayTrigger, Popover, Spinner } from 'react-bootstrap';
8-
import NCILogoExport from "../../../assets/img/NCI_Logo.png";
8+
// import NCILogoExport from "../../../assets/img/NCI_Logo.png";
99
import externalIcon from "../../../assets/img/resource-00a272.svg";
1010
import ClinicalTrialsIcon from '../../../assets/img/ClinicalTrials.icon.svg';
1111
import GenomicsIcon from '../../../assets/img/Genomics.icon.svg';
@@ -214,8 +214,10 @@ const SiteUpdateExport = styled.div`
214214
z-index: 9;
215215
216216
.spanText {
217-
padding-right: 15px;
217+
padding-right: 8px;
218218
display: flex;
219+
white-space: nowrap;
220+
align-items: center;
219221
}
220222
221223
.buttonStyle {
@@ -225,7 +227,7 @@ const SiteUpdateExport = styled.div`
225227
font-weight: bold;
226228
text-align: right;
227229
color: white;
228-
padding: 10px 0px 10px 200px;
230+
padding: 10px 0px 10px 180px;
229231
margin-top: -3px;
230232
text-transform: uppercase;
231233
display: flex;
@@ -249,7 +251,7 @@ const SiteUpdateExport = styled.div`
249251
border-bottom: 35px solid #004187;
250252
border-left: 35px solid transparent;
251253
height: 0;
252-
width: 159px;
254+
width: 142px;
253255
}
254256
`;
255257

@@ -453,83 +455,87 @@ const SiteUpdateResult = ({
453455
f();
454456
}, [isFetching]);
455457

456-
const handleExport = (idx) => {
457-
const img = document.createElement("img");
458-
img.src = NCILogoExport;
459-
img.width = '1';
460-
const element = document.getElementById(`${idx}_desc`);
461-
const elementClone = element.cloneNode(true);
462-
const titleDiv = document.getElementById(`${idx}_title`);
463-
const dateDiv = document.getElementById(`${idx}_date`);
464-
const newDiv = document.createElement("div");
465-
const newDivTitle = document.createElement("div");
466-
newDivTitle.style = "display: flex;margin-bottom: 15px;";
467-
const titleSpan = document.createElement('span');
468-
titleSpan.style = "color: #004187;font-family: Inter;font-size: 28px;font-weight:600;";
469-
titleSpan.appendChild(document.createTextNode("Site Update Release Notes"));
470-
newDivTitle.appendChild(titleSpan);
471-
const newDivUpdate = document.createElement("div");
472-
newDivUpdate.style = "display: flex;";
473-
const updateSpan = document.createElement('span');
474-
updateSpan.style = "color: #567aac;font-family: Inter;font-size: 14px;line-height: 25px;";
475-
updateSpan.appendChild(document.createTextNode("UPDATE TITLE:"));
476-
const updateSpanValue = document.createElement('span');
477-
updateSpanValue.style = "margin-left: 45px;color: #004187;font-family: Inter;font-size: 16px;font-weight:600;line-height: 25px;";
478-
updateSpanValue.appendChild(document.createTextNode(titleDiv.innerText));
479-
newDivUpdate.appendChild(updateSpan);
480-
newDivUpdate.appendChild(updateSpanValue);
481-
const newDivDate = document.createElement("div");
482-
newDivDate.style = "display: flex;";
483-
const dateSpan = document.createElement('span');
484-
dateSpan.style = "color: #567aac;font-family: Inter;font-size: 14px;line-height: 25px;";
485-
dateSpan.appendChild(document.createTextNode("DATE OF RELEASE:"));
486-
const dateSpanValue = document.createElement('span');
487-
dateSpanValue.style = "margin-left: 20px;color: #004187;font-family: Inter;font-size: 16px;font-weight:600;line-height: 25px;";
488-
dateSpanValue.appendChild(document.createTextNode(dateDiv.innerText));
489-
newDivDate.appendChild(dateSpan);
490-
newDivDate.appendChild(dateSpanValue);
491-
const breakline = document.createElement("HR");
492-
breakline.style = "height: 1px; background-color: #3b6697; margin-bottom: 40px;";
493-
newDiv.appendChild(newDivTitle);
494-
newDiv.appendChild(newDivUpdate);
495-
newDiv.appendChild(newDivDate);
496-
newDiv.appendChild(breakline);
497-
newDiv.appendChild(elementClone);
498-
const opt = {
499-
margin: [35, 15, 20, 15],
500-
filename: "siteupdate_export.pdf",
501-
image: {type: 'jpeg', quality: 1},
502-
html2canvas: {dpi: 72, scale: 4, letterRendering: true},
503-
jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'}
504-
};
505-
506-
html2pdf().from(newDiv).set(opt).toContainer()
507-
.toCanvas()
508-
.toPdf()
509-
.get('pdf')
510-
.then((pdf) => {
511-
const totalPages = pdf.internal.getNumberOfPages();
512-
for (let i = 1; i <= totalPages; i += 1) {
513-
pdf.setPage(i);
514-
pdf.addImage(img, 'PNG', 13, 7, 120, 15);
515-
pdf.setDrawColor("#606061");
516-
pdf.setLineWidth(1.0);
517-
pdf.line(15, 27, 195, 27);
518-
pdf.setDrawColor("#3b6697");
519-
pdf.setLineWidth(0.2);
520-
pdf.line(15, 280, 195, 280);
521-
pdf.setFontSize(8);
522-
pdf.setFont(pdf.getFont().fontName, "normal");
523-
pdf.setTextColor("#000000");
524-
pdf.text('U.S. Department of Health and Human Services | National Institutes of Health | National Cancer Institute', 35,
525-
pdf.internal.pageSize.getHeight() / 1.04);
526-
pdf.setFont(pdf.getFont().fontName, "bold");
527-
pdf.text(`Page ${i} of ${totalPages}`, 180, pdf.internal.pageSize.getHeight() / 1.04);
528-
}
529-
})
530-
.save();
458+
const handleViewPDF = () => {
459+
window.open('/CCDC_Release_Notes.pdf', '_blank');
531460
};
532461

462+
// const handleExport = (idx) => {
463+
// const img = document.createElement("img");
464+
// img.src = NCILogoExport;
465+
// img.width = '1';
466+
// const element = document.getElementById(`${idx}_desc`);
467+
// const elementClone = element.cloneNode(true);
468+
// const titleDiv = document.getElementById(`${idx}_title`);
469+
// const dateDiv = document.getElementById(`${idx}_date`);
470+
// const newDiv = document.createElement("div");
471+
// const newDivTitle = document.createElement("div");
472+
// newDivTitle.style = "display: flex;margin-bottom: 15px;";
473+
// const titleSpan = document.createElement('span');
474+
// titleSpan.style = "color: #004187;font-family: Inter;font-size: 28px;font-weight:600;";
475+
// titleSpan.appendChild(document.createTextNode("Site Update Release Notes"));
476+
// newDivTitle.appendChild(titleSpan);
477+
// const newDivUpdate = document.createElement("div");
478+
// newDivUpdate.style = "display: flex;";
479+
// const updateSpan = document.createElement('span');
480+
// updateSpan.style = "color: #567aac;font-family: Inter;font-size: 14px;line-height: 25px;";
481+
// updateSpan.appendChild(document.createTextNode("UPDATE TITLE:"));
482+
// const updateSpanValue = document.createElement('span');
483+
// updateSpanValue.style = "margin-left: 45px;color: #004187;font-family: Inter;font-size: 16px;font-weight:600;line-height: 25px;";
484+
// updateSpanValue.appendChild(document.createTextNode(titleDiv.innerText));
485+
// newDivUpdate.appendChild(updateSpan);
486+
// newDivUpdate.appendChild(updateSpanValue);
487+
// const newDivDate = document.createElement("div");
488+
// newDivDate.style = "display: flex;";
489+
// const dateSpan = document.createElement('span');
490+
// dateSpan.style = "color: #567aac;font-family: Inter;font-size: 14px;line-height: 25px;";
491+
// dateSpan.appendChild(document.createTextNode("DATE OF RELEASE:"));
492+
// const dateSpanValue = document.createElement('span');
493+
// dateSpanValue.style = "margin-left: 20px;color: #004187;font-family: Inter;font-size: 16px;font-weight:600;line-height: 25px;";
494+
// dateSpanValue.appendChild(document.createTextNode(dateDiv.innerText));
495+
// newDivDate.appendChild(dateSpan);
496+
// newDivDate.appendChild(dateSpanValue);
497+
// const breakline = document.createElement("HR");
498+
// breakline.style = "height: 1px; background-color: #3b6697; margin-bottom: 40px;";
499+
// newDiv.appendChild(newDivTitle);
500+
// newDiv.appendChild(newDivUpdate);
501+
// newDiv.appendChild(newDivDate);
502+
// newDiv.appendChild(breakline);
503+
// newDiv.appendChild(elementClone);
504+
// const opt = {
505+
// margin: [35, 15, 20, 15],
506+
// filename: "siteupdate_export.pdf",
507+
// image: {type: 'jpeg', quality: 1},
508+
// html2canvas: {dpi: 72, scale: 4, letterRendering: true},
509+
// jsPDF: {unit: 'mm', format: 'a4', orientation: 'portrait'}
510+
// };
511+
512+
// html2pdf().from(newDiv).set(opt).toContainer()
513+
// .toCanvas()
514+
// .toPdf()
515+
// .get('pdf')
516+
// .then((pdf) => {
517+
// const totalPages = pdf.internal.getNumberOfPages();
518+
// for (let i = 1; i <= totalPages; i += 1) {
519+
// pdf.setPage(i);
520+
// pdf.addImage(img, 'PNG', 13, 7, 120, 15);
521+
// pdf.setDrawColor("#606061");
522+
// pdf.setLineWidth(1.0);
523+
// pdf.line(15, 27, 195, 27);
524+
// pdf.setDrawColor("#3b6697");
525+
// pdf.setLineWidth(0.2);
526+
// pdf.line(15, 280, 195, 280);
527+
// pdf.setFontSize(8);
528+
// pdf.setFont(pdf.getFont().fontName, "normal");
529+
// pdf.setTextColor("#000000");
530+
// pdf.text('U.S. Department of Health and Human Services | National Institutes of Health | National Cancer Institute', 35,
531+
// pdf.internal.pageSize.getHeight() / 1.04);
532+
// pdf.setFont(pdf.getFont().fontName, "bold");
533+
// pdf.text(`Page ${i} of ${totalPages}`, 180, pdf.internal.pageSize.getHeight() / 1.04);
534+
// }
535+
// })
536+
// .save();
537+
// };
538+
533539
const handleClick = (idx) => {
534540
const newOpen = Object.assign([], open);
535541
newOpen[idx] = !newOpen[idx];
@@ -623,11 +629,11 @@ const SiteUpdateResult = ({
623629
</DataContentType>
624630
)}
625631
<SiteUpdateExport>
626-
<a href="#" role="button" className="buttonStyle" onClick={() => handleExport(`post${siteUpdateList[selectedIdx].id}`)}>
632+
<a href="#" role="button" className="buttonStyle" onClick={() => handleViewPDF()}>
627633
<span className="spanText">
628634
<img src={ReleaseNoteDownloadIcon} alt="download icon" />
629635
&nbsp;&nbsp;
630-
<span style={{ paddingTop: '3px' }}>DOWNLOAD</span>
636+
<span>VIEW PDF</span>
631637
</span>
632638
</a>
633639
</SiteUpdateExport>

0 commit comments

Comments
 (0)