@openmrs/esm-service-queues-app 5.0.1-pre.2087

package/src/past-visit/past-visit-details/medications-list.component.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import capitalize from 'lodash-es/capitalize';
+import { useTranslation } from 'react-i18next';
+import { Tile } from '@carbon/react';
+import { formatDate } from '@openmrs/esm-framework';
+import { getDosage } from '../past-visit.resource';
+import { OrderItem } from '../../types/index';
+import styles from './past-visit-summary.scss';
+interface MedicationProps {
+  medications: Array<OrderItem>;
+}
+const Medications: React.FC<MedicationProps> = ({ medications }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {medications.length > 0 ? (
+        medications.map(
+          (medication: OrderItem, ind) =>
+            medication.order?.dose &&
+            medication.order?.orderType?.display === 'Drug Order' && (
+              <div className={styles.medicationContainer}>
+                <Tile className={styles.medicationTile}>
+                  <p className={styles.medicationRecord}>
+                    <strong>{capitalize(medication.order.drug?.name)}</strong> &mdash;{' '}
+                    {medication.order.drug?.strength?.toLowerCase()}
+                    &mdash; {medication.order.doseUnits?.display?.toLowerCase()} &mdash;{' '}
+                    <span>
+                      <span className={styles.label01}> {t('dose', 'Dose').toUpperCase()} </span>{' '}
+                    </span>
+                    <span className={styles.dosage}>
+                      {getDosage(medication.order.drug?.strength, medication.order?.dose)?.toLowerCase()}
+                    </span>{' '}
+                    &mdash; {medication.order.route?.display?.toLowerCase()} &mdash;{' '}
+                    {medication.order.frequency?.display?.toLowerCase()} &mdash;{' '}
+                    {!medication.order.duration
+                      ? t('orderIndefiniteDuration', 'Indefinite duration')
+                      : t('orderDurationAndUnit', 'for {duration} {durationUnit}', {
+                          duration: medication.order.duration,
+                          durationUnit: medication.order.durationUnits?.display?.toLowerCase(),
+                        })}
+                    {medication.order?.numRefills !== 0 && (
+                      <span>
+                        <span className={styles.label01}> &mdash; {t('refills', 'Refills').toUpperCase()}</span>{' '}
+                        {medication.order.numRefills}
+                        {''}
+                      </span>
+                    )}
+                    {medication.order?.dosingInstructions && (
+                      <span> &mdash; {medication.order?.dosingInstructions.toLocaleLowerCase()}</span>
+                    )}
+                    {medication.order?.orderReasonNonCoded ? (
+                      <span>
+                        &mdash; <span className={styles.label01}>{t('indication', 'Indication').toUpperCase()}</span>{' '}
+                        {medication.order?.orderReasonNonCoded}
+                      </span>
+                    ) : null}
+                    {medication.order?.quantity ? (
+                      <span>
+                        <span className={styles.label01}> &mdash; {t('quantity', 'Quantity').toUpperCase()}</span>{' '}
+                        {medication.order?.quantity}
+                      </span>
+                    ) : null}
+                    {medication.order?.dateStopped ? (
+                      <span className={styles.bodyShort01}>
+                        <span className={styles.label01}>
+                          {medication.order?.quantity ? ` — ` : ''} {t('endDate', 'End date').toUpperCase()}
+                        </span>{' '}
+                        {formatDate(new Date(medication.order?.dateStopped))}
+                      </span>
+                    ) : null}
+                  </p>
+                </Tile>
+                <p className={styles.metadata}>
+                  {medication.time} ·{' '}
+                  {medication.provider.name ? (
+                    <span>
+                      {' '}
+                      {medication.provider && medication.provider.name},{' '}
+                      {medication.provider && medication.provider.role}{' '}
+                    </span>
+                  ) : null}{' '}
+                  ·{' '}
+                </p>
+              </div>
+            ),
+        )
+      ) : (
+        <p className={`${styles.bodyLong01} ${styles.text02}`}>{t('noMedicationsFound', 'No medications found')}</p>
+      )}
+    </div>
+  );
+};
+
+export default Medications;

