@digihmis/esm-triage-app 1.0.0

package/src/past-vitals/paginated-antropometrics/paginated-antropometrics.component.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableCell,
+  TableContainer,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import type { BiometricsTableHeader, BiometricsTableRow } from '../triage-anthropometrics/type';
+import styles from './paginated-antropometrics.scss';
+import { VitalsAndBiometricsActionMenu } from '../action-menu/vitals-anthropometrics.component';
+import { DataTableSortState } from '../paginated-vitals/type';
+
+interface PaginatedBiometricsProps {
+  tableRows: Array<BiometricsTableRow>;
+  pageSize: number;
+  urlLabel: string;
+  tableHeaders: Array<BiometricsTableHeader>;
+  patient: fhir.Patient;
+}
+
+const PaginatedBiometrics: React.FC<PaginatedBiometricsProps> = ({
+  tableRows,
+  pageSize,
+  urlLabel,
+  tableHeaders,
+  patient,
+}) => {
+  const isTablet = useLayoutType() === 'tablet';
+
+  const { t } = useTranslation();
+
+  const [sortParams, setSortParams] = useState<{ key: string; sortDirection: 'ASC' | 'DESC' | 'NONE' }>({
+    key: '',
+    sortDirection: 'NONE',
+  });
+
+  const handleSorting = (
+    cellA: any,
+    cellB: any,
+    { key, sortDirection }: { key: string; sortDirection: DataTableSortState },
+  ) => {
+    if (sortDirection === 'NONE') {
+      setSortParams({ key: '', sortDirection });
+    } else {
+      setSortParams({ key, sortDirection });
+    }
+    return 0;
+  };
+
+  const sortedData: Array<BiometricsTableRow> = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    const header = tableHeaders.find((header) => header.key === sortParams.key);
+
+    if (!header) {
+      return tableRows;
+    }
+
+    const sortedRows = tableRows.slice().sort((rowA, rowB) => {
+      const sortingNum = header.sortFunc(rowA, rowB);
+      return sortParams.sortDirection === 'DESC' ? sortingNum : -sortingNum;
+    });
+
+    return sortedRows;
+  }, [tableRows, tableHeaders, sortParams]);
+
+  const { results: paginatedBiometrics, goTo, currentPage } = usePagination(sortedData, pageSize);
+
+  return (
+    <>
+      <DataTable
+        headers={tableHeaders}
+        isSortable
+        overflowMenuOnHover={!isTablet}
+        rows={paginatedBiometrics}
+        size={isTablet ? 'lg' : 'sm'}
+        sortRow={handleSorting}
+        useZebraStyles>
+        {({ getHeaderProps, getTableProps, headers, rows }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table aria-label="biometrics" className={styles.table} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                      })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader aria-label={t('actions', 'Actions')} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                    ))}
+                    <TableCell className="cds--table-column-menu" id="actions">
+                      <VitalsAndBiometricsActionMenu patient={patient} encounterUuid={row.id} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      <PatientChartPagination
+        currentItems={paginatedBiometrics.length}
+        dashboardLinkLabel={urlLabel}
+        onPageNumberChange={({ page }) => goTo(page)}
+        pageNumber={currentPage}
+        pageSize={pageSize}
+        totalItems={tableRows.length}
+      />
+    </>
+  );
+};
+
+export default PaginatedBiometrics;

package/src/past-vitals/paginated-antropometrics/paginated-antropometrics.scss

@@ -0,0 +1,9 @@
+.tableContainer {
+  flex: 1;
+}
+
+.table {
+  td {
+    border-bottom: none !important;
+  }
+}

