@openmrs/esm-active-visits-app 3.0.0-pre.93 → 3.0.1

package/src/active-visits-widget/active-visits.component.tsx

@@ -1,7 +1,12 @@
 import React, { useMemo, useEffect, useState, useCallback } from 'react';
-import DataTable, {
-  TableContainer,
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Search,
   Table,
+  TableContainer,
   TableHead,
   TableRow,
   TableHeader,
@@ -9,77 +14,78 @@ import DataTable, {
   TableCell,
   TableToolbar,
   TableToolbarContent,
-} 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 } from '@openmrs/esm-framework';
-import { ActiveVisitRow, fetchActiveVisits } from './active-visits.resource';
-import styles from './active-visits.scss';
+  TableExpandRow,
+  TableExpandHeader,
+} from 'carbon-components-react';
+import { useLayoutType, useConfig, usePagination, ConfigurableLink, ExtensionSlot } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
+import { ActiveVisit, useActiveVisits } 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 =
-    dayjs(startDatetime).get('date') === todayDate.get('date') &&
-    dayjs(startDatetime).get('month') === todayDate.get('month') &&
-    dayjs(startDatetime).get('year') === todayDate.get('year');
-  if (today) {
-    return `Today - ${dayjs(startDatetime).format('HH:mm')}`;
-  } else {
-    return dayjs(startDatetime).format("DD MMM 'YY - HH:mm");
-  }
+interface PaginationData {
+  goTo: (page: number) => void;
+  results: Array<ActiveVisit>;
+  currentPage: number;
 }
 
-const ActiveVisitsTable = (props) => {
+const ActiveVisitsTable = () => {
   const { t } = useTranslation();
+  const config = useConfig();
   const layout = useLayoutType();
+
+  const { data: activeVisits, isError, isLoading, isValidating } = useActiveVisits();
+
   const desktopView = layout === 'desktop';
-  const config = useConfig();
-  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 [currentPageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
   const [searchString, setSearchString] = useState('');
 
+  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],
+  );
+
+  const rowData = activeVisits.map((visit) => ({
+    ...visit,
+    visitStartTime: formatDatetime(visit.visitStartTime),
+  }));
+
   const searchResults = useMemo(() => {
     if (searchString && searchString.trim() !== '') {
       const search = searchString.toLowerCase();
-      return activeVisits.filter((activeVisitRow) =>
+      return rowData.filter((activeVisitRow) =>
         Object.keys(activeVisitRow).some((header) => {
           if (header === 'patientUuid') {
             return false;
@@ -88,105 +94,136 @@ const ActiveVisitsTable = (props) => {
         }),
       );
     } else {
-      return activeVisits;
+      return rowData;
     }
-  }, [searchString, activeVisits]);
-  const { goTo, currentPage, results } = usePagination(searchResults, currentPageSize);
+  }, [searchString, rowData]);
 
-  useEffect(() => {
-    const activeVisits = fetchActiveVisits().subscribe((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,
-        patientUuid: visit?.patient?.uuid,
-      }));
-      setActiveVisits(rowData);
-      setLoading(false);
-    });
-    return () => activeVisits.unsubscribe();
-  }, []);
+  const {
+    goTo,
+    results: paginatedActiveVisits,
+    currentPage,
+  }: PaginationData = usePagination(searchResults, currentPageSize);
 
   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={results} headers={headerData} isSortable>
