From a1e84935eb73ebb8457f8f9371f6902c901e6198 Mon Sep 17 00:00:00 2001 From: rithviknishad Date: Mon, 6 Nov 2023 16:32:09 +0530 Subject: [PATCH] fixes #6544; Principal Diagnosis as Dropdown --- .../ConsultationDiagnosisBuilder.tsx | 83 +++++++++++++------ .../ConsultationDiagnosisEntry.tsx | 55 ++---------- .../PrincipalDiagnosisCard.tsx | 25 ------ .../PrincipalDiagnosisSelect.tsx | 66 +++++++++++++++ src/Components/Diagnosis/types.ts | 15 ++-- src/Locale/en/Diagnosis.json | 2 - 6 files changed, 138 insertions(+), 108 deletions(-) delete mode 100644 src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisCard.tsx create mode 100644 src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx index 4bfe4e85bc8..7c076b65298 100644 --- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx +++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisBuilder.tsx @@ -10,7 +10,7 @@ import ConsultationDiagnosisEntry from "./ConsultationDiagnosisEntry"; import request from "../../../Utils/request/request"; import DiagnosesRoutes from "../routes"; import * as Notification from "../../../Utils/Notifications"; -import PrincipalDiagnosisCard from "./PrincipalDiagnosisCard"; +import PrincipalDiagnosisSelect from "./PrincipalDiagnosisSelect"; interface CreateDiagnosesProps { className?: string; @@ -19,7 +19,6 @@ interface CreateDiagnosesProps { } export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => { - const principalDiagnosis = props.value.find((d) => d.is_principal); return (
@@ -30,18 +29,11 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => { value={diagnosis} onChange={(action) => { if (action.type === "remove") { - const diagnoses = [...props.value]; - diagnoses.splice(index, 1); - props.onChange(diagnoses); + props.onChange(props.value.toSpliced(index, 1)); } if (action.type === "edit") { - const diagnoses = action.value.is_principal - ? props.value.map((d) => { - d.is_principal = false; - return d; - }) - : [...props.value]; + const diagnoses = [...props.value]; diagnoses[index] = action.value as CreateDiagnosis; props.onChange(diagnoses); } @@ -65,12 +57,15 @@ export const CreateDiagnosesBuilder = (props: CreateDiagnosesProps) => {
- {principalDiagnosis?.diagnosis_object && ( - - )} + { + props.onChange( + props.value.map((d) => ({ ...d, is_principal: d === value })) + ); + }} + /> ); }; @@ -83,9 +78,6 @@ interface EditDiagnosesProps { export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => { const consultation = useSlug("consultation"); const [diagnoses, setDiagnoses] = useState(props.value); - - const principalDiagnosis = diagnoses.find((d) => d.is_principal); - return (
@@ -139,12 +131,51 @@ export const EditDiagnosesBuilder = (props: EditDiagnosesProps) => {
- {principalDiagnosis?.diagnosis_object && ( - - )} + { + // Unset existing principal diagnoses + await Promise.all( + diagnoses + .filter((d) => d.is_principal) + .map((d) => { + return request(DiagnosesRoutes.updateConsultationDiagnosis, { + pathParams: { consultation, id: d.id }, + body: { ...d, is_principal: false }, + }); + }) + ); + + if (!value) { + setDiagnoses((diagnoses) => + diagnoses.map((d) => ({ ...d, is_principal: false })) + ); + return; + } + + // Set new principal diagnosis + const { res, data, error } = await request( + DiagnosesRoutes.updateConsultationDiagnosis, + { + pathParams: { consultation, id: value.id }, + body: { ...value, is_principal: true }, + } + ); + + if (res?.ok && data) { + setDiagnoses((diagnoses) => + diagnoses.map((d) => + d.id === data.id ? data : { ...d, is_principal: false } + ) + ); + } + + if (error) { + Notification.Error({ msg: error }); + } + }} + /> ); }; diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx index fd57803893f..a650358c518 100644 --- a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx +++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/ConsultationDiagnosisEntry.tsx @@ -1,6 +1,3 @@ -import { useTranslation } from "react-i18next"; -import CareIcon from "../../../CAREUI/icons/CareIcon"; -import ButtonV2 from "../../Common/components/ButtonV2"; import ConditionVerificationStatusMenu from "../ConditionVerificationStatusMenu"; import { ActiveConditionVerificationStatuses, @@ -41,8 +38,6 @@ interface ConsultationEditProps extends BaseProps { type Props = ConsultationCreateProps | ConsultationEditProps; export default function ConsultationDiagnosisEntry(props: Props) { - const { t } = useTranslation(); - const [data, setData] = useState(); const [disabled, setDisabled] = useState(false); const handleUpdate = async (value: ConsultationDiagnosis) => { @@ -60,12 +55,11 @@ export default function ConsultationDiagnosisEntry(props: Props) { setDisabled(false); if (res?.ok && data) { - setData(data); + props.onChange({ type: "edit", value: data }); } }; - const object = data ?? props.value; - + const object = props.value; const isActive = ActiveConditionVerificationStatuses.includes( object.verification_status as (typeof ActiveConditionVerificationStatuses)[number] ); @@ -90,43 +84,7 @@ export default function ConsultationDiagnosisEntry(props: Props) { > {object.diagnosis_object?.label} -
- {isActive && ( - { - const value = { ...object, is_principal: !object.is_principal }; - if (props.consultationId) { - await handleUpdate(value as ConsultationDiagnosis); - } - props.onChange({ type: "edit", value }); - }} - tooltip={object.is_principal ? t("unmark_as_principal") : ""} - tooltipClassName="tooltip-bottom -translate-x-1/2 translate-y-1 text-xs" - > - {object.is_principal && ( - - )} - - {object.is_principal ? ( - <> - - {t("principal_diagnosis")} - - {t("principal")} - - ) : ( - t("mark_as_principal") - )} - - - )}
-
-

Principal Diagnosis

- - - {props.diagnosis.label} - - -

This encounter will be categorised under:

-

{props.diagnosis.chapter}

- - -
-
- ); -} diff --git a/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx new file mode 100644 index 00000000000..e0422730358 --- /dev/null +++ b/src/Components/Diagnosis/ConsultationDiagnosisBuilder/PrincipalDiagnosisSelect.tsx @@ -0,0 +1,66 @@ +import { useState } from "react"; +import { + ActiveConditionVerificationStatuses, + ConsultationDiagnosis, + CreateDiagnosis, +} from "../types"; +import { SelectFormField } from "../../Form/FormFields/SelectFormField"; + +type Option = CreateDiagnosis | ConsultationDiagnosis; + +interface Props { + className?: string; + diagnoses: T[]; + onChange: (value?: T) => Promise; +} + +const PrincipalDiagnosisSelect = (props: Props) => { + const [disabled, setDisabled] = useState(false); + const value = props.diagnoses.find((d) => d.is_principal); + const diagnosis = value?.diagnosis_object; + + const options = props.diagnoses.some(isConfirmed) + ? props.diagnoses.filter(isConfirmedOrPrincipal) + : props.diagnoses.filter(isActive); + + return ( +
+
+ d.diagnosis_object?.label} + optionDescription={(d) => ( +

+ Categorised under:{" "} + {d.diagnosis_object?.chapter} +

+ )} + optionValue={(d) => JSON.stringify(d)} // TODO: momentary hack, figure out a better way to do this + onChange={async ({ value }) => { + setDisabled(true); + await props.onChange(value ? (JSON.parse(value) as T) : undefined); + setDisabled(false); + }} + errorClassName="hidden" + /> + {diagnosis && ( + +

This encounter will be categorised under:

+

{diagnosis.chapter}

+ + )} +
+
+ ); +}; + +export default PrincipalDiagnosisSelect; + +const isConfirmed = (d: Option) => d.verification_status === "confirmed"; +const isConfirmedOrPrincipal = (d: Option) => isConfirmed(d) || d.is_principal; +const isActive = (d: Option) => + ActiveConditionVerificationStatuses.includes(d.verification_status as any); diff --git a/src/Components/Diagnosis/types.ts b/src/Components/Diagnosis/types.ts index 2281f307998..006bb2feb6c 100644 --- a/src/Components/Diagnosis/types.ts +++ b/src/Components/Diagnosis/types.ts @@ -27,19 +27,20 @@ export type ConditionVerificationStatus = (typeof ConditionVerificationStatuses)[number]; export interface ConsultationDiagnosis { - id: string; - diagnosis_object: ICD11DiagnosisModel; + readonly id: string; + diagnosis?: ICD11DiagnosisModel["id"]; + readonly diagnosis_object: ICD11DiagnosisModel; verification_status: ConditionVerificationStatus; is_principal: boolean; - is_migrated: boolean; - created_by: PerformedByModel; - created_date: string; - modified_date: string; + readonly is_migrated: boolean; + readonly created_by: PerformedByModel; + readonly created_date: string; + readonly modified_date: string; } export interface CreateDiagnosis { diagnosis: ICD11DiagnosisModel["id"]; - diagnosis_object?: ICD11DiagnosisModel; + readonly diagnosis_object?: ICD11DiagnosisModel; verification_status: (typeof ActiveConditionVerificationStatuses)[number]; is_principal: boolean; } diff --git a/src/Locale/en/Diagnosis.json b/src/Locale/en/Diagnosis.json index dd36d93e3ec..6cb301c058e 100644 --- a/src/Locale/en/Diagnosis.json +++ b/src/Locale/en/Diagnosis.json @@ -4,8 +4,6 @@ "diagnosis_already_added": "This diagnosis was already added", "principal": "Principal", "principal_diagnosis": "Principal diagnosis", - "mark_as_principal": "Mark as principal", - "unmark_as_principal": "Unmark as principal", "unconfirmed": "Unconfirmed", "provisional": "Provisional", "differential": "Differential",