package/src/past-vitals/paginated-vitals/paginated-vitals.component.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
+import styles from './paginated-vitals.scss';
+import { VitalsTableHeader, VitalsTableRow } from '../triage-vitals/type';
+import { VitalsAndBiometricsActionMenu } from '../action-menu/vitals-anthropometrics.component';
+import { DataTableSortState } from './type';
+
+interface PaginatedVitalsProps {
+  isPrinting?: boolean;
+  pageSize: number;
+  tableHeaders: Array<VitalsTableHeader>;
+  tableRows: Array<VitalsTableRow>;
+  urlLabel: string;
+  patient: fhir.Patient;
+}
+
+const PaginatedVitals: React.FC<PaginatedVitalsProps> = ({
+  isPrinting,
+  pageSize,
+  tableHeaders,
+  tableRows,
+  urlLabel,
+  patient,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  const StyledTableCell = ({ children, interpretation }: { children: React.ReactNode; interpretation: string }) => {
+    switch (interpretation) {
+      case 'critically_high':
+        return <TableCell className={styles.criticallyHigh}>{children}</TableCell>;
+      case 'critically_low':
+        return <TableCell className={styles.criticallyLow}>{children}</TableCell>;
+      case 'high':
+        return <TableCell className={styles.high}>{children}</TableCell>;
+      case 'low':
+        return <TableCell className={styles.low}>{children}</TableCell>;
+      default:
+        return <TableCell>{children}</TableCell>;
+    }
+  };
+
+  const [sortParams, setSortParams] = useState<{ key: string; sortDirection: 'ASC' | 'DESC' | 'NONE' }>({
+    key: '',
+    sortDirection: 'NONE',
+  });
+
+  const handleSorting = (
+    cellA: any,
+    cellB: any,
+    { key, sortDirection }: { key: string; sortDirection: DataTableSortState },
+  ) => {
+    if (sortDirection === 'NONE') {
+      setSortParams({ key: '', sortDirection });
+    } else {
+      setSortParams({ key, sortDirection });
+    }
+    return 0;
+  };
+
+  const sortedData: Array<VitalsTableRow> = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    const header = tableHeaders.find((header) => header.key === sortParams.key);
+
+    if (!header) {
+      return tableRows;
+    }
+
+    const sortedRows = tableRows.slice().sort((rowA, rowB) => {
+      const sortingNum = header.sortFunc(rowA, rowB);
+      return sortParams.sortDirection === 'DESC' ? sortingNum : -sortingNum;
+    });
+
+    return sortedRows;
+  }, [tableHeaders, tableRows, sortParams]);
+
+  const { results: paginatedVitals, goTo, currentPage } = usePagination(sortedData, pageSize);
+
+  const rows = isPrinting ? sortedData : paginatedVitals;
+
+  return (
+    <>
+      <DataTable
+        headers={tableHeaders}
+        isSortable
+        overflowMenuOnHover={!isTablet}
+        rows={rows}
+        size={isTablet ? 'lg' : 'sm'}
+        sortRow={handleSorting}
+        useZebraStyles>
+        {({ rows, headers, getTableProps, getHeaderProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table aria-label="vitals" className={styles.table} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })} key={header.key}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                  <TableHeader aria-label={t('actions', 'Actions')} />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => {
+                      const vitalsObj = paginatedVitals.find((obj) => obj.id === row.id);
+                      const interpretationKey = cell.info.header + 'Interpretation';
+                      const interpretation = vitalsObj?.[interpretationKey];
+
+                      return (
+                        <StyledTableCell key={`styled-cell-${cell.id}`} interpretation={interpretation}>
+                          {cell.value?.content ?? cell.value}
+                        </StyledTableCell>
+                      );
+                    })}
+                    <TableCell className="cds--table-column-menu" id="actions">
+                      <VitalsAndBiometricsActionMenu patient={patient} encounterUuid={row.id} />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {!isPrinting ? (
+        <PatientChartPagination
+          pageNumber={currentPage}
+          totalItems={tableRows.length}
+          currentItems={paginatedVitals.length}
+          pageSize={pageSize}
+          onPageNumberChange={({ page }) => goTo(page)}
+          dashboardLinkLabel={urlLabel}
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default PaginatedVitals;

package/src/past-vitals/paginated-vitals/paginated-vitals.scss

@@ -0,0 +1,94 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.table {
+  td {
+    white-space: nowrap;
+    border-top: 1px solid colors.$gray-20;
+    border-bottom: none !important;
+  }
+}
+
+.criticallyLow,
+.criticallyHigh,
+.low,
+.high {
+  td:nth-child(2) {
+    @include type.type-style('heading-compact-01');
+  }
+}
+
+.criticallyHigh,
+.criticallyLow {
+  border-top: 1px solid colors.$red-20-hover !important;
+  background-color: colors.$red-20 !important;
+}
+
+.high,
+.low {
+  border-top: 1px solid colors.$orange-20 !important;
+  background-color: colors.$orange-10 !important;
+}
+
+.criticallyLow {
+  td:nth-child(2)::after {
+    content: ' ↓↓';
+  }
+}
+
+.criticallyHigh {
+  td:nth-child(2)::after {
+    content: ' ↑↑';
+  }
+}
+
+.low {
+  td:nth-child(2)::after {
+    content: ' ↓';
+  }
+}
+
+.high {
+  td:nth-child(2)::after {
+    content: ' ↑';
+  }
+}
+
+.off-scale-low {
+  td:nth-child(2)::after {
+    content: ' ↓↓↓';
+  }
+}
+
+.off-scale-high {
+  td:nth-child(2)::after {
+    content: ' ↑↑↑';
+  }
+}
+
+.offScaleHigh,
+.offScaleLow,
+.criticallyHigh,
+.criticallyLow,
+.high,
+.low {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100 !important;
+}
+
+.criticallyLow::after {
+  content: ' ↓↓';
+}
+
+.criticallyHigh::after {
+  content: ' ↑↑';
+}
+
+.low::after {
+  content: ' ↓';
+}
+
+.high::after {
+  content: ' ↑';
+}

package/src/past-vitals/paginated-vitals/type/index.ts

@@ -0,0 +1 @@
+export type DataTableSortState = 'NONE' | 'DESC' | 'ASC';

package/src/past-vitals/patient-banner/patient-banner.component.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+  getPatientName,
+  PatientBannerPatientInfo,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
+} from '@openmrs/esm-framework';
+import styles from './patient-banner.scss';
+
+interface PatientBannerProps {
+  patient: fhir.Patient;
+  patientUuid: string;
+  hideActionsOverflow?: boolean;
+}
+
+const PatientBanner: React.FC<PatientBannerProps> = ({ patient, patientUuid }) => {
+  const patientBannerRef = useRef(null);
+  const [isTabletViewport, setIsTabletViewport] = useState(false);
+  const [showContactDetails, setShowContactDetails] = useState(false);
+
+  useEffect(() => {
+    const currentRef = patientBannerRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setIsTabletViewport(entry.contentRect.width < 1023);
+      }
+    });
+    resizeObserver.observe(patientBannerRef.current);
+    return () => {
+      if (currentRef) {
+        resizeObserver.unobserve(currentRef);
+      }
+    };
+  }, [patientBannerRef, setIsTabletViewport]);
+
+  const patientName = patient ? getPatientName(patient) : '';
+
+  const isDeceased = Boolean(patient?.deceasedDateTime);
+
+  return (
+    <header
+      aria-label="patient banner"
+      className={classNames(
+        styles.container,
+        isDeceased ? styles.deceasedPatientContainer : styles.activePatientContainer,
+      )}
+      role="banner"
+      ref={patientBannerRef}>
+      <div className={styles.patientBanner}>
+        <div className={styles.patientAvatar}>
+          <PatientPhoto patientUuid={patientUuid} patientName={patientName} />
+        </div>
+        <PatientBannerPatientInfo patient={patient} renderedFrom="patient-chart" />
+      </div>
+    </header>
+  );
+};
+
+export default PatientBanner;

