From 92174a151ba9d323b7e0c7555a1305b5ac7d3cf4 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Wed, 31 Jan 2024 17:43:54 +0530
Subject: [PATCH] Redesign diagnosis list

---
 .../Diagnosis/DiagnosesListAccordion.tsx      | 107 ++++++++++++++++++
 .../Diagnosis/LegacyDiagnosesList.tsx         |  63 -----------
 .../Facility/ConsultationDetails/index.tsx    |  20 +---
 3 files changed, 111 insertions(+), 79 deletions(-)
 create mode 100644 src/Components/Diagnosis/DiagnosesListAccordion.tsx
 delete mode 100644 src/Components/Diagnosis/LegacyDiagnosesList.tsx

diff --git a/src/Components/Diagnosis/DiagnosesListAccordion.tsx b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
new file mode 100644
index 00000000000..603e622c1a4
--- /dev/null
+++ b/src/Components/Diagnosis/DiagnosesListAccordion.tsx
@@ -0,0 +1,107 @@
+import {
+  ActiveConditionVerificationStatuses,
+  ConditionVerificationStatus,
+  ConsultationDiagnosis,
+} from "./types";
+import { useTranslation } from "react-i18next";
+import { classNames, compareBy } from "../../Utils/utils";
+import { useState } from "react";
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import ButtonV2 from "../Common/components/ButtonV2";
+
+interface Props {
+  diagnoses: ConsultationDiagnosis[];
+}
+
+type GroupedDiagnoses = Record<
+  ConditionVerificationStatus,
+  ConsultationDiagnosis[]
+>;
+
+function groupDiagnoses(diagnoses: ConsultationDiagnosis[]) {
+  const groupedDiagnoses = {} as GroupedDiagnoses;
+
+  for (const status of ActiveConditionVerificationStatuses) {
+    groupedDiagnoses[status] = diagnoses
+      .filter((d) => d.verification_status === status)
+      .sort(compareBy("is_principal"));
+  }
+
+  return groupedDiagnoses;
+}
+
+export default function DiagnosesListAccordion(props: Props) {
+  const [isVisible, setIsVisible] = useState(true);
+  const diagnoses = groupDiagnoses(props.diagnoses);
+
+  return (
+    <div>
+      <div className="flex justify-between">
+        {!isVisible && (
+          <ButtonV2
+            className="text-md w-full p-0 font-semibold text-black"
+            ghost
+            onClick={() => {
+              setIsVisible((prev) => !prev);
+            }}
+          >
+            <CareIcon icon="l-angle-down" className="h-7" />
+            Expand Diagnoses
+          </ButtonV2>
+        )}
+      </div>
+      <div
+        className={classNames("transition-all duration-500 ease-in-out")}
+        style={
+          isVisible
+            ? {
+                overflow: "visible",
+              }
+            : { height: "0px", overflow: "hidden" }
+        }
+      >
+        <h3 className="my-2 text-lg font-semibold leading-relaxed text-gray-900">
+          Diagnoses
+        </h3>
+        <div className="grid grid-cols-1 items-start gap-2 lg:grid-cols-2 2xl:grid-cols-3">
+          {Object.entries(diagnoses).map(
+            ([status, diagnoses]) =>
+              !!diagnoses.length && (
+                <DiagnosesOfStatus key={status} diagnoses={diagnoses} />
+              )
+          )}
+        </div>
+        <ButtonV2
+          className="text-md mt-2 w-full p-0 font-semibold text-black"
+          ghost
+          onClick={() => {
+            setIsVisible(false);
+          }}
+        >
+          <CareIcon icon="l-angle-up" className="h-7" />
+          Hide Diagnoses
+        </ButtonV2>
+      </div>
+    </div>
+  );
+}
+
+const DiagnosesOfStatus = ({ diagnoses }: Props) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h2 className="text-sm font-semibold">
+        {t(diagnoses[0].verification_status)} {t("diagnoses")}{" "}
+        <span>({t("icd11_as_recommended")})</span>
+      </h2>
+      <ul className="text-sm">
+        {diagnoses.map((diagnosis) => (
+          <li key={diagnosis.id} className="flex items-center gap-2">
+            <span>{diagnosis.diagnosis_object?.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/Components/Diagnosis/LegacyDiagnosesList.tsx b/src/Components/Diagnosis/LegacyDiagnosesList.tsx
deleted file mode 100644
index e8beafe29ad..00000000000
--- a/src/Components/Diagnosis/LegacyDiagnosesList.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  ActiveConditionVerificationStatuses,
-  ConditionVerificationStatus,
-  ConsultationDiagnosis,
-} from "./types";
-import { useTranslation } from "react-i18next";
-import { compareBy } from "../../Utils/utils";
-
-interface Props {
-  diagnoses: ConsultationDiagnosis[];
-}
-
-type GroupedDiagnoses = Record<
-  ConditionVerificationStatus,
-  ConsultationDiagnosis[]
->;
-
-function groupDiagnoses(diagnoses: ConsultationDiagnosis[]) {
-  const groupedDiagnoses = {} as GroupedDiagnoses;
-
-  for (const status of ActiveConditionVerificationStatuses) {
-    groupedDiagnoses[status] = diagnoses
-      .filter((d) => d.verification_status === status)
-      .sort(compareBy("is_principal"));
-  }
-
-  return groupedDiagnoses;
-}
-
-export default function LegacyDiagnosesList(props: Props) {
-  const diagnoses = groupDiagnoses(props.diagnoses);
-
-  return (
-    <div className="grid grid-cols-1 items-start gap-2 lg:grid-cols-2 2xl:grid-cols-3">
-      {Object.entries(diagnoses).map(
-        ([status, diagnoses]) =>
-          !!diagnoses.length && (
-            <DiagnosesOfStatus key={status} diagnoses={diagnoses} />
-          )
-      )}
-    </div>
-  );
-}
-
-const DiagnosesOfStatus = ({ diagnoses }: Props) => {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h2 className="text-sm font-semibold">
-        {t(diagnoses[0].verification_status)} {t("diagnoses")}{" "}
-        <span>({t("icd11_as_recommended")})</span>
-      </h2>
-      <ul className="text-sm">
-        {diagnoses.map((diagnosis) => (
-          <li key={diagnosis.id} className="flex items-center gap-2">
-            <span>{diagnosis.diagnosis_object?.label}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
index 47d663f731d..071e7bfc1af 100644
--- a/src/Components/Facility/ConsultationDetails/index.tsx
+++ b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -39,8 +39,7 @@ import PatientNotesSlideover from "../PatientNotesSlideover";
 import { AssetBedModel } from "../../Assets/AssetTypes";
 import PatientInfoCard from "../../Patient/PatientInfoCard";
 import RelativeDateUserMention from "../../Common/RelativeDateUserMention";
-import LegacyDiagnosesList from "../../Diagnosis/LegacyDiagnosesList";
-import AccordionV2 from "../../Common/components/AccordionV2";
+import DiagnosesListAccordion from "../../Diagnosis/DiagnosesListAccordion";
 
 const Loading = lazy(() => import("../../Common/Loading"));
 const PageTitle = lazy(() => import("../../Common/PageTitle"));
@@ -404,20 +403,9 @@ export const ConsultationDetails = (props: any) => {
         </div>
         <div className="col-span-1 mt-2 overflow-hidden rounded-lg bg-white shadow">
           <div className="px-4 py-2">
-            <AccordionV2
-              expanded={true}
-              title={
-                <h3 className="text-lg font-semibold leading-relaxed text-gray-900">
-                  Diagnoses
-                </h3>
-              }
-            >
-              <div className="mt-2">
-                <LegacyDiagnosesList
-                  diagnoses={consultationData.diagnoses || []}
-                />
-              </div>
-            </AccordionV2>
+            <DiagnosesListAccordion
+              diagnoses={consultationData.diagnoses ?? []}
+            />
           </div>
         </div>
         <div className="mt-4 w-full border-b-2 border-gray-200">