From a8fd4c1654c25bc613801d421c3f10bb6a9ef5e6 Mon Sep 17 00:00:00 2001 From: Jacob John Jeevan <40040905+Jacobjeevan@users.noreply.github.com> Date: Wed, 16 Oct 2024 18:00:24 +0530 Subject: [PATCH] Investigations Print Preview Page (#8679) --- .../Investigations/InvestigationTable.tsx | 198 +++++++++++------- .../InvestigationsPrintPreview.tsx | 138 ++++++++++++ .../Investigations/ShowInvestigation.tsx | 62 ++++-- .../Investigations/ViewInvestigations.tsx | 37 +++- src/Locale/en.json | 2 + src/Routers/routes/ConsultationRoutes.tsx | 10 + 6 files changed, 338 insertions(+), 109 deletions(-) create mode 100644 src/Components/Facility/Investigations/InvestigationsPrintPreview.tsx diff --git a/src/Components/Facility/Investigations/InvestigationTable.tsx b/src/Components/Facility/Investigations/InvestigationTable.tsx index 18c64108b6f..84198eea50c 100644 --- a/src/Components/Facility/Investigations/InvestigationTable.tsx +++ b/src/Components/Facility/Investigations/InvestigationTable.tsx @@ -5,8 +5,10 @@ import TextFormField from "../../Form/FormFields/TextFormField"; import { classNames } from "../../../Utils/utils"; import { useState } from "react"; import { useTranslation } from "react-i18next"; +import { navigate } from "raviger"; const TestRow = ({ data, i, onChange, showForm, value, isChanged }: any) => { + const { t } = useTranslation(); return ( { )} x-description="Even row" > - - {data?.investigation_object?.name || "---"} + +

+ {data?.investigation_object.name || "---"} +

+

+ + {t("investigations__range")}:{" "} + {data?.investigation_object.min_value || ""} + {data?.investigation_object.min_value ? " - " : ""} + {data?.investigation_object.max_value || ""} + +

+

+ {t("investigations__unit")}:{" "} + {data?.investigation_object.unit || "---"} +

- + {showForm ? ( data?.investigation_object?.investigation_type === "Choice" ? ( { value || "---" )} - - {data.investigation_object.unit || "---"} - - - {data.investigation_object.min_value || "---"} - - - {data.investigation_object.max_value || "---"} - - + {data.investigation_object.ideal_value || "---"} ); }; +const HeadingRow = () => { + const { t } = useTranslation(); + const commonClass = + "px-6 py-3 text-xs font-semibold uppercase tracking-wider text-secondary-800"; + return ( + + + {t("investigations__name")} + + + {t("investigations__result")} + + + {t("investigations__ideal_value")} + + + ); +}; + export const InvestigationTable = ({ title, data, @@ -70,6 +108,10 @@ export const InvestigationTable = ({ changedFields, handleUpdateCancel, handleSave, + facilityId, + patientId, + consultationId, + sessionId, }: any) => { const { t } = useTranslation(); const [searchFilter, setSearchFilter] = useState(""); @@ -85,11 +127,9 @@ export const InvestigationTable = ({ return (
-
- {title && ( -
{title}
- )} -
+
+ {title &&
{title}
} +
handleSave()} + onClick={() => { + handleSave(); + setShowForm((prev) => !prev); + }} className="my-2 mr-2" > - Save + {t("save")} )} + + navigate( + `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/investigation/${sessionId}/print`, + ) + } + > + + {t("print")} +
setSearchFilter(e.value)} />
-
-
- - - - {["Name", "Value", "Unit", "Min", "Max", "Ideal"].map( - (heading) => ( - - ), - )} +
+
- {heading} -
+ + + + + {filterTests.length > 0 ? ( + filterTests.map((t: any, i) => { + const value = + changedFields[t.id]?.notes ?? + changedFields[t.id]?.value ?? + null; + const isChanged = changedFields[t.id]?.initialValue !== value; + return ( + { + const { target, value } = + t?.investigation_object?.investigation_type === "Float" + ? { + target: `${t.id}.value`, + value: Number(e.value) || null, + } + : { + target: `${t.id}.notes`, + value: e.value, + }; + handleValueChange(value, target); + }} + /> + ); + }) + ) : ( + + - - - {filterTests.length > 0 ? ( - filterTests.map((t: any, i) => { - const value = - changedFields[t.id]?.notes ?? - changedFields[t.id]?.value ?? - null; - const isChanged = changedFields[t.id]?.initialValue !== value; - return ( - { - const { target, value } = - t?.investigation_object?.investigation_type === - "Float" - ? { - target: `${t.id}.value`, - value: Number(e.value) || null, - } - : { - target: `${t.id}.notes`, - value: e.value, - }; - handleValueChange(value, target); - }} - className="print:text-black" - /> - ); - }) - ) : ( - - - - )} - -
{t("no_tests_taken")}
{t("no_tests_taken")}
-
+ )} + +
); diff --git a/src/Components/Facility/Investigations/InvestigationsPrintPreview.tsx b/src/Components/Facility/Investigations/InvestigationsPrintPreview.tsx new file mode 100644 index 00000000000..97a5375fa28 --- /dev/null +++ b/src/Components/Facility/Investigations/InvestigationsPrintPreview.tsx @@ -0,0 +1,138 @@ +import * as _ from "lodash-es"; +import { lazy } from "react"; +import routes from "../../../Redux/api"; +import useQuery from "../../../Utils/request/useQuery"; +import PrintPreview from "../../../CAREUI/misc/PrintPreview"; +import { useTranslation } from "react-i18next"; +const Loading = lazy(() => import("../../Common/Loading")); +import { Investigation } from "./Reports/types"; +import careConfig from "@careConfig"; + +const InvestigationEntry = ({ + investigation, +}: { + investigation: Investigation; +}) => { + const { t } = useTranslation(); + return ( + + +

+ {investigation.investigation_object.name || "---"} +

+

+ + {t("investigations__range")}:{" "} + {investigation.investigation_object.min_value || ""} + {investigation.investigation_object.min_value ? " - " : ""} + {investigation.investigation_object.max_value || ""} + +

+

+ {t("investigations__unit")}:{" "} + {investigation.investigation_object.unit || "---"} +

+ + + {investigation.value || "---"} + + + {investigation.investigation_object.ideal_value || "---"} + + + ); +}; + +const InvestigationsPreviewTable = ({ + investigations, +}: { + investigations?: Investigation[]; +}) => { + const { t } = useTranslation(); + if (!investigations) { + return ( + + {t("no_tests_taken")} + + ); + } + + return ( + + + + + + + + + + + {investigations.map((item) => ( + + ))} + +
+ {t("investigations")} +
+ {t("investigations__name")} + {t("investigations__result")} {t("investigations__ideal_value")}
+ ); +}; + +interface InvestigationPrintPreviewProps { + consultationId: string; + patientId: string; + sessionId: string; + facilityId: string; +} +export default function InvestigationPrintPreview( + props: InvestigationPrintPreviewProps, +) { + const { consultationId, patientId, sessionId } = props; + const { t } = useTranslation(); + const { loading: investigationLoading, data: investigations } = useQuery( + routes.getInvestigation, + { + pathParams: { + consultation_external_id: consultationId, + }, + query: { + session: sessionId, + }, + }, + ); + + const { data: patient, loading: patientLoading } = useQuery( + routes.getPatient, + { + pathParams: { id: patientId }, + }, + ); + + const { data: consultation } = useQuery(routes.getConsultation, { + pathParams: { id: consultationId }, + prefetch: !!consultationId, + }); + + if (patientLoading || investigationLoading) { + return ; + } + return ( + +
+

{consultation?.facility_name}

+ care logo +
+ + + ); +} diff --git a/src/Components/Facility/Investigations/ShowInvestigation.tsx b/src/Components/Facility/Investigations/ShowInvestigation.tsx index bc0621af7d9..85f2fb1fd7d 100644 --- a/src/Components/Facility/Investigations/ShowInvestigation.tsx +++ b/src/Components/Facility/Investigations/ShowInvestigation.tsx @@ -1,13 +1,12 @@ import * as _ from "lodash-es"; -import { navigate } from "raviger"; import { useCallback, useReducer } from "react"; import routes from "../../../Redux/api"; import * as Notification from "../../../Utils/Notifications.js"; import request from "../../../Utils/request/request"; import useQuery from "../../../Utils/request/useQuery"; import InvestigationTable from "./InvestigationTable"; -import PrintPreview from "../../../CAREUI/misc/PrintPreview"; import { useTranslation } from "react-i18next"; +import Page from "../../Common/components/Page"; import Loading from "@/Components/Common/Loading"; const initialState = { changedFields: {}, @@ -40,7 +39,7 @@ interface ShowInvestigationProps { facilityId: string; } export default function ShowInvestigation(props: ShowInvestigationProps) { - const { consultationId, patientId, sessionId } = props; + const { consultationId, patientId, sessionId, facilityId } = props; const { t } = useTranslation(); const [state, dispatch] = useReducer(updateFormReducer, initialState); const { loading: investigationLoading } = useQuery(routes.getInvestigation, { @@ -116,9 +115,28 @@ export default function ShowInvestigation(props: ShowInvestigationProps) { Notification.Success({ msg: "Investigation Updated successfully!", }); - navigate( - `/facility/${props.facilityId}/patient/${props.patientId}/consultation/${props.consultationId}`, + const changedDict: any = {}; + Object.values(state.changedFields).forEach( + (field: any) => + (changedDict[field.id] = { + id: field.id, + value: field?.value || null, + notes: field?.notes || null, + }), ); + const changedInitialValues: any = {}; + Object.values(state.initialValues).forEach( + (field: any) => + (changedInitialValues[field.id] = { + ...field, + value: changedDict[field.id].value, + notes: changedDict[field.id].notes, + }), + ); + dispatch({ + type: "set_initial_values", + initialValues: changedInitialValues, + }); } return; } else { @@ -145,22 +163,28 @@ export default function ShowInvestigation(props: ShowInvestigationProps) { return ; } return ( - - - +
+ +
+ ); } diff --git a/src/Components/Facility/Investigations/ViewInvestigations.tsx b/src/Components/Facility/Investigations/ViewInvestigations.tsx index 22c811f41fa..e889fac4c01 100644 --- a/src/Components/Facility/Investigations/ViewInvestigations.tsx +++ b/src/Components/Facility/Investigations/ViewInvestigations.tsx @@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next"; import { formatDateTime } from "../../../Utils/utils"; import { InvestigationResponse } from "./Reports/types"; import { InvestigationSessionType } from "./investigationsTab"; +import ButtonV2 from "../../Common/components/ButtonV2"; +import CareIcon from "../../../CAREUI/icons/CareIcon"; import Loading from "@/Components/Common/Loading"; export default function ViewInvestigations(props: { @@ -56,16 +58,31 @@ export default function ViewInvestigations(props: {
{formatDateTime(investigationSession.session_created_date)}
- +
+ + navigate( + `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/investigation/${investigationSession.session_external_id}`, + ) + } + ghost + border + > + {t("view")} + + + navigate( + `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/investigation/${investigationSession.session_external_id}/print`, + ) + } + ghost + border + > + + {t("print")} + +
); })} diff --git a/src/Locale/en.json b/src/Locale/en.json index 5f2652fa91b..ceb022d1f02 100644 --- a/src/Locale/en.json +++ b/src/Locale/en.json @@ -1052,6 +1052,8 @@ "patient_details": "Patient Details", "width": "Width ({{unit}})", "length": "Length ({{unit}})", + "years": "years", + "investigation_report": "Investigation Report", "expand_sidebar": "Expand Sidebar", "collapse_sidebar": "Collapse Sidebar", "linked_skills": "Linked Skills" diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx index 77efe1081bc..7f1a7fecfb8 100644 --- a/src/Routers/routes/ConsultationRoutes.tsx +++ b/src/Routers/routes/ConsultationRoutes.tsx @@ -12,6 +12,7 @@ import CriticalCareEditor from "../../Components/LogUpdate/CriticalCareEditor"; import PrescriptionsPrintPreview from "../../Components/Medicine/PrintPreview"; import CriticalCarePreview from "../../Components/LogUpdate/CriticalCarePreview"; import FileUploadPage from "../../Components/Patient/FileUploadPage"; +import InvestigationPrintPreview from "../../Components/Facility/Investigations/InvestigationsPrintPreview"; import { AppRoutes } from "../AppRouter"; const consultationRoutes: AppRoutes = { @@ -70,6 +71,15 @@ const consultationRoutes: AppRoutes = { sessionId={sessionId} /> ), + "/facility/:facilityId/patient/:patientId/consultation/:id/investigation/:sessionId/print": + ({ facilityId, patientId, id, sessionId }: any) => ( + + ), "/facility/:facilityId/patient/:patientId/consultation/:id/daily-rounds": ({ facilityId, patientId,