Skip to content

Commit

Permalink
make template timeline design
Browse files Browse the repository at this point in the history
  • Loading branch information
Pranshu1902 committed Dec 7, 2023
1 parent f992917 commit f0ee615
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 43 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import RecordMeta from "../../../../CAREUI/display/RecordMeta";
// import RecordMeta from "../../../../CAREUI/display/RecordMeta";
import CareIcon from "../../../../CAREUI/icons/CareIcon";
import ButtonV2 from "../../../Common/components/ButtonV2";
import { DailyRoundsModel } from "../../../Patient/models";
Expand All @@ -13,24 +13,53 @@ interface Props {
onUpdateLog?: () => void;
}

const getName = (item: any) => {
return `${item?.first_name} ${item?.last_name} (${item?.user_type})`;
};
// const getName = (item: any) => {
// return `${item?.first_name} ${item?.last_name} (${item?.user_type})`;
// };

const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
const { t } = useTranslation();
const telemedicine_doctor_update =
round.created_by_telemedicine || round.last_updated_by_telemedicine;
// const telemedicine_doctor_update =
// round.created_by_telemedicine || round.last_updated_by_telemedicine;

const by = props.consultationData.assigned_to_object || round.created_by;
// const by = props.consultationData.assigned_to_object || round.created_by;

return (
<div
className={`flex w-full flex-col gap-4 rounded-lg p-4 shadow @container ${
telemedicine_doctor_update ? "bg-purple-200" : "bg-white"
}`}
>
<div className="flex flex-col items-start gap-1">
<div className="flex w-full flex-col gap-4 rounded-lg p-2 @container">
<LogUpdateCardAttribute
attributeKey="patient_category"
attributeValue={round.patient_category}
/>
<LogUpdateCardAttribute
attributeKey="physical_examination_info"
attributeValue={round.physical_examination_info}
/>
<LogUpdateCardAttribute
attributeKey="other_details"
attributeValue={round.other_details}
/>
<div className="mt-2 flex items-center gap-2">
<ButtonV2
variant="secondary"
border
ghost
onClick={props.onViewDetails}
>
<CareIcon className="care-l-eye text-lg" />
<span>{t("view_details")}</span>
</ButtonV2>
<ButtonV2
variant="secondary"
border
ghost
className="tooltip"
onClick={props.onUpdateLog}
>
<CareIcon className="care-l-pen text-lg" />
<span>{t("update_log")}</span>
</ButtonV2>
</div>
{/* <div className="flex flex-col items-start gap-1">
<div className="flex w-min items-center gap-2 rounded-full border bg-gray-50 text-gray-500">
<div className="rounded-full bg-gray-100 px-1.5 py-0.5">
<CareIcon className="care-l-user-nurse text-lg" />
Expand Down Expand Up @@ -89,7 +118,7 @@ const DefaultLogUpdateCard = ({ round, ...props }: Props) => {
</ButtonV2>
)}
</div>
</div>
</div> */}
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useTranslation } from "react-i18next";
import RecordMeta from "../../../../CAREUI/display/RecordMeta";
import CareIcon from "../../../../CAREUI/icons/CareIcon";
// import RecordMeta from "../../../../CAREUI/display/RecordMeta";
// import CareIcon from "../../../../CAREUI/icons/CareIcon";
import { DailyRoundsModel } from "../../../Patient/models";
import LogUpdateCardAttribute from "./LogUpdateCardAttribute";

Expand Down Expand Up @@ -67,8 +67,8 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
const diffKeys = Object.keys(diff);

