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

package/src/patient-search/patient-scheduled-visits.scss

@@ -0,0 +1,131 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: $ui-background;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+.grid {
+  padding: 0;
+}
+
+.visitTile {
+  margin: spacing.$spacing-05 0;
+
+  &:global(.cds--tile--is-selected:focus) {
+    background-color: $color-blue-10;
+    color: $color-blue-10;
+    border: 1px solid $color-blue-60-2;
+    outline: none;
+  }
+
+  &:global(.cds--tile--is-selected:hover) {
+    background-color: $color-blue-10;
+    color: $color-blue-10;
+    border: 1px solid $color-blue-60-2;
+    outline: none;
+  }
+
+  &:global(.cds--tile--is-selected:hover .cds--tile__checkmark svg) {
+    fill: $color-blue-60-2;
+  }
+}
+
+.recentlyScheduledVisitsContainer {
+  margin-top: spacing.$spacing-06;
+  margin-bottom: spacing.$spacing-10;
+}
+
+.row {
+  margin: 0 spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+}
+
+.backButton {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: spacing.$spacing-03 0;
+  padding: 0;
+  @include type.type-style('body-compact-01');
+
+  button {
+    display: flex;
+
+    svg {
+      order: 1;
+      margin-right: 0.5rem;
+      margin-left: 0rem !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('body-02');
+  color: $text-02;
+  margin-left: 1.2rem;
+}
+
+.primaryText {
+  @include type.type-style('heading-compact-02');
+}
+
+.secondaryText {
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.text-divider {
+  display: flex;
+  align-items: center;
+  margin: spacing.$spacing-08 25%;
+  @include type.type-style('heading-03');
+  color: $text-02;
+}
+
+.text-divider::before,
+.text-divider::after {
+  content: '';
+  height: 1px;
+  background-color: $text-03;
+  flex-grow: 1;
+}
+
+.text-divider::before {
+  margin-right: spacing.$spacing-05;
+}
+
+.text-divider::after {
+  margin-left: spacing.$spacing-05;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.prioritySwitcher {
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+}
+
+.emptyAppointment {
+  margin: spacing.$spacing-05;
+}

package/src/patient-search/patient-scheduled-visits.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import PatientScheduledVisits from './patient-scheduled-visits.component';
+import { renderWithSwr, waitForLoadingToFinish } from '../../../../tools/test-helpers';
+import { mockPatientsVisits } from '../../../../__mocks__/patient-visits.mock';
+import { mockLocations } from '../../../../__mocks__/locations.mock';
+import { mockSession } from '../../../../__mocks__/session.mock';
+import { ConfigObject, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { mockPatient } from '../../../../__mocks__/appointments.mock';
+
+const mockedUseConfig = useConfig as jest.Mock;
+const mockToggleSearchType = jest.fn();
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+const testProps = {
+  toggleSearchType: mockToggleSearchType,
+  patientUuid: mockPatient.uuid,
+  closePanel: () => false,
+};
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+    useLocations: jest.fn().mockImplementation(() => mockLocations.data),
+    useSession: jest.fn().mockImplementation(() => mockSession.data),
+  };
+});
+describe('ScheduledVisits', () => {
+  beforeEach(() =>
+    mockedUseConfig.mockReturnValue({
+      concepts: {
+        priorityConceptSetUuid: '96105db1-abbf-48d2-8a52-a1d561fd8c90',
+        serviceConceptSetUuid: '330c0ec6-0ac7-4b86-9c70-29d76f0ae20a',
+        statusConceptSetUuid: 'd60ffa60-fca6-4c60-aea9-a79469ae65c7',
+      },
+    } as ConfigObject),
+  );
+  it('should display recent and future scheduled visits', async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({ data: mockPatientsVisits.recentVisits });
+
+    renderPatientScheduledVisits();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText(/Cardiology Consultation 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/08-Aug-2022, 02:56 PM · 10 Engineer VCT/i)).toBeInTheDocument();
+    expect(screen.getByText(/No appointments found/i)).toBeInTheDocument();
+  });
+});
+
+function renderPatientScheduledVisits() {
+  renderWithSwr(<PatientScheduledVisits {...testProps} />);
+}

