-
Notifications
You must be signed in to change notification settings - Fork 279
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #821 from manishjha-04/nonconform
Rewritten NonConformity Reports in new UI!
- Loading branch information
Showing
7 changed files
with
354 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
136 changes: 136 additions & 0 deletions
136
frontend/src/components/Reports/study/common/ReportByDate.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import { | ||
| Form, | ||
| FormLabel, | ||
| Grid, | ||
| Column, | ||
| Section, | ||
| Button, | ||
| Loading, | ||
| } from "@carbon/react"; | ||
| import { FormattedMessage, useIntl } from 'react-intl'; | ||
| import "../../../Style.css"; | ||
| import { AlertDialog } from "../../../common/CustomNotification"; | ||
| import CustomDatePicker from "../../../common/CustomDatePicker"; | ||
| import config from "../../../../config.json"; | ||
|
|
||
| const ReportByDate = (props) => { | ||
| const intl = useIntl(); | ||
| const [loading, setLoading] = useState(false); | ||
| const [notificationVisible, setNotificationVisible] = useState(false); | ||
| const [reportFormValues, setReportFormValues] = useState({ | ||
| startDate: null, | ||
| endDate: null | ||
| }); | ||
|
|
||
| function encodeDate(dateString) { | ||
| if (typeof dateString === "string" && dateString.trim() !== "") { | ||
| return dateString.split("/").map(encodeURIComponent).join("%2F"); | ||
| } else { | ||
| return ""; | ||
| } | ||
| } | ||
|
|
||
| const handleDatePickerChangeDate = (datePicker, date) => { | ||
| let updatedDate = encodeDate(date); | ||
| let obj = null; | ||
| switch (datePicker) { | ||
| case "startDate": | ||
| obj = { | ||
| ...reportFormValues, | ||
| startDate: updatedDate, | ||
| }; | ||
| break; | ||
| case "endDate": | ||
| obj = { | ||
| ...reportFormValues, | ||
| endDate: updatedDate, | ||
| }; | ||
| break; | ||
| default: | ||
| } | ||
| setReportFormValues(obj); | ||
| }; | ||
|
|
||
| const handleSubmit = () => { | ||
| setLoading(true); | ||
|
|
||
| const baseParams = `report=${props.report}&type=patient`; | ||
| const baseUrl = `${config.serverBaseUrl}/ReportPrint`; | ||
| const url = `${baseUrl}?${baseParams}&upperDateRange=${reportFormValues.startDate}&lowerDateRange=${reportFormValues.endDate}`; | ||
|
|
||
| window.open(url, '_blank'); | ||
| setLoading(false); | ||
| setNotificationVisible(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <FormLabel> | ||
| <Section> | ||
| <Section> | ||
| <h1> | ||
| <FormattedMessage id={props.id}/> | ||
| </h1> | ||
| </Section> | ||
| </Section> | ||
| </FormLabel> | ||
| {notificationVisible && <AlertDialog />} | ||
| {loading && <Loading />} | ||
| <Grid fullWidth={true}> | ||
| <Column lg={16} md={12} sm={8}> | ||
| <Form> | ||
| <Grid fullWidth={true}> | ||
| <Column lg={10} md={8} sm={4}> | ||
| <Section> | ||
| <br /> | ||
| <br /> | ||
| <h5> | ||
| <FormattedMessage id="label.select.dateRange" /> | ||
| </h5> | ||
| </Section> | ||
| <div className="inlineDiv"> | ||
| <CustomDatePicker | ||
| id={"startDate"} | ||
| labelText={intl.formatMessage({ | ||
| id: "eorder.date.start", | ||
| defaultMessage: "Start Date", | ||
| })} | ||
| autofillDate={true} | ||
| value={reportFormValues.startDate} | ||
| className="inputDate" | ||
| onChange={(date) => | ||
| handleDatePickerChangeDate("startDate", date) | ||
| } | ||
| /> | ||
| <CustomDatePicker | ||
| id={"endDate"} | ||
| labelText={intl.formatMessage({ | ||
| id: "eorder.date.end", | ||
| defaultMessage: "End Date", | ||
| })} | ||
| className="inputDate" | ||
| autofillDate={true} | ||
| value={reportFormValues.endDate} | ||
| onChange={(date) => | ||
| handleDatePickerChangeDate("endDate", date) | ||
| } | ||
| /> | ||
| </div> | ||
| </Column> | ||
| </Grid> | ||
| <br /> | ||
| <Section> | ||
| <br /> | ||
| <Button type="button" onClick={handleSubmit}> | ||
| <FormattedMessage id="label.button.generatePrintableVersion" defaultMessage="Generate printable version" /> | ||
| </Button> | ||
| </Section> | ||
| </Form> | ||
| </Column> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ReportByDate; |
95 changes: 95 additions & 0 deletions
95
frontend/src/components/Reports/study/common/ReportByLabNo.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import React, { useState } from "react"; | ||
| import { FormattedMessage, injectIntl, useIntl } from "react-intl"; | ||
| import { Form, Grid, Column, Section, Button } from "@carbon/react"; | ||
| import CustomLabNumberInput from "../../../common/CustomLabNumberInput"; | ||
| import config from "../../../../config.json"; | ||
|
|
||
| function ReportByLabNo(props) { | ||
| const intl = useIntl(); | ||
| const [values, setValues] = useState({ from: '', to: '' }); | ||
|
|
||
| const handleChange = (e) => { | ||
| const { name, value } = e.target; | ||
| setValues(prevState => ({ | ||
| ...prevState, | ||
| [name]: value | ||
| })); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| const baseParams = `report=${props.report}&type=patient`; | ||
| const baseUrl = `${config.serverBaseUrl}/ReportPrint`; | ||
| const url = `${baseUrl}?${baseParams}&accessionDirect=${values.from}&highAccessionDirect=${values.to}`; | ||
|
|
||
| window.open(url, '_blank'); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Form onSubmit={handleSubmit}> | ||
| <Section> | ||
| <h3> | ||
| <FormattedMessage id={props.id}/> | ||
| </h3> | ||
| </Section> | ||
| <br /> | ||
| <Grid fullWidth={true}> | ||
| <Column lg={16} md={8} sm={6}> | ||
| <Section> | ||
| <h5> | ||
| <FormattedMessage id="report.enter.labNumber.headline" /> | ||
| </h5> | ||
| <h7> | ||
| <FormattedMessage id="sample.search.scanner.instructions" /> | ||
| </h7> | ||
| </Section> | ||
| </Column> | ||
| </Grid> | ||
| <br /> | ||
| <Grid fullWidth={true}> | ||
| <Column lg={7} md={4} sm={3}> | ||
| <CustomLabNumberInput | ||
| name="from" | ||
| value={values.from} | ||
| labelText={intl.formatMessage({ | ||
| id: "from.title", | ||
| defaultMessage: "From", | ||
| })} | ||
| id="from" | ||
| className="inputText" | ||
| onChange={handleChange} | ||
| /> | ||
| </Column> | ||
| <Column lg={7} md={4} sm={3}> | ||
| <CustomLabNumberInput | ||
| name="to" | ||
| value={values.to} | ||
| labelText={intl.formatMessage({ | ||
| id: "to.title", | ||
| defaultMessage: "To", | ||
| })} | ||
| id="to" | ||
| className="inputText" | ||
| onChange={handleChange} | ||
| /> | ||
| </Column> | ||
| </Grid> | ||
| <br /> | ||
| <br /> | ||
| <Grid fullWidth={true}> | ||
| <Column lg={16} md={8} sm={6}> | ||
| <Section> | ||
| <Button type="submit"> | ||
| <FormattedMessage id="label.button.generatePrintableVersion" /> | ||
| </Button> | ||
| </Section> | ||
| </Column> | ||
| </Grid> | ||
| </Form> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default injectIntl(ReportByLabNo); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import React, { useContext, useState, useEffect } from "react"; | ||
| import { AlertDialog } from "../../common/CustomNotification"; | ||
| import { NotificationContext } from "../../layout/Layout"; | ||
| import { | ||
| Heading, | ||
| Grid, | ||
| Column, | ||
| Section, | ||
| Breadcrumb, | ||
| BreadcrumbItem, | ||
| Loading, | ||
| } from "@carbon/react"; | ||
| import { injectIntl, FormattedMessage, useIntl } from "react-intl"; | ||
| import ReportByDate from "./common/ReportByDate"; | ||
| import ReportByLabNo from "./common/ReportByLabNo"; | ||
| import PageBreadCrumb from "../../common/PageBreadCrumb"; | ||
|
|
||
| const StudyIndex = () => { | ||
| const intl = useIntl(); | ||
| const { setNotificationVisible, addNotification, notificationVisible } = useContext(NotificationContext); | ||
|
|
||
| const [type, setType] = useState(""); | ||
| const [report, setReport] = useState(""); | ||
| const [source, setSource] = useState(""); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const [breadcrumbs, setBreadcrumbs] = useState([]); | ||
| const breadcrumbMap = { | ||
| "patient_retroCINonConformityByDate": "header.label.nonconformityByDate", | ||
| "patient_retroCInonConformityBySectionReason": "reports.nonConformity.bySectionReason.title", | ||
| "patient_retroCINonConformityByLabno": "header.label.intialFollowup", | ||
| "patient_retroCIFollowupRequiredByLocation": "reports.followupRequired.byLocation" | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const params = new URLSearchParams(window.location.search); | ||
| const paramType = params.get("type"); | ||
| const paramReport = params.get("report"); | ||
|
|
||
| setType(paramType); | ||
| setReport(paramReport); | ||
|
|
||
| // Updating breadcrumbs based on paramType and paramReport | ||
| if (paramType && paramReport) { | ||
| const breadcrumbId = breadcrumbMap[`${paramType}_${paramReport}`]; | ||
| if (breadcrumbId) { | ||
| const breadcrumbLabel = intl.formatMessage({ id: breadcrumbId }); | ||
| setBreadcrumbs([ | ||
| { label: intl.formatMessage({ id: "home.label" }), link: "/" }, | ||
| { label: intl.formatMessage({ id: "label.study.Reports" }), link: "/StudyReports" }, | ||
| { | ||
| label: breadcrumbLabel, | ||
| link: `/StudyReport?type=${paramType}&report=${paramReport}`, | ||
| }, | ||
| ]); | ||
| } | ||
| setIsLoading(false); | ||
| } else { | ||
| window.location.href = "/StudyReports"; | ||
| } | ||
| }, [type, report]); | ||
|
|
||
| return ( | ||
| <> | ||
| <br /> | ||
| <PageBreadCrumb breadcrumbs={breadcrumbs} /> | ||
| <Grid fullWidth={true}> | ||
| <Column lg={16}> | ||
| <Section> | ||
| <Section> | ||
| <Heading> | ||
| <FormattedMessage id="selectReportValues.title" /> | ||
| </Heading> | ||
| </Section> | ||
| </Section> | ||
| </Column> | ||
| </Grid> | ||
| <div className="orderLegendBody"> | ||
| {notificationVisible === true && <AlertDialog />} | ||
| {isLoading && <Loading />} | ||
| {!isLoading && ( | ||
| <> | ||
| {type === "patient" && report === "retroCINonConformityByDate" && | ||
| (<ReportByDate report="retroCINonConformityByDate" id="header.label.nonconformityByDate"/>)} | ||
|
|
||
| {type === "patient" && report === "retroCInonConformityBySectionReason" && | ||
| (<ReportByDate report="retroCInonConformityBySectionReason" id="reports.nonConformity.bySectionReason.title"/>)} | ||
|
|
||
| {type === "patient" && report === "retroCINonConformityByLabno" && | ||
| (<ReportByLabNo report="retroCINonConformityByLabno" id="header.label.intialFollowup"/>)} | ||
|
|
||
| {type === "patient" && report === "retroCIFollowupRequiredByLocation" && | ||
| (<ReportByDate report="retroCIFollowupRequiredByLocation" id="reports.followupRequired.byLocation"/>)} | ||
| </> | ||
| )} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default injectIntl(StudyIndex); |
Oops, something went wrong.