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

package/src/visits-summary/visit-detail-overview.scss

@@ -0,0 +1,195 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+@import "../root.scss";
+
+.container  {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.encounterHeading {
+  text-align: left;
+  width: 100%;
+  margin: 0 1rem 1.3125rem 1rem;
+  color: #161616;
+}
+
+.visitsDetailWidgetContainer {
+  background-color: $ui-background;
+  width: 100%;
+  border: 1px solid #e0e0e0;
+}
+
+.visitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $spacing-04 0 $spacing-04 $spacing-05;
+  background-color: $ui-background;
+}
+
+.visitsDetailHeaderContainer > h4:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid $brand-teal-01;
+}
+
+.toggleButtons {
+  margin: 0 1rem;
+  height: 2.5rem;
+}
+
+.toggle{
+  border: 1px solid #A6C8FF;
+}
+
+.toggle:hover {
+  background-color: #EDF5FF;
+}
+
+.toggle:active, .toggle:focus {
+  box-shadow: none;
+  background-color: #EDF5FF;
+}
+
+.toggleActive{
+  background-color: #EDF5FF;
+  border: 1px solid $link-01;
+}
+
+.toggleActive:active, .toggleActive:focus {
+  box-shadow: none;
+  border: 1px solid $link-01;
+  background-color: #EDF5FF;
+}
+
+.toggle:first-of-type {
+  border-radius: $spacing-02 0 0 $spacing-02;
+}
+
+.toggle:last-of-type {
+  border-radius: 0 $spacing-02 $spacing-02 0;
+}
+
+.customTable tr[data-parent-row]:nth-child(odd) td {
+  background-color: #fff;
+}
+
+.customTable  tbody  tr[data-parent-row]:nth-child(even)  td {
+  background-color: #f4f4f4;
+}
+
+.encounterEmptyState {
+  text-align: center;
+  margin: 0 1rem 1rem 1rem; 
+}
+
+.expandedRow > td {
+  padding: inherit !important
+}
+
+.expandedRow > td > div {
+  max-height: max-content !important;
+}
+
+.observation {
+  display: grid;
+  grid-template-columns: max-content auto;
+  grid-gap: 0.5rem;
+  margin: 0.5rem 0;
+}
+
+.observation > span {
+  align-self: center;
+}
+
+.summaryContainer {
+  margin-left: 1rem;
+  display: grid;
+  grid-template-columns: max-content auto;
+}
+
+.flexSections {
+  display: flex;
+}
+
+.verticalTabs {
+  margin: 1rem 0;
+}
+
+.verticalTabs > ul {
+  flex-direction: column !important;
+}
+
+.tab {
+  margin-left: 0 !important;
+}
+
+.tab > button {
+  border-bottom: 0 !important;
+  border-left: 3px solid #e0e0e0 !important;
+}
+
+.tab > button, .tab > button:focus, .tab > button:active {
+  outline: 0 !important;
+  outline-offset: 0 !important;
+}
+
+.selectedTab > button {
+  border-left: 3px solid #007d79 !important;
+  border-bottom: 0 !important;
+  font-weight: 600 !important;
+}
+
+.tabContent {
+  border-top: 1px solid #e0e0e0;
+  padding: 1rem 0;
+  width: 70%;
+}
+
+.medicationBlock {
+  background-color: #f4f4f4;
+  padding: 0.625rem 6.75rem 0.75rem 1.063rem;
+  margin-top: 1.5rem;
+  width: 100% !important;
+}
+
+.medicationBlock:first-child {
+  margin-top: 0;
+}
+
+.diagnosesList {
+  display: flex;
+  padding-bottom: 0.5rem;
+  margin: 0 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.diagnosis {
+  border-radius: 12px;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  margin: 0 0.5rem 0.5rem 0;
+}
+
+.primaryDiagnose {
+  background-color: #d0e2ff;
+  color: #0043ce;
+}
+
+.secondaryDiagnose {
+  background-color: #ffd7d9;
+  color:#a2191f;
+}
+
+.testSummaryExtension p {
+  @include carbon--type-style("body-long-01");
+  color: #525252
+}

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

@@ -0,0 +1,75 @@
+import React, { useState, useMemo } from 'react';
+import { Button, DataTableSkeleton } from 'carbon-components-react';
+import { useTranslation } from 'react-i18next';
+import { Encounter, useVisit } from './visit.resource';
+import dayjs from 'dayjs';
+import styles from './visit-detail-overview.scss';
+import EncounterList from './visits-components/encounter-list.component';
+import VisitSummary from './visits-components/visit-summary.component';
+
+interface VisitDetailComponentProps {
+  visitUuid: string;
+  patientUuid: string;
+}
+
+const VisitDetailComponent: React.FC<VisitDetailComponentProps> = ({ visitUuid, patientUuid }) => {
+  const { t } = useTranslation();
+  const [listView, setView] = useState(true);
+
+  const { data: visit, isError, isLoading, isValidating } = useVisit(visitUuid);
+
+  const encounters = useMemo(
+    () =>
+      visit
+        ? visit?.encounters?.map((encounter: Encounter) => ({
+            id: encounter.uuid,
+            time: dayjs(encounter.encounterDateTime).format('hh:mm'),
+            encounterType: encounter.encounterType.display,
+            provider: encounter.encounterProviders.length > 0 ? encounter.encounterProviders[0].display : '',
+            obs: encounter.obs,
+          }))
+        : [],
+    [visit],
+  );
+
+  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>
+    );
+  }
+};
+
+function formatDateTime(date) {
+  return date ? dayjs(date).format('MMM DD, YYYY - hh:mm') : null;
+}
+
+export default VisitDetailComponent;

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

