forked from ohcnetwork/care_fe
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Aakash Singh <[email protected]> Co-authored-by: Mohammed Nihal <[email protected]> Co-authored-by: Ashesh <[email protected]> Co-authored-by: Rithvik Nishad <[email protected]>
- Loading branch information
5 people
authored
Feb 19, 2024
1 parent
dacc7f8
commit 8752069
Showing
10 changed files
with
259 additions
and
18 deletions.
There are no files selected for viewing
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
78 changes: 78 additions & 0 deletions
78
src/Components/Facility/ConsultationDetails/Events/EventsList.tsx
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,78 @@ | ||
| import { useTranslation } from "react-i18next"; | ||
| import { useSlugs } from "../../../../Common/hooks/useSlug"; | ||
| import { ConsultationModel } from "../../models"; | ||
| import PaginatedList from "../../../../CAREUI/misc/PaginatedList"; | ||
| import routes from "../../../../Redux/api"; | ||
| import { TimelineNode } from "../../../../CAREUI/display/Timeline"; | ||
| import LoadingLogUpdateCard from "../../Consultations/DailyRounds/LoadingCard"; | ||
| import GenericEvent from "./GenericEvent"; | ||
| import { EventGeneric } from "./types"; | ||
| import { getEventIcon } from "./iconMap"; | ||
|
|
||
| interface Props { | ||
| consultation: ConsultationModel; | ||
| } | ||
|
|
||
| export default function EventsList({ consultation }: Props) { | ||
| const [consultationId] = useSlugs("consultation"); | ||
| const { t } = useTranslation(); | ||
|
|
||
|
|
||
| return ( | ||
| <PaginatedList route={routes.getEvents} pathParams={{ consultationId }}> | ||
| {() => ( | ||
| <> | ||
| <div className="mt-4 flex w-full flex-col gap-4"> | ||
| <div className="flex max-h-[85vh] flex-col gap-4 overflow-y-auto overflow-x-hidden px-3"> | ||
| <PaginatedList.WhenEmpty className="flex w-full justify-center border-b border-gray-200 bg-white p-5 text-center text-2xl font-bold text-gray-500"> | ||
| <span className="flex justify-center rounded-lg bg-white p-3 text-gray-700 "> | ||
| {t("no_consultation_updates")} | ||
| </span> | ||
| </PaginatedList.WhenEmpty> | ||
| <PaginatedList.WhenLoading> | ||
| <LoadingLogUpdateCard /> | ||
| </PaginatedList.WhenLoading> | ||
| <PaginatedList.Items<EventGeneric> className="flex grow flex-col gap-3"> | ||
| {(item, items) => ( | ||
| <TimelineNode | ||
| name={ | ||
| item.event_type.name | ||
| .split("_") | ||
| .map( | ||
| (text) => | ||
| text[0].toUpperCase() + text.toLowerCase().slice(1) | ||
| ) | ||
| .join(" ") + " Event" | ||
| } | ||
| event={{ | ||
| type: item.change_type.replace(/_/g, " ").toLowerCase(), | ||
| timestamp: item.created_date?.toString() ?? "", | ||
| by: item.caused_by, | ||
| icon: getEventIcon(item.event_type.name), | ||
| }} | ||
| isLast={items.indexOf(item) == items.length - 1} | ||
| > | ||
| {(() => { | ||
| switch (item.event_type.name) { | ||
| case "INTERNAL_TRANSFER": | ||
| case "CLINICAL": | ||
| case "DIAGNOSIS": | ||
| case "ENCOUNTER_SUMMARY": | ||
| case "HEALTH": | ||
| default: | ||
| return <GenericEvent event={item} />; | ||
| } | ||
| })()} | ||
| </TimelineNode> | ||
| )} | ||
| </PaginatedList.Items> | ||
| <div className="flex w-full items-center justify-center"> | ||
| <PaginatedList.Paginator hideIfSinglePage /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| )} | ||
| </PaginatedList> | ||
| ); | ||
| } |
90 changes: 90 additions & 0 deletions
90
src/Components/Facility/ConsultationDetails/Events/GenericEvent.tsx
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,90 @@ | ||
| import type { ReactNode } from "react"; | ||
| import { EventGeneric } from "./types"; | ||
|
|
||
| interface IProps { | ||
| event: EventGeneric; | ||
| } | ||
|
|
||
| /** | ||
| * object - array, date | ||
| */ | ||
|
|
||
| const formatValue = (value: unknown, key?: string): ReactNode => { | ||
| if (value === undefined || value === null) { | ||
| return "N/A"; | ||
| } | ||
|
|
||
| if (typeof value === "boolean") { | ||
| return value ? "Yes" : "No"; | ||
| } | ||
|
|
||
| if (typeof value === "number") { | ||
| return value; | ||
| } | ||
|
|
||
| if (typeof value === "string") { | ||
| const trimmed = value.trim(); | ||
|
|
||
| if (trimmed === "") { | ||
| return "Empty"; | ||
| } | ||
|
|
||
| if (!isNaN(Number(trimmed))) { | ||
| return trimmed; | ||
| } | ||
|
|
||
| if (new Date(trimmed).toString() !== "Invalid Date") { | ||
| return new Date(trimmed).toLocaleString(); | ||
| } | ||
|
|
||
| return trimmed; | ||
| } | ||
|
|
||
| if (typeof value === "object") { | ||
| if (Array.isArray(value)) { | ||
| if (value.length === 0) { | ||
| return `No ${key?.replace(/_/g, " ")}`; | ||
| } | ||
|
|
||
| return value.map((v) => formatValue(v, key)).join(", "); | ||
| } | ||
|
|
||
| if (value instanceof Date) { | ||
| return value.toLocaleString(); | ||
| } | ||
|
|
||
| if (Object.entries(value).length === 0) { | ||
| return `No ${key?.replace(/_/g, " ")}`; | ||
| } | ||
|
|
||
| return Object.entries(value).map(([key, value]) => ( | ||
| <div className="flex flex-col items-center gap-2 md:flex-row"> | ||
| <span className="text-xs uppercase text-gray-700"> | ||
| {key.replace(/_/g, " ")} | ||
| </span> | ||
| <span className="text-sm font-semibold text-gray-700"> | ||
| {formatValue(value, key)} | ||
| </span> | ||
| </div> | ||
| )); | ||
| } | ||
|
|
||
| return JSON.stringify(value); | ||
| }; | ||
|
|
||
| export default function GenericEvent({ event }: IProps) { | ||
| return ( | ||
| <div className="flex w-full flex-col gap-4 rounded-lg border border-gray-400 p-4 @container"> | ||
| {Object.entries(event.value).map(([key, value]) => ( | ||
| <div className="flex w-full flex-col items-center gap-2 md:flex-row"> | ||
| <span className="text-xs uppercase text-gray-700"> | ||
| {key.replace(/_/g, " ")} | ||
| </span> | ||
| <span className="break-all text-sm font-semibold text-gray-700"> | ||
| {formatValue(value, key)} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| ); | ||
| } |
13 changes: 13 additions & 0 deletions
13
src/Components/Facility/ConsultationDetails/Events/iconMap.ts
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,13 @@ | ||
| import { IconName } from "../../../../CAREUI/icons/CareIcon"; | ||
|
|
||
| const eventIconMap: Record<string, IconName> = { | ||
| INTERNAL_TRANSFER: "l-exchange-alt", | ||
| CLINICAL: "l-stethoscope", | ||
| DIAGNOSIS: "l-tablets", | ||
| ENCOUNTER_SUMMARY: "l-file-medical-alt", | ||
| HEALTH: "l-heartbeat", | ||
| }; | ||
|
|
||
| export const getEventIcon = (eventType: string): IconName => { | ||
| return eventIconMap[eventType] || "l-robot"; | ||
| }; |
30 changes: 30 additions & 0 deletions
30
src/Components/Facility/ConsultationDetails/Events/types.ts
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,30 @@ | ||
| import { UserBareMinimum } from "../../../Users/models"; | ||
|
|
||
| export type Type = { | ||
| id: number; | ||
| parent: number | null; | ||
| name: string; | ||
| description: string | null; | ||
| model: string; | ||
| fields: string[]; | ||
| }; | ||
|
|
||
| export type CausedBy = UserBareMinimum; | ||
|
|
||
| export type EventGeneric = { | ||
| id: string; | ||
| event_type: Type; | ||
| created_date: string; | ||
| object_model: string; | ||
| object_id: number; | ||
| is_latest: boolean; | ||
| meta: { | ||
| external_id: string; | ||
| }; | ||
| value: Record<string, unknown>; | ||
| change_type: "CREATED" | "UPDATED" | "DELETED"; | ||
| consultation: number; | ||
| caused_by: UserBareMinimum; | ||
| }; | ||
|
|
||
| // TODO: Once event types are finalized, define specific types for each event |
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 |
|---|---|---|
| @@ -1,9 +1,3 @@ | ||
| export interface PerformedByModel { | ||
| id: string; | ||
| first_name: string; | ||
| last_name: string; | ||
| username: string; | ||
| email: string; | ||
| user_type: string; | ||
| last_login: string; | ||
| } | ||
| import { UserBareMinimum } from "../Users/models"; | ||
|
|
||
| export type PerformedByModel = UserBareMinimum; |
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