@openmrs/esm-active-visits-app 3.0.0-pre.178 → 3.0.0-pre.196

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

@@ -13,36 +13,31 @@ import DataTable, {
   TableExpandHeader,
 } from 'carbon-components-react/es/components/DataTable';
 import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
+import InlineLoading from 'carbon-components-react/lib/components/InlineLoading';
 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 { ActiveVisitRow, fetchActiveVisits } from './active-visits.resource';
+import { ActiveVisit, useActiveVisits } from './active-visits.resource';
 import styles from './active-visits.scss';
 import dayjs from 'dayjs';
 
-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 = () => {
   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(
@@ -54,8 +49,8 @@ const ActiveVisitsTable = () => {
       },
       {
         id: 1,
-        header: t('IDNumber', 'ID Number'),
-        key: 'IDNumber',
+        header: t('idNumber', 'ID Number'),
+        key: 'idNumber',
       },
       {
         id: 2,
@@ -81,31 +76,15 @@ const ActiveVisitsTable = () => {
     [t],
   );
 
-  useEffect(() => {
-    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,
-        patientUuid: visit?.patient?.uuid,
-        visitUuid: visit?.uuid,
-      }));
-      setActiveVisits(rowData);
-      setLoading(false);
-    });
-
-    return () => abortController.abort();
-  }, []);
+  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;
@@ -114,11 +93,16 @@ const ActiveVisitsTable = () => {
         }),
       );
     } else {
-      return activeVisits;
+      return rowData;
     }
-  }, [searchString, activeVisits]);
+  }, [searchString, rowData]);
+
+  const {
+    goTo,
+    results: paginatedActiveVisits,
+    currentPage,
+  }: PaginationData = usePagination(searchResults, currentPageSize);
 
