@kenyaemr/esm-service-queues-app 8.1.1-pre.129 → 8.1.2-pre.152

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

@@ -1,112 +0,0 @@
-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

@@ -1,139 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.searchboxContainer {
-  display: flex;
-  align-items: center;
-  margin-bottom: layout.$spacing-05;
-}
-
-.searchboxLayer {
-  flex-grow: 1;
-}
-
-.tileContainer {
-  :global(.omrs-breakpoint-gt-tablet) & {
-    margin: 0 layout.$spacing-06 0;
-  }
-
-  :global(.omrs-breakpoint-lt-desktop) & {
-    width: 60%;
-    margin: auto;
-  }
-}
-
-.tile {
-  display: flex;
-  flex-flow: column wrap;
-  align-items: center;
-  justify-content: center;
-  padding: layout.$spacing-07 0 layout.$spacing-06;
-  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: layout.$spacing-02;
-    @include type.type-style('body-01');
-  }
-}
-
-.separator {
-  @include type.type-style('heading-03');
-  color: $text-02;
-  width: 12rem;
-  margin: layout.$spacing-09 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: layout.$spacing-05;
-    margin-left: -50%;
-  }
-
-  &::after {
-    left: layout.$spacing-05;
-    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: layout.$spacing-03 0;
-}
-
-.emptyResultText {
-  @include type.type-style('heading-compact-01');
-  color: $text-02;
-  margin-top: layout.$spacing-05;
-  margin-bottom: 0.313rem;
-}
-
-.actionText {
-  @include type.type-style('body-01');
-  color: $text-02;
-}
-
-.emptySearchResultsTile {
-  text-align: center;
-  margin-top: layout.$spacing-05;
-  padding: layout.$spacing-09 0;
-}
-
-:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
-  background-color: $ui-02;
-}

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

@@ -1,18 +0,0 @@
-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', () => {
-    render(<BasicSearch toggleSearchType={jest.fn()} />);
-
-    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();
-  });
-});

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

@@ -1,41 +0,0 @@
-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;

package/src/patient-search/hooks/useActivePatientEnrollment.tsx

@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { type PatientProgram } from '../../types';
-import uniqBy from 'lodash-es/uniqBy';
-
-export const useActivePatientEnrollment = (patientUuid: string) => {
-  const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
-  const apiUrl = `${restBaseUrl}/programenrollment?patient=${patientUuid}&v=${customRepresentation}`;
-
-  const { data, error, isLoading } = useSWR<{ data: { results: Array<PatientProgram> } }>(
-    patientUuid ? apiUrl : null,
-    openmrsFetch,
-  );
-
-  const activePatientEnrollment = useMemo(
-    () =>
-      data?.data.results
-        .sort((a, b) => (b.dateEnrolled > a.dateEnrolled ? 1 : -1))
-        .filter((enrollment) => enrollment.dateCompleted === null) ?? [],
-    [data?.data.results],
-  );
-
-  return {
-    activePatientEnrollment: uniqBy(activePatientEnrollment, (program) => program?.program?.uuid),
-    error,
-    isLoading,
-  };
-};

package/src/patient-search/hooks/useDefaultLocation.ts

@@ -1,14 +0,0 @@
-import { type FetchResponse, openmrsFetch, useConfig } from '@openmrs/esm-framework';
-import useSWRImmutable from 'swr/immutable';
-
-export const useDefaultLoginLocation = () => {
-  const config = useConfig();
-  const apiUrl = config.defaultFacilityUrl;
-  const { data, error, isLoading } = useSWRImmutable<FetchResponse>(apiUrl, openmrsFetch);
-
-  return {
-    defaultFacility: data ? data?.data : null,
-    isLoading: isLoading,
-    error,
-  };
-};

package/src/patient-search/hooks/usePatients.tsx