return (
<div className="flex w-full flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow shadow-primary-500/20">
<div className="flex flex-col items-start gap-1">
<div className="flex w-full flex-col gap-4 rounded-lg border border-green-300 bg-white p-4 shadow-primary-500/20">
{/* <div className="flex flex-col items-start gap-1">
<div className="flex w-min items-center gap-2 rounded-full border bg-green-50 text-primary-400">
<div className="rounded-full bg-green-100 px-1.5 py-0.5">
<CareIcon className="care-l-robot text-lg" />
Expand All @@ -80,7 +80,7 @@ const VirtualNursingAssistantLogUpdateCard = (props: Props) => {
<span className="flex gap-1 text-xs text-gray-700">
{t("created")} <RecordMeta time={props.round.created_date} />
</span>
</div>
</div> */}
<div className="flex flex-col gap-1">
{diffKeys.length > 0 ? (
Object.keys(diff).map((key) => (
Expand Down
133 changes: 109 additions & 24 deletions src/Components/Facility/Consultations/DailyRoundsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ import PageTitle from "../../Common/PageTitle";
import DailyRoundsFilter from "./DailyRoundsFilter";
import { ConsultationModel } from "../models";
import { useSlugs } from "../../../Common/hooks/useSlug";
import Timeline, {
TimelineNode,
// TimelineNodeNotes,
} from "../../../CAREUI/display/Timeline";
// import CareIcon from "../../../CAREUI/icons/CareIcon";
// import ButtonV2 from "../../Common/components/ButtonV2";
// import LogUpdateCardAttribute from "./DailyRounds/LogUpdateCardAttribute";

interface Props {
consultation: ConsultationModel;
Expand Down Expand Up @@ -51,32 +58,110 @@ export default function DailyRoundsList({ consultation }: Props) {
))}
</>
</PaginatedList.WhenLoading>
<PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
{(item, items) => {
if (item.rounds_type === "AUTOMATED") {
return (
<VirtualNursingAssistantLogUpdateCard
round={item}
previousRound={items[items.indexOf(item) + 1]}
/>
);
}
<Timeline
className={
"animate-pulse rounded-lg bg-white p-2 py-4 opacity-70 shadow md:px-3"
}
name="Daily Rounds"
>
<PaginatedList.Items<DailyRoundsModel> className="flex grow flex-col gap-3">
{(item, items) => {
if (item.rounds_type === "AUTOMATED") {
return (
<TimelineNode
event={{
type: "updated",
timestamp: item.created_date?.toString() ?? "",
by: {
// ...item.created_by,
user_type: item.created_by?.user_type ?? "",
first_name: "Virtual",
last_name: "Assistant",
username: "",
id: "",
email: "",
last_login: "",
},
icon: "l-history",
}}
isLast={false}
>
<VirtualNursingAssistantLogUpdateCard
round={item}
previousRound={items[items.indexOf(item) + 1]}
/>
</TimelineNode>
);
}

const itemUrl =
item.rounds_type === "NORMAL"
? `${consultationUrl}/daily-rounds/${item.id}`
: `${consultationUrl}/daily_rounds/${item.id}`;
const itemUrl =
item.rounds_type === "NORMAL"
? `${consultationUrl}/daily-rounds/${item.id}`
: `${consultationUrl}/daily_rounds/${item.id}`;

return (
<DefaultLogUpdateCard
round={item}
consultationData={consultation}
onViewDetails={() => navigate(itemUrl)}
onUpdateLog={() => navigate(`${itemUrl}/update`)}
/>
);
}}
</PaginatedList.Items>
return (
<TimelineNode
event={{
type: "updated",
timestamp: item.created_date?.toString() ?? "",
by: {
// ...item.created_by,
user_type: item.created_by?.user_type ?? "",
first_name: item.created_by?.first_name ?? "",
last_name: item.created_by?.last_name ?? "",
username: "",
id: "",
email: "",
last_login: "",
},
icon: "l-history",
}}
isLast={items.indexOf(item) == items.length - 1}
>
{/* <LogUpdateCardAttribute
attributeKey="patient_category"
attributeValue={item.patient_category}
/>
<LogUpdateCardAttribute
attributeKey="physical_examination_info"
attributeValue={item.physical_examination_info}
/>
<LogUpdateCardAttribute
attributeKey="other_details"
attributeValue={item.other_details}
/>
<div className="mt-2 flex items-center gap-2">
<ButtonV2
variant="secondary"
border
ghost
onClick={() => navigate(itemUrl)}
>
<CareIcon className="care-l-eye text-lg" />
<span>{t("view_details")}</span>
</ButtonV2>
<ButtonV2
variant="secondary"
border
ghost
className="tooltip"
onClick={() => navigate(`${itemUrl}/update`)}
>
<CareIcon className="care-l-pen text-lg" />
<span>{t("update_log")}</span>
</ButtonV2>
</div> */}
<DefaultLogUpdateCard
round={item}
consultationData={consultation}
onViewDetails={() => navigate(itemUrl)}
onUpdateLog={() => navigate(`${itemUrl}/update`)}
/>
</TimelineNode>
);
}}
</PaginatedList.Items>
</Timeline>
<div className="flex w-full items-center justify-center">
<PaginatedList.Paginator hideIfSinglePage />
</div>
Expand Down

0 comments on commit f0ee615

Please sign in to comment.