ECR Viwer Demo Site

front-end/app/export/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import ECRTable from '@/components/ECRTable';
+import ECRTable from '@/components/ECRTable/ECRTable';
 import { useData } from '@/utils/DataContext';
 import { Button } from '@trussworks/react-uswds'
 

front-end/app/global.scss

@@ -50,10 +50,12 @@
     background: #162e51;
     color: white !important;
     min-height: 84px;
+
     a {
       color: white !important;
     }
   }
+
   .usa_footer-trademark {
     font-family:
       Source Sans Pro Web,
@@ -99,6 +101,7 @@
   margin-top: 1rem;
   margin-bottom: 1rem;
   //styleName: H1;
+
   h1 {
     font-family:
       Source Sans Pro Web,
@@ -118,8 +121,10 @@
     width: 100%;
     max-width: 100%;
   }
+
   .usa-button--outline {
     background-color: white !important;
+
     &:hover {
       background-color: #005ea2 !important;
       color: white;

front-end/app/view_ecr/page.tsx

@@ -0,0 +1,36 @@
+'use client'
+import {Button} from '@trussworks/react-uswds'
+import ECRTable from '@/components/ECRTable/ECRTable';
+import React from "react";
+import { useRouter } from 'next/navigation';
+import {useData} from "@/utils/DataContext";
+
+
+export default function ViewECR() {
+	const router = useRouter()
+	const {data} = useData()
+
+	if (!data) {
+		return <div>No data available.</div>
+	}
+
+	const handleUploadClick = () => {
+		router.push('/upload_tutorial')
+	}
+
+	const handleDownloadClick = () => {
+		router.push('/export')
+	}
+
+	return (
+		<div className="margin-3">
+			<h1 className={'font-sans-xl text-bold'}>View your eCR</h1>
+			<p>
+				You can view your data below or download it as a FHIR bundle (JSON file)
+			</p>
+			<ECRTable ecrData={data}></ECRTable>
+			<Button type="button" outline onClick={handleUploadClick}>Upload new eCR</Button>
+			<Button type="button" onClick={handleDownloadClick}>Download FHIR bundle</Button>
+		</div>
+	)
+}

front-end/components/ECRTable/ECRTable.css

@@ -0,0 +1,3 @@
+.usa-table {
+    max-width: 512px;
+}

front-end/components/ECRTable/ECRTable.tsx

@@ -0,0 +1,37 @@
+import {Table} from '@trussworks/react-uswds'
+import _ from 'lodash';
+
+export default function ECRTable({ecrData}: any) {
+
+	const options = ['patient_id', 'first_name', 'last_name', 'gender', 'birth_date']
+
+
+	const getTableBody = (data: any) => {
+		return (
+			<tbody>
+			{data && options.map(function (option) {
+				return (
+					<tr key={option}>
+						<th scope="row">{_.startCase(option)}</th>
+						<td>{data[option]}</td>
+					</tr>
+				);
+			})}
+			</tbody>
+		)
+	}
+	return (
+		<Table className={'usa-table'}
+					 bordered
+					 fullWidth>
+			<thead>
+			<tr>
+				<th scope="col">Field Name</th>
+				<th scope="col">Field Value</th>
+			</tr>
+			</thead>
+
+			{getTableBody(ecrData?.processed_values?.parsed_values)}
+		</Table>
+	)
+}

front-end/tests/components/ECRTable.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import "@testing-library/jest-dom";
-import ECRTable from '../../components/ECRTable'; // Adjust the import path as per your project structure
+import ECRTable from '../../components/ECRTable/ECRTable'; // Adjust the import path as per your project structure
 
 describe('ECRTable', () => {
     it('renders ECRTable component with provided data', () => {
@@ -19,11 +19,10 @@ describe('ECRTable', () => {
             }
         };
 
-        render(<ECRTable ecrData={ecrData} />);
+        render(<ECRTable ecrData={ecrData}/>);
 
         // You can add more specific assertions here
         // For example, checking if the table headers and data are rendered
-        expect(screen.getByText('eCR Viewer')).toBeInTheDocument();
         expect(screen.getByText('Field Name')).toBeInTheDocument();
         expect(screen.getByText('Field Value')).toBeInTheDocument();
         expect(screen.getByText('Patient Id')).toBeInTheDocument();