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

Jump to bottom

React OrderEntryForm Updates #477

Merged
merged 3 commits into from
Jul 5, 2023
Merged

React OrderEntryForm Updates #477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c4405c0
Resolved Order Entry conflicts
abertnamanya Jul 2, 2023
4874d07
Resolved Order Entry conflicts
abertnamanya Jul 2, 2023
a6932b1
fix Order rememberSiteName
abertnamanya Jul 3, 2023
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
Binary file added react-ui/public/images/success-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions react-ui/src/components/addOrder/AddOrder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@ const AddOrder = (props) => {
useEffect(() => {
getFromOpenElisServer("/rest/SamplePatientEntry", getSampleEntryPreform);
getFromOpenElisServer("/rest/configuration-properties", fetchConfigurationProperties)

window.scrollTo(0, 0)
return () => {
componentMounted.current = false
}
Expand Down Expand Up @@ -338,11 +338,11 @@ const AddOrder = (props) => {

</div>
<div className="inlineDiv">
<CustomDatePicker id={"requestDate"} labelText={"Request Date"}
<CustomDatePicker id={"requestDate"} labelText={"Request Date"} autofillDate={true}
value={orderFormValues.sampleOrderItems.requestDate} className="inputText"
onChange={(date) => handleDatePickerChange("requestDate", date)}/>

<CustomDatePicker id={"receivedDate"} labelText={"Received Date"} className="inputText"
<CustomDatePicker id={"receivedDate"} labelText={"Received Date"} className="inputText" autofillDate={true}
value={orderFormValues.sampleOrderItems.receivedDateForDisplay}
onChange={(date) => handleDatePickerChange("receivedDate", date)}/>
</div>
Expand All @@ -353,7 +353,7 @@ const AddOrder = (props) => {
/>

<CustomDatePicker id={"nextVisitDate"} className="inputText" labelText={"Next Visit Date"}
value={orderFormValues.sampleOrderItems.nextVisitDate}
value={orderFormValues.sampleOrderItems.nextVisitDate} autofillDate={false}
onChange={(date) => handleDatePickerChange("nextVisitDate", date)}/>
</div>
<div className="inlineDiv">
Expand Down
1 change: 1 addition & 0 deletions react-ui/src/components/addOrder/AddSample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ const AddSample = (props) => {

useEffect(() => {
getFromOpenElisServer("/rest/test-rejection-reasons", fetchRejectSampleReasons);
window.scrollTo(0, 0)
return () => {
componentMounted.current = false
}
Expand Down
31 changes: 21 additions & 10 deletions react-ui/src/components/addOrder/Index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {NotificationContext} from "../layout/Layout";
import {AlertDialog, NotificationKinds} from "../common/CustomNotification";
import {postToOpenElisServer} from "../utils/Utils";
import OrderEntryAdditionalQuestions from './OrderEntryAdditionalQuestions';
import OrderSuccessMessage from "./OrderSuccessMessage";

export let sampleObject = {
index: 0,
Expand All @@ -24,11 +25,12 @@ export let sampleObject = {
const Index = () => {

const firstPageNumber = 0;
const lastPageNumber = 3
const lastPageNumber = 4
const patientInfoPageNumber = firstPageNumber;
const programPageNumber = firstPageNumber + 1;
const samplePageNumber = firstPageNumber + 2;
const orderPageNumber = lastPageNumber;
const orderPageNumber = firstPageNumber + 3;
const successMsgPageNumber = lastPageNumber;

const {notificationVisible} = useContext(NotificationContext);
const [page, setPage] = useState(firstPageNumber);
Expand All @@ -53,6 +55,7 @@ const Index = () => {
}
const handleSubmitOrderForm = (e) => {
e.preventDefault();
setPage(page + 1);
postToOpenElisServer("/rest/SamplePatientEntry", JSON.stringify(orderFormValues
), handlePost)
}
Expand Down Expand Up @@ -135,9 +138,9 @@ const Index = () => {
<Stack gap={10}>
<div className='pageContent'>
{notificationVisible === true ? <AlertDialog/> : ""}
<div className="orderLegendBody">
<div className="orderWorkFlowDiv">
<h2>Test Request</h2>
<ProgressIndicator currentIndex={page} className="ProgressIndicator" spaceEqually={true}
{page <= orderPageNumber && <ProgressIndicator currentIndex={page} className="ProgressIndicator" spaceEqually={true}
onChange={(e) => handleTabClickHandler(e)}>
<ProgressStep
complete
Expand All @@ -152,7 +155,7 @@ const Index = () => {
<ProgressStep
label="Add Order"
/>
</ProgressIndicator>
</ProgressIndicator> }

{page === patientInfoPageNumber &&
<PatientInfo orderFormValues={orderFormValues} setOrderFormValues={setOrderFormValues}/>
Expand All @@ -167,14 +170,22 @@ const Index = () => {
<AddOrder orderFormValues={orderFormValues} setOrderFormValues={setOrderFormValues}
samples={samples}/>
}

{page === successMsgPageNumber &&
<OrderSuccessMessage orderFormValues={orderFormValues}
setOrderFormValues={setOrderFormValues}
setSamples={setSamples}
setPage={setPage}/>
}
<div className="navigationButtonsLayout">
{page !== firstPageNumber && <Button kind="tertiary" onClick={() => navigateBackWards()}>Back</Button>}
{(page !== firstPageNumber && page <= orderPageNumber) &&
<Button kind="tertiary" onClick={() => navigateBackWards()}>Back</Button>}

{page !== orderPageNumber ? <Button kind="primary" className="forwardButton"
onClick={() => navigateForward()}>Next</Button> :
{page < orderPageNumber && <Button kind="primary" className="forwardButton"
onClick={() => navigateForward()}>Next</Button> }

<Button kind="primary" className="forwardButton"
onClick={handleSubmitOrderForm}>Submit</Button>}
{page === orderPageNumber && <Button kind="primary" className="forwardButton"
onClick={handleSubmitOrderForm}>Submit</Button>}

</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion react-ui/src/components/addOrder/OrderReferralRequest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const OrderReferralRequest = ({
value={referralRequests[i].institute ? referralRequests[i].institute : null}
onChange={(e) => handleInstituteSelect(e, i)}
defaultSelect={defaultSelect}/>,
sentDate: <CustomDatePicker id={"sendDate_" + id}
sentDate: <CustomDatePicker id={"sendDate_" + id} autofillDate={true}
value={referralRequests[i].sentDate ? referralRequests[i].sentDate : null}
onChange={(date) => handleSentDatePicker(date, i)} labelText={""}/>,
testName: <CustomSelect id={"shadowReferredTest_" + id} defaultSelect={testValue}/>,
Expand Down
95 changes: 95 additions & 0 deletions react-ui/src/components/addOrder/OrderSuccessMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React, {useEffect, useState} from 'react';
import {Button, Row, TextInput} from "@carbon/react";
import config from "../../config.json";
import {SampleOrderFormValues} from "../formModel/innitialValues/OrderEntryFormValues";
import {sampleObject} from "./Index";


const OrderSuccessMessage = (props) => {
const {orderFormValues, setOrderFormValues, setSamples, setPage} = props;
const [allowPrintBarCodes, setAllowPrintBarCodes] = useState(false);
const [numberOfPrints, setNumberOfPrints] = useState(1);


const handlePrintBarCode = () => {
setAllowPrintBarCodes(true)
}
const handleNumberOfPrints = (e) => {
setNumberOfPrints(e.target.value);
}
const confirmPrintHandler = () => {
let barcodesPdf = config.serverBaseUrl + `/LabelMakerServlet?labNo=${orderFormValues.sampleOrderItems.labNo}&type=order&quantity=${numberOfPrints}`;
window.open(barcodesPdf);
}

const handleAnotherSiteOrder = () => {
const siteId = orderFormValues.sampleOrderItems.referringSiteId;
const siteName = orderFormValues.sampleOrderItems.referringSiteName;
const providerId = orderFormValues.sampleOrderItems.providerId;
const providerFirstName = orderFormValues.sampleOrderItems.providerFirstName;
const providerLastName = orderFormValues.sampleOrderItems.providerLastName;
const providerWorkPhone = orderFormValues.sampleOrderItems.providerWorkPhone;
const providerFax = orderFormValues.sampleOrderItems.providerFax;
const providerEmail = orderFormValues.sampleOrderItems.providerEmail;

setOrderFormValues(SampleOrderFormValues);

setOrderFormValues({
...SampleOrderFormValues,
rememberSiteAndRequester: true,
sampleOrderItems: {
...SampleOrderFormValues.sampleOrderItems,
referringSiteId: siteId,
referringSiteName: siteName,
providerId: providerId,
providerFirstName: providerFirstName,
providerLastName: providerLastName,
providerWorkPhone: providerWorkPhone,
providerFax: providerFax,
providerEmail: providerEmail
}
});
setPage(0);
}

useEffect(() => {
if (!orderFormValues.rememberSiteAndRequester) {
setOrderFormValues(SampleOrderFormValues);
}
setSamples([sampleObject]);
}, []);

return (<div className="orderLegendBody">
<div className="orderEntrySuccessMsg">
<img
src={`images/success-icon.png`}
alt="Order Entry saved successfully"
width="120"
height="120"
/>
<h4>Save successful</h4>
<Row>
<Button className="" onClick={handlePrintBarCode}>Print Barcode</Button>
</Row>
{allowPrintBarCodes &&
<Row>
<div className="inlineDiv">
<TextInput id="quatityOfBarCodes" value={numberOfPrints} onChange={(e) => {
handleNumberOfPrints(e)
}} labelText="Number to Print"/>
<Button kind="danger" className="confirmPrintCodeBtn" onClick={confirmPrintHandler}
size='sm'>Confirm</Button>
</div>
</Row>
}

<Row>
{orderFormValues.rememberSiteAndRequester &&
<Button className="placeAnotherOrderBtn" kind="tertiary" onClick={handleAnotherSiteOrder}>Place same
site order</Button>}
</Row>
</div>
</div>);
}

export default OrderSuccessMessage;
6 changes: 3 additions & 3 deletions react-ui/src/components/addOrder/PatientInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, {useEffect, useRef, useState} from 'react'
import {getFromOpenElisServer} from "../utils/Utils";
import {Button, Select, SelectItem, Stack} from "@carbon/react";
import React, {useEffect, useRef, useState} from 'react';
import {Button, Stack} from "@carbon/react";
import "./../admin/reflexTests/ReflexRule"
import SearchPatientForm from "../common/SearchPatientForm";
import CreatePatientForm from "../common/CreatePatientForm";
Expand Down Expand Up @@ -32,6 +31,7 @@ const PatientInfo = (props) => {
if (orderFormValues.patientProperties.firstName !== "" || orderFormValues.patientProperties.guid !== "") {
handleNewPatientTab();
}
window.scrollTo(0, 0)
return () => {
componentMounted.current = false
}
Expand Down
24 changes: 6 additions & 18 deletions react-ui/src/components/addOrder/SampleType.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,6 @@ const SampleType = (props) => {
props.sampleTypeObject({sampleXML: sampleXML, sampleObjectIndex: index});
}

// const rows = TableSampleTableRows(index, selectedSampleType, rejectSampleReasons, selectedTests, updateSampleXml, handleRemoveSampleTest);

const fetchSamplesTypes = (res) => {
if (componentMounted.current) {
setSampleTypes(res);
Expand Down Expand Up @@ -320,7 +318,7 @@ const SampleType = (props) => {

useEffect(() => {
componentMounted.current = true;
if (selectedSampleType.id) {
if (selectedSampleType.id !== "" && selectedSampleType.id != null) {
getFromOpenElisServer(`/rest/sample-type-tests?sampleType=${selectedSampleType.id}`, fetchSampleTypeTests);
}
return () => {
Expand All @@ -337,16 +335,6 @@ const SampleType = (props) => {
props.sampleTypeObject({selectedPanels: selectedPanels, sampleObjectIndex: index});
}, [selectedPanels]);

useEffect(() => {
componentMounted.current = true;
if (selectedSampleType.id) {
getFromOpenElisServer(`/rest/sample-type-tests?sampleType=${selectedSampleType.id}`, fetchSampleTypeTests);
}
return () => {
componentMounted.current = false;
}
}, [selectedSampleType.id]);

const repopulateUI = () => {
if (props.sample !== null) {
setSelectedTests(props.sample.tests);
Expand Down Expand Up @@ -383,7 +371,7 @@ const SampleType = (props) => {
required
>
<SelectItem
text=""
text="Select sample type"
value=""
/>
{sampleTypes.map((sampleType, i) => (<SelectItem
Expand All @@ -394,15 +382,15 @@ const SampleType = (props) => {
</Select>

<CustomCheckBox id={"reject_" + index} onChange={(value) => handleRejection(value)}
label="Reject"/>
label="Reject Sample"/>
<CustomSelect id={"rejectedReasonId_" + index} options={rejectSampleReasons}
disabled={rejectionReasonsDisabled}
defaultSelect={defaultSelect}
onChange={(e) => handleReasons(e)}/>

<div className="inlineDiv">

<CustomDatePicker id={"collectionDate_" + index}
<CustomDatePicker id={"collectionDate_" + index} autofillDate={true}
onChange={(date) => handleCollectionDate(date)}
labelText={"Collection Date"} className="inputText"/>

Expand All @@ -415,7 +403,7 @@ const SampleType = (props) => {
</div>
<div className="testPanels">
<div className="cds--col">
<h4>Panels</h4>
<h4>Order Panels</h4>
<div className={"searchTestText"} style={{marginBottom: '1.188rem'}}>
{selectedPanels && selectedPanels.length ? (
<>
Expand Down Expand Up @@ -490,7 +478,7 @@ const SampleType = (props) => {
</div>

<div className="cds--col">
{selectedTests && !selectedTests.length ? "" : <h3>Ordered Tests</h3>}
{selectedTests && !selectedTests.length ? "" : <h4>Order Tests</h4>}
<div className={"searchTestText"} style={{marginBottom: '1.188rem'}}>
{selectedTests && selectedTests.length ? (
<>
Expand Down
35 changes: 34 additions & 1 deletion react-ui/src/components/addOrder/add-order.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use '@carbon/styles/scss/type';

.singleTest {
padding: 1rem 0.75rem;
}
Expand Down Expand Up @@ -32,8 +33,15 @@
.emptyFilterTests span{
color: #d4373a;
}
.orderWorkFlowDiv{
//border: 0.5px solid #295785;
border-radius: 5px;
margin: 2%;
padding: 4%;
}

.orderLegendBody {
border: 0.5px solid #295785;
background-color: #FFFFFF;
border-radius: 5px;
margin: 2%;
padding: 4%;
Expand Down Expand Up @@ -108,4 +116,29 @@
.requestTestReferral .cds--checkbox-label-text {
color: red !important;
}
.orderEntrySuccessMsg{
width: 240px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.printBarCodeBtn{
width: 220px;
text-align: center;
}

.confirmPrintCodeBtn {
height: 30px;
width: 70px;
text-align: center;
margin-top: 26px;
margin-left: 10px;
}

.placeAnotherOrderBtn {
width: 220px;
text-align: center;
margin-top: 10px;
}
4 changes: 3 additions & 1 deletion react-ui/src/components/common/CustomDatePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@ const CustomDatePicker = (props) => {
}
useEffect(() => {
const date = findConfigurationProperty("currentDateAsText");
setCurrentDate(date);
if(props.autofillDate){
setCurrentDate(date);
}
}, [configurationProperties]);

useEffect(() => {
Expand Down
Loading
Loading