Merge pull request #42 from episphere/dev

Dev -> Stage Sync (December 2024)

assets/css/dashboard.css

@@ -343,4 +343,109 @@ table {
 
 #appVersion {
     font-size: 0.8rem;
+}
+
+.smallerHeading {
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.norcToolNote {
+    font-size: 1rem; 
+    font-weight: 700;
+    margin-top: 0.8rem;
+    margin-bottom: 1rem;
+}
+
+.norcToolTypeHeader {
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+.navTabsDataCorrectionsContainercontainer {
+    position: relative;
+    padding-bottom: 1px;
+}
+
+.dataCorrectionsAlert {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+p.norcToolDropdownInfoText {
+    font-style: italic;
+    margin-bottom: 2rem;
+}
+
+#dataCorrectionsTabsGroup {
+    width: max-content;
+    margin-bottom: 0;
+    padding: 0rem;
+}
+
+#dataCorrectionsTabsGroup li {
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    display: inline-block;
+}
+
+#dataCorrectionsTabsGroup li .dataCorrectionLink {
+    border: 1px solid #222;
+    color: #222;
+    margin-bottom: -1px;
+    padding: 0.5rem 1rem;
+    transition: all 0.8s ease;
+    font-weight: 500;
+}
+
+#dataCorrectionsTabsGroup li .dataCorrectionLink:hover {
+    background-color: #B8DFF7;
+    color: #222;
+    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.1);
+    text-decoration: none;
+}
+
+#dataCorrectionsTabsGroup li .dataCorrectionLink.active {
+    background-color: #B8DFF7;
+    color: #222;
+    box-shadow: none;
+}
+
+#dataCorrectionsTabsGroup li:first-child .dataCorrectionLink{
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+}
+
+#dataCorrectionsTabsGroup li:last-child .dataCorrectionLink {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+/*
+Responsive data corrections nav link display
+*/
+@media (max-width:636px) {
+    #dataCorrectionsTabsGroup {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    #dataCorrectionsTabsGroup li {
+        display: block;
+        padding: 0.4rem;
+    }
+
+    #dataCorrectionsTabsGroup li .dataCorrectionLink {
+        display: block;
+        text-align: center;
+        margin-bottom: 0;
+    }
+
+    #dataCorrectionsTabsGroup li:first-child .dataCorrectionLink,
+    #dataCorrectionsTabsGroup li:last-child .dataCorrectionLink,
+    #dataCorrectionsTabsGroup li .dataCorrectionLink {
+        border-radius: 10px;
+    }
 }

index.js