@@ -0,0 +1,179 @@
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface Encounter {
+  uuid: string;
+  encounterDateTime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+}
+
+export interface EncounterProvider {
+  uuid: string;
+  display: string;
+  encounterRole: {
+    uuid: string;
+    display: string;
+  };
+  provider: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: any;
+  obsDatetime: string;
+}
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dose: number;
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Note {
+  note: string;
+  provider: {
+    name: string;
+    role: string;
+  };
+  time: string;
+}
+
+export interface OrderItem {
+  order: Order;
+  provider: {
+    name: string;
+    role: string;
+  };
+}
+
+export function useVisit(visitUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,encounterDatetime,' +
+    'orders:(uuid,dateActivated,' +
+    'drug:(uuid,name,strength),doseUnits:(uuid,display),' +
+    'dose,route:(uuid,display),frequency:(uuid,display),' +
+    'duration,durationUnits:(uuid,display),numRefills,' +
+    'orderType:(uuid,display),orderer:(uuid,person:(uuid,display))),' +
+    'obs:(uuid,concept:(uuid,display,conceptClass:(uuid,display)),' +
+    'display,groupMembers:(uuid,concept:(uuid,display),' +
+    'value:(uuid,display)),value),encounterType:(uuid,display),' +
+    'encounterProviders:(uuid,display,encounterRole:(uuid,display),' +
+    'provider:(uuid,person:(uuid,display)))),visitType:(uuid,name,display),startDatetime';
+
+  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) {
+  if (!strength || !doseNumber) {
+    return '';
+  }
+
+  const i = strength.search(/\D/);
+  const strengthQuantity = parseInt(strength.substring(0, i));
+
+  const concentrationStartIndex = strength.search(/\//);
+
+  let strengthUnits = strength.substring(i);
+
+  if (concentrationStartIndex >= 0) {
+    strengthUnits = strength.substring(i, concentrationStartIndex);
+    const j = strength.substring(concentrationStartIndex + 1).search(/\D/);
+    const concentrationQuantity = parseInt(strength.substr(concentrationStartIndex + 1, j));
+    const concentrationUnits = strength.substring(concentrationStartIndex + 1 + j);
+    return `${doseNumber} ${strengthUnits} (${
+      (doseNumber / strengthQuantity) * concentrationQuantity
+    } ${concentrationUnits})`;
+  } else {
+    return `${strengthQuantity * doseNumber} ${strengthUnits}`;
+  }
+}

package/src/visits-summary/visits-components/encounter-list.component.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import {
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableExpandHeader,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableExpandRow,
+  TableCell,
+  TableExpandedRow,
+} from 'carbon-components-react';
+import EncounterObservations from './encounter-observations.component';
+import styles from '../visit-detail-overview.scss';
+import { Observation } from '../visit.resource';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-framework';
+
+interface EncounterListProps {
+  encounters: Array<{
+    id: any;
+    time: any;
+    encounterType: string;
+    provider: string;
+    obs: Array<Observation>;
+  }>;
+  visitUuid: string;
+}
+
+const EncounterListDataTable: React.FC<EncounterListProps> = ({ encounters, visitUuid }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isDesktop = layout === 'desktop';
+  const [headerWidth, setHeaderWidth] = useState(0);
+  const headerRef = useRef(null);
+
+  const headerData = useMemo(
+    () => [
+      {
+        id: 1,
+        header: t('time', 'Time'),
+        key: 'time',
+      },
+      {
+        id: 2,
+        header: t('encounterType', 'Encounter Type'),
+        key: 'encounterType',
+      },
+      {
+        id: 3,
+        header: t('provider', 'Provider'),
+        key: 'provider',
+      },
+    ],
+    [t],
+  );
+
+  useEffect(() => {
+    setHeaderWidth(headerRef?.current?.clientWidth);
+    const handler = () => setHeaderWidth(headerRef?.current?.clientWidth);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  return encounters.length !== 0 ? (
+    <DataTable rows={encounters} headers={headerData}>
+      {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => {
+        return (
+          <TableContainer>
+            <Table className={styles.customTable} {...getTableProps()} size={!isDesktop ? 'normal' : 'short'}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader />
+                  {headers.map((header, ind) =>
+                    ind === 0 ? (
+                      <TableHeader id={`header_${visitUuid}_${ind}`} ref={headerRef} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ) : (
+                      <TableHeader id={`header_${visitUuid}_${ind}`} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ),
+                  )}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, ind) => (
+                  <React.Fragment key={row.id}>
+                    <TableExpandRow {...getRowProps({ row })}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableExpandRow>
+                    {row.isExpanded && (
+                      <TableExpandedRow
+                        className={styles.expandedRow}
+                        style={{ paddingLeft: isDesktop ? '3rem' : '4rem' }}
+                        colSpan={headers.length + 2}>
+                        <div style={{ marginLeft: headerWidth }}>
+                          <EncounterObservations observations={encounters[ind].obs} />
+                        </div>
+                      </TableExpandedRow>
+                    )}
+                  </React.Fragment>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        );
+      }}
+    </DataTable>
+  ) : (
+    <div className={styles.encounterEmptyState}>
+      <h4 className={styles.productiveHeading02}>{t('noEncountersFound', 'No encounters found')}</h4>
+      <p className={`${styles.bodyLong01} ${styles.text02}`}>
+        {t('thereIsNoInformationToDisplayHere', 'There is no information to display here')}
+      </p>
+    </div>
+  );
+};
+
+export default EncounterListDataTable;

package/src/visits-summary/visits-components/encounter-observations.component.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SkeletonText } from 'carbon-components-react';
+import { Observation } from '../visit.resource';
+import styles from '../visit-detail-overview.scss';
+
+interface EncounterObservationsProps {
+  observations: Array<Observation>;
+}
+
+const EncounterObservations: React.FC<EncounterObservationsProps> = ({ observations }) => {
+  const { t } = useTranslation();
+
+  const observationsList = useMemo(() => {
+    return (
+      observations &&
+      observations.map((obs: Observation) => {
+        const [question, answer] = obs.display.split(':');
+        return { question, answer };
+      })
+    );
+  }, [observations]);
+
+  return observationsList ? (
+    observationsList.length > 0 ? (
+      <div className={styles.observation}>
+        {observationsList.map((obs, ind) => (
+          <React.Fragment key={ind}>
+            <span className={styles.caption01}>{obs.question}: </span>
+            <span className={`${styles.bodyShort02} ${styles.text01}`}>{obs.answer}</span>
+          </React.Fragment>
+        ))}
+      </div>
+    ) : (
+      <p className={styles.caption01}>{t('noObservationsFound', 'No observations found')}</p>
+    )
+  ) : (
+    <SkeletonText />
+  );
+};
+
+export default EncounterObservations;

package/src/visits-summary/visits-components/medications-summary.component.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize';
+import dayjs from 'dayjs';
+import { useTranslation } from 'react-i18next';
+import { OrderItem, getDosage } from '../visit.resource';
+import styles from '../visit-detail-overview.scss';
+
+function formatTime(dateTime) {
+  return dayjs(dateTime).format('hh:mm');
+}
+
+interface MedicationSummaryProps {
+  medications: Array<OrderItem>;
+}
+
+const MedicationSummary: React.FC<MedicationSummaryProps> = ({ medications }) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      {medications.length > 0 ? (
+        medications.map(
+          (medication: OrderItem, ind) =>
+            medication.order?.dose &&
+            medication.order?.orderType?.display === 'Drug Order' && (
+              <React.Fragment key={ind}>
+                <p className={`${styles.bodyLong01} ${styles.medicationBlock}`}>
+                  <strong>{capitalize(medication.order.drug?.name)}</strong> &mdash;{' '}
+                  {medication.order.doseUnits?.display} &mdash; {medication.order.route?.display}
+                  <br />
+                  <span className={styles.label01}>{t('dose', 'Dose').toUpperCase()}</span>{' '}
+                  <strong>{getDosage(medication.order.drug?.strength, medication.order.dose).toLowerCase()}</strong>{' '}
+                  &mdash; {medication.order.frequency?.display} &mdash;{' '}
+                  {!medication.order.duration
+                    ? t('orderIndefiniteDuration', 'Indefinite duration')
+                    : t('orderDurationAndUnit', 'for {duration} {durationUnit}', {
+                        duration: medication.order.duration,
+                        durationUnit: medication.order.durationUnits?.display,
+                      })}
+                  <br />
+                  <span className={styles.label01}>{t('refills', 'Refills').toUpperCase()}</span>{' '}
+                  {medication.order.numRefills}
+                </p>
+                <p className={styles.caption01} style={{ color: '#525252' }}>
+                  {formatTime(medication.order.dateActivated)} &middot;{' '}
+                  {medication.provider && medication.provider.name} &middot;{' '}
+                  {medication.provider && medication.provider.role}
+                </p>
+              </React.Fragment>
+            ),
+        )
+      ) : (
+        <p className={`${styles.bodyLong01} ${styles.text02}`}>{t('noMedicationsFound', 'No medications found')}</p>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default MedicationSummary;

package/src/visits-summary/visits-components/notes-summary.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styles from '../visit-detail-overview.scss';
+import { Note } from '../visit.resource';
+import { useTranslation } from 'react-i18next';
+
+interface NotesSummaryProps {
+  notes: Array<Note>;
+}
+
+const NotesSummary: React.FC<NotesSummaryProps> = ({ notes }) => {
+  const { t } = useTranslation();
+
+  return (
+    <React.Fragment>
+      {notes.length > 0 ? (
+        notes.map((note, ind) => (
+          <React.Fragment key={ind}>
+            <p className={`${styles.medicationBlock} ${styles.bodyLong01}`}>{note.note}</p>
+            <p className={styles.caption01} style={{ color: '#525252' }}>
+              {note.time} &middot; {note.provider.name} &middot; {note.provider.role}
+            </p>
+          </React.Fragment>
+        ))
+      ) : (
+        <p className={`${styles.bodyLong01} ${styles.text02}`}>{t('noNotesFound', 'No notes found')}</p>
+      )}
+    </React.Fragment>
+  );
+};
+
+export default NotesSummary;