Skip to content

Commit

Permalink
Merge branch 'main' into customize-query-graceful-fallback
Browse files Browse the repository at this point in the history
  • Loading branch information
fzhao99 authored Jan 3, 2025
2 parents de5130b + 106ad69 commit 3073cae
Show file tree
Hide file tree
Showing 36 changed files with 207 additions and 310 deletions.
40 changes: 0 additions & 40 deletions query-connector/src/app/DataProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,7 @@
"use client";

import classNames from "classnames";
import { createContext, ReactNode, useState } from "react";

export interface DataDisplayInfo {
title: string;
value?: string | React.JSX.Element | React.JSX.Element[];
}

/**
* Functional component for displaying data.
* @param props - Props for the component.
* @param props.item - The display data item(s) to be rendered.
* @param [props.className] - Additional class name for styling purposes.
* @returns - A React element representing the display of data.
*/
export const DataDisplay: React.FC<{
item: DataDisplayInfo;
className?: string;
}> = ({
item,
className,
}: {
item: DataDisplayInfo;
className?: string;
}): React.JSX.Element => {
return (
<div>
<div className="grid-row">
<div className="data-title" id={item.title}>
{item.title}
</div>
<div
className={classNames("grid-col-auto maxw7 text-pre-line", className)}
>
{item.value}
</div>
</div>
<div className={"section__line_gray"} />
</div>
);
};

export interface DataContextValue {
data: unknown; // You can define a specific data type here
setData: (data: unknown) => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
// by the entire query branch of the app
const handleApplyChanges = () => {
const selectedItems = Object.keys(valueSetOptions).reduce((acc, key) => {
const items = valueSetOptions[key as DibbsConceptType];
const items = valueSetOptions[key as DibbsConceptType] ?? {};
acc = acc.concat(Object.values(items).flatMap((dict) => dict.items));
return acc;
}, [] as DibbsValueSet[]);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import styles from "./customizeQuery.module.scss";
import Table from "../../designSystem/table/Table";
import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox";
import { VsGrouping } from "@/app/utils/valueSetTranslation";
import classNames from "classnames";
import Checkbox from "../../designSystem/checkbox/Checkbox";

type CustomizeQueryAccordionBodyProps = {
group: VsGrouping;
Expand Down Expand Up @@ -38,7 +38,7 @@ const CustomizeQueryAccordionBody: React.FC<
<Table className={classNames(styles.customizeQueryGridContainer)}>
<thead>
<tr className={styles.customizeQueryGridHeader}>
<th>Include</th>
<th></th>
<th>Code</th>
<th>Display</th>
</tr>
Expand All @@ -52,22 +52,28 @@ const CustomizeQueryAccordionBody: React.FC<
return acc;
}, [] as ValueSetIndexedConcept[])
.map((item, conceptIndex) => (
<tr className={`${styles.customizeQueryGridRow}`} key={item.code}>
<td className={styles.noBorderNoBackgroundNoPadding}>
<CustomizeQueryCheckbox
<tr
onClick={() => {
toggleInclude(groupIndex, item.vsIndex, conceptIndex);
}}
className={classNames(
"tableRowWithHover_clickable",
styles.customizeQueryGridRow,
)}
key={item.code}
tabIndex={0}
>
<td className={styles.checkboxCell}>
<Checkbox
id={item.code}
checked={item.include}
onChange={() => {
toggleInclude(groupIndex, item.vsIndex, conceptIndex);
}}
/>
</td>
<td className={styles.noBorderNoBackgroundNoPadding}>
{item.code}
</td>
<td className={styles.noBorderNoBackgroundNoPadding}>
{item.display}
</td>
<td>{item.code}</td>
<td>{item.display}</td>
</tr>
))}
</tbody>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { VsGrouping } from "@/app/utils/valueSetTranslation";
import styles from "./customizeQuery.module.scss";
import CustomizeQueryCheckbox from "./vanityCheckbox/CustomizeQueryCheckbox";
import Checkbox from "../../designSystem/checkbox/Checkbox";

