@kenyaemr/esm-service-queues-app 7.0.2-pre.65

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

@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  ContentSwitcher,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  FormGroup,
+  Layer,
+  Stack,
+  Switch,
+  TextInput,
+} from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { SearchTypes } from '../types';
+import styles from './advanced-search.scss';
+import { datePickerFormat, datePickerPlaceHolder } from '../constants';
+
+interface PatientSearchProps {
+  toggleSearchType: (searchMode: SearchTypes) => void;
+}
+
+enum fieldMatcherRange {
+  ANY = 'any',
+  ALL = 'all',
+}
+
+enum genders {
+  ANY = 'any',
+  MALE = 'male',
+  FEMALE = 'female',
+}
+
+const AdvancedSearch: React.FC<PatientSearchProps> = ({ toggleSearchType }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [firstName, setFirstName] = useState('');
+  const [middleName, setMiddleName] = useState('');
+  const [lastName, setLastName] = useState('');
+  const [gender, setGender] = useState('');
+  const [dateOfBirth, setDateOfBirth] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [postCode, setPostCode] = useState('');
+  const [lastVisitDate, setLastVisitDate] = useState('');
+  const [fieldMatcherRangeSwitcherValue, setFieldMatcherRangeSwitcherValue] = useState(0);
+  const [genderSwitcherValue, setGenderSwitcherValue] = useState(0);
+  const [searchParams, setSearchParams] = useState([]);
+  const [open, setOpen] = useState(false);
+
+  const handleSearch = () => {
+    setSearchParams([firstName, middleName, lastName, gender, dateOfBirth, phoneNumber, postCode, lastVisitDate]);
+  };
+
+  return (
+    <Form onSubmit={handleSearch} className={styles.form}>
+      <div>
+        <div className={styles.backButton}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+            iconDescription="Back to simple search"
+            size="sm"
+            onClick={() => toggleSearchType(SearchTypes.BASIC)}>
+            <span>{t('backToSimpleSearch', 'Back to simple search')}</span>
+          </Button>
+        </div>
+        <Stack gap={4} className={styles.grid}>
+          <Column>
+            <div className={styles.contentSwitcherContainer}>
+              <span>{t('match', 'Match')}</span>
+              <ContentSwitcher
+                size="sm"
+                className={styles.fieldRangeSwitcher}
+                onChange={({ index }) => setFieldMatcherRangeSwitcherValue(index)}>
+                <Switch name={fieldMatcherRange.ANY} text={t('any', 'Any')} />
+                <Switch name={fieldMatcherRange.ALL} text={t('all', 'All')} />
+              </ContentSwitcher>
+              <span>{t('fields', 'of the following fields')}:</span>
+            </div>
+          </Column>
+
+          <Column>
+            <h3 className={styles.heading}>{t('name', 'Name')}</h3>
+            <Layer>
+              <TextInput
+                className={styles.input}
+                id="firstName"
+                labelText={t('firstName', 'First name')}
+                onChange={(event) => setFirstName(event.target.value)}
+                value={firstName}
+              />
+            </Layer>
+            <Layer>
+              <TextInput
+                className={styles.input}
+                id="middleName"
+                labelText={t('middleName', 'Middle name')}
+                onChange={(event) => setMiddleName(event.target.value)}
+                value={middleName}
+              />
+            </Layer>
+            <Layer>
+              <TextInput
+                className={styles.input}
+                id="lastName"
+                labelText={t('lastName', 'Last name')}
+                onChange={(event) => setLastName(event.target.value)}
+                value={lastName}
+              />
+            </Layer>
+          </Column>
+          <span className={styles.spacer} />
+
+          <Column>
+            <h3 className={styles.heading}>{t('personalDetails', 'Personal details')}</h3>
+            <FormGroup legendText={t('sex', 'Sex')}>
+              <ContentSwitcher
+                size="sm"
+                className={styles.genderSwitcher}
+                onChange={({ index }) => setGenderSwitcherValue(index)}>
+                <Switch name={genders.ANY} text={t('any', 'Any')} />
+                <Switch name={genders.MALE} text={t('male', 'Male')} />
+                <Switch name={genders.FEMALE} text={t('female', 'Female')} />
+              </ContentSwitcher>
+            </FormGroup>
+            <Layer>
+              <DatePicker datePickerType="single" dateFormat={datePickerFormat}>
+                <DatePickerInput
+                  id="dateOfBirth"
+                  placeholder={datePickerPlaceHolder}
+                  labelText={t('dateOfBirth', 'Date of birth')}
+                  onChange={(event) => setDateOfBirth(event.target.value)}
+                  type="date"
+                />
+              </DatePicker>
+            </Layer>
+            <Layer>
+              <TextInput
+                className={styles.input}
+                id="phoneNumber"
+                labelText={t('phoneNumber', 'Phone number')}
+                onChange={(event) => setPhoneNumber(event.target.value)}
+                value={phoneNumber}
+              />
+            </Layer>
+            <Layer>
+              <TextInput
+                className={styles.input}
+                id="postCode"
+                labelText={t('postCode', 'Post code')}
+                onChange={(event) => setPostCode(event.target.value)}
+                value={postCode}
+              />
+            </Layer>
+          </Column>
+          <span className={styles.spacer} />
+
+          <Column>
+            <h3 className={styles.heading}>{t('lastVisit', 'Last visit')}</h3>
+            <Layer>
+              <DatePicker datePickerType="single" dateFormat={datePickerFormat}>
+                <DatePickerInput
+                  id="lastVisitDate"
+                  placeholder={datePickerPlaceHolder}
+                  labelText={t('lastVisitDate', 'Date')}
+                  onChange={(event) => setLastVisitDate(event.target.value)}
+                  type="date"
+                  width={'120px'}
+                />
+              </DatePicker>
+            </Layer>
+          </Column>
+        </Stack>
+      </div>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={() => toggleSearchType(SearchTypes.BASIC)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('search', 'Search')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AdvancedSearch;

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

@@ -0,0 +1,154 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 6rem);
+}
+
+.grid {
+  margin: 0 1rem;
+  padding: 0rem;
+}
+
+.row {
+  margin: 0;
+
+  :global(.cds--col) {
+    :global(.cds--form-item) {
+      &:not(:first-of-type):not(:last-of-type) {
+        margin: 1rem 0;
+      }
+    }
+
+    :global(.cds--fieldset) {
+      margin: 0;
+    }
+
+    :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
+      width: 10rem;
+    }
+  }
+}
+
+.heading {
+  @include type.type-style('heading-compact-02');
+  margin-bottom: 0.5rem;
+}
+
+.spacer {
+  margin-top: 2rem;
+  display: inline-block;
+}
+
+.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;
+    }
+  }
+}
+
+.advancePatientSearchContainer {
+  margin: 0 spacing.$spacing-05;
+
+  & .backButton {
+    margin: 0;
+  }
+
+  & > button {
+    padding-left: 0;
+  }
+}
+
+.label01 {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-03 0;
+}
+
+.formTextInput {
+  margin-bottom: spacing.$spacing-04;
+}
+
+.contentSwitcherContainer {
+  display: flex;
+  align-items: center;
+  height: spacing.$spacing-09;
+  margin-bottom: spacing.$spacing-05;
+
+  & > span {
+    @include type.type-style('heading-compact-01');
+    color: $text-02;
+  }
+}
+
+.formTitle {
+  font-weight: bold;
+  @include type.type-style('heading-compact-02');
+  margin-bottom: spacing.$spacing-02;
+}
+
+.fieldRangeSwitcher {
+  width: 8rem;
+  margin: 0 spacing.$spacing-03 0;
+}
+
+.genderSwitcher {
+  width: 18rem;
+  margin: 0.25rem 0 1rem;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .form {
+    height: calc(100vh - 6rem);
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: calc(100vh - 3rem);
+  }
+}
+
+.input {
+  width: 13.5rem;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AdvancedSearch from './advanced-search.component';
+
+describe('AdvancedSearch: ', () => {
+  test('renders the advanced patient search in an overlay', () => {
+    renderAdvancedSearch();
+
+    expect(screen.getByRole('button', { name: /back to simple search/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
+    expect(screen.findAllByText(/any/i));
+    expect(screen.getByRole('tab', { name: /^male$/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /^female$/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /name/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /personal details/i })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /last visit/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /first name/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /middle name/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /last name/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /phone number/i })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: /post code/i })).toBeInTheDocument();
+  });
+});
+
+function renderAdvancedSearch() {
+  const toggleSearchType = jest.fn();
+  render(<AdvancedSearch toggleSearchType={toggleSearchType} />);
+}

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