@@ -1,25 +0,0 @@
-import { useMemo } from 'react';
-import useSWR from 'swr';
-import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
-
-interface FHIRResponse {
-  entry: Array<{ resource: fhir.Patient }>;
-  total: number;
-  type: string;
-  resourceType: string;
-}
-
-const usePatients = (searchTerm: string) => {
-  const apiUrl = `${fhirBaseUrl}/Patient?name=${searchTerm}&_summary=data`;
-
-  const { data, error, isLoading } = useSWR<{ data: FHIRResponse }>(searchTerm !== null ? apiUrl : null, openmrsFetch);
-
-  const searchedPatients = useMemo(
-    () => data?.data?.entry?.map((response) => response.resource) ?? [],
-    [data?.data?.entry],
-  );
-
-  return { patients: searchedPatients, isLoading: isLoading && searchTerm !== null, error };
-};
-
-export default usePatients;

package/src/patient-search/hooks/useRecommendedVisitTypes.tsx

@@ -1,35 +0,0 @@
-import useSWR from 'swr';
-import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
-import { type ConfigObject } from '../../config-schema';
-import { useMemo } from 'react';
-
-interface EnrollmentVisitType {
-  dataDependencies: Array<string>;
-  enrollmentOptions: object;
-  incompatibleWith: Array<string>;
-  name: string;
-  visitTypes: { allowed: Array<EnrollmentVisitType>; disallowed: Array<EnrollmentVisitType> };
-}
-
-export const useRecommendedVisitTypes = (
-  patientUuid: string,
-  enrollmentUuid: string,
-  programUuid: string,
-  locationUuid: string,
-) => {
-  const { visitTypeResourceUrl, showRecommendedVisitTypeTab } = useConfig<ConfigObject>();
-
-  const apiUrl = `${visitTypeResourceUrl}${patientUuid}/program/${programUuid}/enrollment/${enrollmentUuid}?intendedLocationUuid=${locationUuid}`;
-
-  const { data, error, isLoading } = useSWR<{ data: EnrollmentVisitType }>(
-    showRecommendedVisitTypeTab && patientUuid && enrollmentUuid && programUuid ? apiUrl : null,
-    openmrsFetch,
-  );
-
-  const recommendedVisitTypes = useMemo(() => data?.data?.visitTypes?.allowed.map(mapToVisitType) ?? [], [data]);
-  return { recommendedVisitTypes, error, isLoading };
-};
-
-const mapToVisitType = (visitType) => {
-  return { ...visitType, display: visitType.name };
-};

package/src/patient-search/hooks/useScheduledVisits.ts

@@ -1,52 +0,0 @@
-import useSWR from 'swr';
-import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
-import { type AppointmentsFetchResponse } from '../../types';
-
-const fetcher = (appointmentsSearchUrl: string, patientUuid: string) => {
-  const abortController = new AbortController();
-  let startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
-
-  return openmrsFetch(appointmentsSearchUrl, {
-    method: 'POST',
-    signal: abortController.signal,
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: {
-      patientUuid: patientUuid,
-      startDate: startDate,
-    },
-  });
-};
-
-export function useScheduledVisits(patientUuid: string) {
-  const appointmentsSearchUrl = `${restBaseUrl}/appointments/search`;
-
-  const { data, error, isLoading } = useSWR<AppointmentsFetchResponse, Error>(
-    patientUuid ? [appointmentsSearchUrl, patientUuid] : null,
-    ([appointmentsSearchUrl, patientUuid]) => fetcher(appointmentsSearchUrl, patientUuid as string),
-  );
-
-  const appointments = data?.data?.length
-    ? data.data.sort((a, b) => (b.startDateTime > a.startDateTime ? 1 : -1))
-    : null;
-
-  // visits + or - 7 days before visit date
-  const recentVisits = appointments?.filter(
-    (appointment) =>
-      dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs().add(7, 'day')) ||
-      dayjs((appointment.startDateTime / 1000) * 1000).isBefore(dayjs().subtract(7, 'day')),
-  );
-
-  // visits past 7 days
-  const futureVisits = appointments?.filter((appointment) =>
-    dayjs((appointment.startDateTime / 1000) * 1000).isAfter(dayjs().add(7, 'day')),
-  );
-
-  return {
-    appointments: data ? { recentVisits, futureVisits } : null,
-    error,
-    isLoading,
-  };
-}