type CustomizeQueryAccordionProps = {
handleSelectAllChange: (groupIndex: string, checked: boolean) => void;
Expand Down Expand Up @@ -37,17 +37,17 @@ const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
<div
className={`${styles.accordionHeader} display-flex flex-no-wrap flex-align-start customize-query-header`}
>
<CustomizeQueryCheckbox
<Checkbox
id={group.valueSetName}
checked={selectedCount === selectedTotal}
isMinusState={isMinusState}
isHeader
onChange={() => {
handleSelectAllChange(
groupIndex,
isMinusState ? false : selectedCount !== selectedTotal,
);
}}
className={styles.checkboxCell}
/>
<div className={`${styles.accordionButtonTitle}`}>
{`${group.valueSetName}`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
.customizeQueryNav .currentTab::after {
content: "";
position: absolute;
bottom: -12px;
bottom: -14px;
left: 0;
width: 100%;
height: 4px;
Expand All @@ -68,12 +68,6 @@
border: none;
}

.noBorderNoBackgroundNoPadding {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
}

.accordionHeader {
display: flex;
width: 100%;
Expand All @@ -82,14 +76,19 @@
font-style: normal;
font-weight: 700;
line-height: normal;
gap: 1.25rem;
gap: 1.5rem;
}

.checkboxCell {
padding: 1rem 1rem 1rem 1.5rem;
background-color: $page-background-dark;
}

.accordionSubtitle {
display: block;
font-weight: normal;
font-size: 16px;
color: $text-secondary;
color: $gray-50;
font-size: 16px;
line-height: normal;
}
Expand All @@ -115,7 +114,7 @@

.customizeQueryGridContainer {
--column-spacing: 3.75rem 6.25rem 1fr;
--column-gap: 3.75rem;
--column-gap: 1rem;
}

.customizeQueryGridHeader {
Expand All @@ -133,3 +132,7 @@
text-decoration: underline;
padding-right: 1rem;
}

.checkboxCell label {
justify-content: center;
}

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
height: $header-content-height;
}

@media (max-width: 63.99em) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@
"Arial", "sans-serif" !important;
font-size: 1.25rem !important;
line-height: 1.1 !important;
padding-bottom: 0.75rem;
margin-bottom: 0.5rem !important;
}

.resultsBannerContent {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const ConditionsTable: React.FC<ConditionTableProps> = ({ conditions }) => {

return (
<Table
bordered={false}
className={classNames(
"margin-top-0-important",
styles.conditionsTableContainer,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
formatIdentifier,
formatDate,
} from "../../../../format-service";
import { DataDisplay, DataDisplayInfo } from "@/app/DataProvider";
import styles from "./resultsTables.module.scss";
import Table from "@/app/query/designSystem/table/Table";

/**
* Displays the demographic information of a patient.
Expand All @@ -31,15 +32,29 @@ const Demographics: React.FC<DemographicsProps> = ({ patient }) => {

return (
<div className="margin-top-0-important">
{demographicData.map((item) => (
<DataDisplay item={item} key={item.title} />
))}
<Table bordered={false}>
<tbody>
{demographicData.map((item) => (
<tr className={styles.demographicsRow} key={item.title}>
<td>
<strong>{item.title}</strong>
</td>
<td> {item.value}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
};

export default Demographics;

export interface DataDisplayInfo {
title: string;
value?: string | React.JSX.Element | React.JSX.Element[];
}

/**
* Formats the demographic information of a patient.
* @param patient - The patient to format demographic information for.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const DiagnosticReportTable: React.FC<DiagnosticReportTableProps> = ({
diagnosticReports,
}) => {
return (
<Table className="margin-top-0-important">
<Table bordered={false} className="margin-top-0-important">
<thead>
<tr className={styles.diagnosticsRow}>
<th>Date</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const EncounterTable: React.FC<EncounterTableProps> = ({
"serviceProvider",
);
return (
<Table className="margin-top-0-important">
<Table bordered={false} className="margin-top-0-important">
<thead>
<tr className={styles.encountersRow}>
<th>Visit Reason</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const MedicationRequestTable: React.FC<MedicationRequestTableProps> = ({
);

return (
<Table className="margin-top-0-important">
<Table bordered={false} className="margin-top-0-important">
<thead>
<tr className={styles.medicationRow}>
<th>Order Date</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const ObservationTable: React.FC<ObservationTableProps> = ({
"referenceRange",
);
return (
<Table className={classNames("margin-top-0-important")}>
<Table bordered={false} className={classNames("margin-top-0-important")}>
<thead>
<tr className={styles.observationRow}>
<th>Date</th>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ $observationColumnSpacing: 1fr 2fr 2fr;
$medicationColumnSpacing: 1fr 3fr 1fr;
$encountersColumnSpacing: 2fr 1fr 1fr 1fr;
$diagnosticsColumnSpacing: 1fr 3fr;
$demographicsColumnSpacing: 1fr 3fr;

.demographicsRow {
grid-template-columns: $demographicsColumnSpacing;
gap: $columnGap;
}

.conditionRow {
grid-template-columns: $conditionColumnSpacing;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@
.searchFormContainer {
margin-top: 1rem;
padding: 1.5rem;
border: 1px solid $border;
}

.demoQueryFiller {
background: #faf3d1;
background: $yellow-vivid-5v;
border: 1px solid #fee685;
border-radius: 4px;
display: flex;
Expand All @@ -33,6 +34,6 @@
width: 100%;
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 1.375rem;
font-size: 1.25rem;
font-weight: 700;
}
Loading

0 comments on commit 3073cae

Please sign in to comment.