package/src/patient-search/patient-search.component.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SearchTypes } from '../types';
+import Overlay from '../overlay.component';
+import PatientScheduledVisits from './patient-scheduled-visits.component';
+import QueueServiceForm from '../queue-services/queue-service-form.component';
+import QueueRoomForm from '../queue-rooms/queue-room-form.component';
+import VisitForm from './visit-form/visit-form.component';
+
+interface PatientSearchProps {
+  closePanel: () => void;
+  view?: string;
+  viewState: {
+    selectedPatientUuid?: string;
+  };
+  headerTitle?: string;
+}
+
+const PatientSearch: React.FC<PatientSearchProps> = ({ closePanel, view, viewState, headerTitle }) => {
+  const { t } = useTranslation();
+  const { selectedPatientUuid } = viewState;
+  const [searchType, setSearchType] = useState<SearchTypes>(
+    view === 'queue_service_form'
+      ? SearchTypes.QUEUE_SERVICE_FORM
+      : view === 'queue_room_form'
+      ? SearchTypes.QUEUE_ROOM_FORM
+      : SearchTypes.SCHEDULED_VISITS,
+  );
+  const [newVisitMode, setNewVisitMode] = useState<boolean>(false);
+
+  const toggleSearchType = (searchType: SearchTypes, mode: boolean = false) => {
+    setSearchType(searchType);
+    setNewVisitMode(mode);
+  };
+
+  return (
+    <>
+      <Overlay header={headerTitle} closePanel={closePanel}>
+        <div className="omrs-main-content">
+          {searchType === SearchTypes.SCHEDULED_VISITS ? (
+            <PatientScheduledVisits
+              patientUuid={selectedPatientUuid}
+              toggleSearchType={toggleSearchType}
+              closePanel={closePanel}
+            />
+          ) : searchType === SearchTypes.VISIT_FORM ? (
+            <VisitForm
+              patientUuid={selectedPatientUuid}
+              toggleSearchType={toggleSearchType}
+              closePanel={closePanel}
+              mode={newVisitMode}
+            />
+          ) : searchType === SearchTypes.QUEUE_SERVICE_FORM ? (
+            <QueueServiceForm toggleSearchType={toggleSearchType} closePanel={closePanel} />
+          ) : searchType === SearchTypes.QUEUE_ROOM_FORM ? (
+            <QueueRoomForm toggleSearchType={toggleSearchType} closePanel={closePanel} />
+          ) : null}
+        </div>
+      </Overlay>
+    </>
+  );
+};
+
+export default PatientSearch;

package/src/patient-search/search-illustration.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default function SearchIllustration({ width = '62', height = '48' }) {
+  return (
+    <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <path
+          d="M36.001 3.218C47.482 9.838 51.403 24.52 44.782 36 38.162 47.482 23.48 51.403 12 44.782.518 38.162-3.403 23.48 3.218 12 9.838.518 24.52-3.403 36 3.218z"
+          id="a"
+        />
+      </defs>
+      <g fill="none" fillRule="evenodd">
+        <path d="M36.001 3.218C47.482 9.838 51.403 24.52 44.782 36 38.162 47.482 23.48 51.403 12 44.782.518 38.162-3.403 23.48 3.218 12 9.838.518 24.52-3.403 36 3.218z" />
+        <mask id="b" fill="#fff">
+          <use xlinkHref="#a" />
+        </mask>
+        <use fill="#CEE6E5" xlinkHref="#a" />
+        <path
+          d="M38 48v-2.618c0-6.696-4.58-12.296-10.72-13.798a8.159 8.159 0 0 0 4.76-7.427C32.04 19.653 28.44 16 24 16c-4.44 0-8.04 3.653-8.04 8.157a8.159 8.159 0 0 0 4.76 7.427C14.58 33.086 10 38.686 10 45.382v2.598"
+          fill="#9ACBCA"
+          mask="url(#b)"
+        />
+        <path fill="#9ACBCA" d="m45.34 35 17.124 10.33-1.55 2.57L43.79 37.568z" />
+      </g>
+    </svg>
+  );
+}

