Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Linked new ReactUI to Order --> Study --> Electronic Orders #1483

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Linked new ReactUI to Order --> Study --> Electronic Orders #1483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2507db9
linked StudyElectronicOrder to the correct side navigation item
harshitg927 Jan 31, 2025
5a426bc
formatted the code using npm run format
harshitg927 Jan 31, 2025
1e1ea47
fix: improved responsiveness of electronic orders page to be compatib…
harshitg927 Feb 2, 2025
b13cef2
Merge branch 'develop' into issue-1474
harshitg927 Feb 2, 2025
6c40735
Merge branch 'develop' into issue-1474
harshitg927 Feb 4, 2025
dc6001e
Merge branch 'develop' into issue-1474
mozzy11 Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,12 @@ export default function App() {
component={() => <FindOrder />}
role="Reception"
/>
<SecureRoute
path="/StudyElectronicOrders"
exact
component={() => <EOrderPage />}
role="Reception"
/>
<SecureRoute
path="/ReportNonConformingEvent"
exact
Expand Down
239 changes: 175 additions & 64 deletions frontend/src/components/eOrder/EOrder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
Pagination,
Link,
} from "@carbon/react";

import { Grid, Column } from "@carbon/react";
import { FormattedMessage, useIntl } from "react-intl";
import { ChevronDown, Edit, TaskAdd } from "@carbon/icons-react";
import { getFromOpenElisServer } from "../utils/Utils";
Expand All @@ -33,8 +33,83 @@ const EOrder = ({ eOrders, setEOrders, eOrderRef }) => {
const [entering, setEntering] = useState(false);
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 768);
};

window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);

const getHeaders = () => {
const allHeaders = [
{
key: "requestDateDisplay",
header: intl.formatMessage({ id: "eorder.requestDate" }),
},
{
key: "patientLastName",
header: intl.formatMessage({ id: "eorder.name.last" }),
},
{
key: "patientFirstName",
header: intl.formatMessage({ id: "eorder.name.first" }),
},
{
key: "patientNationalId",
header: intl.formatMessage({ id: "eorder.id.national" }),
},
{
key: "requestingFacility",
header: intl.formatMessage({ id: "eorder.facility.requesting" }),
},
{
key: "priority",
header: intl.formatMessage({ id: "eorder.priority" }),
},
{
key: "status",
header: intl.formatMessage({ id: "eorder.status" }),
},
{
key: "testName",
header: intl.formatMessage({ id: "eorder.test.name" }),
},
{
key: "referringLabNumber",
header: intl.formatMessage({ id: "eorder.labnumber.referring" }),
},
{
key: "passportNumber",
header: intl.formatMessage({ id: "eorder.passport.number" }),
},
{
key: "subjectNumber",
header: intl.formatMessage({ id: "eorder.id.subjectNumber" }),
},
{
key: "labNumber",
header: intl.formatMessage({ id: "eorder.labNumber" }),
},
];

useEffect(() => {}, []);
// Return fewer columns for mobile view
if (isMobile) {
return allHeaders.filter((header) =>
[
"requestDateDisplay",
"patientLastName",
"patientFirstName",
"status",
].includes(header.key),
);
}

return allHeaders;
};