@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash-es/debounce';
+import { Search, Button, InlineLoading, Layer, Tile } from '@carbon/react';
+import { Search as SearchIcon } from '@carbon/react/icons';
+import EmptyDataIllustration from './empty-data-illustration.component';
+import SearchIllustration from './search-illustration.component';
+import SearchResults from './search-results.component';
+import usePatients from './hooks/usePatients';
+import { SearchTypes } from '../types';
+import styles from './basic-search.scss';
+
+interface BasicSearchProps {
+  toggleSearchType: (searchMode: SearchTypes) => void;
+}
+
+const searchTimeoutInMs = 300;
+
+const BasicSearch: React.FC<BasicSearchProps> = ({ toggleSearchType }) => {
+  const { t } = useTranslation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [query, setQuery] = useState<string>(null);
+  const { patients, isLoading } = usePatients(query);
+
+  const handleSearch = useMemo(() => debounce((searchTerm) => setSearchTerm(searchTerm), searchTimeoutInMs), []);
+
+  const performSearch = () => setQuery(searchTerm);
+
+  return (
+    <div className={patients?.length ? styles.lightBackground : styles.resultsContainer}>
+      <div className={styles.searchboxContainer}>
+        <Layer className={styles.searchboxLayer}>
+          <Search
+            autoFocus
+            className={styles.searchInput}
+            labelText={t('searchForPatient', 'Search for a patient')}
+            placeholder={t('searchboxPlaceholder', 'Search for a patient name or ID number')}
+            onChange={(event) => handleSearch(event.target.value)}
+            onClear={() => setQuery(null)}
+          />
+        </Layer>
+        <Button onClick={performSearch} iconDescription="Basic search" size="md" kind="secondary">
+          {t('search', 'Search')}
+        </Button>
+      </div>
+      {
+        <>
+          {query === null && (
+            <div>
+              <div className={styles.tileContainer}>
+                <Layer>
+                  <Tile className={styles.tile}>
+                    <SearchIllustration />
+                    <div className={styles.helperText}>
+                      <p className={styles.primaryText}>{t('primaryHelperText', 'Search for a patient')}</p>
+                      <p className={styles.secondaryText}>
+                        {t('secondaryHelperText', "Type the patient's name or unique ID number")}
+                      </p>
+                    </div>
+                  </Tile>
+                </Layer>
+              </div>
+              <p className={styles.separator}>{t('or', 'or')}</p>
+              <div className={styles.buttonContainer}>
+                <Button
+                  kind="ghost"
+                  disabled
+                  iconDescription="Advanced search"
+                  renderIcon={(props) => <SearchIcon size={16} {...props} />}
+                  onClick={() => toggleSearchType(SearchTypes.ADVANCED)}>
+                  {t('advancedSearch', 'Advanced search')}
+                </Button>
+              </div>
+            </div>
+          )}
+          {isLoading && (
+            <div className={styles.loadingContainer}>
+              <InlineLoading description={t('loading', 'Loading...')} />
+            </div>
+          )}
+
+          {patients.length > 0 && <SearchResults toggleSearchType={toggleSearchType} patients={patients} />}
+
+          {patients.length === 0 && query !== null && !isLoading && (
+            <div className={styles.resultsContainer}>
+              <div style={{ margin: '1rem' }}>
+                <p className={styles.resultsText}>{t('noResultsFound', 'No results found')}</p>
+                <Layer>
+                  <Tile className={styles.emptySearchResultsTile}>
+                    <EmptyDataIllustration />
+                    <p className={styles.emptyResultText}>
+                      {t('noPatientFoundMessage', 'Sorry, no patient has been found')}
+                    </p>
+                    <p className={styles.actionText}>
+                      <span>
+                        {t('trySearchWithPatientUniqueID', "Try searching with the patient's unique ID number")}
+                      </span>
+                      <br />
+                      <span>{t('orPatientName', "OR the patient's name(s)")}</span>
+                    </p>
+                  </Tile>
+                </Layer>
+              </div>
+            </div>
+          )}
+        </>
+      }
+    </div>
+  );
+};
+
+export default BasicSearch;

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

