Minor fixups in active visits widget (#21)

* Fixup in the patient chart link

* Changed link color to blue

* Added custom filtering in table

* Review changes

Author: vasharma05

packages/esm-active-visits-app/src/active-visits-widget/active-visits.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import DataTable, {
   TableContainer,
   Table,
@@ -74,11 +74,24 @@ const ActiveVisitsTable = (props) => {
   const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 50];
   const [loading, setLoading] = useState(true);
   const [activeVisits, setActiveVisits] = useState<ActiveVisitRow[]>([]);
-  const { goTo, currentPage } = usePagination(activeVisits, currentPageSize);
-  const [lowerBound, upperBound] = useMemo(
-    () => [(currentPage - 1) * currentPageSize, (currentPage + 0) * currentPageSize],
-    [currentPage, currentPageSize],
-  );
+  const [searchString, setSearchString] = useState('');
+
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return activeVisits.filter((activeVisitRow) =>
+        Object.keys(activeVisitRow).some((header) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${activeVisitRow[header]}`.toLowerCase().includes(search);
+        }),
+      );
+    } else {
+      return activeVisits;
+    }
+  }, [searchString, activeVisits]);
+  const { goTo, currentPage, results } = usePagination(searchResults, currentPageSize);
 
   useEffect(() => {
     const activeVisits = fetchActiveVisits().subscribe((data) => {
@@ -98,20 +111,22 @@ const ActiveVisitsTable = (props) => {
     return () => activeVisits.unsubscribe();
   }, []);
 
+  const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
+
   return !loading ? (
     <div className={styles.activeVisitsContainer}>
       <div className={styles.activeVisitsDetailHeaderContainer}>
         <h4 className={styles.productiveHeading02}>{t('activeVisits', 'Active Visits')}</h4>
       </div>
-      <DataTable rows={activeVisits} headers={headerData} isSortable>
-        {({ rows, headers, getHeaderProps, onInputChange, getTableProps, getBatchActionProps }) => (
+      <DataTable rows={results} headers={headerData} isSortable>
+        {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps }) => (
           <TableContainer title="" className={styles.tableContainer}>
             <TableToolbar>
               <TableToolbarContent>
                 <Search
                   tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
-                  placeHolderText="Filter table"
-                  onChange={onInputChange}
+                  placeholder="Filter table"
+                  onChange={handleSearch}
                 />
               </TableToolbarContent>
             </TableToolbar>
@@ -124,12 +139,12 @@ const ActiveVisitsTable = (props) => {
                 </TableRow>
               </TableHead>
               <TableBody>
-                {rows.slice(lowerBound, upperBound).map((row) => (
+                {rows.map((row, ind) => (
                   <TableRow key={row.id} style={{ height: desktopView ? '2rem' : '3rem' }}>
-                    {row.cells.map((cell, ind) => (
+                    {row.cells.map((cell) => (
                       <TableCell key={cell.id}>
                         {cell.info.header === 'name' ? (
-                          <ConfigurableLink to={`\${openmrsSpaBase}/patient/${activeVisits[ind].patientUuid}/chart/`}>
+                          <ConfigurableLink to={`\${openmrsSpaBase}/patient/${results[ind]?.patientUuid}/chart/`}>
                             {cell.value}
                           </ConfigurableLink>
                         ) : (
@@ -149,10 +164,13 @@ const ActiveVisitsTable = (props) => {
               </p>
             )}
             <Pagination
+              forwardText=""
+              backwardText=""
               page={currentPage}
               pageSize={currentPageSize}
               pageSizes={pageSizes}
-              totalItems={rows.length}
+              totalItems={searchResults.length}
+              className={styles.pagination}
               onChange={({ pageSize, page }) => {
                 if (pageSize !== currentPageSize) {
                   setPageSize(pageSize);
@@ -167,7 +185,7 @@ const ActiveVisitsTable = (props) => {
       </DataTable>
     </div>
   ) : (
-    <DataTableSkeleton className={styles.tableSkeleton} />
+    <DataTableSkeleton />
   );
 };
 

packages/esm-active-visits-app/src/active-visits-widget/active-visits.scss

@@ -2,8 +2,9 @@
 
 .activeVisitsContainer {
   background-color: $ui-background;
-  max-width: 48rem;
   border: 1px solid #e0e0e0;
+  width: 100%;
+  margin: 0 auto;
 }
 
 .activeVisitsDetailHeaderContainer {
@@ -27,16 +28,15 @@
 }
 
 .tableContainer a {
-  color: inherit;
   text-decoration: none;
 }
 
+.pagination {
+  overflow: hidden;
+}
+
 .emptyRow {
   padding: 0 1rem;
   display: flex;
   align-items: center;
-}
-
-.tableSkeleton {
-  max-width: 48rem;
 }