-
Notifications
You must be signed in to change notification settings - Fork 538
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Redesign Doctor Notes (Review, QA, Testing) (#6224)
* feat: add patient notes pop-up on consultation page * Migrate form elements to CAREUI * made patient notes popup responsive * feat: updated ui of patient notes dedicated page * resolved merge conflicts * fix merge develop * added doctor location * used Page component in PatientNotes page * Apply suggestions from code review * added close button * Apply suggestions from code review * enchance doctor notes ux * Merge branch 'develop' into doctor-notes-redesign * replace usages of moment with dayjs * Added user role in brackets * added message listener for patient notes * added border for notes by remote specialist * added notification on patient note creation * Update src/Components/Facility/PatientNoteCard.tsx Co-authored-by: Rithvik Nishad <[email protected]> * added types for notes object * use existing types of patient notes model * link system notification to notes page * Fixes for real time webpush messages * Fixes for notes popover * Update service-worker.ts * lint --------- Co-authored-by: Rithvik Nishad <[email protected]> Co-authored-by: Rithvik Nishad <[email protected]> Co-authored-by: Ashesh3 <[email protected]>
- Loading branch information
4 people
authored
Nov 23, 2023
1 parent
39cd0fa
commit f804e6d
Showing
14 changed files
with
505 additions
and
177 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { relativeDate, formatDateTime, classNames } from "../../Utils/utils"; | ||
| import { USER_TYPES_MAP } from "../../Common/constants"; | ||
| import { PatientNotesModel } from "./models"; | ||
|
|
||
| const PatientNoteCard = ({ note }: { note: PatientNotesModel }) => { | ||
| return ( | ||
| <div | ||
| className={classNames( | ||
| "mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-3 text-gray-800", | ||
| note.user_type === "RemoteSpecialist" && "border-primary-400" | ||
| )} | ||
| > | ||
| <div className="flex"> | ||
| <span className="text-sm font-semibold text-gray-700"> | ||
| {note.created_by_object?.first_name || "Unknown"}{" "} | ||
| {note.created_by_object?.last_name} | ||
| </span> | ||
| {note.user_type && ( | ||
| <span className="pl-2 text-sm text-gray-700"> | ||
| {`(${USER_TYPES_MAP[note.user_type]})`} | ||
| </span> | ||
| )} | ||
| </div> | ||
| <span className="whitespace-pre-wrap break-words">{note.note}</span> | ||
| <div className="mt-3 text-end text-xs text-gray-500"> | ||
| <div className="tooltip inline"> | ||
| <span className="tooltip-text tooltip-left"> | ||
| {formatDateTime(note.created_date)} | ||
| </span> | ||
| {relativeDate(note.created_date)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PatientNoteCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| import { useCallback, useState, useEffect } from "react"; | ||
| import { useDispatch } from "react-redux"; | ||
| import { statusType, useAbortableEffect } from "../../Common/utils"; | ||
| import { getPatientNotes } from "../../Redux/actions"; | ||
| import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants"; | ||
| import CircularProgress from "../Common/components/CircularProgress"; | ||
| import PatientNoteCard from "./PatientNoteCard"; | ||
| import InfiniteScroll from "react-infinite-scroll-component"; | ||
| import { NoteType } from "./PatientNoteCard"; | ||
|
|
||
| interface PatientNotesProps { | ||
| patientId: any; | ||
| facilityId: any; | ||
| reload?: boolean; | ||
| setReload?: any; | ||
| } | ||
|
|
||
| interface StateType { | ||
| notes: NoteType[]; | ||
| cPage: number; | ||
| totalPages: number; | ||
| } | ||
|
|
||
| const pageSize = RESULTS_PER_PAGE_LIMIT; | ||
|
|
||
| const PatientNotesList = (props: PatientNotesProps) => { | ||
| const { reload, setReload } = props; | ||
|
|
||
| const dispatch: any = useDispatch(); | ||
| const initialData: StateType = { notes: [], cPage: 1, totalPages: 1 }; | ||
| const [state, setState] = useState(initialData); | ||
| const [isLoading, setIsLoading] = useState(true); | ||
|
|
||
| const fetchData = useCallback( | ||
| async (page = 1, status: statusType = { aborted: false }) => { | ||
| setIsLoading(true); | ||
| const res = await dispatch( | ||
| getPatientNotes(props.patientId, pageSize, (page - 1) * pageSize) | ||
| ); | ||
| if (!status.aborted) { | ||
| if (res && res.data) { | ||
| if (page === 1) { | ||
| setState({ | ||
| notes: res.data?.results, | ||
| cPage: page, | ||
| totalPages: Math.ceil(res.data.count / pageSize), | ||
| }); | ||
| } else { | ||
| setState((prevState: any) => ({ | ||
| ...prevState, | ||
| notes: [...prevState.notes, ...res.data.results], | ||
| cPage: page, | ||
| totalPages: Math.ceil(res.data.count / pageSize), | ||
| })); | ||
| } | ||
| } | ||
| setIsLoading(false); | ||
| } | ||
| }, | ||
| [props.patientId, dispatch] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (reload) { | ||
| fetchData(1); | ||
| setReload(false); | ||
| } | ||
| }, [reload]); | ||
|
|
||
| useAbortableEffect( | ||
| (status: statusType) => { | ||
| fetchData(1, status); | ||
| }, | ||
| [fetchData] | ||
| ); | ||
|
|
||
| const handleNext = () => { | ||
| if (state.cPage < state.totalPages) { | ||
| fetchData(state.cPage + 1); | ||
| setState((prevState: any) => ({ | ||
| ...prevState, | ||
| cPage: prevState.cPage + 1, | ||
| })); | ||
| } | ||
| }; | ||
|
|
||
| if (isLoading && !state.notes.length) { | ||
| return ( | ||
| <div className=" flex h-[400px] w-full items-center justify-center bg-white"> | ||
| <CircularProgress /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="m-2 flex h-[390px] grow flex-col-reverse overflow-auto bg-white" | ||
| id="patient-notes-list" | ||
| > | ||
| {state.notes.length ? ( | ||
| <InfiniteScroll | ||
| next={handleNext} | ||
| hasMore={state.cPage < state.totalPages} | ||
| loader={ | ||
| <div className="flex items-center justify-center"> | ||
| <CircularProgress /> | ||
| </div> | ||
| } | ||
| className="flex h-full flex-col-reverse p-2" | ||
| inverse={true} | ||
| dataLength={state.notes.length} | ||
| scrollableTarget="patient-notes-list" | ||
| > | ||
| {state.notes.map((note: any) => ( | ||
| <PatientNoteCard note={note} key={note.id} /> | ||
| ))} | ||
| </InfiniteScroll> | ||
| ) : ( | ||
| <div className="mt-2 flex items-center justify-center text-2xl font-bold text-gray-500"> | ||
| No Notes Found | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default PatientNotesList; |
Oops, something went wrong.