Visit Summary added to Active visits widget

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

@@ -9,49 +9,18 @@ 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';
 
-const headerData = [
-  {
-    id: 0,
-    header: 'Visit Time',
-    key: 'visitStartTime',
-  },
-  {
-    id: 1,
-    header: 'ID Number',
-    key: 'IDNumber',
-  },
-  {
-    id: 2,
-    header: 'Name',
-    key: 'name',
-  },
-  {
-    id: 3,
-    header: 'Gender',
-    key: 'gender',
-  },
-  {
-    id: 4,
-    header: 'Age',
-    key: 'age',
-  },
-  {
-    id: 5,
-    header: 'Visit Type',
-    key: 'visitType',
-  },
-];
-
 function formatDatetime(startDatetime) {
   const todayDate = dayjs();
   const today =
@@ -65,7 +34,7 @@ function formatDatetime(startDatetime) {
   }
 }
 
-const ActiveVisitsTable = (props) => {
+const ActiveVisitsTable = () => {
   const { t } = useTranslation();
   const layout = useLayoutType();
   const desktopView = layout === 'desktop';
@@ -76,50 +45,95 @@ const ActiveVisitsTable = (props) => {
   const [activeVisits, setActiveVisits] = useState<ActiveVisitRow[]>([]);
   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);
+  const headerData = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+      {
+        id: 1,
+        header: t('IDNumber', 'ID Number'),
+        key: 'IDNumber',
+      },
+      {
+        id: 2,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 3,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 4,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 5,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    ],
+    [t],
+  );
 
   useEffect(() => {
-    const activeVisits = fetchActiveVisits().subscribe((data) => {
+    const abortController = new AbortController();
+    fetchActiveVisits(abortController).then(({ data }) => {
       const rowData = data.results.map((visit, ind) => ({
         id: `${ind}`,
         visitStartTime: formatDatetime(visit.startDatetime),
         IDNumber: visit?.patient?.identifiers[0]?.identifier,
         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);
     });
-    return () => activeVisits.unsubscribe();
+
+    return () => abortController.abort();
   }, []);
 
+  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, results, currentPage } = usePagination(searchResults, currentPageSize);
   const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
 
+  useEffect(() => {
+    if (currentPage !== 1) {
+      goTo(1);
+    }
+  }, [searchString]);
+
   return !loading ? (
     <div className={styles.activeVisitsContainer}>
       <div className={styles.activeVisitsDetailHeaderContainer}>
         <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,35 +145,52 @@ 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>
             {rows.length === 0 && (
               <p
-                style={{ height: desktopView ? '2rem' : '3rem' }}
+                style={{ height: desktopView ? '2rem' : '3rem', marginLeft: desktopView ? '2rem' : '3rem' }}
                 className={`${styles.emptyRow} ${styles.bodyLong01}`}>
                 {t('noVisitsFound', 'No visits found')}
               </p>

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

@@ -1,5 +1,4 @@
-import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource } from '@openmrs/esm-framework';
-import { take, map } from 'rxjs/operators';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
 
 export interface ActiveVisitRow {
   id: string;
@@ -10,18 +9,15 @@ export interface ActiveVisitRow {
   age: string;
   visitType: string;
   patientUuid: string;
+  visitUuid: string;
 }
 
-export function fetchActiveVisits() {
+export function fetchActiveVisits(abortController: AbortController) {
   const v =
     'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),' +
     'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,' +
     'stopDatetime)';
-  return openmrsObservableFetch(`/ws/rest/v1/visit?includeInactive=false&v=${v}`, {
-    headers: {
-      contentType: 'application/json',
-    },
-  })
-    .pipe(take(1))
-    .pipe(map((response: FetchResponse<{ results: Array<any> }>) => response.data));
+  return openmrsFetch<{ results: Visit[] }>(`/ws/rest/v1/visit?includeInactive=false&v=${v}`, {
+    signal: abortController.signal,
+  });
 }

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),
+      },
     ],
   };
 }

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

@@ -12,3 +12,19 @@
 .bodyLong01 {
   @include carbon--type-style("body-long-01");
 }
+
+.caption01 {
+  @include carbon--type-style("caption-01");
+}
+
+.bodyShort02 {
+  @include carbon--type-style("body-short-02");
+}
+
+.text02 {
+  color: #525252;
+}
+
+.text01 {
+  color: #161616;
+}