Code review

UCSF-IGHS · Jul 24, 2024 · bb6bdc5 · bb6bdc5
1 parent ba956a9
commit bb6bdc5
Show file tree

Hide file tree

Showing 11 changed files with 407 additions and 6,108 deletions.
diff --git a/packages/esm-covid-app/src/ReportFilters.tsx b/packages/esm-covid-app/src/ReportFilters.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Dropdown, Button, Accordion, AccordionItem, DatePicker, DatePickerInput } from '@carbon/react';
+import styles from './home.component.scss';
+import { ComboBox } from '@carbon/react';
+
+const ReportFilters = ({
+  config,
+  reportId,
+  setReportId,
+  ptrackerId,
+  setPtrackerId,
+  personUuid,
+  setPersonUuid,
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  handleSubmit,
+  showFilters,
+  handleFiltersToggle,
+}) => {
+  const handleDateChange = (setter) => (event) => {
+    const date = event[0] ? event[0].toISOString().split('T')[0] : '';
+    setter(date);
+  };
+
+  return (
+    <Accordion className={styles.accordion}>
+      <AccordionItem
+        className={styles.heading}
+        title="Report Filters"
+        open={showFilters}
+        onHeadingClick={handleFiltersToggle}
+      >
+        <div className={styles.formContainer}>
+          <form className={styles.form} onSubmit={handleSubmit}>
+            <div className={styles.datePickerContainer}>
+              <ComboBox
+                id="report-dropdown"
+                titleText="Select Report"
+                label="Select a report to display"
+                items={config.reports}
+                itemToString={(item) => (item ? item.name : '')}
+                onChange={({ selectedItem }) => {
+                  if (selectedItem) {
+                    setReportId(selectedItem.reportId || '');
+                    setPtrackerId(selectedItem.ptrackerId || '');
+                    setPersonUuid(selectedItem.personUuid || '');
+                  }
+                }}
+              />
+              <DatePicker
+                datePickerType="single"
+                onChange={handleDateChange(setStartDate)}
+                value={startDate ? [new Date(startDate)] : []}
+              >
+                <DatePickerInput id="start-date" labelText="Start Date" placeholder="yyyy-mm-dd" />
+              </DatePicker>
+              <DatePicker
+                datePickerType="single"
+                onChange={handleDateChange(setEndDate)}
+                value={endDate ? [new Date(endDate)] : []}
+              >
+                <DatePickerInput id="end-date" labelText="End Date" placeholder="yyyy-mm-dd" />
+              </DatePicker>
+              <Button className={styles.button} kind="tertiary" type="submit">
+                View Report
+              </Button>
+            </div>
+          </form>
+        </div>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export default ReportFilters;
diff --git a/packages/esm-covid-app/src/covid-home.component.tsx b/packages/esm-covid-app/src/covid-home.component.tsx
diff --git a/packages/esm-covid-app/src/dashboard.meta.ts b/packages/esm-covid-app/src/dashboard.meta.ts
@@ -39,6 +39,17 @@ export const covidClinicalViewDashboardMeta = {
   title: 'COVID',
 };
 
+export const covidCasesDashboardMeta = {
+  name: 'covid-dashboard',
+  icon: VisualRecognition,
+  slot: 'covid-dashboard-slot',
+  title: 'Covid Test',
+  isFolder: true,
+  folderTitle: 'Covid Test',
+  folderIcon: VisualRecognition,
+  isHidde: true,
+};
+
 export const covid19CasesDashboardMeta = {
   name: 'covid-cases',
   slot: 'covid-cases-dashboard-slot',
@@ -49,11 +60,11 @@ export const covid19CasesDashboardMeta = {
 };
 
 export const reportingDemoDashboardMeta = {
-  name: 'covid-cases',
+  name: 'covid-report',
   icon: VisualRecognition,
-  slot: 'covid-cases-dashboard-slot',
+  slot: 'covid-reporting-dashboard-slot',
   title: 'Reporting Demo',
-  isFolder: false,
+  isFolder: true,
   folderTitle: 'Reporting Demo',
   folderIcon: VisualRecognition,
 };
diff --git a/packages/esm-covid-app/src/home.component.scss b/packages/esm-covid-app/src/home.component.scss
@@ -1,75 +1,133 @@
-@import '~@carbon/styles/scss/colors';
-@import '~@carbon/styles/scss/spacing';
-@import '~@carbon/styles/scss/type/index';
-@import '~@carbon/styles/scss/type';
-$gray-40: #a8a8a8;
-
+.container {
+  padding: 2rem;
+}
 .homeContainer {
-  height: 100vh;
+  padding: 1rem;
+}
+.dropdownItem {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+}
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 300px;
+}
+
+.tile {
+  padding: 2rem;
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.explainer {
+  color: #777;
 }
 
 .form {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   gap: 1rem;
-  max-width: 100%;
+}
+.formContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.datePickerContainer {
+  display: flex;
+  align-items: center; 
+  gap: 16px; 
 }
 
 .fetchButtonContainer {
-  flex-direction: row;
-  margin-top: 1rem;
-  width: 100%;
+  margin-left: 16px;
   display: flex;
-  justify-content: flex-start;
+  align-items: center; 
+}
+
+.datePickerContainer > * {
+  flex: 1; 
 }
 
+.datePickerInput {
+  min-width: 120px;
+}
+
+.button {
+  max-height: 40px;
+  line-height: 40px; 
+  font-size: 14px;
+  padding: 0 16px;
+  margin-top: 1rem;
+  max-width: 120px;
+  align-items: center;
+}
+
+
 .datePickerContainer {
   display: flex;
   gap: 1rem;
 }
 
+.fetchButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .dataTableContainer {
-  margin: 20px;
-  overflow-x: auto;
-  max-height: 80vh;
-  overflow-y: auto;
+  margin-top: 2rem;
+  padding: 1rem;
+  border: solid 1px #e0e0e0;
+  height: 100vh;
 }
 
-.dataTableContainer table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-  font: caption;
-  font-size: 0.8rem;
+.dataTableFullContainer {
+  margin-top: 2rem;
+  padding: 1rem;
+  height: 100vh;
 }
 
-.dataTableContainer table tbody td {
-  border: 1px solid $gray-40;
-  text-align: left;
-  padding: 8px;
+.tableContainer {
+  margin-top: 1rem;
 }
 
-.dataTableContainer th {
-  border: 1px solid $white;
-  background-color: var(--brand-03);
-  font-weight: bold;
-  padding: 8px;
-  color: white;
+.toolbarWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.dataTableContainer thead {
-  position: sticky;
-  top: 0;
-  z-index: 999;
+.toolbarContent {
+  display: flex;
+  gap: 1rem;
 }
 
-.dataTableContainer td {
-  background-color: #ffffff;
-  white-space: unset;
+.searchbox {
+  flex-grow: 1;
 }
 
-.dataTableContainer tr:nth-child(even) td {
-  background-color: $gray-20;
+.tileContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
 }
+
+.tileContent {
+  text-align: center;
+}
+
+.content {
+  font-size: 1.25rem;
+  color: #5a5a5a;
+}
+
+.pagination {
+  margin-top: 1rem;
+}