12437054061

Committed 20 Dec 2024 07:07PM UTC coverage: 54.222% (+9.2%) from 44.982%

Build # 12437054061

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #570 from CBIIT/3.1.0

3.1.0 Release

Run Details

2615 of 5317 branches covered (49.18%)

Branch coverage included in aggregate %.

1215 of 1625 new or added lines in 116 files covered. (74.77%)

28 existing lines in 13 files now uncovered.

3768 of 6455 relevant lines covered (58.37%)

133.57 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/ExportRequestButton/pdf/Generate.ts

import { jsPDF as JsPDF } from "jspdf";
import { loadFont } from "./utils";
import fonts from "./Fonts";
import { FormatDate, formatFullStudyName } from "../../../utils";
import env from "../../../env";
import Logo from "../../../assets/header/Logo.jpg";
import {
  COLOR_HR,
  COLOR_FIELD_BASE,
  COLOR_EMAIL,
  COLOR_BASE,
  COLOR_HYPERLINK,
  COLOR_DOC_FOOTER,
} from "./Colors";

/**
 * Describes the minimal padding from the edges of the document.
 *
 * @note No content should be placed from the document edge to this margin.
 */
const BASE_MARGIN = 20;

/**
 * Describes the margin around the content of the document.
 *
 * @note The design spec suggests it should be closer to +50p,
 * but this is a compromise to ensure the content fits within the page.
 * @note Any horizontal lines bypass this constraint.
 */
const CONTENT_MARGIN = BASE_MARGIN + 25;

/**
 * Describes the drawing width of horizontal lines.
 */
const HR_WIDTH = 0.8;

/**
 * Writes the PDF header to the document.
 *
 * @param doc The jsPDF instance to add the header to.
 * @param request The submission request to generate the header from.
 * @returns {number} The current Y position after writing the header including padding.
 */
const writeHeader = (doc: JsPDF, request: Application): number => {
  const { applicant, questionnaireData, status, submittedDate } = request;
  const { study } = questionnaireData || {};
  const formattedSubmittedDate =
    status !== "In Progress" ? FormatDate(submittedDate, "YYYY-MM-DD") : "N/A";

  const RIGHT_EDGE = doc.internal.pageSize.width - BASE_MARGIN;
  let y = BASE_MARGIN;

  doc.addImage(Logo, "JPEG", BASE_MARGIN, y, 278, 56);
  y += 63;

  // Submitter name
  doc.setDrawColor(...COLOR_HR);
  doc.setLineWidth(HR_WIDTH);
  doc.line(BASE_MARGIN, (y += 15), RIGHT_EDGE, y);
  doc.setFont("Nunito", "normal", 800);
  doc.setTextColor(...COLOR_FIELD_BASE);
  doc.setFontSize(10);
  doc.text("SUBMITTER'S NAME", CONTENT_MARGIN, (y += 15));
  doc.setFont("Nunito", "normal", 700);
  doc.setFontSize(14);
  doc.setTextColor(...COLOR_EMAIL);
  doc.text(applicant.applicantName, CONTENT_MARGIN + 85, (y += 1));
  doc.line(BASE_MARGIN, (y += 10), RIGHT_EDGE, y);
  y += 24;

  // Study name and abbreviation
  doc.setFont("Nunito", "normal", 600);
  doc.setTextColor(...COLOR_BASE);
  doc.setFontSize(10);
  doc.text("STUDY NAME", CONTENT_MARGIN, y);

  const formattedName = formatFullStudyName(study?.name, study?.abbreviation);
  const maxNameWidth = RIGHT_EDGE - CONTENT_MARGIN - 85;
  doc.setFont("Nunito", "normal", 400);
  doc.setFontSize(12);
  doc.setTextColor(...COLOR_FIELD_BASE);
  doc.text(formattedName, CONTENT_MARGIN + 85, y, {
    // NOTE – Take the full width of the page and subtract the margins/offsets
    maxWidth: maxNameWidth,
  });

  const computedNameLines = doc.splitTextToSize(formattedName, maxNameWidth);
  y += (computedNameLines?.length || 1) * 8 + 11;

  // Submitted Date
  doc.setFont("Nunito", "normal", 600);
  doc.setTextColor(...COLOR_BASE);
  doc.setFontSize(10);
  doc.text("SUBMITTED DATE", CONTENT_MARGIN, y);

  doc.setFont("Nunito", "normal", 400);
  doc.setFontSize(12);
  doc.setTextColor(...COLOR_FIELD_BASE);
  doc.text(formattedSubmittedDate, CONTENT_MARGIN + 85, y);
  y += 18;

  // Status
  doc.setFont("Nunito", "normal", 600);
  doc.setTextColor(...COLOR_BASE);
  doc.setFontSize(10);
  doc.text("STATUS", CONTENT_MARGIN, y);

  doc.setFont("Nunito", "normal", 400);
  doc.setFontSize(12);
  doc.setTextColor(...COLOR_FIELD_BASE);
  doc.text(status, CONTENT_MARGIN + 85, y);
  y += 24;

  // Click to view (text)
  doc.setFont("Nunito", "normal", 400);
  doc.setFontSize(12);
  doc.setTextColor(...COLOR_FIELD_BASE);
  doc.text("Click here to view the Submission Request Form", CONTENT_MARGIN, y, {
    align: "left",
  });

  // Click to view (overlapping link)
  doc.setTextColor(...COLOR_HYPERLINK);
  doc.textWithLink("here", CONTENT_MARGIN + 22, y, {
    url: `${env.REACT_APP_NIH_REDIRECT_URL}/submission/${request._id}`,
    align: "left",
  });

  doc.setDrawColor(...COLOR_HYPERLINK);
  doc.setLineWidth(HR_WIDTH);
  doc.line(CONTENT_MARGIN + 22, (y += 2), CONTENT_MARGIN + 40, y);

  doc.setDrawColor(...COLOR_HR);
  doc.line(BASE_MARGIN, (y += 22), RIGHT_EDGE, y);

  return y + 30;
};

/**
 * A function to write a footer across all pages in the PDF document.
 *
 * @param doc The jsPDF instance to add the footer to.
 * @returns {void}
 */
const writeFooters = (doc: JsPDF): void => {
  const pdfRightEdge = doc.internal.pageSize.width - BASE_MARGIN;
  const bottomMargin = doc.internal.pageSize.height - BASE_MARGIN;
  const pageCount: number = doc.internal.pages.filter((p) => p !== null).length;

  for (let pageNum = 0; pageNum < pageCount; pageNum += 1) {
    doc.setPage(pageNum + 1);

    // Draw the horizontal line 20px from the bottom
    doc.setDrawColor(...COLOR_HR);
    doc.setLineWidth(HR_WIDTH);
    doc.line(
      BASE_MARGIN,
      bottomMargin - 20,
      doc.internal.pageSize.width - BASE_MARGIN,
      bottomMargin - 20
    );

    // Write the page number
    doc.setFontSize(10);
    doc.setTextColor(...COLOR_DOC_FOOTER);
    doc.setFont("Nunito", "normal", 600);
    doc.text(`Page ${pageNum + 1} of ${pageCount}`, pdfRightEdge, bottomMargin, {
      align: "right",
    });
  }
};

/**
 * A function to generate a PDF document from a submission request.
 *
 * @note This function temporarily modifies the width of the print region to ensure the
 *  content fits within the page.
 * @param request The submission request to generate a PDF from.
 * @param printRegion The region to print to the PDF.
 * @returns {Promise<URL>} A promise that resolves when the PDF is generated.
 * @throws {Error} If the submission request is invalid.
 */