@@ -0,0 +1,139 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.searchboxContainer {
+  display: flex;
+  align-items: center;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.searchboxLayer {
+  flex-grow: 1;
+}
+
+.tileContainer {
+  :global(.omrs-breakpoint-gt-tablet) & {
+    margin: 0 1.5rem 0;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    width: 60%;
+    margin: auto;
+  }
+}
+
+.tile {
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 0 1.5rem;
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.helperText {
+  margin-top: 1.25rem;
+  color: $text-02;
+
+  .primaryText {
+    @include type.type-style('heading-compact-01');
+  }
+
+  .secondaryText {
+    width: 12rem;
+    margin-top: 0.25rem;
+    @include type.type-style('body-01');
+  }
+}
+
+.separator {
+  @include type.type-style('heading-03');
+  color: $text-02;
+  width: 12rem;
+  margin: 3rem auto;
+  overflow: hidden;
+  text-align: center;
+
+  &::before,
+  &::after {
+    background-color: $text-03;
+    content: '';
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+  }
+
+  &::before {
+    right: 1rem;
+    margin-left: -50%;
+  }
+
+  &::after {
+    left: 1rem;
+    margin-right: -50%;
+  }
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.resultsContainer {
+  height: 100vh;
+}
+
+.lightBackground {
+  @extend .resultsContainer;
+  background-color: white;
+}
+
+.loadingContainer {
+  height: 80vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    width: fit-content !important;
+  }
+}
+
+.helperText {
+  color: var(--omrs-color-ink-medium-contrast);
+  margin-left: 2.375rem;
+}
+
+.resultsText {
+  @include type.type-style('label-01');
+  color: $text-02;
+  border-bottom: 0.063rem solid $ui-03;
+  padding: spacing.$spacing-03 0rem;
+}
+
+.emptyResultText {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: 0.313rem;
+}
+
+.actionText {
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.emptySearchResultsTile {
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  padding: spacing.$spacing-09 0rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
+  background-color: $ui-02;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BasicSearch from './basic-search.component';
+
+describe('BasicSearch: ', () => {
+  test('renders the basic patient search in an overlay', () => {
+    renderBasicSearch();
+
+    const searchbox = screen.getByRole('searchbox', { name: /search for a patient/i });
+    const searchButton = screen.getByRole('button', { name: /^search$/i });
+    expect(searchbox).toBeInTheDocument();
+    expect(searchButton).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/search for a patient name or id number/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /advanced search/i })).toBeDisabled();
+    expect(screen.getByText('or')).toBeInTheDocument();
+    expect(screen.getByText(/type the patient's name or unique id number/i)).toBeInTheDocument();
+  });
+});
+
+function renderBasicSearch() {
+  const toggleSearchType = jest.fn();
+  render(<BasicSearch toggleSearchType={toggleSearchType} />);
+}

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+const EmptyDataIllustration = ({ width = '61', height = '59' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 61 59">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#E0E0E0"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#E0E0E0"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};
+
+export default EmptyDataIllustration;