diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx index 8e39ee04e4e..3c46984f4fb 100644 --- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx +++ b/src/Components/Facility/ConsultationDoctorNotes/index.tsx @@ -34,6 +34,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => { notes: [], cPage: 1, totalPages: 1, + facilityId: facilityId, + patientId: patientId, }; const [state, setState] = useState(initialData); @@ -113,8 +115,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => { diff --git a/src/Components/Facility/DoctorNote.tsx b/src/Components/Facility/DoctorNote.tsx index 85703a1e3d8..1fe28ba38d0 100644 --- a/src/Components/Facility/DoctorNote.tsx +++ b/src/Components/Facility/DoctorNote.tsx @@ -5,11 +5,13 @@ import { PatientNoteStateType } from "./models"; interface DoctorNoteProps { state: PatientNoteStateType; + setReload: any; handleNext: () => void; + disableEdit?: boolean; } const DoctorNote = (props: DoctorNoteProps) => { - const { state, handleNext } = props; + const { state, handleNext, setReload, disableEdit } = props; return (
{ scrollableTarget="patient-notes-list" > {state.notes.map((note: any) => ( - + ))} ) : ( diff --git a/src/Components/Facility/PatientConsultationNotesList.tsx b/src/Components/Facility/PatientConsultationNotesList.tsx index f38de51110b..2b9df8c3902 100644 --- a/src/Components/Facility/PatientConsultationNotesList.tsx +++ b/src/Components/Facility/PatientConsultationNotesList.tsx @@ -10,16 +10,15 @@ import request from "../../Utils/request/request"; interface PatientNotesProps { state: PatientNoteStateType; setState: any; - patientId: string; - facilityId: string; reload?: boolean; setReload?: any; + disableEdit?: boolean; } const pageSize = RESULTS_PER_PAGE_LIMIT; const PatientConsultationNotesList = (props: PatientNotesProps) => { - const { state, setState, reload, setReload } = props; + const { state, setState, reload, setReload, disableEdit } = props; const consultationId = useSlug("consultation") ?? ""; const [isLoading, setIsLoading] = useState(true); @@ -28,7 +27,7 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => { setIsLoading(true); const { data }: any = await request(routes.getPatientNotes, { pathParams: { - patientId: props.patientId, + patientId: props.state.patientId, }, query: { consultation: consultationId, @@ -81,7 +80,14 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => { ); } - return ; + return ( + + ); }; export default PatientConsultationNotesList; diff --git a/src/Components/Facility/PatientNoteCard.tsx b/src/Components/Facility/PatientNoteCard.tsx index 2f07702504a..671c1744acf 100644 --- a/src/Components/Facility/PatientNoteCard.tsx +++ b/src/Components/Facility/PatientNoteCard.tsx @@ -1,36 +1,246 @@ import { relativeDate, formatDateTime, classNames } from "../../Utils/utils"; import { USER_TYPES_MAP } from "../../Common/constants"; -import { PatientNotesModel } from "./models"; +import { + PatientNoteStateType, + PatientNotesEditModel, + PatientNotesModel, +} from "./models"; +import ButtonV2 from "../Common/components/ButtonV2"; +import CareIcon from "../../CAREUI/icons/CareIcon"; +import { useState } from "react"; +import { Error, Success } from "../../Utils/Notifications"; +import request from "../../Utils/request/request"; +import routes from "../../Redux/api"; +import DialogModal from "../Common/Dialog"; +import { t } from "i18next"; +import dayjs from "dayjs"; +import Spinner from "../Common/Spinner"; +import useAuthUser from "../../Common/hooks/useAuthUser"; + +const PatientNoteCard = ({ + state, + note, + setReload, + disableEdit, +}: { + state: PatientNoteStateType; + note: PatientNotesModel; + setReload: any; + disableEdit?: boolean; +}) => { + const [isEditing, setIsEditing] = useState(false); + const [noteField, setNoteField] = useState(note.note); + const [showEditHistory, setShowEditHistory] = useState(false); + const [editHistory, setEditHistory] = useState([]); + const authUser = useAuthUser(); + + const fetchEditHistory = async () => { + const { res, data } = await request(routes.getPatientNoteEditHistory, { + pathParams: { patientId: state.patientId, noteId: note.id }, + }); + if (res?.status === 200) { + setEditHistory(data?.results ?? []); + } + }; + + const onUpdateNote = async () => { + if (noteField === note.note) { + setIsEditing(false); + return; + } + const payload = { + note: noteField, + }; + if (!/\S+/.test(noteField)) { + Error({ + msg: "Note Should Contain At Least 1 Character", + }); + return; + } + + const { res } = await request(routes.updatePatientNote, { + pathParams: { patientId: state.patientId, noteId: note.id }, + body: payload, + }); + if (res?.status === 200) { + Success({ msg: "Note updated successfully" }); + setIsEditing(false); + setReload(true); + } + }; -const PatientNoteCard = ({ note }: { note: PatientNotesModel }) => { return ( -
-
- - {note.created_by_object?.first_name || "Unknown"}{" "} - {note.created_by_object?.last_name} - - {note.user_type && ( - - {`(${USER_TYPES_MAP[note.user_type]})`} - + <> + {" "} +
- {note.note} -
-
- - {formatDateTime(note.created_date)} - - {relativeDate(note.created_date)} + > +
+
+
+ + {note.created_by_object?.first_name || "Unknown"}{" "} + {note.created_by_object?.last_name} + + {note.user_type && ( + + {`(${USER_TYPES_MAP[note.user_type]})`} + + )} +
+
+
+ + {formatDateTime(note.created_date)} + + Created {relativeDate(note.created_date, true)} +
+
+ { + // If last edited date is same as created date, then it is not edited + !dayjs(note.last_edited_date).isSame( + note.created_date, + "second" + ) && ( +
+
{ + fetchEditHistory(); + setShowEditHistory(true); + }} + > +
+ + {formatDateTime(note.last_edited_date)} + + Edited {relativeDate(note.last_edited_date, true)} +
+ +
+
+ ) + } +
+ + {!disableEdit && + note.created_by_object.id === authUser.id && + !isEditing && ( + { + setIsEditing(true); + }} + > + + + )}
+ { +
+ {isEditing ? ( +
+ +
+ { + setIsEditing(false); + setNoteField(note.note); + }} + id="cancel-update-note-button" + > + + Cancel + + + + Update Note + +
+
+ ) : ( +
{noteField}
+ )} +
+ }
-
+ {showEditHistory && ( + setShowEditHistory(false)} + title={t("edit_history")} + > +
+
+

+ Edit History for note + {note.id} +

+
+
+ {editHistory.length === 0 && ( +
+ +
+ )} + {editHistory?.map((edit, index) => { + const isLast = index === editHistory.length - 1; + return ( +
+
+
+

+ {isLast ? "Created" : "Edited"} On +

+

+ {formatDateTime(edit.edited_date)} +

+
+
+
+

Note

+

{edit.note}

+
+
+ ); + })} +
+
+ { + setShowEditHistory(false); + }} + > + {t("close")} + +
+
+
+ )} + ); }; diff --git a/src/Components/Facility/PatientNotesList.tsx b/src/Components/Facility/PatientNotesList.tsx index 96f9dcad871..a36762072b9 100644 --- a/src/Components/Facility/PatientNotesList.tsx +++ b/src/Components/Facility/PatientNotesList.tsx @@ -74,7 +74,9 @@ const PatientNotesList = (props: PatientNotesProps) => { ); } - return ; + return ( + + ); }; export default PatientNotesList; diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx index 5ecf30cfcdf..f488ae09e68 100644 --- a/src/Components/Facility/PatientNotesSlideover.tsx +++ b/src/Components/Facility/PatientNotesSlideover.tsx @@ -30,6 +30,8 @@ export default function PatientNotesSlideover(props: PatientNotesProps) { notes: [], cPage: 1, totalPages: 1, + patientId: props.patientId, + facilityId: props.facilityId, }; const [state, setState] = useState(initialData); @@ -163,10 +165,9 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
& { leadingPadding?: string | undefined; min?: string | number; max?: string | number; + onKeyDown?: (event: React.KeyboardEvent) => void; onFocus?: (event: React.FocusEvent) => void; onBlur?: (event: React.FocusEvent) => void; }; @@ -62,6 +63,7 @@ const TextFormField = forwardRef((props: TextFormFieldProps, ref) => { onFocus={props.onFocus} onBlur={props.onBlur} onChange={(e) => field.handleChange(e.target.value)} + onKeyDown={props.onKeyDown} /> ); diff --git a/src/Redux/api.tsx b/src/Redux/api.tsx index eed17ad3b4b..7d547be5cef 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -50,6 +50,7 @@ import { WardModel, LocationModel, PatientNotesModel, + PatientNotesEditModel, BedModel, MinimumQuantityItemResponse, InventorySummaryResponse, @@ -672,6 +673,16 @@ const routes = { method: "POST", TRes: Type(), }, + updatePatientNote: { + path: "/api/v1/patient/{patientId}/notes/{noteId}/", + method: "PUT", + TRes: Type(), + }, + getPatientNoteEditHistory: { + path: "/api/v1/patient/{patientId}/notes/{noteId}/edits/", + method: "GET", + TRes: Type>(), + }, sampleTestList: { path: "/api/v1/patient/{patientId}/test_sample/", },