package/src/past-visit/past-visit-details/notes-list.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { DiagnosisItem, Note } from '../../types/index';
+import styles from './past-visit-summary.scss';
+
+interface NotesProps {
+  notes: Array<Note>;
+  diagnoses: Array<DiagnosisItem>;
+}
+
+const Notes: React.FC<NotesProps> = ({ notes, diagnoses }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {diagnoses.length > 0
+        ? diagnoses.map((d: DiagnosisItem, ind) => (
+            <Tag type="blue" size="md">
+              {d.diagnosis}
+            </Tag>
+          ))
+        : null}
+      {notes.length ? (
+        notes.map((note: Note, index) => (
+          <div key={`note-` + index}>
+            <p className={styles.notesContainer}>{note.note}</p>
+            <p className={styles.notesSubHeading}>
+              {note.provider.name ? <span> {note.provider.name} </span> : null} · {note.time}
+            </p>
+          </div>
+        ))
+      ) : (
+        <p className={`${styles.bodyLong01} ${styles.text02}`}>{t('noNotesFound', 'No notes found')}</p>
+      )}
+    </div>
+  );
+};
+
+export default Notes;

package/src/past-visit/past-visit-details/past-visit-summary.component.tsx

@@ -0,0 +1,172 @@
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tab, Tabs, TabList, TabPanel, TabPanels } from '@carbon/react';
+import { formatTime, parseDate, useLayoutType, formatDatetime } from '@openmrs/esm-framework';
+import { Encounter, OrderItem, Order, Note, DiagnosisItem, Observation } from '../../types/index';
+import EncounterList from './encounter-list.component';
+import styles from '../past-visit.scss';
+import Vitals from '../../current-visit/visit-details/vitals.component';
+import { useVitalsFromObs } from '../../current-visit/hooks/useVitalsConceptMetadata';
+import Notes from './notes-list.component';
+import Medications from './medications-list.component';
+
+interface PastVisitSummaryProps {
+  encounters: Array<any>;
+  patientUuid: string;
+}
+
+enum visitTypes {
+  CURRENT = 'currentVisit',
+  PAST = 'pastVisit',
+}
+
+const PastVisitSummary: React.FC<PastVisitSummaryProps> = ({ encounters, patientUuid }) => {
+  const { t } = useTranslation();
+  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
+  const isTablet = useLayoutType() === 'tablet';
+
+  const encountersToDisplay = useMemo(
+    () =>
+      encounters
+        ? encounters?.map((encounter: Encounter) => ({
+            id: encounter?.uuid,
+            datetime: formatDatetime(parseDate(encounter?.encounterDatetime)),
+            encounterType: encounter?.encounterType?.display,
+            form: encounter?.form,
+            obs: encounter?.obs,
+            provider:
+              encounter?.encounterProviders?.length > 0
+                ? encounter.encounterProviders[0].provider?.person?.display
+                : '--',
+          }))
+        : [],
+    [encounters],
+  );
+
+  const [medications, notes, diagnoses, vitalsToRetrieve]: [
+    Array<OrderItem>,
+    Array<Note>,
+    Array<DiagnosisItem>,
+    Array<Encounter>,
+  ] = useMemo(() => {
+    // Medication Tab
+    const medications: Array<OrderItem> = [];
+    const notes: Array<Note> = [];
+    const diagnoses: Array<DiagnosisItem> = [];
+    const vitalsToRetrieve: Array<Encounter> = [];
+
+    // Iterating through every Encounter
+    encounters?.forEach((encounter) => {
+      if (encounter.orders != undefined) {
+        medications.push(
+          ...encounter.orders.map((order: Order) => ({
+            order,
+            provider: {
+              name: encounter.encounterProviders.length ? encounter.encounterProviders[0].provider.person.display : '',
+              role: encounter.encounterProviders.length ? encounter.encounterProviders[0].encounterRole.display : '',
+            },
+            time: encounter.encounterDatetime ? formatTime(parseDate(encounter.encounterDatetime)) : '',
+          })),
+        );
+      }
+
+      // Check for Visit Diagnoses and Notes
+      encounter?.obs?.forEach((obs: Observation) => {
+        if (obs?.concept?.display === 'Visit Diagnoses') {
+          // Putting all the diagnoses in a single array.
+          diagnoses.push({
+            diagnosis: obs.groupMembers.find((mem) => mem.concept.display === 'PROBLEM LIST')?.value.display,
+          });
+        } else if (obs?.concept?.display === 'General patient note') {
+          // Putting all notes in a single array.
+          notes.push({
+            note: obs.value,
+            provider: {
+              name: encounter.encounterProviders.length ? encounter.encounterProviders[0].provider.person.display : '',
+              role: encounter.encounterProviders.length ? encounter.encounterProviders[0].encounterRole.display : '',
+            },
+            time: encounter.encounterDatetime ? formatTime(parseDate(encounter.encounterDatetime)) : '',
+            concept: obs.concept,
+          });
+        }
+      });
+
+      vitalsToRetrieve.push(encounter);
+
+      // Check for Visit Diagnoses and Notes
+      if (encounter.encounterType?.display === 'Visit Note') {
+        encounter.obs.forEach((obs: Observation) => {
+          if (obs.concept && obs.concept.display === 'Visit Diagnoses') {
+            // // Putting all the diagnoses in a single array.
+            diagnoses.push({
+              diagnosis: obs.groupMembers.find((mem) => mem.concept.display === 'PROBLEM LIST').value.display,
+            });
+          } else if (obs.concept && obs.concept.display === 'General patient note') {
+            // Putting all notes in a single array.
+            notes.push({
+              note: obs.value,
+              provider: {
+                name: encounter.encounterProviders.length
+                  ? encounter.encounterProviders[0].provider.person.display
+                  : '',
+                role: encounter.encounterProviders.length ? encounter.encounterProviders[0].encounterRole.display : '',
+              },
+              time: formatTime(parseDate(obs.obsDatetime)),
+              concept: obs.concept,
+            });
+          }
+        });
+      }
+    });
+    return [medications, notes, diagnoses, vitalsToRetrieve];
+  }, [encounters]);
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.visitContainer}>
+        <Tabs className={`${styles.verticalTabs} ${isTablet ? styles.tabletTabs : styles.desktopTabs}`}>
+          <TabList className={styles.verticalTabList} aria-label="Past visits tabs">
+            <Tab
+              className={`${styles.tab} ${styles.bodyLong01} ${selectedTabIndex === 0 && styles.selectedTab}`}
+              id="vitals-tab"
+              onClick={() => setSelectedTabIndex(0)}>
+              {t('vitals', 'Vitals')}
+            </Tab>
+            <Tab
+              className={`${styles.tab} ${selectedTabIndex === 1 && styles.selectedTab}`}
+              id="notes-tab"
+              onClick={() => setSelectedTabIndex(1)}>
+              {t('notes', 'Notes')}
+            </Tab>
+            <Tab
+              className={`${styles.tab} ${selectedTabIndex === 2 && styles.selectedTab}`}
+              id="medications-tab"
+              onClick={() => setSelectedTabIndex(2)}>
+              {t('medications', 'Medications')}
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Vitals
+                vitals={useVitalsFromObs(vitalsToRetrieve)}
+                patientUuid={patientUuid}
+                visitType={visitTypes.PAST}
+              />
+            </TabPanel>
+            <TabPanel>
+              <Notes notes={notes} diagnoses={diagnoses} />
+            </TabPanel>
+            <TabPanel>
+              <Medications medications={medications} />
+            </TabPanel>
+            <TabPanel>
+              <EncounterList encounters={encountersToDisplay} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+
+export default PastVisitSummary;

