Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rearranging buttons in the Patient consultation page #6674

Merged
merged 4 commits into from
Nov 29, 2023
Merged

Rearranging buttons in the Patient consultation page #6674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
045444b
Rearranging buttons in the Patient consultation
GokulramGHV Nov 20, 2023
0320ca4
Merge branch 'develop' into fix-issue-6630
GokulramGHV Nov 28, 2023
6fb18dc
fix discharge patient cypress
GokulramGHV Nov 28, 2023
c0123b1
Remove unused imports in ConsultationDetails
GokulramGHV Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cypress/pageobject/Patient/PatientConsultation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,8 @@ export class PatientConsultationPage {
}

clickDischargePatient() {
cy.get("#discharge_patient_from_care").click();
cy.get("#show-more").click();
cy.contains("p", "Discharge from CARE").click();
}

selectDischargeReason(reason: string) {
Expand Down
78 changes: 1 addition & 77 deletions src/Components/Facility/ConsultationDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@ import {
} from "../../../Redux/actions";
import { statusType, useAbortableEffect } from "../../../Common/utils";
import { lazy, useCallback, useState } from "react";
import ButtonV2 from "../../Common/components/ButtonV2";
import CareIcon from "../../../CAREUI/icons/CareIcon";
import DischargeModal from "../DischargeModal";
import DischargeSummaryModal from "../DischargeSummaryModal";
import DoctorVideoSlideover from "../DoctorVideoSlideover";
import { make as Link } from "../../Common/components/Link.bs";
import PatientInfoCard from "../../Patient/PatientInfoCard";
Expand All @@ -25,7 +21,6 @@ import { formatDateTime, relativeTime } from "../../../Utils/utils";

import { navigate, useQueryParams } from "raviger";
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { triggerGoal } from "../../../Integrations/Plausible";
import useAuthUser from "../../../Common/hooks/useAuthUser";
import { ConsultationUpdatesTab } from "./ConsultationUpdatesTab";
Expand Down Expand Up @@ -73,7 +68,6 @@ const TABS = {
};

export const ConsultationDetails = (props: any) => {
const { t } = useTranslation();
const { facilityId, patientId, consultationId } = props;
const tab = props.tab.toUpperCase() as keyof typeof TABS;
const dispatch: any = useDispatch();
Expand All @@ -86,9 +80,6 @@ export const ConsultationDetails = (props: any) => {
);
const [patientData, setPatientData] = useState<PatientModel>({});
const [activeShiftingData, setActiveShiftingData] = useState<Array<any>>([]);
const [openDischargeSummaryDialog, setOpenDischargeSummaryDialog] =
useState(false);
const [openDischargeDialog, setOpenDischargeDialog] = useState(false);
const [isCameraAttached, setIsCameraAttached] = useState(false);

const getPatientGender = (patientData: any) =>
Expand Down Expand Up @@ -197,19 +188,6 @@ export const ConsultationDetails = (props: any) => {

const SelectedTab = TABS[tab];

const hasActiveShiftingRequest = () => {
if (activeShiftingData.length > 0) {
return [
"PENDING",
"APPROVED",
"DESTINATION APPROVED",
"PATIENT TO BE PICKED UP",
].includes(activeShiftingData[activeShiftingData.length - 1].status);
}

return false;
};

if (isLoading) {
return <Loading />;
}
Expand Down Expand Up @@ -272,18 +250,6 @@ export const ConsultationDetails = (props: any) => {

return (
<div>
<DischargeSummaryModal
consultation={consultationData}
show={openDischargeSummaryDialog}
onClose={() => setOpenDischargeSummaryDialog(false)}
/>

<DischargeModal
show={openDischargeDialog}
onClose={() => setOpenDischargeDialog(false)}
consultationData={consultationData}
/>

<div className="px-2 pb-2">
<nav className="relative flex flex-wrap items-start justify-between">
<PageTitle
Expand All @@ -307,34 +273,6 @@ export const ConsultationDetails = (props: any) => {
<div className="flex w-full flex-col min-[1150px]:w-min min-[1150px]:flex-row min-[1150px]:items-center">
{!consultationData.discharge_date && (
<>
{hasActiveShiftingRequest() ? (
<ButtonV2
onClick={() =>
navigate(
`/shifting/${
activeShiftingData[activeShiftingData.length - 1].id
}`
)
}
className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
>
<CareIcon className="care-l-ambulance h-5 w-5" />
Track Shifting
</ButtonV2>
) : (
<ButtonV2
id="create_shift_request"
onClick={() =>
navigate(
`/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
)
}
className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
>
<CareIcon className="care-l-ambulance h-5 w-5" />
Shift Patient
</ButtonV2>
)}
<button
onClick={() => {
triggerGoal("Doctor Connect Clicked", {
Expand Down Expand Up @@ -385,6 +323,7 @@ export const ConsultationDetails = (props: any) => {
consultation={consultationData}
fetchPatientData={fetchData}
consultationId={consultationId}
activeShiftingData={activeShiftingData}
showAbhaProfile={qParams["show-abha-profile"] === "true"}
/>

Expand Down Expand Up @@ -448,21 +387,6 @@ export const ConsultationDetails = (props: any) => {
</div>
)}
</div>
<div className="flex h-full w-full flex-col justify-end gap-2 text-right lg:flex-row">
<ButtonV2 onClick={() => setOpenDischargeSummaryDialog(true)}>
<i className="fas fa-clipboard-list"></i>
<span>{t("discharge_summary")}</span>
</ButtonV2>

<ButtonV2
id="discharge_patient_from_care"
onClick={() => setOpenDischargeDialog(true)}
disabled={!!consultationData.discharge_date}
>
<i className="fas fa-hospital-user"></i>
<span>{t("discharge_from_care")}</span>
</ButtonV2>
</div>
</div>
<div className="flex flex-col justify-between gap-2 p-4 md:flex-row">
<div className="font-base flex flex-col text-xs leading-relaxed text-gray-700">
Expand Down
130 changes: 128 additions & 2 deletions src/Components/Patient/PatientInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { ConsultationModel, PatientCategory } from "../Facility/models";
import { Switch, Menu } from "@headlessui/react";

import { Link } from "raviger";
import { Link, navigate } from "raviger";
import { useState } from "react";
import CareIcon from "../../CAREUI/icons/CareIcon";
import useConfig from "../../Common/hooks/useConfig";
Expand All @@ -29,27 +29,35 @@ import routes from "../../Redux/api.js";
import DropdownMenu from "../Common/components/Menu.js";
import { triggerGoal } from "../../Integrations/Plausible.js";
import useAuthUser from "../../Common/hooks/useAuthUser.js";
import DischargeSummaryModal from "../Facility/DischargeSummaryModal.js";
import DischargeModal from "../Facility/DischargeModal.js";
import { useTranslation } from "react-i18next";

export default function PatientInfoCard(props: {
patient: PatientModel;
consultation?: ConsultationModel;
fetchPatientData?: (state: { aborted: boolean }) => void;
activeShiftingData: any;
consultationId: string;
showAbhaProfile?: boolean;
}) {
const authUser = useAuthUser();

const { t } = useTranslation();
const [open, setOpen] = useState(false);
const [showLinkABHANumber, setShowLinkABHANumber] = useState(false);
const [showABHAProfile, setShowABHAProfile] = useState(
!!props.showAbhaProfile
);
const [openDischargeSummaryDialog, setOpenDischargeSummaryDialog] =
useState(false);
const [openDischargeDialog, setOpenDischargeDialog] = useState(false);

const { enable_hcx, enable_abdm } = useConfig();
const [showLinkCareContext, setShowLinkCareContext] = useState(false);

const patient = props.patient;
const consultation = props.consultation;
const activeShiftingData = props.activeShiftingData;

const [medicoLegalCase, setMedicoLegalCase] = useState(
consultation?.medico_legal_case ?? false
Expand Down Expand Up @@ -86,6 +94,19 @@ export default function PatientInfoCard(props: {
}
};

const hasActiveShiftingRequest = () => {
if (activeShiftingData.length > 0) {
return [
"PENDING",
"APPROVED",
"DESTINATION APPROVED",
"PATIENT TO BE PICKED UP",
].includes(activeShiftingData[activeShiftingData.length - 1].status);
}

return false;
};

return (
<>
<DialogModal
Expand All @@ -109,6 +130,22 @@ export default function PatientInfoCard(props: {
<div>Invalid Patient Data</div>
)}
</DialogModal>

{consultation && (
<>
<DischargeSummaryModal
consultation={consultation}
show={openDischargeSummaryDialog}
onClose={() => setOpenDischargeSummaryDialog(false)}
/>
<DischargeModal
show={openDischargeDialog}
onClose={() => setOpenDischargeDialog(false)}
consultationData={consultation}
/>
</>
)}

<section className="flex flex-col items-center justify-between space-y-3 lg:flex-row lg:space-x-2 lg:space-y-0">
<div className="flex w-full flex-col bg-white px-4 py-2 lg:w-7/12 lg:flex-row lg:p-6">
{/* Can support for patient picture in the future */}
Expand Down Expand Up @@ -406,6 +443,7 @@ export default function PatientInfoCard(props: {
)
)}
<DropdownMenu
id="show-more"
itemClassName="min-w-0 sm:min-w-[225px]"
title={"Show More"}
icon={<CareIcon icon="l-sliders-v-alt" />}
Expand Down Expand Up @@ -545,6 +583,94 @@ export default function PatientInfoCard(props: {
</Menu.Item>
))}
</div>
<div>
{!consultation?.discharge_date && (
<Menu.Item>
{({ close }) => (
<>
{hasActiveShiftingRequest() ? (
<div
className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
onClick={() => {
close();
navigate(
`/shifting/${
activeShiftingData[
activeShiftingData.length - 1
].id
}`
);
}}
>
<span className="flex w-full items-center justify-start gap-2">
<CareIcon className="care-l-ambulance text-lg text-primary-500" />
<p>Track Shifting</p>
</span>
</div>
) : (
<div
className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
onClick={() => {
close();
navigate(
`/facility/${patient.facility}/patient/${patient.id}/shift/new`
);
}}
>
<span className="flex w-full items-center justify-start gap-2">
<CareIcon className="care-l-ambulance text-lg text-primary-500" />
<p>Shift Patient</p>
</span>
</div>
)}
</>
)}
</Menu.Item>
)}
<Menu.Item>
{({ close }) => (
<div
className="dropdown-item-primary pointer-events-auto m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out"
onClick={() => {
close();
setOpenDischargeSummaryDialog(true);
}}
>
<span className="flex w-full items-center justify-start gap-2">
<CareIcon className="care-l-clipboard-notes text-lg text-primary-500" />
<p>{t("discharge_summary")}</p>
</span>
</div>
)}
</Menu.Item>
<Menu.Item>
{({ close }) => (
<div
className={`dropdown-item-primary pointer-events-auto ${
consultation?.discharge_date &&
"text-gray-500 accent-gray-500 hover:bg-white"
} m-2 flex cursor-pointer items-center justify-start gap-2 rounded border-0 p-2 text-sm font-normal transition-all duration-200 ease-in-out`}
onClick={() => {
if (!consultation?.discharge_date) {
close();
setOpenDischargeDialog(true);
}
}}
>
<span className="flex w-full items-center justify-start gap-2">
<CareIcon
className={`care-l-hospital text-lg ${
consultation?.discharge_date
? "text-gray-500"
: "text-primary-500"
}`}
/>
<p>{t("discharge_from_care")}</p>
</span>
</div>
)}
</Menu.Item>
</div>
<div className="px-4 py-2">
<Switch.Group as="div" className="flex items-center">
<Switch
Expand Down
Loading