-        {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps }) => (
-          <TableContainer title="" className={styles.tableContainer}>
-            <TableToolbar>
-              <TableToolbarContent>
-                <Search
-                  tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
-                  placeholder="Filter table"
-                  onChange={handleSearch}
-                />
-              </TableToolbarContent>
-            </TableToolbar>
-            <Table {...getTableProps()} useZebraStyles>
-              <TableHead>
-                <TableRow style={{ height: desktopView ? '2rem' : '3rem' }}>
-                  {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>
+  useEffect(() => {
+    if (currentPage !== 1) {
+      goTo(1);
+    }
+  }, [searchString]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (activeVisits?.length) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <div className={styles.activeVisitsDetailHeaderContainer}>
+          <h4 className={styles.productiveHeading02}>{t('activeVisits', 'Active Visits')}</h4>
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>{isValidating ? <InlineLoading /> : null}</span>
+          </div>
+        </div>
+        <DataTable rows={paginatedActiveVisits} headers={headerData} isSortable>
+          {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
+            <TableContainer title="" className={styles.tableContainer}>
+              <TableToolbar>
+                <TableToolbarContent>
+                  <Search
+                    tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+                    labelText=""
+                    placeholder={t('filterTable', 'Filter table')}
+                    onChange={handleSearch}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table className={styles.activeVisitsTable} {...getTableProps()} size={desktopView ? 'short' : 'normal'}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
                     ))}
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-            {rows.length === 0 && (
-              <p
-                style={{ height: desktopView ? '2rem' : '3rem' }}
-                className={`${styles.emptyRow} ${styles.bodyLong01}`}>
-                {t('noVisitsFound', 'No visits found')}
-              </p>
-            )}
-            <Pagination
-              forwardText=""
-              backwardText=""
-              page={currentPage}
-              pageSize={currentPageSize}
-              pageSizes={pageSizes}
-              totalItems={searchResults.length}
-              className={styles.pagination}
-              onChange={({ pageSize, page }) => {
-                if (pageSize !== currentPageSize) {
-                  setPageSize(pageSize);
-                }
-                if (page !== currentPage) {
-                  goTo(page);
-                }
-              }}
-            />
-          </TableContainer>
-        )}
-      </DataTable>
-    </div>
-  ) : (
-    <DataTableSkeleton />
-  );
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => (
+                    <React.Fragment key={index}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.info.header === 'name' ? (
+                              <ConfigurableLink
+                                to={`\${openmrsSpaBase}/patient/${paginatedActiveVisits?.[index]?.patientUuid}/chart/`}>
+                                {cell.value}
+                              </ConfigurableLink>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableExpandRow>
+                      {row.isExpanded && (
+                        <TableRow className={styles.expandedActiveVisitRow}>
+                          <th colSpan={headers.length + 2}>
+                            <ExtensionSlot
+                              className={styles.visitSummaryContainer}
+                              extensionSlotName="visit-summary-slot"
+                              state={{
+                                visitUuid: paginatedActiveVisits[index]?.visitUuid,
+                                patientUuid: paginatedActiveVisits[index]?.patientUuid,
+                              }}
+                            />
+                          </th>
+                        </TableRow>
+                      )}
+                    </React.Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 && (
+                <p
+                  style={{ height: desktopView ? '2rem' : '3rem', marginLeft: desktopView ? '2rem' : '3rem' }}
+                  className={`${styles.emptyRow} ${styles.bodyLong01}`}>
+                  {t('noVisitsFound', 'No visits found')}
+                </p>
+              )}
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={searchResults.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
 };
 
+function formatDatetime(startDatetime) {
+  const dateToday = dayjs();
+  const today =
+    dayjs(startDatetime).get('date') === dateToday.get('date') &&
+    dayjs(startDatetime).get('month') === dateToday.get('month') &&
+    dayjs(startDatetime).get('year') === dateToday.get('year');
+  if (today) {
+    return `Today - ${dayjs(startDatetime).format('HH:mm')}`;
+  } else {
+    return dayjs(startDatetime).format("DD MMM 'YY - HH:mm");
+  }
+}
+
 export default ActiveVisitsTable;

package/src/active-visits-widget/active-visits.resource.tsx

@@ -1,27 +1,47 @@
-import { FetchResponse, openmrsFetch, openmrsObservableFetch, OpenmrsResource } from '@openmrs/esm-framework';
-import { take, map } from 'rxjs/operators';
+import useSWR from 'swr';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
 
-export interface ActiveVisitRow {
+export interface ActiveVisit {
+  age: string;
   id: string;
-  visitStartTime: string;
-  IDNumber: string;
-  name: string;
+  idNumber: string;
   gender: string;
-  age: string;
-  visitType: string;
+  name: string;
   patientUuid: string;
+  visitStartTime: string;
+  visitType: string;
+  visitUuid: string;
 }
 
-export function fetchActiveVisits() {
-  const v =
+export function useActiveVisits() {
+  const customRepresentation =
     '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));
+
+  const { data, error, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    `/ws/rest/v1/visit?includeInactive=false&v=${customRepresentation}`,
+    openmrsFetch,
+  );
+
+  const mapVisitProperties = (visit: Visit): ActiveVisit => ({
+    age: visit?.patient?.person?.age,
+    id: visit.uuid,
+    idNumber: visit?.patient?.identifiers[0]?.identifier,
+    gender: visit?.patient?.person?.gender,
+    name: visit?.patient?.person?.display,
+    patientUuid: visit?.patient?.uuid,
+    visitStartTime: visit.startDate,
+    visitType: visit?.visitType?.display,
+    visitUuid: visit.uuid,
+  });
+
+  const formattedActiveVisits = data?.data?.results.length ? data.data.results.map(mapVisitProperties) : [];
+
+  return {
+    data: formattedActiveVisits,
+    isLoading: !data && !error,
+    isError: error,
+    isValidating,
+  };
 }

package/src/active-visits-widget/active-visits.scss

@@ -16,6 +16,13 @@
   background-color: $ui-background;
 }
 
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
 .productiveHeading02::after {
   content: "";
   display: block;
@@ -41,3 +48,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;
+}
+

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

package/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;
+}