diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx index dd96ef9af1e..3853dc5decc 100644 --- a/src/Components/Facility/ConsultationDoctorNotes/index.tsx +++ b/src/Components/Facility/ConsultationDoctorNotes/index.tsx @@ -31,6 +31,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => { notes: [], cPage: 1, totalPages: 1, + facilityId: facilityId, + patientId: patientId, }; const [state, setState] = useState(initialData); @@ -98,8 +100,6 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => { diff --git a/src/Components/Facility/DoctorNote.tsx b/src/Components/Facility/DoctorNote.tsx index 85703a1e3d8..5777f9e3fb1 100644 --- a/src/Components/Facility/DoctorNote.tsx +++ b/src/Components/Facility/DoctorNote.tsx @@ -5,11 +5,12 @@ import { PatientNoteStateType } from "./models"; interface DoctorNoteProps { state: PatientNoteStateType; + setReload: any; handleNext: () => void; } const DoctorNote = (props: DoctorNoteProps) => { - const { state, handleNext } = props; + const { state, handleNext, setReload } = 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..86aa99abc3d 100644 --- a/src/Components/Facility/PatientConsultationNotesList.tsx +++ b/src/Components/Facility/PatientConsultationNotesList.tsx @@ -10,8 +10,6 @@ import request from "../../Utils/request/request"; interface PatientNotesProps { state: PatientNoteStateType; setState: any; - patientId: string; - facilityId: string; reload?: boolean; setReload?: any; } @@ -28,7 +26,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 +79,9 @@ 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..88c64914321 100644 --- a/src/Components/Facility/PatientNoteCard.tsx +++ b/src/Components/Facility/PatientNoteCard.tsx @@ -1,36 +1,202 @@ import { relativeDate, formatDateTime, classNames } from "../../Utils/utils"; import { USER_TYPES_MAP } from "../../Common/constants"; -import { PatientNotesModel } from "./models"; +import { PatientNoteStateType, 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"; + +const PatientNoteCard = ({ + state, + note, + setReload, +}: { + state: PatientNoteStateType; + note: PatientNotesModel; + setReload: any; +}) => { + const [isEditing, setIsEditing] = useState(false); + const [noteField, setNoteField] = useState(note.note); + const [showEditHistory, setShowEditHistory] = useState(false); + + 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)} +
+
+ {note.edits.length > 1 && ( +
+
{ + setShowEditHistory(true); + }} + > +
+ + {formatDateTime(note.edits[0].edited_on)} + + Edited {relativeDate(note.edits[0].edited_on, true)} +
+ +
+
+ )} +
+ + { + if (!isEditing) setIsEditing(true); + }} + > + {isEditing ? ( + + ) : ( + + )} +
+ { +
+ {isEditing ? ( + + ) : ( +
{noteField}
+ )} +
+ }
-
+ {showEditHistory && ( + setShowEditHistory(false)} + title={t("edit_history")} + > +
+
+

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

+
+
+ {note.edits.map((edit, index) => { + const isLast = index === note.edits.length - 1; + return ( +
+
+
+

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

+

+ {formatDateTime(edit.edited_on)} +

+
+
+

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

+

+ {edit.edited_by.username} +

+
+
+
+

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 8b08d9767db..9b2674ec84a 100644 --- a/src/Components/Facility/PatientNotesSlideover.tsx +++ b/src/Components/Facility/PatientNotesSlideover.tsx @@ -29,6 +29,8 @@ export default function PatientNotesSlideover(props: PatientNotesProps) { notes: [], cPage: 1, totalPages: 1, + patientId: props.patientId, + facilityId: props.facilityId, }; const [state, setState] = useState(initialData); @@ -141,8 +143,6 @@ export default function PatientNotesSlideover(props: PatientNotesProps) { @@ -157,6 +157,11 @@ export default function PatientNotesSlideover(props: PatientNotesProps) { errorClassName="hidden" placeholder="Type your Note" disabled={!patientActive} + onKeyDown={(e) => { + if (e.key === "Enter") { + onAddNote(); + } + }} /> & { 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 9634036e6c4..09c682261e5 100644 --- a/src/Redux/api.tsx +++ b/src/Redux/api.tsx @@ -624,6 +624,11 @@ const routes = { method: "POST", TRes: Type(), }, + updatePatientNote: { + path: "/api/v1/patient/{patientId}/notes/{noteId}/", + method: "PUT", + TRes: Type(), + }, sampleTestList: { path: "/api/v1/patient/{patientId}/test_sample/", }, diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts index df6bd46d131..23f07fae5a0 100644 --- a/src/Utils/utils.ts +++ b/src/Utils/utils.ts @@ -99,9 +99,9 @@ export const formatDate = (date: DateLike, format = DATE_FORMAT) => export const formatTime = (date: DateLike, format = TIME_FORMAT) => formatDateTime(date, format); -export const relativeDate = (date: DateLike) => { +export const relativeDate = (date: DateLike, withoutSuffix = false) => { const obj = dayjs(date); - return `${obj.fromNow()} at ${obj.format(TIME_FORMAT)}`; + return `${obj.fromNow(withoutSuffix)} at ${obj.format(TIME_FORMAT)}`; }; export const formatName = (user: { first_name: string; last_name: string }) => {