Integrating Intake / Output form data with widget

src/constants.js

@@ -83,6 +83,8 @@ export const GET_SEARCH_PATIENT_LIST_URL =
   RESTWS_V1 + "/ipd/wards/{wardId}/patients/search";
 export const GET_SLOTS_FOR_PATIENTS_URL =
   RESTWS_V1 + "/ipd/schedule/type/medication/patientsMedicationSummary";
+export const INTAKE_OUTPUT_DATA_BASE_URL =
+  BAHMNI_CORE + "/observations?";
 
 export const defaultDateFormat = "DD MMM YYYY";
 export const defaultDateTimeFormat = "DD MMM YYYY hh:mm a";

src/features/DisplayControls/IntakeOutput/components/IntakeOutput.jsx

@@ -6,30 +6,34 @@ import { Button, Loading } from "carbon-components-react";
 
 import { ChevronLeft16, ChevronRight16, Time16 } from "@carbon/icons-react";
 import IntakeOutputTable from "./IntakeOutputTable";
-import {intakeOutputMockData} from "../utils/IntakeOutputMockData.js";
 import { IPDContext } from "../../../../context/IPDContext";
 import { displayPeriodTimingsFormat, timeFormatFor12hr } from "../../../../constants";
 import WarningIcon from "../../../../icons/warning.svg";
 import { formatDate } from "../../../../utils/DateTimeUtils";
-import { 
+import {
   getSortedObsData,
-  transformObsData, 
-  intakeOutputHeaders, 
-  currentPeriodRange, 
-  NotCurrentPeriodMessage, 
+  transformObsData,
+  intakeOutputHeaders,
+  currentPeriodRange,
+  NotCurrentPeriodMessage,
   NoDataForSelectedPeriod,
   isCurrentPeriod,
-  filterDataForRange } from "../utils/IntakeOutputUtils.js";
-
+  filterDataForRange,
+  fetchIntakeOutputData,
+} from "../utils/IntakeOutputUtils.js";
 
 const IntakeOutput = () => {
-  const { config, isReadMode, visitSummary, visit } = useContext(IPDContext);
-  const {intakeOutputConfig = {} } = config;
+  const { config, isReadMode, visitSummary, patient } = useContext(IPDContext);
+  const { intakeOutputConfig = {} } = config;
   const [consolidatedIOData, setConsolidatedIOData] = useState({});
   const [isLoading, setIsLoading] = useState(true);
   const [notCurrentPeriod, setNotCurrentPeriod] = useState(false);
+  const [intakeOutputData, setIntakeOutputData] = useState([]);
   const { enable24HourTime = {} } = config;
-  const { periodDetails: periodConfig = {} } = intakeOutputConfig;
+  const {
+    periodDetails: periodConfig = {},
+    dashboardConfig: dashboardConfig = {},
+  } = intakeOutputConfig;
   const currentPeriod = currentPeriodRange(
     isReadMode ? new Date(visitSummary.stopDateTime) : new Date(),
     periodConfig
@@ -44,7 +48,22 @@ const IntakeOutput = () => {
     previous: false,
     next: isReadMode ? true : false,
   });
+  const visitStartDateTime = visitSummary.startDateTime;
 
+  const callFetchIntakeAndOutputData = async () => {
+    try {
+      const response = await fetchIntakeOutputData(
+        patient.uuid,
+        dashboardConfig.conceptNames,
+        dashboardConfig.numberOfVisits
+      );
+      setIntakeOutputData(response);
+    } catch (e) {
+      return e;
+    } finally {
+      setIsLoading(false);
+    }
+  };
   const handleCurrent = () => {
     setNotCurrentPeriod(false);
     setIsLoading(true);
@@ -136,20 +155,41 @@ const IntakeOutput = () => {
     isCurrentPeriod(startEndDates, periodConfig)
       ? setNotCurrentPeriod(false)
       : setNotCurrentPeriod(true);
-
-    const filteredData = filterDataForRange(intakeOutputMockData, intakeOutputConfig.timeConceptNames, startEndDates)
-    const sortedObsData = getSortedObsData(filteredData, intakeOutputConfig.timeConceptNames);
+    const filteredData = filterDataForRange(
+      intakeOutputData,
+      intakeOutputConfig.timeConceptNames,
+      startEndDates,
+      visitSummary.startDateTime
+    );
+    const sortedObsData = getSortedObsData(
+      filteredData,
+      intakeOutputConfig.timeConceptNames
+    );
+
+    setPeriodButtonsDisabled({
+      previous:
+        (isReadMode && intakeOutputData.length === 0) ||
+        moment(visitStartDateTime).isBetween(
+          startEndDates.startDate,
+          startEndDates.endDate,
+          null,
+          "[)"
+        ),
+      next: moment(visitSummary.stopDateTime).isBefore(
+        startEndDates.endDate,
+      ),
+    });
     setConsolidatedIOData(transformObsData(sortedObsData, intakeOutputConfig));
     setIsLoading(false);
-  },[startEndDates]);
+  }, [startEndDates, intakeOutputData, visitStartDateTime]);
 
   useEffect(() => {
     updatedStartEndDates({
       startDate: currentPeriod.startDateTime,
       endDate: currentPeriod.endDateTime,
     });
+    callFetchIntakeAndOutputData();
   }, []);
