Merge pull request #394 from yeatmanlab/enh/report-print-view

Add Export to PDF for Score Reports

package.json

@@ -50,7 +50,9 @@
     "dotenv": "^16.3.1",
     "emailjs-com": "^3.2.0",
     "firebase": "^9.14.0",
+    "html2canvas": "^1.4.1",
     "jose": "^4.14.4",
+    "jspdf": "^2.5.1",
     "list": "^2.0.19",
     "lodash": "^4.17.21",
     "marked": "^7.0.3",

src/components/reports/DistributionChartFacet.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="distribution-wrapper">
     <div :id="`roar-distribution-chart-${taskId}`"></div>
-    <div v-if="minGradeByRuns < 6" class="view-by-wrapper my-2">
+    <div v-if="minGradeByRuns < 6" class="view-by-wrapper my-2" data-html2canvas-ignore="true">
       <div class="flex uppercase text-xs font-light">view scores by</div>
       <PvSelectButton
         v-model="scoreMode"

src/components/reports/DistributionChartSupport.vue

@@ -1,6 +1,6 @@
 <template>
   <div :id="`roar-distribution-chart-support-${taskId}`"></div>
-  <div class="view-by-wrapper my-2">
+  <div class="view-by-wrapper my-2" data-html2canvas-ignore="true">
     <div class="flex uppercase text-xs font-light">view support levels by</div>
     <PvSelectButton
       v-model="xMode"

src/components/reports/tasks/TaskReport.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col items-center justify-center mx-2">
-    <Accordion v-if="taskInfoById[taskId]" class="mb-5 w-full">
+  <div :id="'tab-view-description-' + taskId" class="flex flex-col items-center justify-center mx-2">
+    <Accordion v-if="taskInfoById[taskId]" class="mb-5 w-full" :active-index="0">
       <AccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
         <div>
           <div style="text-transform: uppercase" class="text-2xl font-bold">{{ taskInfoById[taskId]?.subheader }}</div>
@@ -16,8 +16,8 @@
     </Accordion>
   </div>
   <!-- <div class="grid grid-cols-2 w-full space-around items-center p-3"> -->
-  <div v-if="tasksToDisplayGraphs.includes(taskId)" class="chart-toggle-wrapper">
-    <div v-if="orgType === 'district'" class="mb-3">
+  <div v-if="tasksToDisplayGraphs.includes(taskId)" :id="'tab-view-chart-' + taskId" class="chart-toggle-wrapper">
+    <div v-if="orgType === 'district'" class="mb-3" data-html2canvas-ignore="true">
       <div class="flex uppercase text-xs font-light">view rows by</div>
       <PvSelectButton
         v-model="facetMode"