Dev -> Stage Sync (Sep. Release)

index.js

@@ -22,8 +22,9 @@ import { packageReceiptScreen } from "./src/pages/receipts/packageReceipt.js";
 import { csvFileReceiptScreen } from "./src/pages/receipts/csvFileReceipt.js";
 import { kitReportsScreen } from "./src/pages/reports/kitReports.js";
 import { collectionIdSearchScreen } from "./src/pages/reports/collectionIdSearch.js";
+import { bptlShipReportsScreen } from "./src/pages/reports/shippingReport.js";
 import { checkOutReportTemplate } from "./src/pages/checkOutReport.js";
-
+import { dailyReportTemplate } from "./src/pages/dailyReport.js";
 
 let auth = '';
 
@@ -102,6 +103,8 @@ const manageRoutes = async () => {
         else if (route === "#collectionidsearch") collectionIdSearchScreen(auth, route);
         else if (route === "#reports") reportsQuery(auth, route);
         else if (route === "#checkoutreport") checkOutReportTemplate(auth, route);
+        else if (route === "#dailyreport") dailyReportTemplate(auth, route);
+        else if (route === "#bptlshipreports") bptlShipReportsScreen(auth, route);
         else if (route === "#manage_users") manageUsers(auth, route);
         else if (route === "#sign_out") signOut();
         else window.location.hash = "#welcome";

src/fieldToConceptIdMapping.js

@@ -20,8 +20,9 @@ export default {
     shippingLocation: 560975149,
     scannedByFirstName: 469819603,
     scannedByLastName: 618036638,
-    shippedByFirstName: 948887825,
-    shippedByLastName: 885486943,
+    shippedByFirstName: 948887825, //TODO: this is actually shipperEmail. Update all refs in next release (cleanup)
+    shippedByLastName: 885486943, //TODO: this has been removed from the data dictionary remove in next release (cleanup)
+    shipmentCourier: 666553960,
     "FedEx": 712278213,
     "World Courier": 149772928,
 
@@ -207,6 +208,58 @@ export default {
 
     clinicalSite: {
         bloodCollected: 693370086
+    },
+
+    collectionLocationMapping: {
+        777644826 : 'UC-DCAM',
+        692275326 : 'Marshfield',
+        813701399 : 'Weston',
+        698283667 : 'Lake Hallie',
+        834825425 : 'HP Research Clinic',
+        736183094 : 'HFH K-13 Research Clinic',
+        886364332 : 'HFH Cancer Pavilion Research Clinic',
+        706927479 : 'HFH Livonia Research Clinic',
+        589224449 : 'Sioux Falls Imagenetics',
+        145191545 : 'Ingalls Harvey',
+        489380324 : 'River East',
+        319518299 : 'UCM Pop-Up',
+        940329442 : 'Orland Park',
+        567969985 : 'MF Pop-Up',
+        120264574 : 'South Loop',
+        691714762 : 'Rice Lake',
+        487512085 : 'Wisconsin Rapids',
+        983848564 : 'Colby Abbotsford',
+        261931804 : 'Minocqua',
+        665277300 : 'Merrill',
+        111111111 : 'NIH/NCI',
+        807835037 : 'Other'
+    },
+
+    nameToKeyObj : {
+        'ucDcam': 777644826,
+        'marshfield': 692275326,
+        'weston': 813701399,
+        'lakeHallie': 698283667,
+        'hpRC': 834825425,
+        'hfhKRC': 736183094,
+        'hfhLRC': 706927479,
+        'hfhPRC': 886364332,
+        'sfImag': 589224449,
+        'ingHar': 145191545,
+        'rivEas': 489380324,
+        'soLo': 120264574,
+        'riLa': 691714762,
+        'wisRapids': 487512085,
+        'colAbb': 983848564,
+        'mino': 261931804,
+        'merr': 665277300,
+        'nci': 111111111,
+        'other': 807835037,
+        "ucmPopUp": 319518299,
+        "orPark": 940329442,
+        "mfPopUp": 567969985,
+        'all': 1000
+
     }
 };
 

src/navbar.js

@@ -165,6 +165,9 @@ export const reportSideNavBar = () => {
             <li class="nav-item">
                 <a class="nav-link" href="#checkoutreport" id="navBarCheckoutReport">Check-Out Report</a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#dailyreport" id="navBarDailyReport">Daily Review Report</a>
+            </li>
         </ul>`;
 }
 

src/pages/bptl.js

@@ -44,9 +44,9 @@ const bptlScreenTemplate = (name, data, auth, route) => {
             <div class="row gx-5">
                 <div class="col">
                     <h4>Home Collection</h4>
-                    <div class="p-3 border bg-light"><button type="button" href="#kitassembly" class="btn btn-primary btn-lg" id="kitAssembly" disabled>Kit Assembly</button></div>
-                    <div class="p-3 border bg-light"><button type="button" href="#participantselection" class="btn btn-primary btn-lg" id="participantSelection" disabled>Kit Status</button></div>
-                    <div class="p-3 border bg-light"><button type="button" href="#kitshipment" class="btn btn-primary btn-lg" id="kitShipment" disabled>Kit Shipment</button></div>
+                    <div class="p-3 border bg-light"><button type="button" href="#kitassembly" class="btn btn-primary btn-lg" id="kitAssembly">Kit Assembly</button></div>
+                    <div class="p-3 border bg-light"><button type="button" href="#participantselection" class="btn btn-primary btn-lg" id="participantSelection">Kit Status</button></div>
+                    <div class="p-3 border bg-light"><button type="button" href="#kitshipment" class="btn btn-primary btn-lg" id="kitShipment">Kit Shipment</button></div>
                 </div>
                 <div class="col">
                     <h4>Supplies</h4>
@@ -64,6 +64,7 @@ const bptlScreenTemplate = (name, data, auth, route) => {
                     <h4>Reports</h4>
                     <div class="p-3 border bg-light"><button type="button" href="#kitreports" id="kitreports" class="btn btn-primary btn-lg" disabled>Reports</button></div>
                     <div class="p-3 border bg-light"><button type="button" href="#collectionidsearch" id="collectionIdSearch" class="btn btn-primary btn-lg">Collection ID Search</button></div>
+                    <div class="p-3 border bg-light"><button type="button" href="#bptlshipreports" id="bptlShipReports" class="btn btn-primary btn-lg">Shipping Report</button></div>
                 </div>
             </div>
         </div>
@@ -105,4 +106,8 @@ const redirectPageToLocation = () => {
   collectionIdSearchRedirection && collectionIdSearchRedirection.addEventListener("click", async () => {
       location.hash = "#collectionidsearch";
     });
+  const shippingReportRedirection = document.getElementById("bptlShipReports");
+  shippingReportRedirection && shippingReportRedirection.addEventListener("click", async () => {
+      location.hash = "#bptlshipreports";
+    });
 };

src/pages/dailyReport.js

@@ -0,0 +1,164 @@
+import { userAuthorization, removeActiveClass, hideAnimation, showAnimation, getDailyParticipant, convertISODateTime, restrictNonBiospecimenUser, getDataAttributes, appState } from "./../shared.js"
+import { homeNavBar, reportSideNavBar } from '../navbar.js';
+import fieldToConceptIdMapping from "../fieldToConceptIdMapping.js";
+
+
+export const dailyReportTemplate = (auth, route) => {
+    auth.onAuthStateChanged(async user => {
+        if(user){
+            const response = await userAuthorization(route, user.displayName ? user.displayName : user.email);
+            appState.setState({siteAcronym: response.siteAcronym});
+            if ( response.isBiospecimenUser === false ) {
+                restrictNonBiospecimenUser();
+                return;
+            }
+            if(!response.role) return;
+            renderDailyReport();
+        }
+        else {
+            document.getElementById('navbarNavAltMarkup').innerHTML = homeNavBar();
+            window.location.hash = '#';
+        }
+    });
+}
+
+
+export const renderDailyReport = async () => {  
+    let template = `
+            <div class="container">
+            <div class="row">
+                <div class="col-lg-2" style="margin-bottom:20px">
+                    <h2>Reports</h2>
+                    ${reportSideNavBar()}
+                </div>
+                <div class="col-lg-10">
+                    <div class="row">
+                    ${renderCollectionLocationList()}
+                        <div class="col-lg">
+                            <table id="populateDailyReportTable" class="table table-bordered">
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    document.getElementById('contentBody').innerHTML = template;
+    removeActiveClass('nav-link', 'active');
+    const navBarBtn = document.getElementById('navBarDailyReport');
+    navBarBtn.classList.add('active');
+    initializeDailyReportTable();
+}
+
+const renderCollectionLocationList = () => {
+    let template = ``;
+    template += `       
+            <div style="margin-top:10px; padding:15px;" class="dropdown">
+                <button class="btn btn-secondary dropdown-toggle dropdown-toggle-sites" id="dropdownSites" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Filter by Collection Location
+                </button>
+                <ul class="dropdown-menu scrollable-menu" id="dropdownMenuButtonSites" aria-labelledby="dropdownMenuButton">
+                        <li><a class="dropdown-item" data-siteKey="all" id="all">All</a></li>
+                    ${
+                    appState.getState().siteAcronym === 'MFC' ? `
+                        <li><a class="dropdown-item" data-siteKey="marshfield" id="marshfield">Marshfield</a></li>
+                        <li><a class="dropdown-item" data-siteKey="weston" id="weston">Weston</a></li>
+                        <li><a class="dropdown-item" data-siteKey="lakeHallie" id="lakeHallie">Lake Hallie</a></li>
+                        <li><a class="dropdown-item" data-siteKey="riLa" id="riLa">Rice Lake</a></li>
+                        <li><a class="dropdown-item" data-siteKey="wisRapids" id="wisRapids">Wisconsin Rapids</a></li>
+                        <li><a class="dropdown-item" data-siteKey="colAbb" id="colAbb">Colby Abbotsford</a></li>
+                        <li><a class="dropdown-item" data-siteKey="mino" id="mino">Minocqua</a></li>
+                        <li><a class="dropdown-item" data-siteKey="merr" id="merr">Merrill</a></li>
+                        <li><a class="dropdown-item" data-siteKey="mfPopUp" id="mfPopUp">MF Pop-Up</a></li>`:
+                        appState.getState().siteAcronym === 'HP' ? `
+                        <li><a class="dropdown-item" data-siteKey="hpRC" id="hpRC">HP Research Clinic</a></li>`:
+                    appState.getState().siteAcronym === 'HFHS' ? `
+                        <li><a class="dropdown-item" data-siteKey="hfhKRC" id="hfhKRC">HFH K-13 Research Clinic</a></li>
+                        <li><a class="dropdown-item" data-siteKey="hfhPRC" id="hfhPRC">HFH Cancer Pavilion Research Clinic</a></li>
+                        <li><a class="dropdown-item" data-siteKey="hfhLRC" id="hfhLRC">HFH Livonia Research Clinic</a></li>`:
+                    appState.getState().siteAcronym === 'SFH' ? `
+                        <li><a class="dropdown-item" data-siteKey="sfImag" id="sfImag">Sioux Falls Imagenetics</a></li>`:
+                    appState.getState().siteAcronym === 'UCM' ? `
+                        <li><a class="dropdown-item" data-siteKey="ucDcam" id="ucDcam">UC-DCAM</a></li>
+                        <li><a class="dropdown-item" data-siteKey="ingHar" id="ingHar">Ingalls Harvey</a></li>
+                        <li><a class="dropdown-item" data-siteKey="rivEas" id="rivEas">River East</a></li>
+                        <li><a class="dropdown-item" data-siteKey="soLo" id="soLo">South Loop</a></li>
+                        <li><a class="dropdown-item" data-siteKey="ucmPopUp" id="ucmPopUp">UCM Pop-Up</a></li>
+                        <li><a class="dropdown-item" data-siteKey="orPark" id="orPark">Orland Park</a></li>`  :
+                    appState.getState().siteAcronym === 'NIH' ? 
+                        `<li><a class="dropdown-item" data-siteKey="nci" id="nci">NIH/NCI</a></li>`:
+                        `<li><a class="dropdown-item" data-siteKey="other" id="other">Other</a></li>` 
+                    }
+                </ul>
+            </div>
+            `
+    return template;
+}
+
+const initializeDailyReportTable = async () => {
+    showAnimation();
+    const dailyReportsData = await getDailyParticipant().then(res => res.data);
+    appState.setState({dailyReportsData: dailyReportsData}); // store inital daily reports data
+    populateDailyReportTable(`Filter by Collection Location`, dailyReportsData);
+}
+
+const populateDailyReportTable = (dropdownHeader, dailyReportsData) => {
+    const currTable = document.getElementById('populateDailyReportTable');
+    currTable.innerHTML = '';
+
+    const headerRow = currTable.insertRow();
+    headerRow.innerHTML = `
+      <th><b>Collection Location</b></th>
+      <th><b>Connect ID</b></th>
+      <th><b>Last Name</b></th>
+      <th><b>First Name</b></th>
+      <th><b>Check-In Date/Time</b></th>
+      <th><b>Collection ID</b></th>
+      <th><b>Collection Finalized</b></th>
+      <th><b>Check-Out Date/Time</b></th>
+    `;
+
+    for (const item of dailyReportsData) {
+      if (!item[fieldToConceptIdMapping.collection.selectedVisit]?.[fieldToConceptIdMapping.baseline.visitId]?.[fieldToConceptIdMapping.checkOutDateTime]) {
+        const newRow = currTable.insertRow();
+        newRow.innerHTML = `
+
+          <td>${fieldToConceptIdMapping.collectionLocationMapping[item[fieldToConceptIdMapping.collectionLocation]]}</td>
+          <td>${item['Connect_ID']}</td>
+          <td>${item[fieldToConceptIdMapping.lastName]}</td>
+          <td>${item[fieldToConceptIdMapping.firstName]}</td>
+          <td>${convertISODateTime(item[fieldToConceptIdMapping.checkInDateTime])}</td>
+          <td>${item[fieldToConceptIdMapping.collection.id]}</td>
+          <td>${item[fieldToConceptIdMapping.collection.finalizedTime] !== undefined ? convertISODateTime(item[fieldToConceptIdMapping.collection.finalizedTime]) : ``}</td>
+          <td>${item[fieldToConceptIdMapping.checkOutDateTime] !== undefined ? convertISODateTime(item[fieldToConceptIdMapping.checkOutDateTime]) : ``}</td>
+        `;
+      }
+    }
+    hideAnimation();
+    dropdownTrigger(dropdownHeader);
+}
+
+const reInitalizeDailyReportTable = async (dropdownText, siteKey, dailyData) => {
+    showAnimation();
+    let data = dailyData;
+    if (siteKey !== 'all') {
+        data = data.filter((dailyReportData) => dailyReportData[fieldToConceptIdMapping.collectionLocation] === fieldToConceptIdMapping.nameToKeyObj[siteKey]);
+    }
+    populateDailyReportTable(dropdownText, data)
+}
+
+
+const dropdownTrigger = (sitekeyName) => {
+    let a = document.getElementById('dropdownSites');
+    let dropdownMenuButton = document.getElementById('dropdownMenuButtonSites');
+    let tempSiteName = a.innerHTML = sitekeyName;
+    if (dropdownMenuButton) {
+        dropdownMenuButton.addEventListener('click', (e) => {
+            if (sitekeyName === `Filter by Collection Location` || sitekeyName === tempSiteName) {
+                a.innerHTML = e.target.textContent;
+                const sitekey = getDataAttributes(e.target)
+                const dailyReportsData = appState.getState().dailyReportsData;
+                reInitalizeDailyReportTable(e.target.textContent, sitekey, dailyReportsData);
+            }
+        })
+    }
+}

src/pages/receipts/activeReceiptsNavbar.js

@@ -17,5 +17,5 @@ export const activeReceiptsNavbar = () => {
     csvFileReceiptNavItem.classList.add("active");
     csvFileReceiptNavItem.style.backgroundColor = "#bbcffc85";
     csvFileReceiptNavItem.style.borderRadius = "4px 4px 0 0";
-  } else return;
+  };
 };