export const GenerateDocument = async (
  request: Application,
  printRegion: HTMLElement
): Promise<Blob> => {
  if (!request || !request?._id) {
    throw new Error("Invalid submission request provided.");
  }
  if (!printRegion || !(printRegion instanceof Element)) {
    throw new Error("Invalid print region provided.");
  }

  const doc = new JsPDF({
    orientation: "portrait",
    unit: "px",
    format: "letter",
  });

  doc.setProperties({
    title: `Submission Request ${request._id}`,
    subject: `PDF Export of Submission Request ${request._id}`,
    keywords: "CRDC, submission request, PDF export",
    author: "CRDC Submission Portal",
    creator: "crdc-datahub-ui",
  });

  await Promise.allSettled(fonts.map((font) => loadFont(doc, font)));

  return new Promise((resolve) => {
    const y = writeHeader(doc, request);

    // NOTE: This fixes the width of the form to prevent the form from being too wide in the PDF
    // html2canvas width/windowWidth props do not work as expected
    printRegion.style.width = "794px";

    doc.html(printRegion, {
      callback: (doc) => {
        printRegion.style.width = "";

        writeFooters(doc);
        resolve(doc.output("blob"));
      },
      html2canvas: {
        scale: 0.5,
        ignoreElements: (element: HTMLElement) => {
          if (element?.getAttribute("data-print") === "false") {
            return true;
          }

          return false;
        },
        logging: false,
      },
      autoPaging: "text",
      x: 0,
      y: y - 25,
      margin: [BASE_MARGIN, BASE_MARGIN + 10, 50, BASE_MARGIN + 10],
    });
  });
};

