(DO NOT MERGE) OpenMRS Academy: Displaying active visits on homepage

src/index.ts

@@ -64,3 +64,9 @@ export const brandBox = getAsyncLifecycle(
   () => import("./boxes/extensions/brand-box.component"),
   options
 );
+
+export const activeVisitsTable = getAsyncLifecycle(
+  () => import("./visits/visits.component"),
+  options
+);
+``;

src/routes.json

@@ -19,6 +19,11 @@
       "name": "Brand box",
       "component": "blueBox",
       "slot": "Boxes"
+    },
+    {
+      "name": "active-visits-table",
+      "component": "activeVisitsTable",
+      "slot": "homepage-widgets-slot"
     }
   ],
   "pages": [

src/visits/visits.component.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { useActiveVisits } from "./visits.resource";
+import { ErrorState, formatDatetime, parseDate } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
+import styles from "./visits.scss";
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Table,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from "@carbon/react";
+
+const ActiveVisitsTable: React.FC = () => {
+  const { t } = useTranslation();
+  const { visits, isLoadingVisits, errorFetchingVisits, isValidating } =
+    useActiveVisits();
+
+  const headerData = [
+    {
+      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",
+    },
+  ];
+
+  const rows = visits?.map((visit) => ({
+    age: visit?.patient?.person?.age,
+    id: visit.uuid,
+    idNumber: visit?.patient?.identifiers?.[0]?.identifier,
+    gender: visit?.patient?.person?.gender,
+    location: visit?.location?.uuid,
+    name: visit?.patient?.person?.display,
+    patientUuid: visit?.patient?.uuid,
+    visitStartTime: formatDatetime(parseDate(visit?.startDatetime)),
+    visitType: visit?.visitType?.display,
+    visitUuid: visit.uuid,
+  }));
+
+  if (isLoadingVisits) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <div className={styles.activeVisitsDetailHeaderContainer}>
+          <div className={styles.desktopHeading}>
+            <h4>{t("activeVisits", "Active Visits")}</h4>
+          </div>
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>{isValidating ? <InlineLoading /> : null}</span>
+          </div>
+        </div>
+        <DataTableSkeleton
+          rowCount={5}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headerData?.length}
+          size="sm"
+        />
+      </div>
+    );
+  }
+
+  if (errorFetchingVisits) {
+    return (
+      <ErrorState
+        error={errorFetchingVisits}
+        headerTitle={t(
+          "errorFetchingActiveVisits",
+          "Error fetching active visits"
+        )}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.activeVisitsContainer}>
+      <div className={styles.activeVisitsDetailHeaderContainer}>
+        <div className={styles.desktopHeading}>
+          <h4>{t("activeVisits", "Active Visits")}</h4>
+        </div>
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <DataTable rows={rows} headers={headerData} size="sm" useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table className={styles.activeVisitsTable} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <React.Fragment key={index}>
+                      <TableRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+    </div>
+  );
+};
+
+export default ActiveVisitsTable;

src/visits/visits.resource.ts

@@ -0,0 +1,21 @@
+import { Visit, useOpenmrsSWR, useSession } from "@openmrs/esm-framework";
+
+const customRepresentation =
+  "custom:(uuid,patient:(uuid,identifiers:(identifier,uuid,identifierType:(name,uuid)),person:(age,display,gender,uuid,attributes:(value,attributeType:(uuid,display))))," +
+  "visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime)";
+
+export function useActiveVisits() {
+  const {
+    sessionLocation: { uuid: locationUuid },
+  } = useSession();
+  const { data, isLoading, isValidating, error } = useOpenmrsSWR(
+    `/ws/rest/v1/visit?includeInactive=false&totalCount=true&location=${locationUuid}&v=${customRepresentation}`
+  );
+
+  return {
+    visits: data?.data?.results as Array<Visit> | null,
+    isLoadingVisits: isLoading,
+    errorFetchingVisits: error,
+    isValidating,
+  };
+}

src/visits/visits.scss

@@ -0,0 +1,177 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+.container {
+  margin: 0rem 1rem;
+}
+
+.activeVisitsContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+}
+
+.activeVisitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.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;
+}
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading{
+  text-align: left;
+  text-transform: capitalize;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border-bottom: 1px solid $ui-03;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-11;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .activeVisitsContainer {
+    .activeVisitsDetailHeaderContainer {
+      padding: spacing.$spacing-04 spacing.$spacing-05 spacing.$spacing-04 0;
+    }
+    .desktopHeading,
+    .tabletHeading {
+      h4 {
+        text-align: right;
+      }
+    }
+    div[role='search'] {
+      & :first-child {
+        svg {
+          left: unset;
+          right: spacing.$spacing-03;
+        }
+      }
+      & :last-child {
+        right: unset;
+        left: 0;
+      }
+    }
+    .tableContainer {
+      th > div {
+        text-align: right;
+      }
+      td {
+        text-align: right;
+        .serviceColor {
+          margin-right: 0;
+          margin-left: spacing.$spacing-03;
+        }
+        button {
+          text-align: right;
+        }
+      }
+    }
+  }
+}