-  const { goTo, results, currentPage } = usePagination(searchResults, currentPageSize);
   const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
 
   useEffect(() => {
@@ -127,98 +111,118 @@ const ActiveVisitsTable = () => {
     }
   }, [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, getRowProps }) => (
-          <TableContainer title="" className={styles.tableContainer}>
-            <TableToolbar>
-              <TableToolbarContent>
-                <Search
-                  tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
-                  labelText=""
-                  placeholder="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>
+  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>
+                </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>
                   ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {rows.map((row, ind) => (
-                  <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', marginLeft: 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 />
-  );
+                </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,23 +1,47 @@
+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(abortController: AbortController) {
-  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 openmrsFetch<{ results: Visit[] }>(`/ws/rest/v1/visit?includeInactive=false&v=${v}`, {
-    signal: abortController.signal,
+
+  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;

package/src/visits-summary/visit-detail.component.tsx

@@ -1,18 +1,13 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useState, useMemo } from 'react';
 import Button from 'carbon-components-react/es/components/Button';
 import { useTranslation } from 'react-i18next';
-import { Encounter, fetchVisit } from './visit.resource';
+import { Encounter, useVisit } from './visit.resource';
 import dayjs from 'dayjs';
-import { Visit, createErrorHandler } from '@openmrs/esm-framework';
 import styles from './visit-detail-overview.scss';
 import EncounterList from './visits-components/encounter-list.component';
 import VisitSummary from './visits-components/visit-summary.component';
 import DataTableSkeleton from 'carbon-components-react/es/components/DataTableSkeleton';
 
-function formatDateTime(date) {
-  return dayjs(date).format('MMM DD, YYYY - hh:mm');
-}
-
 interface VisitDetailComponentProps {
   visitUuid: string;
   patientUuid: string;
@@ -21,11 +16,13 @@ interface VisitDetailComponentProps {
 const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid, patientUuid }) => {
   const { t } = useTranslation();
   const [listView, setView] = useState(true);
-  const [visit, setVisit] = useState<Visit>(null);
+
+  const { data: visit, isError, isLoading, isValidating } = useVisit(visitUuid);
+
   const encounters = useMemo(
     () =>
       visit
-        ? visit.encounters.map((encounter: Encounter) => ({
+        ? visit?.encounters?.map((encounter: Encounter) => ({
             id: encounter.uuid,
             time: dayjs(encounter.encounterDateTime).format('hh:mm'),
             encounterType: encounter.encounterType.display,
@@ -36,45 +33,44 @@ const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid,
     [visit],
   );
 
-  useEffect(() => {
-    const abortController = new AbortController();
-    fetchVisit(visitUuid, abortController).then(({ data }) => {
-      setVisit(data);
-    }, createErrorHandler());
-    return () => abortController.abort();
-  }, []);
-
-  return visit ? (
-    <div className={styles.visitsDetailWidgetContainer}>
-      <div className={styles.visitsDetailHeaderContainer}>
-        <h4 className={styles.productiveHeading02}>
-          {visit?.visitType?.display}
-          <br />
-          <p className={`${styles.bodyLong01} ${styles.text02}`}>{formatDateTime(visit?.startDatetime)}</p>
-        </h4>
-        <div className={styles.toggleButtons}>
-          <Button
-            className={`${styles.toggle} ${listView ? styles.toggleActive : ''}`}
-            size="small"
-            kind="ghost"
-            onClick={() => setView(true)}>
-            {t('allEncounters', 'All Encounters')}
-          </Button>
-          <Button
-            className={`${styles.toggle} ${!listView ? styles.toggleActive : ''}`}
-            size="small"
-            kind="ghost"
-            onClick={() => setView(false)}>
-            {t('visitSummary', 'Visit Summary')}
-          </Button>
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (visit) {
+    return (
+      <div className={styles.visitsDetailWidgetContainer}>
+        <div className={styles.visitsDetailHeaderContainer}>
+          <h4 className={styles.productiveHeading02}>
+            {visit?.visitType?.display}
+            <br />
+            <p className={`${styles.bodyLong01} ${styles.text02}`}>{formatDateTime(visit?.startDatetime)}</p>
+          </h4>
+          <div className={styles.toggleButtons}>
+            <Button
+              className={`${styles.toggle} ${listView ? styles.toggleActive : ''}`}
+              size="small"
+              kind="ghost"
+              onClick={() => setView(true)}>
+              {t('allEncounters', 'All Encounters')}
+            </Button>
+            <Button
+              className={`${styles.toggle} ${!listView ? styles.toggleActive : ''}`}
+              size="small"
+              kind="ghost"
+              onClick={() => setView(false)}>
+              {t('visitSummary', 'Visit Summary')}
+            </Button>
+          </div>
         </div>
+        {listView && visit?.encounters && <EncounterList visitUuid={visit.uuid} encounters={encounters} />}
+        {!listView && <VisitSummary encounters={visit.encounters} patientUuid={patientUuid} />}
       </div>
-      {listView && visit?.encounters && <EncounterList visitUuid={visit.uuid} encounters={encounters} />}
-      {!listView && <VisitSummary encounters={visit.encounters} patientUuid={patientUuid} />}
-    </div>
-  ) : (
-    <DataTableSkeleton />
-  );
+    );
+  }
 };
 
+function formatDateTime(date) {
+  return date ? dayjs(date).format('MMM DD, YYYY - hh:mm') : null;
+}
+
 export default VisitDetailComponent;

package/src/visits-summary/visit.resource.ts

@@ -1,4 +1,5 @@
 import { openmrsFetch, Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
 
 export interface Encounter {
   uuid: string;
@@ -125,8 +126,8 @@ export interface OrderItem {
   };
 }
 
-export function fetchVisit(visitUuid: string, abortController: AbortController) {
-  const custom =
+export function useVisit(visitUuid: string) {
+  const customRepresentation =
     'custom:(uuid,encounters:(uuid,encounterDatetime,' +
     'orders:(uuid,dateActivated,' +
     'drug:(uuid,name,strength),doseUnits:(uuid,display),' +
@@ -139,9 +140,17 @@ export function fetchVisit(visitUuid: string, abortController: AbortController)
     'encounterProviders:(uuid,display,encounterRole:(uuid,display),' +
     'provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime';
 
-  return openmrsFetch<Visit>(`/ws/rest/v1/visit/${visitUuid}?v=${custom}`, {
-    signal: abortController.signal,
-  });
+  const { data, error, isValidating } = useSWR<{ data: Visit }, Error>(
+    `/ws/rest/v1/visit/${visitUuid}?v=${customRepresentation}`,
+    openmrsFetch,
+  );
+
+  return {
+    data: data ? data.data : null,
+    isError: error,
+    isLoading: !data && !error,
+    isValidating,
+  };
 }
 
 export function getDosage(strength: string, doseNumber: number) {

package/translations/en.json

@@ -5,8 +5,9 @@
   "diagnoses": "Diagnoses",
   "dose": "Dose",
   "encounterType": "Encounter Type",
+  "filterTable": "Filter table",
   "gender": "Gender",
-  "IDNumber": "ID Number",
+  "idNumber": "ID Number",
   "medications": "Medications",
   "name": "Name",
   "noDiagnosesFound": "No diagnoses found",

package/dist/288.openmrs-esm-active-visits-app.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_openmrs_esm_active_visits_app=self.webpackChunk_openmrs_esm_active_visits_app||[]).push([[288],{9288:(e,t,a)=>{a.d(t,{Z:()=>K});var n,r,i,l,o,c=a(3980),s=a.n(c),u=a(5954),p=a(2779),d=a.n(p),f=a(5214),g=a(2434),m=a(3346),b=a(3766),h=["children"],v=["children"],y=u.default.forwardRef((function(e,t){var a=e.children,l=(0,b._)(e,h);return u.default.createElement(b.I,(0,b.a)({width:16,height:16,viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",ref:t},l),n||(n=u.default.createElement("path",{fill:"none",d:"M16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Zm-1.125-5h2.25V12h-2.25Z","data-icon-path":"inner-path"})),r||(r=u.default.createElement("path",{d:"M16.002,6.1714h-.004L4.6487,27.9966,4.6506,28H27.3494l.0019-.0034ZM14.875,12h2.25v9h-2.25ZM16,26a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,26Z"})),i||(i=u.default.createElement("path",{d:"M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"})),a)})),x=u.default.forwardRef((function(e,t){var a=e.children,n=(0,b._)(e,v);return u.default.createElement(b.I,(0,b.a)({width:16,height:16,viewBox:"0 0 16 16",xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",ref:t},n),l||(l=u.default.createElement("path",{d:"M8,1C4.2,1,1,4.2,1,8s3.2,7,7,7s7-3.1,7-7S11.9,1,8,1z M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2\tc-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z"})),o||(o=u.default.createElement("path",{d:"M7.5,4h1v5h-1C7.5,9,7.5,4,7.5,4z M8,12.2c-0.4,0-0.8-0.4-0.8-0.8s0.3-0.8,0.8-0.8\tc0.4,0,0.8,0.4,0.8,0.8S8.4,12.2,8,12.2z","data-icon-path":"inner-path",opacity:"0"})),a)})),_=a(3597),w=a(6590),S=a(330),T=["className","id","inline","labelText","disabled","children","noLabel","iconDescription","hideLabel","invalid","invalidText","helperText","light","size","warn","warnText"];function O(){return O=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},O.apply(this,arguments)}function P(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var z=u.default.forwardRef((function(e,t){var a,n,r,i=e.className,l=e.id,o=e.inline,c=e.labelText,s=e.disabled,p=e.children,f=e.noLabel,g=(e.iconDescription,e.hideLabel),b=e.invalid,h=e.invalidText,v=e.helperText,_=e.light,z=e.size,N=e.warn,E=e.warnText,j=function(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}(e,T),I=(0,S.A)(),C=(0,w.ye)("enable-v11-release"),k=d()((P(a={},"".concat(I,"--select"),!0),P(a,"".concat(I,"--select--inline"),o),P(a,"".concat(I,"--select--light"),_),P(a,"".concat(I,"--select--invalid"),b),P(a,"".concat(I,"--select--disabled"),s),P(a,"".concat(I,"--select--warning"),N),a),[C?null:i]),R=d()("".concat(I,"--label"),(P(n={},"".concat(I,"--visually-hidden"),g),P(n,"".concat(I,"--label--disabled"),s),n)),M=d()((P(r={},"".concat(I,"--select-input"),!0),P(r,"".concat(I,"--select-input--").concat(z),z),r)),L="".concat(l,"-error-msg"),D=b?h:N?E:void 0,Z=b||N?u.default.createElement("div",{className:"".concat(I,"--form-requirement"),id:L},D):null,A=d()("".concat(I,"--form__helper-text"),P({},"".concat(I,"--form__helper-text--disabled"),s)),q=v?u.default.createElement("div",{className:A},v):null,U={};b&&(U["aria-describedby"]=L);var B=u.default.createElement(u.default.Fragment,null,u.default.createElement("select",O({},j,U,{id:l,className:M,disabled:s||void 0,"aria-invalid":b||void 0,ref:t}),p),u.default.createElement(m.cRw,{className:"".concat(I,"--select__arrow")}),b&&u.default.createElement(x,{className:"".concat(I,"--select__invalid-icon")}),!b&&N&&u.default.createElement(y,{className:"".concat(I,"--select__invalid-icon ").concat(I,"--select__invalid-icon--warning")}));return u.default.createElement("div",{className:C?d()("".concat(I,"--form-item"),i):"".concat(I,"--form-item")},u.default.createElement("div",{className:k},!f&&u.default.createElement("label",{htmlFor:l,className:R},c),o&&u.default.createElement("div",{className:"".concat(I,"--select-input--inline__wrapper")},u.default.createElement("div",{className:"".concat(I,"--select-input__wrapper"),"data-invalid":b||null},B),Z),!o&&u.default.createElement("div",{className:"".concat(I,"--select-input__wrapper"),"data-invalid":b||null},B),!o&&Z?Z:q))}));z.displayName="Select",z.propTypes={children:s().node,className:s().string,defaultValue:s().any,disabled:s().bool,helperText:s().node,hideLabel:s().bool,iconDescription:(0,_.Z)(s().string,"The `iconDescription` prop for `Select` is no longer needed and has been deprecated. It will be moved in the next major release."),id:s().string.isRequired,inline:s().bool,invalid:s().bool,invalidText:s().node,labelText:s().node,light:s().bool,noLabel:s().bool,onChange:s().func,size:s().oneOf(["sm","md","lg","xl"]),warn:s().bool,warnText:s().node},z.defaultProps={disabled:!1,labelText:"Select",inline:!1,invalid:!1,invalidText:"",helperText:"",light:!1};const N=z;var E=["className","value","disabled","hidden","text"];function j(){return j=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},j.apply(this,arguments)}function I(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var C=g.settings.prefix,k=function(e){var t,a=e.className,n=e.value,r=e.disabled,i=e.hidden,l=e.text,o=function(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}(e,E),c=d()((I(t={},"".concat(C,"--select-option"),!0),I(t,a,a),t));return u.default.createElement("option",j({},o,{className:c,value:n,disabled:r,hidden:i}),l)};k.propTypes={className:s().string,disabled:s().bool,hidden:s().bool,text:s().string.isRequired,value:s().any.isRequired},k.defaultProps={disabled:!1,hidden:!1,value:"",text:""};const R=k;var M=a(7030),L=["backwardText","className","forwardText","id","itemsPerPageText","itemRangeText","pageRangeText","pageSize","pageSizes","itemText","pageText","pageNumberText","pagesUnknown","isLastPage","disabled","pageInputDisabled","pageSizeInputDisabled","totalItems","onChange","page","size"];function D(){return D=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},D.apply(this,arguments)}function Z(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function A(e,t){return A=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},A(e,t)}function q(e,t){return!t||"object"!==H(t)&&"function"!=typeof t?U(e):t}function U(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function B(e){return B=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},B(e)}function F(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function H(e){return H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},H(e)}var V=g.settings.prefix,G=0,J=function(e){return"object"===H(e[0])&&null!==e[0]?e:e.map((function(e){return{text:e,value:e}}))},K=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&A(e,t)}(o,e);var t,a,n,r,i,l=(r=o,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=B(r);if(i){var a=B(this).constructor;e=Reflect.construct(t,arguments,a)}else e=t.apply(this,arguments);return q(this,e)});function o(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),F(U(t=l.call(this,e)),"handleSizeChange",(function(e){var a=Number(e.target.value);t.setState({pageSize:a,page:1}),t.props.onChange({page:1,pageSize:a})})),F(U(t),"handlePageChange",(function(e){t.setState({page:e.target.value})})),F(U(t),"handlePageInputChange",(function(e){var a=Number(e.target.value);a>0&&a<=Math.max(Math.ceil(t.props.totalItems/t.state.pageSize),1)&&(t.setState({page:a}),t.props.onChange({page:a,pageSize:t.state.pageSize}))})),F(U(t),"incrementPage",(function(){var e=t.state.page+1;t.setState({page:e}),t.props.onChange({page:e,pageSize:t.state.pageSize})})),F(U(t),"decrementPage",(function(){var e=t.state.page-1;t.setState({page:e}),t.props.onChange({page:e,pageSize:t.state.pageSize})})),F(U(t),"renderSelectItems",(function(e){for(var t=1,a=[];t<=e;)a.push(u.default.createElement(R,{key:t,value:t,text:String(t)})),t++;return a}));var a=t.props,n=a.pageSizes,r=a.page,i=a.pageSize,c=J(n);return t.state={page:r,pageSize:i&&c.some((function(e){return i===e.value}))?i:c[0].value,prevPageSizes:c,prevPage:r,prevPageSize:i},t.uniqueId=++G,t}return t=o,n=[{key:"getDerivedStateFromProps",value:function(e,t){var a=e.pageSizes,n=e.page,r=e.pageSize,i=t.prevPageSizes,l=t.prevPage,o=t.prevPageSize,c=t.page,s=t.pageSize,u=J(a),p=!function(e,t){if(!Array.isArray(e)||!Array.isArray(t)||e.length!==t.length)return!1;if(e===t)return!0;for(var a=0;a<e.length;a++)if(e[a]!==t[a])return!1;return!0}(u.map((function(e){return e.value})),i.map((function(e){return e.value})));p&&!u.some((function(e){return r===e.value}))&&(r=u[0].value);var d=n!==l,f=r!==o;return p||d||f?{page:(f?1:d&&n)||c,pageSize:f?r:s,prevPageSizes:u,prevPage:n,prevPageSize:r}:null}}],(a=[{key:"render",value:function(){var e=this.props,t=e.backwardText,a=e.className,n=e.forwardText,r=e.id,i=e.itemsPerPageText,l=e.itemRangeText,o=e.pageRangeText,c=(e.pageSize,e.pageSizes),s=e.itemText,p=e.pageText,g=(e.pageNumberText,e.pagesUnknown),m=e.isLastPage,b=e.disabled,h=e.pageInputDisabled,v=e.pageSizeInputDisabled,y=e.totalItems,x=(e.onChange,e.page,e.size),_=function(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)a=i[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}(e,L),w=d()("".concat(V,"--pagination"),a,F({},"".concat(V,"--pagination--").concat(x),x)),S=r||this.uniqueId,T=this.state,O=T.page,P=T.pageSize,z=Math.max(Math.ceil(y/P),1),E=b||1===O,j=d()("".concat(V,"--pagination__button"),"".concat(V,"--pagination__button--backward"),F({},"".concat(V,"--pagination__button--no-index"),E)),I=b||O===z,C=d()("".concat(V,"--pagination__button"),"".concat(V,"--pagination__button--forward"),F({},"".concat(V,"--pagination__button--no-index"),I)),k=this.renderSelectItems(z),Z=J(c);return u.default.createElement("div",D({className:w},_),u.default.createElement("div",{className:"".concat(V,"--pagination__left")},u.default.createElement("label",{id:"".concat(V,"-pagination-select-").concat(S,"-count-label"),className:"".concat(V,"--pagination__text"),htmlFor:"".concat(V,"-pagination-select-").concat(S)},i),u.default.createElement(N,{id:"".concat(V,"-pagination-select-").concat(S),className:"".concat(V,"--select__item-count"),labelText:"",hideLabel:!0,noLabel:!0,inline:!0,onChange:this.handleSizeChange,disabled:v||b,value:P},Z.map((function(e){return u.default.createElement(R,{key:e.value,value:e.value,text:String(e.text)})}))),u.default.createElement("span",{className:"".concat(V,"--pagination__text ").concat(V,"--pagination__items-count")},g?s(P*(O-1)+1,O*P):l(Math.min(P*(O-1)+1,y),Math.min(O*P,y),y))),u.default.createElement("div",{className:"".concat(V,"--pagination__right")},u.default.createElement(N,{id:"".concat(V,"-pagination-select-").concat(S,"-right"),className:"".concat(V,"--select__page-number"),labelText:"Page number, of ".concat(z," pages"),inline:!0,hideLabel:!0,onChange:this.handlePageInputChange,value:O,disabled:h||b},k),u.default.createElement("span",{className:"".concat(V,"--pagination__text")},g?p(O):o(O,z)),u.default.createElement("div",{className:"".concat(V,"--pagination__control-buttons")},u.default.createElement(M.Z,{kind:"ghost",className:j,hasIconOnly:!0,renderIcon:f.bdU,iconDescription:t,tooltipAlignment:"center",tooltipPosition:"top",onClick:this.decrementPage,disabled:E}),u.default.createElement(M.Z,{kind:"ghost",className:C,hasIconOnly:!0,renderIcon:f.VUy,iconDescription:n,tooltipAlignment:"end",tooltipPosition:"top",onClick:this.incrementPage,disabled:I||m}))))}}])&&Z(t.prototype,a),n&&Z(t,n),o}(u.Component);F(K,"propTypes",{backwardText:s().string,className:s().string,disabled:s().bool,forwardText:s().string,id:s().oneOfType([s().string,s().number]),isLastPage:s().bool,itemRangeText:s().func,itemText:s().func,itemsPerPageText:s().string,onChange:s().func,page:s().number,pageInputDisabled:s().bool,pageNumberText:s().string,pageRangeText:s().func,pageSize:s().number,pageSizeInputDisabled:s().bool,pageSizes:s().oneOfType([s().arrayOf(s().number),s().arrayOf(s().shape({text:s().text,value:s().number}))]).isRequired,pageText:s().func,pagesUnknown:s().bool,size:s().oneOf(["sm","md","lg"]),totalItems:s().number}),F(K,"defaultProps",{backwardText:"Previous page",itemRangeText:function(e,t,a){return"".concat(e,"–").concat(t," of ").concat(a," items")},forwardText:"Next page",itemsPerPageText:"Items per page:",pageNumberText:"Page Number",pageRangeText:function(e,t){return"of ".concat(t," ").concat(1===t?"page":"pages")},disabled:!1,page:1,pagesUnknown:!1,isLastPage:!1,itemText:function(e,t){return"".concat(e,"–").concat(t," items")},pageText:function(e){return"page ".concat(e)}})}}]);
-//# sourceMappingURL=288.openmrs-esm-active-visits-app.js.map