Adds support for doctors and nurses discussions threads in Discussion Notes

cypress/e2e/patient_spec/patient_manage.cy.ts

@@ -35,7 +35,7 @@ describe("Patient", () => {
  // });
  // commented out the shifting request, as logic need to be re-visited
 
- it("Post doctor notes for an already created patient", () => {
+ it("Post discussion notes for an already created patient", () => {
  patientPage.visitPatient("Dummy Patient 3");
  patientConsultationPage.visitDoctorNotesPage();
  patientConsultationPage.addDoctorsNotes("Test Doctor Notes");

src/Common/constants.tsx

@@ -1342,3 +1342,8 @@ export const OCCUPATION_TYPES = [
  { id: 6, text: "Others", value: "OTHERS" },
  { id: 32, text: "Not Applicable", value: "NOT_APPLICABLE" },
 ];
+
+export const PATIENT_NOTES_THREADS = {
+ Doctors: 10,
+ Nurses: 20,
+} as const;

src/Components/Facility/ConsultationDetails/index.tsx

@@ -325,13 +325,13 @@ export const ConsultationDetails = (props: any) => {
  onClick={() =>
  showPatientNotesPopup
  ? navigate(
- `/facility/${facilityId}/patient/${patientId}/notes`,
+ `/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/notes`,
  )
  : setShowPatientNotesPopup(true)
  }
  className="btn btn-primary m-1 w-full hover:text-white"
  >
- Doctor's Notes
+ Discussion Notes
  </Link>
  </div>
  </nav>

src/Components/Facility/ConsultationDoctorNotes/index.tsx

@@ -11,8 +11,10 @@ import routes from "../../../Redux/api.js";
 import request from "../../../Utils/request/request.js";
 import useQuery from "../../../Utils/request/useQuery.js";
 import useKeyboardShortcut from "use-keyboard-shortcut";
-import { isAppleDevice } from "../../../Utils/utils.js";
+import { classNames, isAppleDevice } from "../../../Utils/utils.js";
 import AutoExpandingTextInputFormField from "../../Form/FormFields/AutoExpandingTextInputFormField.js";
+import { PATIENT_NOTES_THREADS } from "../../../Common/constants.js";
+import useAuthUser from "../../../Common/hooks/useAuthUser.js";
 
 interface ConsultationDoctorNotesProps {
  patientId: string;
@@ -23,6 +25,13 @@ interface ConsultationDoctorNotesProps {
 const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
  const { patientId, facilityId, consultationId } = props;
 
+ const authUser = useAuthUser();
+ const [thread, setThread] = useState(
+ authUser.user_type === "Nurse"
+ ? PATIENT_NOTES_THREADS.Nurses
+ : PATIENT_NOTES_THREADS.Doctors,
+ );
+
  const [patientActive, setPatientActive] = useState(true);
  const [noteField, setNoteField] = useState("");
  const [reload, setReload] = useState(false);
@@ -40,10 +49,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
  const [state, setState] = useState(initialData);
 
  const onAddNote = async () => {
- const payload = {
- note: noteField,
- consultation: consultationId,
- };
  if (!/\S+/.test(noteField)) {
  Notification.Error({
  msg: "Note Should Contain At Least 1 Character",
@@ -55,7 +60,11 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
  pathParams: {
  patientId: patientId,
  },
- body: payload,
+ body: {
+ note: noteField,
+ thread,
+ consultation: consultationId,
+ },
  });
 
  if (res?.status === 201) {
@@ -103,20 +112,42 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
 
  return (
  <Page
- title="Doctor Notes"
+ title="Discussion Notes"
  className="flex h-screen flex-col"
  crumbsReplacements={{
  [facilityId]: { name: facilityName },
  [patientId]: { name: patientName },
  }}
  backUrl={`/facility/${facilityId}/patient/${patientId}`}
  >
- <div className="mx-3 my-2 flex grow flex-col rounded-lg bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+ <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+ <div className="absolute inset-x-0 top-0 flex bg-gray-200 text-sm shadow-md">
+ {Object.values(PATIENT_NOTES_THREADS).map((current) => (
+ <button
+ key={current}
+ className={classNames(
+ "flex flex-1 justify-center border-b-2 py-2",
+ thread === current
+ ? "border-primary-500 font-bold text-gray-800"
+ : "border-gray-300 text-gray-800",
+ )}
+ onClick={() => setThread(current)}
+ >
+ {
+ {
+ 10: "Doctor's Discussions",
+ 20: "Nurse's Discussions",
+ }[current]
+ }
+ </button>
+ ))}
+ </div>
  <PatientConsultationNotesList
  state={state}
  setState={setState}
  reload={reload}
  setReload={setReload}
+ thread={thread}
  />
 
  <div className="relative mx-4 flex items-center">

src/Components/Facility/DoctorNote.tsx

@@ -12,6 +12,7 @@ interface DoctorNoteProps {
 
 const DoctorNote = (props: DoctorNoteProps) => {
  const { state, handleNext, setReload, disableEdit } = props;
+
  return (
  <div
  className="m-2 flex h-[390px] grow flex-col-reverse overflow-auto bg-white"
@@ -31,7 +32,7 @@ const DoctorNote = (props: DoctorNoteProps) => {
  dataLength={state.notes.length}
  scrollableTarget="patient-notes-list"
  >
- {state.notes.map((note: any) => (
+ {state.notes.map((note) => (
  <PatientNoteCard
  note={note}
  key={note.id}
@@ -41,7 +42,7 @@ const DoctorNote = (props: DoctorNoteProps) => {
  ))}
  </InfiniteScroll>
  ) : (
- <div className="mt-2 flex items-center justify-center text-2xl font-bold text-gray-500">
+ <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-gray-500">
  No Notes Found
  </div>
  )}

src/Components/Facility/PatientConsultationNotesList.tsx

@@ -2,7 +2,7 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
 import CircularProgress from "../Common/components/CircularProgress";
 import routes from "../../Redux/api";
-import { PatientNoteStateType } from "./models";
+import { PatientNoteStateType, PatientNotesModel } from "./models";
 import useSlug from "../../Common/hooks/useSlug";
 import DoctorNote from "./DoctorNote";
 import request from "../../Utils/request/request";
@@ -13,12 +13,13 @@ interface PatientNotesProps {
  reload?: boolean;
  setReload?: (value: boolean) => void;
  disableEdit?: boolean;
+ thread: PatientNotesModel["thread"];
 }
 
 const pageSize = RESULTS_PER_PAGE_LIMIT;
 
 const PatientConsultationNotesList = (props: PatientNotesProps) => {
- const { state, setState, reload, setReload, disableEdit } = props;
+ const { state, setState, reload, setReload, disableEdit, thread } = props;
  const consultationId = useSlug("consultation") ?? "";
 
  const [isLoading, setIsLoading] = useState(true);
@@ -31,6 +32,7 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
  },
  query: {
  consultation: consultationId,
+ thread,
  offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
  },
  });
@@ -60,6 +62,10 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
  }
  }, [reload]);
 
+ useEffect(() => {
+ fetchNotes();
+ }, [thread]);
+
  useEffect(() => {
  setReload?.(true);
  }, []);
@@ -76,7 +82,7 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
 
  if (isLoading && !state.notes.length) {
  return (
- <div className=" flex h-[400px] w-full items-center justify-center bg-white">
+ <div className="flex h-full w-full items-center justify-center bg-white">
  <CircularProgress />
  </div>
  );

src/Components/Facility/PatientNotesList.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
 import CircularProgress from "../Common/components/CircularProgress";
 import DoctorNote from "./DoctorNote";
-import { PatientNoteStateType } from "./models";
+import { PatientNoteStateType, PatientNotesModel } from "./models";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 
@@ -13,20 +13,24 @@ interface PatientNotesProps {
  facilityId: string;
  reload?: boolean;
  setReload?: any;
+ thread: PatientNotesModel["thread"];
 }
 
 const pageSize = RESULTS_PER_PAGE_LIMIT;
 
 const PatientNotesList = (props: PatientNotesProps) => {
- const { state, setState, reload, setReload } = props;
+ const { state, setState, reload, setReload, thread } = props;
 
  const [isLoading, setIsLoading] = useState(true);
 
  const fetchNotes = async () => {
  setIsLoading(true);
  const { data }: any = await request(routes.getPatientNotes, {
  pathParams: { patientId: props.patientId },
- query: { offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT },
+ query: {
+ offset: (state.cPage - 1) * RESULTS_PER_PAGE_LIMIT,
+ thread,
+ },
  });
 
  if (state.cPage === 1) {
@@ -52,6 +56,10 @@ const PatientNotesList = (props: PatientNotesProps) => {
  }
  }, [reload]);
 
+ useEffect(() => {
+ fetchNotes();
+ }, [thread]);
+
  useEffect(() => {
  setReload(true);
  }, []);
@@ -68,7 +76,7 @@ const PatientNotesList = (props: PatientNotesProps) => {
 
  if (isLoading && !state.notes.length) {
  return (
- <div className=" flex h-[400px] w-full items-center justify-center bg-white">
+ <div className="flex h-full w-full items-center justify-center bg-white">
  <CircularProgress />
  </div>
  );

src/Components/Facility/PatientNotesSlideover.tsx

@@ -14,6 +14,7 @@ import useKeyboardShortcut from "use-keyboard-shortcut";
 import AutoExpandingTextInputFormField from "../Form/FormFields/AutoExpandingTextInputFormField.js";
 import * as Sentry from "@sentry/browser";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import { PATIENT_NOTES_THREADS } from "../../Common/constants.js";
 
 interface PatientNotesProps {
  patientId: string;
@@ -23,6 +24,12 @@ interface PatientNotesProps {
 }
 
 export default function PatientNotesSlideover(props: PatientNotesProps) {
+ const authUser = useAuthUser();
+ const [thread, setThread] = useState(
+ authUser.user_type === "Nurse"
+ ? PATIENT_NOTES_THREADS.Nurses
+ : PATIENT_NOTES_THREADS.Doctors,
+ );
  const [show, setShow] = useState(true);
  const [patientActive, setPatientActive] = useState(true);
  const [reload, setReload] = useState(false);
@@ -39,11 +46,11 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
  const subscription = await reg.pushManager.getSubscription();
  if (!subscription && !res.data?.pf_endpoint) {
  Notification.Warn({
- msg: "Please subscribe to notifications to get live updates on doctor notes.",
+ msg: "Please subscribe to notifications to get live updates on discussion notes.",
  });
  } else if (subscription?.endpoint !== res.data?.pf_endpoint) {
  Notification.Warn({
- msg: "Please subscribe to notifications on this device to get live updates on doctor notes.",
+ msg: "Please subscribe to notifications on this device to get live updates on discussion notes.",
  });
  }
  } catch (error) {
@@ -73,10 +80,6 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
  );
 
  const onAddNote = async () => {
- const payload = {
- note: noteField,
- consultation: consultationId,
- };
  if (!/\S+/.test(noteField)) {
  Notification.Error({
  msg: "Note Should Contain At Least 1 Character",
@@ -85,7 +88,11 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
  }
  const { res } = await request(routes.addPatientNote, {
  pathParams: { patientId: patientId },
- body: payload,
+ body: {
+ note: noteField,
+ consultation: consultationId,
+ thread,
+ },
  });
  if (res?.status === 201) {
  Notification.Success({ msg: "Note added successfully" });
@@ -189,23 +196,43 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
  className="flex w-full cursor-pointer items-center justify-around rounded-t-md bg-primary-800 p-2 text-white"
  onClick={() => setShow(!show)}
  >
- <span className="font-semibold">{"Doctor's Notes"}</span>
+ <span className="font-semibold">Discussion Notes</span>
  {notesActionIcons}
  </div>
  ) : (
  <div className="flex h-screen w-full -translate-y-0 flex-col text-clip border-2 border-b-0 border-primary-800 bg-white pb-3 transition-all sm:h-[500px] sm:rounded-t-md ">
- {/* Doctor Notes Header */}
  <div className="flex w-full items-center justify-between bg-primary-800 p-2 px-4 text-white">
- <span className="font-semibold">{"Doctor's Notes"}</span>
+ <span className="font-semibold">Discussion Notes</span>
  {notesActionIcons}
  </div>
- {/* Doctor Notes Body */}
+ <div className="flex bg-primary-800 text-sm">
+ {Object.values(PATIENT_NOTES_THREADS).map((current) => (
+ <button
+ key={current}
+ className={classNames(
+ "flex flex-1 justify-center border-b-4 py-1",
+ thread === current
+ ? "border-primary-500 font-medium text-white"
+ : "border-primary-800 text-white/70",
+ )}
+ onClick={() => setThread(current)}
+ >
+ {
+ {
+ 10: "Doctor's Discussions",
+ 20: "Nurse's Discussions",
+ }[current]
+ }
+ </button>
+ ))}
+ </div>
  <PatientConsultationNotesList
  state={state}
  setState={setState}
  reload={reload}
  setReload={setReload}
  disableEdit={!patientActive}
+ thread={thread}
  />
  <div className="relative mx-4 flex items-center">
  <AutoExpandingTextInputFormField

src/Components/Facility/models.tsx

@@ -1,6 +1,7 @@
 import {
  ConsultationSuggestionValue,
  DISCHARGE_REASONS,
+ PATIENT_NOTES_THREADS,
  UserRole,
 } from "../../Common/constants";
 import { AssetData, AssetLocationType } from "../Assets/AssetTypes";
@@ -512,6 +513,7 @@ export interface PatientNotesModel {
  facility: BaseFacilityModel;
  created_by_object: BaseUserModel;
  user_type?: UserRole | "RemoteSpecialist";
+ thread: (typeof PATIENT_NOTES_THREADS)[keyof typeof PATIENT_NOTES_THREADS];
  created_date: string;
  last_edited_by?: BaseUserModel;
  last_edited_date?: string;