package/src/past-vitals/patient-banner/patient-banner.scss

@@ -0,0 +1,72 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  border-top: 0.063rem solid $ui-03;
+  border-bottom: 0.063rem solid $ui-03;
+  background-color: $ui-01;
+}
+
+.activePatientContainer,
+.deceasedPatientContainer {
+  background-color: $ui-01;
+}
+
+.buttonCol {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientAvatar {
+  width: 3.5rem;
+  height: 3.5rem;
+  margin: layout.$spacing-05;
+  border-radius: 1px;
+}
+
+.patientAvatarButton {
+  cursor: pointer;
+  border: none;
+  padding: 0px;
+  background: none;
+}
+
+.contactDetails {
+  color: $text-02;
+  width: 100%;
+  display: flex;
+
+  a {
+    @include type.type-style('body-compact-01');
+    text-decoration: none;
+  }
+}
+
+.tabletContactDetails {
+  display: block;
+
+  .row {
+    &:first-child {
+      border-bottom: 1px solid $ui-03;
+    }
+  }
+
+  .row > .col {
+    &:nth-of-type(2n + 1) {
+      border-right: 1px solid $ui-03;
+    }
+  }
+}
+
+.toggleContactDetailsButton {
+  > svg {
+    fill: $color-blue-60-2 !important;
+  }
+}

package/src/past-vitals/patient-vitals-history.component.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showModal, useConfig, useLayoutType, usePatient } from '@openmrs/esm-framework';
+import styles from './patient-vitals-history.scss';
+import { getPatientUuidFromUrl } from './utils';
+import PatientBanner from './patient-banner/patient-banner.component';
+import VitalsHeader from './vitals-and-biometrics-header/vitals-header.extension';
+import { Tab, Button, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import VitalsOverview from './triage-vitals/triage-vitals-history.component';
+import BiometricsBase from './triage-anthropometrics/triage-antropometrics.component';
+import NotesSummary from './triage-notes/triage-notes.component';
+import { AssetMovement } from '@carbon/react/icons';
+import { useCurrentQueueEntry } from './patient-vitals-history.resource';
+import { ConfigObject } from '../config-schema';
+const openmrsSpaBase = window['getOpenmrsSpaBase']();
+
+const PatientVitalsHistory: React.FC = () => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const patientUuid = getPatientUuidFromUrl();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+  const { currentQueueEntry, isLoading: isLoadingQueueEntry } = useCurrentQueueEntry(patientUuid);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const config = useConfig<ConfigObject>();
+
+  const handleMovePatientToQueue = (patientUuid: string) => {
+    const dispose = showModal('move-patient-to-new-room-modal', {
+      patientUuid,
+      context: 'triage',
+      closeModal: () => dispose(),
+      afterSubmitNavigateUrl: `${openmrsSpaBase}home/triage`,
+    });
+  };
+
+  const isInServiceStatus = currentQueueEntry?.status?.uuid === config.concepts.inServiceStatusUuid;
+
+  return (
+    <div>
+      <div className={styles.header}>{t('patientVitalsHistory', 'Patient Vitals History')}</div>
+      {patient && <PatientBanner patientUuid={patientUuid} patient={patient} hideActionsOverflow={true} />}
+      <VitalsHeader patientUuid={patientUuid} />
+
+      <div className={styles.tabsContainer}>
+        <Tabs onChange={(e) => setSelectedTabIndex(e.selectedIndex)}>
+          <div className={styles.tabsHeaderRow}>
+            <TabList scrollDebounceWait={200}>
+              <Tab>{t('triageNotes', 'Triage Notes')}</Tab>
+              <Tab>{t('vitalSigns', 'Vital Signs')}</Tab>
+              <Tab>{t('anthropometrics', 'Anthropometrics')}</Tab>
+            </TabList>
+            {!isLoadingQueueEntry && isInServiceStatus && (
+              <Button
+                size="sm"
+                kind="primary"
+                renderIcon={AssetMovement}
+                className={selectedTabIndex === 0 ? styles.buttonNotesTab : styles.buttonOtherTabs}
+                onClick={() => handleMovePatientToQueue(patientUuid)}>
+                {t('transitionPatient', 'Transition Patient')}
+              </Button>
+            )}
+          </div>
+          <TabPanels>
+            <TabPanel>
+              <div className={styles.notesContainer}>
+                <NotesSummary patientUuid={patientUuid} initialDisplayCount={6} loadMoreCount={6} />
+              </div>
+            </TabPanel>
+            <TabPanel>
+              <div className={styles.vitalsContainer}>
+                <VitalsOverview patientUuid={patientUuid} patient={patient} pageSize={10} urlLabel="vitals" />
+              </div>
+            </TabPanel>
+            <TabPanel>
+              <div className={styles.vitalsContainer}>
+                <BiometricsBase patientUuid={patientUuid} patient={patient} pageSize={10} urlLabel="anthropometrics" />
+              </div>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default PatientVitalsHistory;

package/src/past-vitals/patient-vitals-history.resource.ts

@@ -0,0 +1,30 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { QueueEntry } from '../queue-room-table/type';
+import { useMemo } from 'react';
+
+export function useCurrentQueueEntry(patientUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,queue:(uuid,display),queueRoom:(uuid,display),status:(uuid,display),priority:(uuid,display),patient:(uuid,display),startedAt,queueComingFrom:(uuid,display),queueRoomComingFrom:(uuid,display))';
+
+  const apiUrl = `${restBaseUrl}/queue-entry?patient=${patientUuid}&isEnded=false&v=${customRepresentation}`;
+
+  const { data, error, isLoading, mutate } = useSWR<FetchResponse<{ results: Array<QueueEntry> }>>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const currentQueueEntry = useMemo(() => {
+    if (!data?.data?.results || data.data.results.length === 0) {
+      return null;
+    }
+    return data.data.results[0];
+  }, [data]);
+
+  return {
+    currentQueueEntry,
+    isLoading,
+    error,
+    mutate,
+  };
+}