uwcirg · achen2401 · Nov 13, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 10, 2024
diff --git a/src/components/Landing/index.js b/src/components/Landing/index.js
@@ -547,6 +547,7 @@ export default class Landing extends Component {
                       report: summary.ReportSummary,
                       survey: summary.SurveySummary,
                     }}
+                    sectionFlags={sectionFlags}
                   ></Report>
                 )}
                 {/* other tab panel as specified here */}

diff --git a/src/components/Landing/utility.js b/src/components/Landing/utility.js
@@ -26,7 +26,10 @@ export function processEndPoint(endpoint, endpointParams) {
   if (!endpoint) return "";
   const params = endpointParams ? endpointParams : {};
   return endpoint
-    .replace(`{process.env.${ENV_VAR_PREFIX}_CONF_API_URL}`, getEnvConfidentialAPIURL())
+    .replace(
+      `{process.env.${ENV_VAR_PREFIX}_CONF_API_URL}`,
+      getEnvConfidentialAPIURL()
+    )
     .replace("{process.env.PUBLIC_URL}", getEnv("PUBLIC_URL"))
     .replace("{patientId}", params.patientId);
 }
@@ -149,7 +152,7 @@ export function getDemoData(section, params) {
 }
 
 export function getProcessedSummaryData(summary, summaryMap) {
-  const sectionFlags = {};
+  let sectionFlags = {};
   const sectionKeys = Object.keys(summaryMap || {});
   let flaggedCount = 0;
 

diff --git a/src/components/Report/components/MedicationList.js b/src/components/Report/components/MedicationList.js
@@ -0,0 +1,8 @@
+import React, { Component } from "react";
+import Table from "./Table";
+
+export default class MedicationList extends Component {
+  render() {
+    return <Table data={this.props.medicationListData} {...this.props}></Table>;
+  }
+}
diff --git a/src/components/Report/components/Table.js b/src/components/Report/components/Table.js
@@ -46,9 +46,12 @@ export default class Table extends Component {
         id: headerID,
         Header: () => {
           if (headerKey.omitHeader) return "";
+          const displayName = header.replace(/_/g, " ");
           if (headerKey.header)
-            return <h3 className="col-header-title">{header}</h3>;
-          return <span className={`col-header ${headerClass}`}>{header}</span>;
+            return <h3 className="col-header-title">{displayName}</h3>;
+          return (
+            <span className={`col-header ${headerClass}`}>{displayName}</span>
+          );
         },
         accessor: (entry) => {
           let value = entry[headerKey];
@@ -64,7 +67,9 @@ export default class Table extends Component {
           return (
             <span className={headerClass}>
               {value
-                ? value
+                ? typeof value === "object"
+                  ? value.toString()
+                  : value
                 : headerKey.default
                 ? headerKey.default
                 : entry[headerKey.key]}

diff --git a/src/components/Report/index.js b/src/components/Report/index.js
@@ -8,6 +8,7 @@ import SideNav from "../SideNav";
 import Version from "../../elements/Version";
 import reportSummarySections from "../../config/report_config";
 import {
+  dedupArrObjects,
   getQuestionnaireDescription,
   getQuestionnaireTitle,
   isEmptyArray,
@@ -100,6 +101,55 @@ export default class Report extends Component {
       </div>
     );
   }
+  getSectionFlags(section) {
+    if (isEmptyArray(section.flags)) return null;
+    const sectionFlags = this.props.sectionFlags;
+    if (!sectionFlags) return null;
+    return dedupArrObjects(
+      section.flags
+        .map((o) => {
+          if (
+            sectionFlags[o.parentKey] &&
+            sectionFlags[o.parentKey][o.dataKey]
+          ) {
+            return sectionFlags[o.parentKey][o.dataKey];
+          }
+          return null;
+        })
+        .filter((o) => !!o)
+        .flat()
+        .map((o) => {
+          return {
+            flagText: o.flagText,
+            flagClass: o.flagClass,
+          };
+        }),
+      "flagText"
+    );
+  }
+  renderFlagIconsInHeader(section) {
+    const flagObj = this.getSectionFlags(section);
+    if (isEmptyArray(flagObj)) return null;
+    return (
+      <div className="flags-container">
+        {flagObj.map((o, index) => {
+          return (
+            <div
+              key={`${section.dataKey}_flag_${index}`}
+              className="flag-item"
+              title={o.flagText}
+            >
+              <FontAwesomeIcon
+                className={`flag ${o.flagClass}`}
+                icon="exclamation-circle"
+                key={`${section.dataKey}_flagicon_${index}`}
+              />
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
   renderSectionBody(summaryData, section) {
     const surveySummaryData = reportUtil.getSurveySummaryData(summaryData);
     const scoringData = this.getScoringData(surveySummaryData);
@@ -115,6 +165,9 @@ export default class Report extends Component {
       bodyDiagramData: bodyDiagramData,
       procedureData: procedureData,
       referralData: referralData,
+      reportData: reportData,
+      medicationListData: reportUtil.getMedicationListData(reportData),
+      sectionFlags: this.props.sectionFlags,
     };
     if (section.component) {
       return <div className="section">{section.component(propData)}</div>;
@@ -142,6 +195,7 @@ export default class Report extends Component {
                   surveyData: matchedData,
                 })}
               {this.renderSubSectionAnchor(item)}
+              {this.renderSubSectionFlags(item)}
             </div>
           );
         })}
@@ -169,10 +223,30 @@ export default class Report extends Component {
         >
           {this.renderSubSectionTitle(item, summaryData)}
           {this.renderSubSectionInfo(item, summaryData)}
+          {this.renderFlagIconsInHeader(item)}
         </h3>
       </React.Fragment>
     );
   }
+  renderSubSectionFlags(section) {
+    const flagObj = this.getSectionFlags(section);
+    if (isEmptyArray(flagObj)) return null;
+    return (
+      <div className="flags-container">
+        {flagObj.map((o, index) => {
+          return (
+            <div key={`${section.dataKey}_flag_${index}`} className="flag-item">
+              <FontAwesomeIcon
+                className={`flag ${o.flagClass}`}
+                icon="exclamation-circle"
+              />
+              <span>{o.flagText}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
   renderSubSectionTitle(item, summaryData) {
     const title = summaryData?.Questionnaire
       ? getQuestionnaireTitle(summaryData?.Questionnaire)
@@ -297,4 +371,5 @@ export default class Report extends Component {
 
 Report.propTypes = {
   summaryData: PropTypes.object,
+  sectionFlags: PropTypes.object,
 };
diff --git a/src/components/Report/utility.js b/src/components/Report/utility.js
@@ -21,6 +21,11 @@ export function getReferralData(summaryData) {
   if (!summaryData || !summaryData.TreatmentHistory) return null;
   return summaryData.TreatmentHistory.Referrals;
 }
+export function getMedicationListData(summaryData) {
+  if (!summaryData) return null;
+  if (summaryData.MedicationList) return summaryData.MedicationList;
+  return null;
+}
 export function hasReportSummaryData(summaryData) {
   if (!summaryData) return false;
   let sectionData = [];

diff --git a/src/components/Summary.js b/src/components/Summary.js
@@ -504,7 +504,11 @@ export default class Summary extends Component {
             )}
           </div>
         </div>
-        <ReactTooltip className="summary-tooltip" id="overviewTooltip" clickable={true} />
+        <ReactTooltip
+          className="summary-tooltip"
+          id="overviewTooltip"
+          clickable={true}
+        />
       </div>
     );
   }
@@ -556,7 +560,11 @@ export default class Summary extends Component {
           <div className="title">{panel.alertsData.title}</div>
           <div className="content">{alertsContent}</div>
         </div>
-        <ReactTooltip className="summary-tooltip" id="overviewTooltip" clickable={true} />
+        <ReactTooltip
+          className="summary-tooltip"
+          id="overviewTooltip"
+          clickable={true}
+        />
       </div>
     );
   }

diff --git a/src/components/graph/ReportOverviewGraph.js b/src/components/graph/ReportOverviewGraph.js
@@ -722,7 +722,7 @@ export default class ReportOverviewGraph extends Component {
     const inYears = unit === "year";
     const min = arrNum[0];
     const max = arrNum[arrNum.length - 1];
-    const shouldRotate = (inYears && max >= 10);
+    const shouldRotate = inYears && max >= 10;
     const revArrNum = JSON.parse(JSON.stringify(arrNum)).reverse();
     const arrDisplayValues = arrNum.map((item, index) => {
       const prevItem = revArrNum.find(

diff --git a/src/config/report_config.js b/src/config/report_config.js
@@ -9,6 +9,7 @@ import ResponsesSummary from "../components/Report/components/ResponsesSummary";
 import RankedResponses from "../components/Report/components/RankedResponses";
 import Procedures from "../components/Report/components/Procedures";
 import Referrals from "../components/Report/components/Referrals";
+import MedicationList from "../components/Report/components/MedicationList";
 
 const iconProps = {
   width: 35,
@@ -27,6 +28,7 @@ export const STOP_DATA_KEY = "PAINTRACKER-STOP";
 export const TRT_DATA_KEY = "PAINTRACKER-TRT";
 export const PROCECURE_DATA_KEY = "PROCEDURE_HISTORY";
 export const REFERRAL_DATA_KEY = "REFERRAL_HISTORY";
+export const MEDICATION_LIST_DATA_KEY = "MedicationList";
 
 const reportConfig = [
   {
@@ -391,10 +393,6 @@ const reportConfig = [
           <Referrals
             tableOptions={{
               id: `${REFERRAL_DATA_KEY}_table`,
-              defaultSorted: {
-                id: "Date",
-                desc: true,
-              },
               headers: {
                 Date: {
                   key: "DateText",
@@ -403,7 +401,7 @@ const reportConfig = [
                   sortable: true,
                 },
                 Name: "Name",
-                "CPT CODE": "CPT_CODE",
+                "CPT Code": "CPT_CODE",
               },
             }}
             {...props}
@@ -417,10 +415,6 @@ const reportConfig = [
           <Procedures
             tableOptions={{
               id: `${PROCECURE_DATA_KEY}_table`,
-              defaultSorted: {
-                id: "Date",
-                desc: true,
-              },
               headers: {
                 Date: {
                   key: "DateText",
@@ -429,13 +423,44 @@ const reportConfig = [
                   sortable: true,
                 },
                 Name: "Name",
-                "CPT CODE": "CPT_CODE",
+                "CPT Code": "CPT_CODE",
               },
             }}
             {...props}
           ></Procedures>
         ),
       },
+      {
+        dataKey: MEDICATION_LIST_DATA_KEY,
+        dataKeySource: "ReportSummary",
+        title: "Medications",
+        flags: [
+          {
+            parentKey: "PDMPMedications",
+            dataKey: "PDMPMedications"
+          }
+        ],
+        component: (props) => (
+          <MedicationList
+            tableOptions={{
+              id: `${MEDICATION_LIST_DATA_KEY}_table`,
+              headers: {
+                Drug_Description: "Name",
+                Quantity: "Quantity",
+                Dosage: "Dosage",
+                Written_Date: {
+                  key: "Start",
+                  formatter: "datishFormat",
+                  sorter: "dateCompare",
+                  sortable: true,
+                },
+                Prescriber: "Prescriber"
+              },
+            }}
+            {...props}
+          ></MedicationList>
+        ),
+      },
       {
         dataKey: TRT_DATA_KEY,
         title: "Patient-reported Treatments Questionnaire",