revise-panels:refining the rendering of extensions in the lab-panels-…

…slot (#44) * revise-panels:refining the rendering of extensions in the lab-panels-slot * revise-panels:refining the rendering of extensions in the lab-panels-slot * panel:adding comments in read-me * revise-panels:updating dependecies * revise-panels:remiving comments
openmrs · Jan 23, 2024 · e35491f · e35491f
1 parent e1f17d8
commit e35491f
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 148 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,10 @@ For more information, please refer to the
 
 ### Adding Results
 
+### Adding tab panels
+Implementers can add or remove laboratory tab panels via extension configuration in the [routes.js](https://github.com/openmrs/openmrs-esm-laboratory/blob/main/src/routes.json) json file 
+
+
 <img src="https://raw.githubusercontent.com/openmrs/openmrs-esm-laboratory/main/assets/screenshots/labs_enter_results.png" />
 
 # Getting Started

diff --git a/src/queue-list/laboratory-tabs.component.tsx b/src/queue-list/laboratory-tabs.component.tsx
@@ -15,6 +15,7 @@ import { EmptyState } from "@openmrs/esm-patient-common-lib";
 import WorkList from "../work-list/work-list.component";
 import ReviewList from "../review-list/review-list.component";
 import CompletedList from "../completed-list/completed-list.component";
+import { ComponentContext } from "@openmrs/esm-framework/src/internal";
 
 enum TabTypes {
   STARRED,
@@ -32,48 +33,6 @@ const LaboratoryQueueTabs: React.FC = () => {
     labPanelSlot
   ) as AssignedExtension[];
 
-  const [derivedSlots, setDerivedSlots] = useState<
-    { slot: string; extension: string }[]
-  >([]);
-
-  const extraPanels = useMemo(() => {
-    const filteredExtensions = tabExtensions.filter(
-      (extension) => Object.keys(extension.meta).length > 0
-    );
-    const derivedSlotsBuffer = [];
-    return filteredExtensions.map((extension, index) => {
-      const slotName = `${labPanelSlot}-${index}`;
-      derivedSlotsBuffer.push({
-        slot: slotName,
-        extension: extension.name,
-      });
-      if (filteredExtensions.length === index + 1) {
-        setDerivedSlots(derivedSlotsBuffer);
-      }
-
-      return (
-        <TabPanel key={extension.meta.name} style={{ padding: 0 }}>
-          <div>
-            <div className={styles.headerBtnContainer}></div>
-            <ExtensionSlot name={slotName} />
-          </div>
-        </TabPanel>
-      );
-    });
-  }, [tabExtensions?.length]);
-
-  useEffect(() => {
-    derivedSlots.forEach(({ slot, extension }) => {
-      attach(slot, extension);
-    });
-
-    return () => {
-      derivedSlots.forEach(({ slot }) => {
-        detachAll(slot);
-      });
-    };
-  }, [derivedSlots]);
-
   return (
     <main className={`omrs-main-content`}>
       <section className={styles.orderTabsContainer}>
@@ -118,7 +77,27 @@ const LaboratoryQueueTabs: React.FC = () => {
                 <LaboratoryPatientList />
               </div>
             </TabPanel>
-            {extraPanels}
+            {tabExtensions
+              .filter((extension) => Object.keys(extension.meta).length > 0)
+              .map((extension, index) => {
+                return (
+                  <TabPanel key={`${extension.meta.title}-tab-${index}`}>
+                    <ComponentContext.Provider
+                      key={extension.id}
+                      value={{
+                        moduleName: extension.moduleName,
+                        extension: {
+                          extensionId: extension.id,
+                          extensionSlotName: labPanelSlot,
+                          extensionSlotModuleName: extension.moduleName,
+                        },
+                      }}
+                    >
+                      <Extension />
+                    </ComponentContext.Provider>
+                  </TabPanel>
+                );
+              })}
           </TabPanels>
         </Tabs>
       </section>