package/src/patient-search/search-results.component.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo, useState } from 'react';
+import { Dropdown } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { SearchTypes } from '../types';
+import PatientInfo from '../patient-info/patient-info.component';
+import styles from './search-results.scss';
+
+interface SearchResultsProps {
+  patients: Array<fhir.Patient>;
+  hidePanel?: any;
+  toggleSearchType: (searchMode: SearchTypes, patientUuid: string) => void;
+}
+
+type SortingCriteria = 'firstNameFirst' | 'lastNameFirst' | 'oldest' | 'youngest';
+
+const SearchResults: React.FC<SearchResultsProps> = ({ patients, toggleSearchType }) => {
+  const { t } = useTranslation();
+  const [selectedSortingCriteria, setSelectedSortingCriteria] = useState<SortingCriteria>('firstNameFirst');
+
+  const sortedPatient = useMemo(() => {
+    return patients.sort((patientA, patientB) => {
+      if (selectedSortingCriteria === 'oldest') {
+        return new Date(patientA.birthDate).getTime() - new Date(patientB.birthDate).getTime();
+      }
+      if (selectedSortingCriteria === 'youngest') {
+        return new Date(patientB.birthDate).getTime() - new Date(patientA.birthDate).getTime();
+      }
+      if (selectedSortingCriteria === 'firstNameFirst') {
+        return patientA.name?.[0].given?.join('') < patientB.name?.[0].given?.join('') ? -1 : 0;
+      }
+      if (selectedSortingCriteria === 'lastNameFirst') {
+        return patientA?.name?.[0].family < patientB?.name?.[0].family ? -1 : 0;
+      }
+    });
+  }, [patients, selectedSortingCriteria]);
+
+  const sortingCriteria = [
+    { id: 'firstNameFirst', label: t('firstNameSort', 'First name (a-z)') },
+    { id: 'lastNameFirst', label: t('lastNameSort', 'Last name (a-z)') },
+    { id: 'oldest', label: t('oldest', 'Oldest first') },
+    { id: 'youngest', label: t('youngest', 'Youngest first') },
+  ];
+
+  return (
+    <>
+      <div className={styles.sortingCriteriaSelect}>
+        <Dropdown
+          ariaLabel="sortBy"
+          id="sortingCriteriaDropdown"
+          items={sortingCriteria}
+          initialSelectedItem={sortingCriteria[0]}
+          label={`${t('sortBy', 'Sort by')}:`}
+          titleText={`${t('sortBy', 'Sort by')}:`}
+          type="inline"
+          size="sm"
+          onChange={({ selectedItem }) => setSelectedSortingCriteria(selectedItem.id as SortingCriteria)}
+        />
+      </div>
+      {sortedPatient.map((patient, index) => (
+        <div key={`search-result-${index}`} className={styles.patientChart}>
+          <div className={styles.container}>
+            <PatientInfo
+              patient={patient}
+              handlePatientInfoClick={() => {
+                toggleSearchType(SearchTypes.SCHEDULED_VISITS, patient.id);
+              }}
+            />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export default SearchResults;

package/src/patient-search/search-results.scss

@@ -0,0 +1,80 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientChart {
+  text-decoration: none;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .patientChart {
+  background-color: $ui-02;
+}
+
+.container {
+  & .patientBanner {
+    background-color: red !important;
+  }
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+}
+
+.patientAvatar {
+  width: spacing.$spacing-11;
+  height: spacing.$spacing-11;
+  margin: spacing.$spacing-05 spacing.$spacing-05 0;
+  border-radius: 1px;
+}
+
+.patientInfo {
+  width: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  margin: spacing.$spacing-05 0;
+  cursor: pointer;
+}
+
+.demographics {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  margin: 0.3rem 0;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+}
+
+.actionsContainer {
+  padding-top: spacing.$spacing-03;
+  margin-top: spacing.$spacing-05;
+}
+
+.sortingCriteriaSelect {
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  @include type.type-style('body-compact-02');
+  width: 100%;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: spacing.$spacing-05;
+  }
+
+  :global(.cds--list-box__menu) {
+    left: -7.5rem;
+  }
+
+  :global(.cds--label) {
+    margin-right: spacing.$spacing-02;
+  }
+}

package/src/patient-search/search-results.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { age } from '@openmrs/esm-framework';
+import SearchResults from './search-results.component';
+
+const mockAge = age as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    age: jest.fn(),
+  };
+});
+
+const patients = [
+  {
+    id: 'b73bee73-7bf0-4872-9657-ba9de0d93478',
+    name: [{ given: ['John'], family: 'Smith' }],
+    person: {
+      gender: 'Male',
+      age: 2,
+      birthdate: '2020-02-01T00:00:00.000+0000',
+      birthdateEstimated: true,
+      personName: {
+        display: 'John Smith',
+        uuid: '27698bff-4056-430c-824c-cb18cf9329d8',
+        givenName: 'John',
+        middleName: null,
+        familyName: 'Smith',
+        familyName2: null,
+        voided: false,
+      },
+      addresses: [
+        {
+          display: 'Bom Jesus Street',
+          uuid: '7eab94da-4b33-4da9-b352-da21a571221a',
+          preferred: true,
+          address1: 'Bom Jesus Street',
+          address2: null,
+          cityVillage: 'Recife',
+          stateProvince: 'Pernambuco',
+          country: 'Brazil',
+          postalCode: '50030-310',
+          countyDistrict: null,
+        },
+      ],
+      display: 'John Smith',
+      dead: false,
+      deathDate: null,
+    },
+    gender: 'Male',
+    birthDate: '2020-02-01T00:00:00.000+0000',
+    deceasedDateTime: null,
+    identifier: [{ value: '10001F0' }],
+    address: [{ city: 'Recife', country: 'Brazil', postalCode: '50030-310', state: 'Pernambuco', use: 'home' }],
+    telecom: [],
+    patientIdentifier: { identifier: [{ value: '10001F0' }] },
+  },
+];
+
+const mockToggleSearchType = jest.fn();
+
+describe('Search Results', () => {
+  it('should search results page', () => {
+    mockAge.mockReturnValue(35);
+    renderSearchResults();
+    expect(screen.getByText(/John Smith/)).toBeInTheDocument();
+    expect(screen.getByText(/35/)).toBeInTheDocument();
+    expect(screen.getByText(/Male/)).toBeInTheDocument();
+    expect(screen.getByText(/01 — Feb — 2020/i)).toBeInTheDocument();
+  });
+});
+
+const renderSearchResults = () => {
+  render(<SearchResults patients={patients} toggleSearchType={mockToggleSearchType} />);
+};

package/src/patient-search/search.resource.ts

@@ -0,0 +1,10 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export function findPatients(query: string, objectVersion: string, controller: AbortController, includeDead: boolean) {
+  const url = `/ws/rest/v1/patient?q=${query}&v=${objectVersion}&includeDead=${includeDead}`;
+
+  return openmrsFetch(url, {
+    method: 'GET',
+    signal: controller.signal,
+  });
+}

package/src/patient-search/visit-form/base-visit-type.component.tsx

@@ -0,0 +1,82 @@
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash-es/debounce';
+import isEmpty from 'lodash-es/isEmpty';
+import { Layer, Search, RadioButtonGroup, RadioButton, Tile } from '@carbon/react';
+import { useLayoutType, usePagination, VisitType } from '@openmrs/esm-framework';
+import EmptyDataIllustration from '../empty-data-illustration.component';
+import styles from './base-visit-type.scss';
+
+interface BaseVisitTypeProps {
+  onChange: (event) => void;
+  patientUuid: string;
+  visitTypes: Array<VisitType>;
+}
+
+const BaseVisitType: React.FC<BaseVisitTypeProps> = ({ onChange, visitTypes }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  const searchResults = useMemo(() => {
+    if (!isEmpty(searchTerm)) {
+      return visitTypes.filter((visitType) => visitType.display.toLowerCase().search(searchTerm.toLowerCase()) !== -1);
+    } else {
+      return visitTypes;
+    }
+  }, [searchTerm, visitTypes]);
+
+  const handleSearch = React.useMemo(() => debounce((searchTerm) => setSearchTerm(searchTerm), 300), []);
+
+  const { results, currentPage, goTo } = usePagination(searchResults, 5);
+
+  return (
+    <div className={`${styles.visitTypeOverviewWrapper} ${isTablet ? styles.tablet : styles.desktop}`}>
+      {results.length ? (
+        <>
+          {isTablet ? (
+            <Layer>
+              <Search
+                onChange={(event) => handleSearch(event.target.value)}
+                placeholder={t('searchForAVisitType', 'Search for a visit type')}
+                labelText=""
+              />
+            </Layer>
+          ) : (
+            <Search
+              onChange={(event) => handleSearch(event.target.value)}
+              placeholder={t('searchForAVisitType', 'Search for a visit type')}
+              labelText=""
+            />
+          )}
+
+          <RadioButtonGroup
+            className={styles.radioButtonGroup}
+            defaultSelected={results?.length === 1 && results[0].uuid}
+            orientation="vertical"
+            onChange={onChange}
+            name="radio-button-group"
+            valueSelected={results?.length >= 1 && results[0].uuid}>
+            {results.map(({ uuid, display, name }) => (
+              <RadioButton key={uuid} className={styles.radioButton} id={name} labelText={display} value={uuid} />
+            ))}
+          </RadioButtonGroup>
+        </>
+      ) : (
+        <Layer>
+          <Tile className={styles.tile}>
+            <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+              <h4>{t('visitType', 'Visit type')}</h4>
+            </div>
+            <EmptyDataIllustration />
+            <p className={styles.content}>
+              {t('noVisitTypes', 'There are no visit types to display for this patient')}
+            </p>
+          </Tile>
+        </Layer>
+      )}
+    </div>
+  );
+};
+
+export default BaseVisitType;