From 8892f56013d814ed4eae891cb7c37f088298996c Mon Sep 17 00:00:00 2001
From: Bodhish Thomas <bodhish@gmail.com>
Date: Thu, 9 May 2024 01:13:25 +0530
Subject: [PATCH] Default discontinued prescriptions to collapsed view

---
 .../Medicine/PrescriptionsTable.tsx           | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/Components/Medicine/PrescriptionsTable.tsx b/src/Components/Medicine/PrescriptionsTable.tsx
index d61275c42c1..c978ade463e 100644
--- a/src/Components/Medicine/PrescriptionsTable.tsx
+++ b/src/Components/Medicine/PrescriptionsTable.tsx
@@ -55,6 +55,25 @@ export default function PrescriptionsTable({
         ? DISCHARGE_PRN_TKEYS
         : DISCHARGE_NORMAL_TKEYS;
 
+  // Implementing collapsible view for each prescription entry
+  const [collapsedPrescriptions, setCollapsedPrescriptions] = useState<string[]>([]);
+
+  const toggleCollapse = (id: string) => {
+    setCollapsedPrescriptions((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((prescriptionId) => prescriptionId !== id);
+      } else {
+        return [...prev, id];
+      }
+    });
+  };
+
+  // Default the view of discontinued prescriptions to collapsed
+  const discontinuedPrescriptions = data?.results.filter((prescription) => prescription.discontinued).map((prescription) => prescription.id) || [];
+  useState(() => {
+    setCollapsedPrescriptions(discontinuedPrescriptions);
+  });
+
   return (
     <div>
       {data?.results && (
@@ -205,6 +224,19 @@ export default function PrescriptionsTable({
                   ) : (
                     "never"
                   ),
+                  // Adding a toggle button to expand/collapse the prescription details
+                  actions: (
+                    <button
+                      onClick={() => toggleCollapse(obj.id)}
+                      className="text-primary-600 hover:text-primary-900"
+                    >
+                      {collapsedPrescriptions.includes(obj.id) ? (
+                        <CareIcon icon="l-angle-down" />
+                      ) : (
+                        <CareIcon icon="l-angle-up" />
+                      )}
+                    </button>
+                  ),
                 })) || []
               }
               objectKeys={Object.values(tkeys)}