package/src/past-visit/past-visit-details/past-visit-summary.scss

@@ -0,0 +1,58 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.medicationContainer {
+  margin-bottom: spacing.$spacing-06;
+}
+
+.medicationRecord {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.medicationTile {
+  width: 100% !important;
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.dosage {
+  @include type.type-style('heading-compact-01');
+  margin-left: spacing.$spacing-03;
+}
+
+.date {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.metadata {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-02 0;
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-02 0;
+}
+
+.notesSubHeading {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.notesContainer {
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}

package/src/past-visit/past-visit.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StructuredListSkeleton } from '@carbon/react';
+import { parseDate, formatDatetime } from '@openmrs/esm-framework';
+import { usePastVisits } from './past-visit.resource';
+import PastVisitSummary from './past-visit-details/past-visit-summary.component';
+import styles from './past-visit.scss';
+
+interface PastVisitProps {
+  patientUuid: string;
+}
+
+const PastVisit: React.FC<PastVisitProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { visits, isError, isLoading } = usePastVisits(patientUuid);
+
+  if (isLoading) {
+    return <StructuredListSkeleton role="progressbar" />;
+  }
+
+  if (visits) {
+    return (
+      <div className={styles.visitContainer}>
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <h4 className={styles.visitType}>{visits?.visitType?.display}</h4>
+            <p className={styles.date}>{formatDatetime(parseDate(visits?.startDatetime))}</p>
+          </div>
+          <PastVisitSummary encounters={visits.encounters} patientUuid={patientUuid} />
+        </div>
+      </div>
+    );
+  }
+  return <p className={`${styles.bodyLong01}`}>{t('noPreviousVisitFound', 'No previous visit found')}</p>;
+};
+
+export default PastVisit;

package/src/past-visit/past-visit.resource.ts

@@ -0,0 +1,83 @@
+import useSWR from 'swr';
+import { openmrsFetch, Visit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+
+export function usePastVisits(patientUuid: string) {
+  const customRepresentation =
+    'custom:(uuid,encounters:(uuid,form:(uuid,display),encounterDatetime,' +
+    'orders:full,' +
+    '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,stopDatetime,patient';
+
+  const apiUrl = `/ws/rest/v1/visit?patient=${patientUuid}&v=${customRepresentation}`;
+
+  const { data, error, isLoading, isValidating } = useSWR<{ data: { results: Array<Visit> } }, Error>(
+    patientUuid ? apiUrl : null,
+    openmrsFetch,
+  );
+
+  const previousVisit = data?.data?.results
+    ?.filter((result) => dayjs(result.startDatetime).isBefore(dayjs().startOf('day')))
+    ?.shift();
+
+  return {
+    visits: data ? previousVisit : null,
+    isError: error,
+    isLoading,
+    isValidating,
+  };
+}
+
+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 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/past-visit/past-visit.scss

@@ -0,0 +1,126 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wrapper {
+  margin-top: spacing.$spacing-03;
+}
+
+.bodyShort02 {
+  @include type.type-style('body-compact-02');
+}
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.date {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-03 0rem spacing.$spacing-03;
+}
+
+.visitType {
+  @include type.type-style('heading-compact-02');
+}
+
+.container {
+  background-color: $ui-background;
+  padding: spacing.$spacing-03;
+  margin: spacing.$spacing-03 0rem spacing.$spacing-03;
+  width: 100%;
+}
+
+.tabs > :global(.cds--tab-content) {
+  padding: spacing.$spacing-05 0rem !important;
+}
+
+.header::after {
+  content: '';
+  display: block;
+  width: spacing.$spacing-07;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.visitContainer {
+  background-color: $ui-background;
+  display: grid;
+  grid-template-columns: max-content auto;
+  min-height: spacing.$spacing-13;
+}
+
+.flexSections {
+  display: flex;
+}
+
+.verticalTabs {
+  margin: spacing.$spacing-04 0;
+
+  &:global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0rem;
+  }
+
+  > ul {
+    flex-direction: column !important;
+  }
+}
+
+.verticalTabList {
+  :global(.cds--tab--list) {
+    flex-direction: column;
+    max-height: fit-content;
+    overflow-x: visible;
+  }
+}
+
+.desktopTabs {
+  button {
+    height: spacing.$spacing-07;
+  }
+}
+
+.tabletTabs {
+  button {
+    height: spacing.$spacing-09;
+  }
+}
+
+.tab {
+  outline: 0;
+  outline-offset: 0;
+
+  &:active,
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    border-left: 3px solid var(--brand-03);
+    border-bottom: none;
+    font-weight: 600;
+    margin-left: 0rem !important;
+  }
+
+  &[aria-selected='false'] {
+    border-bottom: none;
+    border-left: 2px solid $ui-03;
+    margin-left: 0rem !important;
+  }
+}
+
+.selectedTab > button {
+  border-left: 3px solid var(--brand-03) !important;
+  border-bottom: 0 !important;
+  font-weight: 600 !important;
+}
+
+.tabContent {
+  border-top: 1px solid $ui-03;
+  padding: spacing.$spacing-05 0;
+  width: 70%;
+}
+
+.textColor {
+  color: $color-blue-60-2;
+}

package/src/past-visit/past-visit.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import PastVisitSummary from './past-visit-details/past-visit-summary.component';
+import userEvent from '@testing-library/user-event';
+import { mockPastVisit } from '../../__mocks__/visits.mock';
+import { mockPatient, renderWithSwr } from '../../../../tools/test-helpers';
+import { usePastVisits } from './past-visit.resource';
+
+const mockUsePastVisits = usePastVisits as jest.Mock;
+
+jest.mock('./past-visit.resource', () => ({
+  usePastVisits: jest.fn(),
+}));
+
+describe('PastVisit: ', () => {
+  it('renders an empty state when notes, encounters, medications, and vitals data is not available', async () => {
+    const user = userEvent.setup();
+
+    mockUsePastVisits.mockReturnValueOnce({
+      data: mockPastVisit.data.results,
+    });
+
+    renderPastVisitTabs();
+
+    expect(screen.queryAllByText(/vitals/i));
+    const vitalsTab = screen.getByRole('tab', { name: /vitals/i });
+
+    expect(vitalsTab).toBeInTheDocument();
+
+    expect(screen.getByRole('tab', { name: /notes/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /medications/i })).toBeInTheDocument();
+
+    await user.click(vitalsTab);
+
+    expect(vitalsTab).toHaveAttribute('aria-selected', 'true');
+  });
+});
+
+function renderPastVisitTabs() {
+  renderWithSwr(<PastVisitSummary patientUuid={mockPatient.id} encounters={[]} />);
+}