-
Notifications
You must be signed in to change notification settings - Fork 475
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Group medicine administration by 4 hours + Support for archiving medi…
…cines + Administration Activity View + migrate `useDispatch` to `useQuery` (#6396) * fixes #6341; bin medicine administrations by 4:1 hrs * fix comments * fix tooltip clipping * remove warnings * improve how date seperation is shown * popover shows more details * cleanup: move files to correct place * delete old medicine administration table * cleanup * remove useDispatch in bulk administer * fixes #6442; API calls via useQuery for Medicines * cleanup * fix keys * cleanup * update seperator * overlay * temp fix tooltip * fix refetch logic * fix z-index * consistency * fix z-index * fix useIsScrollable dependencies * fix z-index * rewrite scroll overflow behaviour * fix z-index * cleanup API routes * support for archive and fix responsiveness issues * fix styling * fix path missing path params * remove tooltip * swap positions of actions and timestamp in timeline * fix responsiveness * minor spacing * fix responsiveness * fix spacing * hide archive if discontinued * fix responsiveness * fix discontinue refetch not invoked --------- Co-authored-by: Mohammed Nihal <[email protected]>
- Loading branch information
1 parent
e30d6bd
commit fbf8eee
Showing
36 changed files
with
1,389 additions
and
1,047 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| import { createContext, useContext } from "react"; | ||
| import { PerformedByModel } from "../../Components/HCX/misc"; | ||
| import { classNames, formatName } from "../../Utils/utils"; | ||
| import CareIcon, { IconName } from "../icons/CareIcon"; | ||
| import RecordMeta from "./RecordMeta"; | ||
|
|
||
| export interface TimelineEvent<TType = string> { | ||
| type: TType; | ||
| timestamp: string; | ||
| by: PerformedByModel | undefined; | ||
| icon: IconName; | ||
| notes?: string; | ||
| cancelled?: boolean; | ||
| } | ||
|
|
||
| interface TimelineProps { | ||
| className: string; | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| name: string; | ||
| } | ||
|
|
||
| const TimelineContext = createContext(""); | ||
|
|
||
| export default function Timeline({ className, children, name }: TimelineProps) { | ||
| return ( | ||
| <div className={className}> | ||
| <ol role="list" className="space-y-6"> | ||
| <TimelineContext.Provider value={name}> | ||
| {children} | ||
| </TimelineContext.Provider> | ||
| </ol> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| interface TimelineNodeProps { | ||
| event: TimelineEvent; | ||
| title?: React.ReactNode; | ||
| /** | ||
| * Used to add a suffix to the auto-generated title. Will be ignored if `title` is provided. | ||
| */ | ||
| titleSuffix?: React.ReactNode; | ||
| actions?: React.ReactNode; | ||
| className?: string; | ||
| children?: React.ReactNode; | ||
| name?: string; | ||
| isLast: boolean; | ||
| } | ||
|
|
||
| export const TimelineNode = (props: TimelineNodeProps) => { | ||
| const name = useContext(TimelineContext); | ||
|
|
||
| return ( | ||
| <li className="relative flex gap-x-4"> | ||
| <div | ||
| className={classNames( | ||
| props.isLast ? "h-6" : "-bottom-6", | ||
| "absolute left-0 top-0 flex w-6 justify-center" | ||
| )} | ||
| > | ||
| <div className="w-px bg-gray-300" /> | ||
| </div> | ||
|
|
||
| <div | ||
| className={classNames( | ||
| props.className, | ||
| "group flex w-full flex-col items-start gap-y-1" | ||
| )} | ||
| > | ||
| <div className="relative flex w-full justify-between gap-x-4"> | ||
| <div | ||
| className={classNames( | ||
| "flex w-full gap-x-4", | ||
| props.event.cancelled && "line-through" | ||
| )} | ||
| > | ||
| {props.title || ( | ||
| <TimelineNodeTitle event={props.event}> | ||
| <p className="flex-auto py-0.5 text-xs leading-5 text-gray-600"> | ||
| {props.event.by && ( | ||
| <span className="font-medium text-gray-900"> | ||
| {formatName(props.event.by)}{" "} | ||
| </span> | ||
| )} | ||
| {props.titleSuffix | ||
| ? props.titleSuffix | ||
| : `${props.event.type} the ${props.name || name}.`} | ||
| </p> | ||
| {props.actions && ( | ||
| <TimelineNodeActions>{props.actions}</TimelineNodeActions> | ||
| )} | ||
| <RecordMeta | ||
| className="flex-none py-0.5 text-xs leading-5 text-gray-500" | ||
| time={props.event.timestamp} | ||
| /> | ||
| </TimelineNodeTitle> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-col items-start gap-y-2 pl-10"> | ||
| <TimelineNodeNotes>{props.event.notes}</TimelineNodeNotes> | ||
| {props.children} | ||
| </div> | ||
| </div> | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| interface TimelineNodeTitleProps { | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| event: TimelineEvent; | ||
| } | ||
|
|
||
| export const TimelineNodeTitle = (props: TimelineNodeTitleProps) => { | ||
| return ( | ||
| <> | ||
| <div className="relative flex h-6 w-6 flex-none items-center justify-center rounded-full bg-gray-200 transition-all duration-200 ease-in-out group-hover:bg-primary-500"> | ||
| <CareIcon | ||
| className="text-base text-gray-700 transition-all duration-200 ease-in-out group-hover:text-white" | ||
| aria-hidden="true" | ||
| icon={props.event.icon} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="flex w-full flex-wrap justify-between gap-2"> | ||
| {props.children} | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export const TimelineNodeActions = (props: { | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| }) => { | ||
| return <div className="flex justify-end gap-2">{props.children}</div>; | ||
| }; | ||
|
|
||
| interface TimelineNodeNotesProps { | ||
| children?: React.ReactNode | React.ReactNode[]; | ||
| icon?: IconName; | ||
| } | ||
|
|
||
| export const TimelineNodeNotes = ({ | ||
| children, | ||
| icon = "l-notes", | ||
| }: TimelineNodeNotesProps) => { | ||
| if (!children) { | ||
| return; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex w-full items-start gap-2 rounded-md p-3 ring-1 ring-inset ring-gray-200"> | ||
| <CareIcon icon={icon} className="text-lg text-gray-700" /> | ||
| <div className="mt-1 flex-auto text-xs text-gray-700">{children}</div> | ||
| </div> | ||
| ); | ||
| }; |
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 useVisibility from "../../Utils/useVisibility"; | ||
| import { classNames } from "../../Utils/utils"; | ||
|
|
||
| interface Props { | ||
| className?: string; | ||
| children: React.ReactNode; | ||
| overlay: React.ReactNode; | ||
| disableOverlay?: boolean; | ||
| } | ||
|
|
||
| export default function ScrollOverlay(props: Props) { | ||
| const [bottomIsVisible, ref] = useVisibility(); | ||
| const hasScrollContent = !props.disableOverlay && !bottomIsVisible; | ||
|
|
||
| return ( | ||
| <div className={classNames("relative", props.className)}> | ||
| {props.children} | ||
|
|
||
| <div ref={ref as any} /> | ||
| <div | ||
| className={classNames( | ||
| "sticky inset-x-0 -bottom-3.5 z-10 flex items-end justify-center bg-gradient-to-t from-gray-900/90 to-transparent text-white transition-all duration-500 ease-in-out md:bottom-0", | ||
| hasScrollContent ? "h-16 opacity-75" : "h-0 opacity-0" | ||
| )} | ||
| > | ||
| {hasScrollContent && props.overlay} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
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
12 changes: 5 additions & 7 deletions
12
src/Components/Facility/ConsultationDetails/ConsultationMedicinesTab.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
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
Oops, something went wrong.