-
   return (
     <div className="intake-output-content-container display-container">
       <div className={"intake-output-navigation"}>
@@ -214,7 +254,6 @@ const IntakeOutput = () => {
   );
 };
 
-IntakeOutput.propTypes = {
-};
+IntakeOutput.propTypes = {};
 
 export default IntakeOutput;

src/features/DisplayControls/IntakeOutput/utils/IntakeOutputUtils.js

@@ -1,18 +1,31 @@
 import { TooltipCarbon } from "bahmni-carbon-ui";
 import NoteIcon from "../../../../icons/note.svg";
-import { defaultDateTimeFormat } from "../../../../constants";
+import {
+  defaultDateTimeFormat,
+  INTAKE_OUTPUT_DATA_BASE_URL,
+} from "../../../../constants";
 import { formatDate } from "../../../../utils/DateTimeUtils";
 import { FormattedMessage } from "react-intl";
 import moment from "moment";
+import axios from "axios";
 
-export const filterDataForRange = (data, timeConceptNames, startEndDates) => {
-    return (data.filter((obs) => {
-        const timeConcept = obs.groupMembers.find(member => timeConceptNames?.includes(member?.concept?.name));
-        const obsTime = moment(timeConcept?.value).startOf('minute');
-        const startTime = moment(startEndDates.startDate).startOf('minute');
-        const endTime = moment(startEndDates.endDate).startOf('minute');
-        return obsTime.isBetween(startTime, endTime, null, '[)');
-    }));
+export const filterDataForRange = (
+  data,
+  timeConceptNames,
+  startEndDates,
+  visitStartDateTime
+) => {
+  return data.filter((obs) => {
+    if (obs.visitStartDateTime === visitStartDateTime) {
+      const timeConcept = obs.groupMembers.find((member) =>
+        timeConceptNames?.includes(member?.concept?.name)
+      );
+      const obsTime = moment(timeConcept?.value).startOf("minute");
+      const startTime = moment(startEndDates.startDate).startOf("minute");
+      const endTime = moment(startEndDates.endDate).startOf("minute");
+      return obsTime.isBetween(startTime, endTime, null, "[)");
+    }
+  });
 };
 
 export const getSortedObsData = (obsData, sortConceptNames) => {
@@ -177,3 +190,23 @@ export const isCurrentPeriod = (startEndDates, periodConfig = {}) => {
     return ((moment(currentPeriod.startDateTime).startOf('minute')).isSame(moment(startEndDates.startDate).startOf('minute'))
     && (moment(currentPeriod.endDateTime).startOf('minute')).isSame(moment(startEndDates.endDate).startOf('minute')))
 };
+
+export const fetchIntakeOutputData = async (
+  patientUuid,
+  conceptNames,
+  numberOfVisits
+) => {
+  const conceptParams = conceptNames
+    .map((concept) => `concept=${concept.replace(" ", "+")}`)
+    .join("&");
+  const INTAKE_OUTPUT_URL = `${INTAKE_OUTPUT_DATA_BASE_URL}${conceptParams}&numberOfVisits=${numberOfVisits}&patientUuid=${patientUuid}`;
+  try {
+    const response = await axios.get(INTAKE_OUTPUT_URL, {
+      withCredentials: true,
+    });
+    if (response.status !== 200) throw new Error(response.statusText);
+    return response.data;
+  } catch (error) {
+    return error;
+  }
+};