Skip to content

Commit

Permalink
Rearranging buttons in the Patient consultation page (#6674)
Browse files Browse the repository at this point in the history 
* Rearranging buttons in the Patient consultation

* fix discharge patient cypress

* Remove unused imports in ConsultationDetails
component
  • Loading branch information
@GokulramGHV
GokulramGHV authored Nov 29, 2023
1 parent aef8f19 commit 88fa9a2
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 80 deletions.
3 changes: 2 additions & 1 deletion cypress/pageobject/Patient/PatientConsultation.ts
View file
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
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
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

0 comments on commit 88fa9a2

Please sign in to comment.