function saveEntry(externalOrderId, labNumber) {
window.open(
Expand Down Expand Up @@ -115,84 +190,79 @@ const EOrder = ({ eOrders, setEOrders, eOrderRef }) => {

const renderExpandedRow = (row) => {
const eOrderId = row.id;
const electronicOrderUUID = eOrders.find((item) => {
return item.id === eOrderId;
})?.externalOrderId;
if (!electronicOrderUUID) {
return <></>;
}
const index = eOrders.findIndex((item) => {
return item.id === eOrderId;
});
const electronicOrderUUID = eOrders.find(
(item) => item.id === eOrderId,
)?.externalOrderId;
if (!electronicOrderUUID) return <></>;

const index = eOrders.findIndex((item) => item.id === eOrderId);

return (
<>
<div className="formInlineDiv">
<Grid narrow={isMobile}>
<Column sm={4} md={6} lg={8}>
<div className="formInlineDiv">
<CustomLabNumberInput
name="labNo"
value={eOrders[index].labNo || ""}
onBlur={(e) => {
handleLabNoValidation(e, index);
}}
onChange={(e, rawInput) => {
handleLabNo(e, rawInput, index);
}}
onKeyPress={(e) => {
handleKeyPress(e, index);
}}
onBlur={(e) => handleLabNoValidation(e, index)}
onChange={(e, rawInput) => handleLabNo(e, rawInput, index)}
onKeyPress={(e) => handleKeyPress(e, index)}
labelText={intl.formatMessage({ id: "sample.label.labnumber" })}
id="labNo"
helperText={
<>
<FormattedMessage id="label.order.scan.text" />{" "}
<Link
href="#"
onClick={(e) => {
handleLabNoGeneration(e, index);
}}
onClick={(e) => handleLabNoGeneration(e, index)}
>
<FormattedMessage id="sample.label.labnumber.generate" />
</Link>
</>
}
className="inputText"
/>
<span className="middleAlignVertical">
<Button
type="button"
kind="tertiary"
label={intl.formatMessage({ id: "eorder.button.editOrder" })}
hasIconOnly={true}
renderIcon={Edit}
iconDescription={intl.formatMessage({
id: "eorder.button.editOrder",
})}
onClick={() => {
editOrder(electronicOrderUUID, eOrders[index].labNo);
}}
/>
<Button
type="button"
kind="primary"
label={intl.formatMessage({ id: "eorder.button.enterOrder" })}
hasIconOnly={true}
renderIcon={TaskAdd}
iconDescription={intl.formatMessage({
id: "eorder.button.enterOrder",
})}
onClick={() => {
saveEntry(electronicOrderUUID, eOrders[index].labNo);
}}
/>
</span>
</div>
<div className="formInlineInput">
<div className="inputText"></div>
</Column>
<Column sm={4} md={2} lg={4}>
<div className="button-group">
<Button
type="button"
kind="tertiary"
label={intl.formatMessage({ id: "eorder.button.editOrder" })}
hasIconOnly={!isMobile}
renderIcon={Edit}
iconDescription={intl.formatMessage({
id: "eorder.button.editOrder",
})}
onClick={() =>
editOrder(electronicOrderUUID, eOrders[index].labNo)
}
className="responsive-button"
>
{isMobile &&
intl.formatMessage({ id: "eorder.button.editOrder" })}
</Button>
<Button
type="button"
kind="primary"
label={intl.formatMessage({ id: "eorder.button.enterOrder" })}
hasIconOnly={!isMobile}
renderIcon={TaskAdd}
iconDescription={intl.formatMessage({
id: "eorder.button.enterOrder",
})}
onClick={() =>
saveEntry(electronicOrderUUID, eOrders[index].labNo)
}
className="responsive-button"
>
{isMobile &&
intl.formatMessage({ id: "eorder.button.enterOrder" })}
</Button>
</div>
</div>
<div></div>
</>
</Column>
</Grid>
);
};

Expand Down Expand Up @@ -381,17 +451,58 @@ const EOrder = ({ eOrders, setEOrders, eOrderRef }) => {
};

return (
<div ref={eOrderRef}>
<div ref={eOrderRef} className="eorder-container">
{eOrders.length > 0 && (
<div className="orderLegendBody">
<FormattedMessage id="eorder.instructions.enter1" /> <ChevronDown />{" "}
<FormattedMessage id="eorder.instructions.enter2" /> <TaskAdd />{" "}
<FormattedMessage id="eorder.instructions.enter3" /> <Edit />{" "}
<FormattedMessage id="eorder.instructions.enter4" />
<br></br>
<div className="instructions">
<FormattedMessage id="eorder.instructions.enter1" /> <ChevronDown />{" "}
<FormattedMessage id="eorder.instructions.enter2" /> <TaskAdd />{" "}
<FormattedMessage id="eorder.instructions.enter3" /> <Edit />{" "}
<FormattedMessage id="eorder.instructions.enter4" />
</div>
{createDataTable(eOrders)}
</div>
)}

<style>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you put this in a separate css class ?

{`
.eorder-container {
max-width: 100%;
overflow-x: auto;
}

.button-group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.responsive-button {
min-width: ${isMobile ? "100%" : "auto"};
margin-bottom: ${isMobile ? "0.5rem" : "0"};
}

.instructions {
padding: 1rem;
margin-bottom: 1rem;
background: #f4f4f4;
border-radius: 4px;
text-align: ${isMobile ? "left" : "center"};
line-height: 1.5;
}

@media (max-width: 768px) {
.formInlineDiv {
flex-direction: column;
gap: 1rem;
}

.inputText {
width: 100%;
}
}
`}
</style>
</div>
);
};
Expand Down
Loading
Loading