1	import { jsPDF as JsPDF } from "jspdf";
2	import { loadFont } from "./utils";
3	import fonts from "./Fonts";
4	import { FormatDate, formatFullStudyName } from "../../../utils";
5	import env from "../../../env";
6	import Logo from "../../../assets/header/Logo.jpg";
7	import {
8	COLOR_HR,
9	COLOR_FIELD_BASE,
10	COLOR_EMAIL,
11	COLOR_BASE,
12	COLOR_HYPERLINK,
13	COLOR_DOC_FOOTER,
14	} from "./Colors";
15
16	/**
17	* Describes the minimal padding from the edges of the document.
18	*
19	* @note No content should be placed from the document edge to this margin.
20	*/
NEW 21	const BASE_MARGIN = 20;	×
22
23	/**
24	* Describes the margin around the content of the document.
25	*
26	* @note The design spec suggests it should be closer to +50p,
27	* but this is a compromise to ensure the content fits within the page.
28	* @note Any horizontal lines bypass this constraint.
29	*/
NEW 30	const CONTENT_MARGIN = BASE_MARGIN + 25;	×
31
32	/**
33	* Describes the drawing width of horizontal lines.
34	*/
NEW 35	const HR_WIDTH = 0.8;	×
36
37	/**
38	* Writes the PDF header to the document.
39	*
40	* @param doc The jsPDF instance to add the header to.
41	* @param request The submission request to generate the header from.
42	* @returns {number} The current Y position after writing the header including padding.
43	*/
NEW 44	const writeHeader = (doc: JsPDF, request: Application): number => {	×
NEW 45	const { applicant, questionnaireData, status, submittedDate } = request;	×
NEW 46	const { study } = questionnaireData \|\| {};	×
47	const formattedSubmittedDate =
NEW 48	status !== "In Progress" ? FormatDate(submittedDate, "YYYY-MM-DD") : "N/A";	×
49
NEW 50	const RIGHT_EDGE = doc.internal.pageSize.width - BASE_MARGIN;	×
NEW 51	let y = BASE_MARGIN;	×
52
NEW 53	doc.addImage(Logo, "JPEG", BASE_MARGIN, y, 278, 56);	×
NEW 54	y += 63;	×
55
56	// Submitter name
NEW 57	doc.setDrawColor(...COLOR_HR);	×
NEW 58	doc.setLineWidth(HR_WIDTH);	×
NEW 59	doc.line(BASE_MARGIN, (y += 15), RIGHT_EDGE, y);	×
NEW 60	doc.setFont("Nunito", "normal", 800);	×
NEW 61	doc.setTextColor(...COLOR_FIELD_BASE);	×
NEW 62	doc.setFontSize(10);	×
NEW 63	doc.text("SUBMITTER'S NAME", CONTENT_MARGIN, (y += 15));	×
NEW 64	doc.setFont("Nunito", "normal", 700);	×
NEW 65	doc.setFontSize(14);	×
NEW 66	doc.setTextColor(...COLOR_EMAIL);	×
NEW 67	doc.text(applicant.applicantName, CONTENT_MARGIN + 85, (y += 1));	×
NEW 68	doc.line(BASE_MARGIN, (y += 10), RIGHT_EDGE, y);	×
NEW 69	y += 24;	×
70
71	// Study name and abbreviation
NEW 72	doc.setFont("Nunito", "normal", 600);	×
NEW 73	doc.setTextColor(...COLOR_BASE);	×
NEW 74	doc.setFontSize(10);	×
NEW 75	doc.text("STUDY NAME", CONTENT_MARGIN, y);	×
76
NEW 77	const formattedName = formatFullStudyName(study?.name, study?.abbreviation);	×
NEW 78	const maxNameWidth = RIGHT_EDGE - CONTENT_MARGIN - 85;	×
NEW 79	doc.setFont("Nunito", "normal", 400);	×
NEW 80	doc.setFontSize(12);	×
NEW 81	doc.setTextColor(...COLOR_FIELD_BASE);	×
NEW 82	doc.text(formattedName, CONTENT_MARGIN + 85, y, {	×
83	// NOTE – Take the full width of the page and subtract the margins/offsets
84	maxWidth: maxNameWidth,
85	});
86
NEW 87	const computedNameLines = doc.splitTextToSize(formattedName, maxNameWidth);	×
NEW 88	y += (computedNameLines?.length \|\| 1) * 8 + 11;	×
89
90	// Submitted Date
NEW 91	doc.setFont("Nunito", "normal", 600);	×
NEW 92	doc.setTextColor(...COLOR_BASE);	×
NEW 93	doc.setFontSize(10);	×
NEW 94	doc.text("SUBMITTED DATE", CONTENT_MARGIN, y);	×
95
NEW 96	doc.setFont("Nunito", "normal", 400);	×
NEW 97	doc.setFontSize(12);	×
NEW 98	doc.setTextColor(...COLOR_FIELD_BASE);	×
NEW 99	doc.text(formattedSubmittedDate, CONTENT_MARGIN + 85, y);	×
NEW 100	y += 18;	×
101
102	// Status
NEW 103	doc.setFont("Nunito", "normal", 600);	×
NEW 104	doc.setTextColor(...COLOR_BASE);	×
NEW 105	doc.setFontSize(10);	×
NEW 106	doc.text("STATUS", CONTENT_MARGIN, y);	×
107
NEW 108	doc.setFont("Nunito", "normal", 400);	×
NEW 109	doc.setFontSize(12);	×
NEW 110	doc.setTextColor(...COLOR_FIELD_BASE);	×
NEW 111	doc.text(status, CONTENT_MARGIN + 85, y);	×
NEW 112	y += 24;	×
113
114	// Click to view (text)
NEW 115	doc.setFont("Nunito", "normal", 400);	×
NEW 116	doc.setFontSize(12);	×
NEW 117	doc.setTextColor(...COLOR_FIELD_BASE);	×
NEW 118	doc.text("Click here to view the Submission Request Form", CONTENT_MARGIN, y, {	×
119	align: "left",
120	});
121
122	// Click to view (overlapping link)
NEW 123	doc.setTextColor(...COLOR_HYPERLINK);	×
NEW 124	doc.textWithLink("here", CONTENT_MARGIN + 22, y, {	×
125	url: `${env.REACT_APP_NIH_REDIRECT_URL}/submission/${request._id}`,
126	align: "left",
127	});
128
NEW 129	doc.setDrawColor(...COLOR_HYPERLINK);	×
NEW 130	doc.setLineWidth(HR_WIDTH);	×
NEW 131	doc.line(CONTENT_MARGIN + 22, (y += 2), CONTENT_MARGIN + 40, y);	×
132
NEW 133	doc.setDrawColor(...COLOR_HR);	×
NEW 134	doc.line(BASE_MARGIN, (y += 22), RIGHT_EDGE, y);	×
135
NEW 136	return y + 30;	×
137	};
138
139	/**
140	* A function to write a footer across all pages in the PDF document.
141	*
142	* @param doc The jsPDF instance to add the footer to.
143	* @returns {void}
144	*/
NEW 145	const writeFooters = (doc: JsPDF): void => {	×
NEW 146	const pdfRightEdge = doc.internal.pageSize.width - BASE_MARGIN;	×
NEW 147	const bottomMargin = doc.internal.pageSize.height - BASE_MARGIN;	×
NEW 148	const pageCount: number = doc.internal.pages.filter((p) => p !== null).length;	×
149
NEW 150	for (let pageNum = 0; pageNum < pageCount; pageNum += 1) {	×
NEW 151	doc.setPage(pageNum + 1);	×
152
153	// Draw the horizontal line 20px from the bottom
NEW 154	doc.setDrawColor(...COLOR_HR);	×
NEW 155	doc.setLineWidth(HR_WIDTH);	×
NEW 156	doc.line(	×
157	BASE_MARGIN,
158	bottomMargin - 20,
159	doc.internal.pageSize.width - BASE_MARGIN,
160	bottomMargin - 20
161	);
162
163	// Write the page number
NEW 164	doc.setFontSize(10);	×
NEW 165	doc.setTextColor(...COLOR_DOC_FOOTER);	×
NEW 166	doc.setFont("Nunito", "normal", 600);	×
NEW 167	doc.text(`Page ${pageNum + 1} of ${pageCount}`, pdfRightEdge, bottomMargin, {	×
168	align: "right",
169	});
170	}
171	};
172
173	/**
174	* A function to generate a PDF document from a submission request.
175	*
176	* @note This function temporarily modifies the width of the print region to ensure the
177	* content fits within the page.
178	* @param request The submission request to generate a PDF from.
179	* @param printRegion The region to print to the PDF.
180	* @returns {Promise<URL>} A promise that resolves when the PDF is generated.
181	* @throws {Error} If the submission request is invalid.
182	*/
NEW 183	export const GenerateDocument = async (	×
184	request: Application,
185	printRegion: HTMLElement
186	): Promise<Blob> => {
NEW 187	if (!request \|\| !request?._id) {	×
NEW 188	throw new Error("Invalid submission request provided.");	×
189	}
NEW 190	if (!printRegion \|\| !(printRegion instanceof Element)) {	×
NEW 191	throw new Error("Invalid print region provided.");	×
192	}
193
NEW 194	const doc = new JsPDF({	×
195	orientation: "portrait",
196	unit: "px",
197	format: "letter",
198	});
199
NEW 200	doc.setProperties({	×
201	title: `Submission Request ${request._id}`,
202	subject: `PDF Export of Submission Request ${request._id}`,
203	keywords: "CRDC, submission request, PDF export",
204	author: "CRDC Submission Portal",
205	creator: "crdc-datahub-ui",
206	});
207
NEW 208	await Promise.allSettled(fonts.map((font) => loadFont(doc, font)));	×
209
NEW 210	return new Promise((resolve) => {	×
NEW 211	const y = writeHeader(doc, request);	×
212
213	// NOTE: This fixes the width of the form to prevent the form from being too wide in the PDF
214	// html2canvas width/windowWidth props do not work as expected
NEW 215	printRegion.style.width = "794px";	×
216
NEW 217	doc.html(printRegion, {	×
218	callback: (doc) => {
NEW 219	printRegion.style.width = "";	×
220
NEW 221	writeFooters(doc);	×
NEW 222	resolve(doc.output("blob"));	×
223	},
224	html2canvas: {
225	scale: 0.5,
226	ignoreElements: (element: HTMLElement) => {
NEW 227	if (element?.getAttribute("data-print") === "false") {	×
NEW 228	return true;	×
229	}
230
NEW 231	return false;	×
232	},
233	logging: false,
234	},
235	autoPaging: "text",
236	x: 0,
237	y: y - 25,
238	margin: [BASE_MARGIN, BASE_MARGIN + 10, 50, BASE_MARGIN + 10],
239	});
240	});
241	};

CBIIT / crdc-datahub-ui / 12437054061

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous