Visit Summary added to Active visits widget

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

@@ -9,12 +9,14 @@ import DataTable, {
   TableCell,
   TableToolbar,
   TableToolbarContent,
+  TableExpandRow,
+  TableExpandHeader,
 } from 'carbon-components-react/es/components/DataTable';
 import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
 import Pagination from 'carbon-components-react/es/components/Pagination';
 import Search from 'carbon-components-react/es/components/Search';
+import { useLayoutType, useConfig, usePagination, ConfigurableLink, ExtensionSlot } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
-import { useLayoutType, useConfig, usePagination, ConfigurableLink } from '@openmrs/esm-framework';
 import { ActiveVisitRow, fetchActiveVisits } from './active-visits.resource';
 import styles from './active-visits.scss';
 import dayjs from 'dayjs';
@@ -70,13 +72,17 @@ const ActiveVisitsTable = (props) => {
   const layout = useLayoutType();
   const desktopView = layout === 'desktop';
   const config = useConfig();
+  const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
   const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 50];
   const [loading, setLoading] = useState(true);
   const [activeVisits, setActiveVisits] = useState<ActiveVisitRow[]>([]);
   const [searchString, setSearchString] = useState('');
 
   const searchResults = useMemo(() => {
+    if (currentPage != 1) {
+      setCurrentPage(1);
+    }
     if (searchString && searchString.trim() !== '') {
       const search = searchString.toLowerCase();
       return activeVisits.filter((activeVisitRow) =>
@@ -91,7 +97,11 @@ const ActiveVisitsTable = (props) => {
       return activeVisits;
     }
   }, [searchString, activeVisits]);
-  const { goTo, currentPage, results } = usePagination(searchResults, currentPageSize);
+  const { goTo, results } = usePagination(searchResults, currentPageSize);
+
+  useEffect(() => {
+    goTo(currentPage);
+  }, [currentPage]);
 
   useEffect(() => {
     const activeVisits = fetchActiveVisits().subscribe((data) => {
@@ -102,8 +112,9 @@ const ActiveVisitsTable = (props) => {
         name: visit?.patient?.person?.display,
         gender: visit?.patient?.person?.gender,
         age: visit?.patient?.person?.age,
-        visitType: visit?.visitType.display,
+        visitType: visit?.visitType?.display,
         patientUuid: visit?.patient?.uuid,
+        visitUuid: visit?.uuid,
       }));
       setActiveVisits(rowData);
       setLoading(false);
@@ -119,7 +130,7 @@ const ActiveVisitsTable = (props) => {
         <h4 className={styles.productiveHeading02}>{t('activeVisits', 'Active Visits')}</h4>
       </div>
       <DataTable rows={results} headers={headerData} isSortable>
-        {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps }) => (
+        {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
           <TableContainer title="" className={styles.tableContainer}>
             <TableToolbar>
               <TableToolbarContent>
@@ -131,29 +142,46 @@ const ActiveVisitsTable = (props) => {
                 />
               </TableToolbarContent>
             </TableToolbar>
-            <Table {...getTableProps()} useZebraStyles>
+            <Table className={styles.activeVisitsTable} {...getTableProps()} size={desktopView ? 'short' : 'normal'}>
               <TableHead>
-                <TableRow style={{ height: desktopView ? '2rem' : '3rem' }}>
+                <TableRow>
+                  <TableExpandHeader />
                   {headers.map((header) => (
                     <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                   ))}
                 </TableRow>
               </TableHead>
               <TableBody>
                 {rows.map((row, ind) => (
-                  <TableRow key={row.id} style={{ height: desktopView ? '2rem' : '3rem' }}>
-                    {row.cells.map((cell) => (
-                      <TableCell key={cell.id}>
-                        {cell.info.header === 'name' ? (
-                          <ConfigurableLink to={`\${openmrsSpaBase}/patient/${results[ind]?.patientUuid}/chart/`}>
-                            {cell.value}
-                          </ConfigurableLink>
-                        ) : (
-                          cell.value
-                        )}
-                      </TableCell>
-                    ))}
-                  </TableRow>
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.info.header === 'name' ? (
+                            <ConfigurableLink to={`\${openmrsSpaBase}/patient/${results[ind]?.patientUuid}/chart/`}>
+                              {cell.value}
+                            </ConfigurableLink>
+                          ) : (
+                            cell.value
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded && (
+                      <TableRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 1}>
+                        <th colSpan={headers.length + 2}>
+                          <ExtensionSlot
+                            className={styles.visitSummaryContainer}
+                            extensionSlotName="visit-summary-slot"
+                            state={{
+                              visitUuid: results[ind]?.visitUuid,
+                              patientUuid: results[ind]?.patientUuid,
+                            }}
+                          />
+                        </th>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
                 ))}
               </TableBody>
             </Table>
@@ -177,7 +205,7 @@ const ActiveVisitsTable = (props) => {
                   setPageSize(pageSize);
                 }
                 if (page !== currentPage) {
-                  goTo(page);
+                  setCurrentPage(page);
                 }
               }}
             />

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

@@ -1,4 +1,4 @@
-import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource } from '@openmrs/esm-framework';
+import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource, Visit } from '@openmrs/esm-framework';
 import { take, map } from 'rxjs/operators';
 
 export interface ActiveVisitRow {
@@ -10,6 +10,7 @@ export interface ActiveVisitRow {
   age: string;
   visitType: string;
   patientUuid: string;
+  visitUuid: string;
 }
 
 export function fetchActiveVisits() {
@@ -23,5 +24,5 @@ export function fetchActiveVisits() {
     },
   })
     .pipe(take(1))
-    .pipe(map((response: FetchResponse<{ results: Array<any> }>) => response.data));
+    .pipe(map((response: FetchResponse<{ results: Array<Visit> }>) => response.data));
 }

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

@@ -41,3 +41,30 @@
   display: flex;
   align-items: center;
 }
+
+.activeVisitsTable tr[data-parent-row]:nth-child(odd) td {
+  background-color: #ffffff;
+}
+
+.activeVisitsTable  tbody  tr[data-parent-row]:nth-child(even)  td {
+  background-color: #f4f4f4;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+

packages/esm-active-visits-app/src/index.ts

@@ -28,6 +28,11 @@ function setupOpenMRS() {
         slot: 'homepage-widgets-slot',
         load: getAsyncLifecycle(() => import('./active-visits-widget/active-visits.component'), options),
       },
+      {
+        id: 'visit-summary-widget',
+        slot: 'visit-summary-slot',
+        load: getAsyncLifecycle(() => import('./visits-summary/visit-detail.component'), options),
+      },
     ],
   };
 }