Skip to content

Instantly share code, notes, and snippets.

@denniskigen
Created April 2, 2020 11:19
Show Gist options
  • Save denniskigen/7a22ab4a9fcea40785ac76fa83446af2 to your computer and use it in GitHub Desktop.
Save denniskigen/7a22ab4a9fcea40785ac76fa83446af2 to your computer and use it in GitHub Desktop.
import React, { useState, useEffect } from "react";
import { useCurrentPatient, newWorkspaceItem } from "@openmrs/esm-api";
import { useRouteMatch } from "react-router-dom";
import { performPatientsVitalsSearch } from "./vitals-card.resource";
import { createErrorHandler } from "@openmrs/esm-error-handling";
import styles from "./vital-record.css";
import SummaryCard from "../../ui-components/cards/summary-card.component";
// import VitalsForm from "./alt-vitals-form.component";
import VitalsForm from "./vitals-form.component";
import dayjs from "dayjs";
export default function VitalRecord(props: VitalRecordProps) {
const [vitalSigns, setVitalSigns] = useState(null);
const [isLoadingPatient, patient, patientUuid] = useCurrentPatient();
const match = useRouteMatch();
useEffect(() => {
if (!isLoadingPatient && patientUuid && match.params) {
const sub = performPatientsVitalsSearch(patientUuid).subscribe(
vitals =>
setVitalSigns(
vitals.find(vital => vital.id === match.params["vitalUuid"])
),
createErrorHandler()
);
return () => sub.unsubscribe();
}
}, [isLoadingPatient, patientUuid, match.params]);
const openEditVitalWorkspaceTab = (
componentName,
title,
systolicBloodPressure,
diastolicBloodPressure,
heartRate,
temperature,
oxygenation,
dateRecorded,
encounterUuid,
vitalUuid
) => {
newWorkspaceItem({
component: componentName,
name: title,
props: {
match: {
params: {
systolicBloodPressure,
diastolicBloodPressure,
heartRate,
temperature,
oxygenation,
dateRecorded,
encounterUuid,
vitalUuid
}
}
},
inProgress: false,
validations: (workspaceTabs: any[]) =>
workspaceTabs.findIndex(tab => tab.component === componentName)
});
};
return (
<>
{vitalSigns && (
<SummaryCard
name="Vital"
styles={{ width: "100%" }}
editComponent={VitalsForm}
showComponent={() =>
openEditVitalWorkspaceTab(
VitalsForm,
"Edit Vitals",
vitalSigns.systolicBloodPressure,
vitalSigns.diastolicBloodPressure,
vitalSigns.heartRate,
vitalSigns.temperature,
vitalSigns.oxygenation,
vitalSigns.date,
vitalSigns.encounterUuid,
match.params["vitalUuid"]
)
}
>
<div className={`omrs-type-body-regular ${styles.vitalCard}`}>
<table className={styles.vitalTable}>
<tbody>
<tr>
<td className={styles.label}>Measured at</td>
<td className={styles.value}>
{vitalSigns.date
? dayjs(vitalSigns.date).format("DD-MMM-YYYY hh:mm A")
: ""}
</td>
</tr>
<tr>
<td className={styles.label}>Blood pressure</td>
<td className={styles.value}>
{vitalSigns?.systolicBloodPressure?.value} /{" "}
{vitalSigns?.diastolicBloodPressure?.value} <span>mmHg</span>
</td>
</tr>
<tr>
<td className={styles.label}>Heart rate</td>
<td className={styles.value}>
{vitalSigns?.heartRate?.value} <span>bpm</span>
</td>
</tr>
<tr>
<td className={styles.label}>Oxygen saturation</td>
<td className={styles.value}>
{vitalSigns?.oxygenation?.value} <span>%</span>
</td>
</tr>
<tr>
<td className={styles.label}>Temperature</td>
<td className={styles.value}>
{vitalSigns?.temperature?.value} <span>°C</span>
</td>
</tr>
</tbody>
</table>
</div>
</SummaryCard>
)}
</>
);
}
type VitalRecordProps = {};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment