Clinical encounter tables and Remove Encounter table pagination (#8)

* Remove pagination - Use Encounter list table to display clinical encounters * update translations
UCSF-IGHS · Jul 16, 2024 · d14beba · d14beba
1 parent c3540c9
commit d14beba
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 125 deletions.
diff --git a/.npmignore b/.npmignore
diff --git a/src/care-and-treatment/care-and-treatment.component.tsx b/src/care-and-treatment/care-and-treatment.component.tsx
@@ -1,32 +1,22 @@
 import React from "react";
 import { useConfig } from "@openmrs/esm-framework";
-import styles from "../common.scss";
 
 import careTreatmentConfigWorkflow from "./care-treatment-config.json";
-import {
-  SummaryCard,
-  getSummaryCardProps,
-} from "@ohri/openmrs-esm-ohri-commons-lib";
+import { EncounterListTabsComponent } from "@ohri/openmrs-esm-ohri-commons-lib";
 
 interface OverviewListProps {
   patientUuid: string;
 }
 
 const CareAndTreatment: React.FC<OverviewListProps> = ({ patientUuid }) => {
   const config = useConfig();
-  const cards = careTreatmentConfigWorkflow.cardDefinitions;
 
   return (
-    <div className={styles.tabContainer}>
-      {cards.map((cardContent) => (
-        <SummaryCard
-          key={cardContent.cardId}
-          headerTitle={cardContent.cardTitle}
-          patientUuid={patientUuid}
-          columns={getSummaryCardProps(cardContent, config)}
-        />
-      ))}
-    </div>
+    <EncounterListTabsComponent
+      configSchema={careTreatmentConfigWorkflow}
+      config={config}
+      patientUuid={patientUuid}
+    />
   );
 };
 

diff --git a/src/care-and-treatment/care-treatment-config.json b/src/care-and-treatment/care-treatment-config.json
@@ -1,9 +1,10 @@
 {
   "menuId": "careAndTreatment",
-  "cardDefinitions": [
+  "tabDefinitions": [
     {
-      "cardId": "visit",
-      "cardTitle": "Visit",
+      "tabName": "New Visit",
+      "headerTitle": "New Visit",
+      "displayText": "New Visit",
       "columns": [
         {
           "id": "weight",
@@ -45,12 +46,41 @@
             "visitEncounterType"
           ],
           "concept": "nextVisitConcept"
+        },
+        {
+          "id": "actions",
+          "title": "Actions",
+          "actionOptions": [
+            {
+              "formName": "visitFormName",
+              "package": "care-treatment",
+              "label": "View Details",
+              "mode": "view"
+            },
+            {
+              "formName": "visitFormName",
+              "package": "care-treatment",
+              "label": "Edit Form",
+              "mode": "edit"
+            }
+          ]
+        }
+      ],
+      "launchOptions": {
+        "displayText": "Add",
+        "moduleName": "@ohri/openmrs-esm-rwanda-app"
+      },
+      "formList": [
+        {
+          "name": "visitFormName",
+          "uuid": "visitFormUuid"
         }
       ]
     },
     {
-      "cardId": "opportunisticInfections",
-      "cardTitle": "Opportunistic Infections",
+      "tabName": "Opportunistic Infections",
+      "headerTitle": "Opportunistic Infections",
+      "displayText": "Opportunistic Infections",
       "columns": [
         {
           "id": "encounterDate",
@@ -84,75 +114,41 @@
             "oiEncounterType"
           ],
           "concept": "criteriaConcept"
-        }
-      ]
-    },
-    {
-      "cardId": "image",
-      "cardTitle": "Image",
-      "columns": [
-        {
-          "id": "encounterDate",
-          "isDate": true,
-          "title": "Encounter Date",
-          "encounterTypes": [
-            "imageEncounterType"
-          ],
-          "concept": "encounterDate"
         },
         {
-          "id": "imageOrdered",
-          "title": "Image ordered",
-          "encounterTypes": [
-          "imageEncounterType"
-          ],
-          "concept": "imageOrderedConcept"
+          "id": "actions",
+          "title": "Actions",
+          "actionOptions": [
+            {
+              "formName": "oiFormName",
+              "package": "care-treatment",
+              "label": "View Details",
+              "mode": "view"
+            },
+            {
+              "formName": "oiFormName",
+              "package": "care-treatment",
+              "label": "Edit Form",
+              "mode": "edit"
+            }
+          ]
         }
-      ]
-    },
-    {
-      "cardId": "allergies",
-      "cardTitle": "Allergies",
-      "columns": [
-        {
-          "id": "encounterDate",
-          "isDate": true,
-          "title": "Encounter Date",
-          "encounterTypes": [
-            "allergyEncounterType"
-          ],
-          "concept": "encounterDate"
-        },
-        {
-          "id": "suspectedDrug",
-          "title": "Suspected Drug",
-          "encounterTypes": [
-            "allergyEncounterType"
-          ],
-          "concept": "suspectedDrugConcept"
-        },
-
-        {
-          "id": "drugEffect",
-          "title": "Drug Effect",
-          "encounterTypes": [
-            "allergyEncounterType"
-          ],
-          "concept": "drugEffectConcept"
-        },
-        {
-          "id": "actionTaken",
-          "title": "Action Taken",
-          "encounterTypes": [
-            "allergyEncounterType"
-          ],
-          "concept": "actionTakenConcept"
+      ],
+      "launchOptions": {
+        "displayText": "Add",
+        "moduleName": "@ohri/openmrs-esm-rwanda-app"
+      },
+      "formList": [
+        {
+          "name": "oiFormName",
+          "uuid": "oiFormUuid"
         }
       ]
     },
     {
-      "cardId": "hospitalization",
-      "cardTitle": "Hospitalization",
+      "tabName": "Hospitalization",
+      "headerTitle": "Hospitalization",
+      "displayText": "Hospitalization",
       "columns": [
         {
           "id": "encounterDate",
@@ -186,6 +182,34 @@
             "hospitalizationEncounterType"
           ],
           "concept": "durationUnitConcept"
+        },
+        {
+          "id": "actions",
+          "title": "Actions",
+          "actionOptions": [
+            {
+              "formName": "hospitalizationFormName",
+              "package": "care-treatment",
+              "label": "View Details",
+              "mode": "view"
+            },
+            {
+              "formName": "hospitalizationFormName",
+              "package": "care-treatment",
+              "label": "Edit Form",
+              "mode": "edit"
+            }
+          ]
+        }
+      ],
+      "launchOptions": {
+        "displayText": "Add",
+        "moduleName": "@ohri/openmrs-esm-rwanda-app"
+      },
+      "formList": [
+        {
+          "name": "hospitalizationFormName",
+          "uuid": "hospitalizationFormUuid"
         }
       ]
     }

diff --git a/src/encounters/encounters.component.tsx b/src/encounters/encounters.component.tsx
@@ -25,15 +25,13 @@ import {
 } from "@carbon/react";
 import {
   useLayoutType,
-  usePagination,
   isDesktop,
   showSnackbar,
   showModal,
 } from "@openmrs/esm-framework";
 import {
   ErrorState,
   EmptyState,
-  PatientChartPagination,
   launchPatientWorkspace,
 } from "@openmrs/esm-patient-common-lib";
 
@@ -89,7 +87,6 @@ const EncountersTable: React.FC<EncountersTableProps> = ({ patientUuid }) => {
     useInfiniteEncounters(patientUuid);
   const mappedEncounters = encounters?.map(transformToMappedEncounter);
 
-  const encountersCount = 10;
   const encounterTypes = [
     ...new Set(mappedEncounters?.map((encounter) => encounter.encounterType)),
   ]?.sort();
@@ -118,12 +115,6 @@ const EncountersTable: React.FC<EncountersTableProps> = ({ patientUuid }) => {
     return filtered;
   }, [filter, searchTerm, mappedEncounters]);
 
-  const {
-    results: paginatedEncounters,
-    goTo,
-    currentPage,
-  } = usePagination(filteredRows ?? [], encountersCount);
-
   const isTablet = useLayoutType() === "tablet";
 
   const handleEncounterTypeChange = ({ selectedItem }) =>
@@ -204,7 +195,7 @@ const EncountersTable: React.FC<EncountersTableProps> = ({ patientUuid }) => {
   return (
     <DataTable
       headers={tableHeaders(t)}
-      rows={paginatedEncounters}
+      rows={filteredRows}
       overflowMenuOnHover={!isTablet}
       size={isTablet ? "lg" : "xs"}
       useZebraStyles={encounters?.length > 1 ? true : false}
@@ -268,7 +259,7 @@ const EncountersTable: React.FC<EncountersTableProps> = ({ patientUuid }) => {
               </TableHead>
               <TableBody>
                 {rows.map((row) => {
-                  const selectedEncounter = paginatedEncounters.find(
+                  const selectedEncounter = filteredRows.find(
                     (encounter) => encounter.uuid === row.id
                   );
                   return (
@@ -399,14 +390,6 @@ const EncountersTable: React.FC<EncountersTableProps> = ({ patientUuid }) => {
               </Tile>
             </div>
           ) : null}
-
-          <PatientChartPagination
-            currentItems={paginatedEncounters.length}
-            onPageNumberChange={({ page }) => goTo(page)}
-            pageNumber={currentPage}
-            pageSize={encountersCount}
-            totalItems={encounters.length}
-          />
         </>
       )}
     </DataTable>

diff --git a/src/encounters/encounters.resource.ts b/src/encounters/encounters.resource.ts
@@ -116,7 +116,7 @@ export const encounterRepresentation =
 export function useInfiniteEncounters(patientUuid: string) {
   const [stopFetching, setStopFetching] = useState(false);
   const getKey = (pageIndex, previousPageData) => {
-    const pageSize = 100;
+    const pageSize = 10;
 
     if (stopFetching) {
       return null; // Stop fetching if the error has occurred
@@ -129,7 +129,7 @@ export function useInfiniteEncounters(patientUuid: string) {
       return null;
     }
 
-    let url = `${restBaseUrl}/encounter?patient=${patientUuid}&v=${encounterRepresentation}&limit=${pageSize}`;
+    let url = `${restBaseUrl}/encounter?patient=${patientUuid}&v=${encounterRepresentation}&limit=${pageSize}&totalCount=true`;
 
     if (pageIndex) {
       url += `&startIndex=${pageIndex * pageSize}`;

diff --git a/translations/am.json b/translations/am.json
@@ -30,9 +30,6 @@
   "resources": "መርጃዎች",
   "searchThisList": "ይህንን ዝርዝር ይፈልጉ",
   "successfullyDeleted": "በተሳካ ሁኔታ ተሰርዟል።",
-  "tabOne": "ትር አንድ",
-  "tabThree": "ትር ሶስት",
-  "tabTwo": "ትር ሁለት",
   "usefulLinks": "ከዚህ በታች ወደ ጠቃሚ ሀብቶች አንዳንድ አገናኞች አሉ",
   "viewThisEncounter": "ይህንን ገጠመኝ ይመልከቱ"
 }
diff --git a/translations/en.json b/translations/en.json
@@ -30,9 +30,6 @@
   "resources": "Resources",
   "searchThisList": "Search this list",
   "successfullyDeleted": "successfully deleted",
-  "tabOne": "Tab One",
-  "tabThree": "Tab Three",
-  "tabTwo": "Tab Two",
   "usefulLinks": "Below are some links to useful resources",
   "viewThisEncounter": "View this encounter"
 }
diff --git a/translations/es.json b/translations/es.json
@@ -30,9 +30,6 @@
   "resources": "Recursos",
   "searchThisList": "Buscar en esta lista",
   "successfullyDeleted": "eliminado exitosamente",
-  "tabOne": "Pestaña uno",
-  "tabThree": "Pestaña tres",
-  "tabTwo": "Pestaña dos",
   "usefulLinks": "A continuación hay algunos enlaces a recursos útiles",
   "viewThisEncounter": "Ver este encuentro"
 }
diff --git a/translations/fr.json b/translations/fr.json
@@ -30,9 +30,6 @@
   "resources": "Ressources",
   "searchThisList": "Rechercher dans cette liste",
   "successfullyDeleted": "supprimé avec succès",
-  "tabOne": "Onglet Un",
-  "tabThree": "Onglet trois",
-  "tabTwo": "Onglet Deux",
   "usefulLinks": "Ci-dessous quelques liens vers des ressources utiles",
   "viewThisEncounter": "Voir cette rencontre"
 }
diff --git a/translations/he.json b/translations/he.json
@@ -30,9 +30,6 @@
   "resources": "משאבים נוספים",
   "searchThisList": "חפש ברשימה הזו",
   "successfullyDeleted": "נמחק בהצלחה",
-  "tabOne": "לשונית אחת",
-  "tabThree": "לשונית שלוש",
-  "tabTwo": "לשונית שתיים",
   "usefulLinks": "להלן כמה קישורים למשאבים שימושיים",
   "viewThisEncounter": "הצג את המפגש הזה"
 }
diff --git a/translations/km.json b/translations/km.json
@@ -4,7 +4,7 @@
   "connect": "ភ្ជាប់",
   "connectExplainer": "ទាក់ទងជាមួយសហគមន៍",
   "dataFetching": "ការទាញយកទិន្នន័យ",
-  "dateAndTime": "ពេលណាត់ជួប",
+  "dateAndTime": "ពេល\u200bណាត់ជួប",
   "deleteThisEncounter": "លុបការជួបនេះ។",
   "designDocs": "ឯកសាររចនា",
   "designDocsExplainer": "អានឯកសាររចនា O3",
@@ -30,9 +30,6 @@
   "resources": "ធនធាន",
   "searchThisList": "ស្វែងរកបញ្ជីនេះ។",
   "successfullyDeleted": "បានលុបដោយជោគជ័យ",
-  "tabOne": "ផ្ទាំងមួយ។",
-  "tabThree": "ផ្ទាំងទីបី",
-  "tabTwo": "ផ្ទាំងពីរ",
   "usefulLinks": "ខាងក្រោមនេះគឺជាតំណភ្ជាប់មួយចំនួនទៅកាន់ធនធានដែលមានប្រយោជន៍",
   "viewThisEncounter": "មើលការជួបនេះ។"
 }