@@ -4,7 +4,10 @@ import { renderTable, filterdata, renderData, addEventFilterData, activeColumns,
 import { renderParticipantDetails } from './src/participantDetails.js';
 import { renderParticipantSummary } from './src/participantSummary.js';
 import { renderParticipantMessages } from './src/participantMessages.js';
-import { renderDataCorrectionsToolPage } from './src/dataCorrectionsTool.js';
+import { setupDataCorrectionsSelectionToolPage } from './src/dataCorrectionsTool/dataCorrectionsToolSelection.js';
+import { setupVerificationCorrectionsPage } from './src/dataCorrectionsTool/verificationCorrectionsTool.js';
+import { setupSurveyResetToolPage } from './src/dataCorrectionsTool/surveyResetTool.js';
+import { setupIncentiveEligibilityToolPage } from './src/dataCorrectionsTool/incentiveEligibilityTool.js';
 import { renderSiteMessages } from './src/siteMessages.js';
 import { renderParticipantWithdrawal } from './src/participantWithdrawal.js';
 import { createNotificationSchema, editNotificationSchema } from './src/storeNotifications.js';
@@ -25,22 +28,30 @@ let saveFlag = false;
 let counter = 0;
 
 if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("./serviceWorker.js").catch((error) => {
-        console.error("Service worker registration failed.", error);
-        return;
-    });
-
-    navigator.serviceWorker.ready.then(() => {
-        if (navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage({ action: "getAppVersion" });
+  navigator.serviceWorker
+    .register("./serviceWorker.js")
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const sw = registration.installing;
+        if (sw) {
+          sw.onstatechange = () => sw.state === "activated" && sw.postMessage({ action: "getAppVersion" });
         }
+      };
+    })
+    .catch((err) => {
+      console.error("Service worker registration failed.", err);
     });
 
-    navigator.serviceWorker.addEventListener("message", (event) => {
-        if (event.data.action === "sendAppVersion") {
-            document.getElementById("appVersion").textContent = event.data.payload;
-        }
-    });
+  navigator.serviceWorker.ready.then(() => {
+    const sw = navigator.serviceWorker.controller;
+    sw && sw.postMessage({ action: "getAppVersion" });
+  });
+
+  navigator.serviceWorker.addEventListener("message", (event) => {
+    if (event.data.action === "sendAppVersion") {
+      document.getElementById("appVersion").textContent = event.data.payload;
+    }
+  });
 }
 
 const datadogConfig = {
@@ -80,10 +91,10 @@ window.onload = async () => {
         }
 
         if (hasError) {
-          console.error("Local development requires firebaseConfig defined in src/local-dev/config.js.");
+          console.error("Local development requires firebaseConfig defined in /config/local-dev/config.js.");
           return;
         }
-        !firebase.apps.length ? firebase.initializeApp(localDevFirebaseConfig) : firebase.app();
+        !firebase.apps.length ? firebase.initializeApp(localDevFirebaseConfig) : firebase.app(); 
     } 
     else {
         !firebase.apps.length ? firebase.initializeApp(devFirebaseConfig) : firebase.app();
@@ -114,6 +125,14 @@ window.onhashchange = () => {
     router();
 };
 
+const dataCorrectionsToolRoutes = [
+    '#dataCorrectionsToolSelection',
+    '#incentiveEligibilityTool',
+    '#surveyResetTool',
+    '#verificationCorrectionsTool',
+];
+
+
 const router = async () => {
     const hash = decodeURIComponent(window.location.hash);
     const route = hash || '#';
@@ -155,15 +174,33 @@ const router = async () => {
                 renderParticipantMessages(participant);
             }
         }
-        else if (route === '#dataCorrectionsTool') {
+        else if (dataCorrectionsToolRoutes.includes(route)) {
             if (JSON.parse(localStorage.getItem("participant")) === null) {
                 alert("No participant selected. Please select a participant from the participants dropdown or the participant lookup page");
             }
             else {
-                let participant = JSON.parse(localStorage.getItem("participant"))
-                renderDataCorrectionsToolPage(participant);
+                let participant = JSON.parse(localStorage.getItem("participant"));
+
+                switch(route) {
+                    case '#dataCorrectionsToolSelection':
+                        setupDataCorrectionsSelectionToolPage(participant)
+                        break;
+                    case '#verificationCorrectionsTool':
+                        setupVerificationCorrectionsPage(participant)
+                        break;
+                    case '#surveyResetTool':
+                        setupSurveyResetToolPage(participant)
+                        break;
+                    case '#incentiveEligibilityTool':
+                        setupIncentiveEligibilityToolPage(participant)
+                        break;
+                    default:
+                        window.location.hash = '#dataCorrectionsToolSelection';
+                        break;
+                }
             }
         }
+
         else if (route === '#siteMessages') renderSiteMessages();
         else if (route === '#participantWithdrawal' && isParent === 'true') {
             if (JSON.parse(localStorage.getItem("participant")) === null) {
@@ -257,6 +294,7 @@ const renderDashboard = async () => {
         animation(true);
         const idToken = await getIdToken();
         const isAuthorized = await authorize(idToken);
+
         if (isAuthorized && isAuthorized.code === 200) {
             localStorage.setItem('isParent', isAuthorized.isParent)
             localStorage.setItem('coordinatingCenter', isAuthorized.coordinatingCenter)

newsletter/fallnewsletter-2024-spanish.html

@@ -110,7 +110,7 @@
 							<table class="column">
 								<tr>
 									<td style="padding: 0 18px 10px;">
-										<a href="https://cancer.gov/connect-prevention-study" target="_blank"><img
+										<a href="https://www.cancer.gov/connect-prevention-study/espanol" target="_blank"><img
 												src="https://github.com/episphere/studyManagerDashboard/blob/dev/assets/images/connectlogo.png?raw=true"
 												width="180"></a>
 									</td>
@@ -153,7 +153,7 @@
 
 		<tr>
 			<td style="padding: 0 32px 10px;">
-				<a href="https://cancer.gov/connect-prevention-study/espanol/noticias/científica-sénior" target="_blank"><img
+				<a href="https://cancer.gov/connect-prevention-study/espanol/noticias/cientifica-senior" target="_blank"><img
 						src="https://github.com/episphere/studyManagerDashboard/blob/dev/assets/images/fallnewsletter-2024/introduction-spanish.jpg?raw=true"
 						alt="" width="800px"></a>
 				<!--[if mso|(IE)]>
@@ -183,7 +183,7 @@
 					<tr>
 						<td>
 							<a style="height: 38px; width: 109px; background-color: #FFBF17; text-decoration: underline;"
-								href="https://cancer.gov/connect-prevention-study/espanol/noticias/científica-sénior"
+								href="https://cancer.gov/connect-prevention-study/espanol/noticias/cientifica-senior"
 								class="button dark-btn" target="_blank">Seguir leyendo</a>
 						</td>
 					</tr>

serviceWorker.js

@@ -1,6 +1,6 @@
 importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
 
-const appVersion = "v24.10.0";
+const appVersion = "v24.12.0";
 workbox.setConfig({ debug: false });
 const { registerRoute } = workbox.routing;
 const { CacheFirst, NetworkFirst } = workbox.strategies;

src/dataCorrectionsTool/dataCorrectionsHelpers.js

@@ -0,0 +1,43 @@
+/**
+* When back button clicked, navigates user back to the data corrections tool selection page.
+* @returns {void}
+*/
+export const handleBackToToolSelect = () => {
+    const backToToolSelectButton = document.getElementById('backToToolSelect');
+    if (!backToToolSelectButton) return;
+
+    backToToolSelectButton.addEventListener('click', () => {
+       location.hash = '#dataCorrectionsToolSelection';
+    });
+};
+
+export const displayDataCorrectionsNavbar =  () => {
+    return `<div class="mt-4">
+                <div class="navTabsDataCorrectionsContainer">
+                    <ul class="btn-group" id="dataCorrectionsTabsGroup">
+                        <li>
+                            <a class="dataCorrectionLink" id="verificationCorrectionsTool" href="#verificationCorrectionsTool">Verification Corrections</a>
+                        </li>
+
+                        <li>
+                            <a class="dataCorrectionLink" id="surveyResetTool" href="#surveyResetTool">Survey Status Reset</a>
+                        </li>
+                        <li>
+                            <a class="dataCorrectionLink" id="incentiveEligibilityTool" href="#incentiveEligibilityTool">Incentive Eligibility</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>`;
+};
+
+export const setActiveDataCorrectionsTab = () => {
+    const dataCorrectionsTabs = document.getElementById('dataCorrectionsTabsGroup');
+    if (!dataCorrectionsTabs) return;
+
+    document.querySelectorAll(".dataCorrectionLink").forEach((link) => { 
+        link.classList.remove('active');
+    });
+
+    const activeLink = document.querySelector(`a[href="${location.hash}"]`); 
+    if (activeLink) activeLink.classList.add('active');
+};