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

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

@@ -0,0 +1,43 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientBannerContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: $ui-01;
+  border-top: 1px solid $ui-03;
+  border-bottom: 1px solid $ui-03;
+}
+
+.patientBanner {
+  display: flex;
+  flex-direction: row;
+}
+
+.patientPhoto {
+  margin: 1rem;
+}
+
+.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: spacing.$spacing-03;
+      margin-left: 0rem !important;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}

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

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+
+import { SearchTypes } from '../types';
+import PatientScheduledVisits from './patient-scheduled-visits.component';
+import VisitForm from './visit-form/visit-form.component';
+import {
+  ArrowLeftIcon,
+  type DefaultWorkspaceProps,
+  displayName,
+  ErrorState,
+  PatientBannerContactDetails,
+  PatientBannerPatientInfo,
+  PatientBannerToggleContactDetailsButton,
+  PatientPhoto,
+  usePatient,
+  useVisit,
+} from '@openmrs/esm-framework';
+import ExistingVisitFormComponent from './visit-form/existing-visit-form.component';
+import styles from './patient-search.scss';
+import { Button, DataTableSkeleton } from '@carbon/react';
+import { useScheduledVisits } from './hooks/useScheduledVisits';
+import isNil from 'lodash-es/isNil';
+import { useTranslation } from 'react-i18next';
+
+interface PatientSearchProps extends DefaultWorkspaceProps {
+  selectedPatientUuid: string;
+  currentServiceQueueUuid?: string;
+  handleBackToSearchList?: () => void;
+}
+
+export const AddPatientToQueueContext = React.createContext({
+  currentServiceQueueUuid: '',
+});
+
+const PatientSearch: React.FC<PatientSearchProps> = ({
+  closeWorkspace,
+  selectedPatientUuid,
+  currentServiceQueueUuid,
+  handleBackToSearchList,
+}) => {
+  const { t } = useTranslation();
+  const { patient } = usePatient(selectedPatientUuid);
+  const { activeVisit } = useVisit(selectedPatientUuid);
+  const [searchType, setSearchType] = useState<SearchTypes>(SearchTypes.SCHEDULED_VISITS);
+  const [showContactDetails, setContactDetails] = useState(false);
+  const { appointments, isLoading, isError } = useScheduledVisits(selectedPatientUuid);
+
+  const hasAppointments = !(isNil(appointments?.futureVisits) && isNil(appointments?.recentVisits));
+
+  const backButtonDescription =
+    searchType === SearchTypes.VISIT_FORM && hasAppointments
+      ? t('backToScheduledVisits', 'Back to scheduled visits')
+      : t('backToSearchResults', 'Back to search results');
+
+  const toggleSearchType = (searchType: SearchTypes) => {
+    setSearchType(searchType);
+  };
+
+  const handleBackToAction = () => {
+    if (searchType === SearchTypes.VISIT_FORM && hasAppointments) {
+      setSearchType(SearchTypes.SCHEDULED_VISITS);
+    } else {
+      setSearchType(SearchTypes.SEARCH_RESULTS);
+    }
+  };
+
+  useEffect(() => {
+    if (searchType === SearchTypes.SCHEDULED_VISITS && appointments && !hasAppointments) {
+      setSearchType(SearchTypes.VISIT_FORM);
+    }
+  }, [hasAppointments, appointments]);
+
+  useEffect(() => {
+    if (searchType === SearchTypes.SEARCH_RESULTS) {
+      handleBackToSearchList && handleBackToSearchList();
+    }
+  }, [searchType, handleBackToSearchList]);
+
+  const patientName = patient && displayName(patient);
+  return patient ? (
+    <AddPatientToQueueContext.Provider value={{ currentServiceQueueUuid }}>
+      <div className={styles.patientBannerContainer}>
+        <div className={styles.patientBanner}>
+          <div className={styles.patientPhoto}>
+            <PatientPhoto patientUuid={patient.id} patientName={patientName} />
+          </div>
+          <PatientBannerPatientInfo patient={patient} />
+          <PatientBannerToggleContactDetailsButton
+            showContactDetails={showContactDetails}
+            toggleContactDetails={() => setContactDetails(!showContactDetails)}
+          />
+        </div>
+        {showContactDetails ? (
+          <PatientBannerContactDetails patientId={patient.id} deceased={patient.deceasedBoolean} />
+        ) : null}
+      </div>
+      <div className={styles.backButton}>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowLeftIcon size={24} {...props} />}
+          iconDescription={backButtonDescription}
+          size="sm"
+          onClick={() => handleBackToAction()}>
+          <span>{backButtonDescription}</span>
+        </Button>
+      </div>
+      <div>
+        {activeVisit ? (
+          <ExistingVisitFormComponent visit={activeVisit} closeWorkspace={closeWorkspace} />
+        ) : (
+          <>
+            {isError ? (
+              <ErrorState headerTitle={t('errorFetchingAppointments', 'Error fetching appointments')} error={isError} />
+            ) : null}
+
+            {isLoading && !isError ? (
+              <DataTableSkeleton role="progressbar" />
+            ) : searchType === SearchTypes.SCHEDULED_VISITS && hasAppointments ? (
+              <PatientScheduledVisits
+                appointments={appointments}
+                patientUuid={selectedPatientUuid}
+                toggleSearchType={toggleSearchType}
+                closeWorkspace={closeWorkspace}
+              />
+            ) : searchType === SearchTypes.VISIT_FORM ? (
+              <VisitForm patientUuid={selectedPatientUuid} closeWorkspace={closeWorkspace} />
+            ) : null}
+          </>
+        )}
+      </div>
+    </AddPatientToQueueContext.Provider>
+  ) : null;
+};
+
+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
+          aria-label="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, restBaseUrl } from '@openmrs/esm-framework';
+
+export function findPatients(query: string, objectVersion: string, controller: AbortController, includeDead: boolean) {
+  const url = `${restBaseUrl}/patient?q=${query}&v=${objectVersion}&includeDead=${includeDead}`;
+
+  return openmrsFetch(url, {
+    method: 'GET',
+    signal: controller.signal,
+  });
+}

package/src/patient-search/visit-form/existing-visit-form.component.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback, useState } from 'react';
+import { Button, ButtonSet, Form, Row } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  type ConfigObject,
+  ExtensionSlot,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  type Visit,
+} from '@openmrs/esm-framework';
+import { postQueueEntry } from '../../active-visits/active-visits-table.resource';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+import styles from './visit-form.scss';
+import classNames from 'classnames';
+import VisitFormQueueFields from '../visit-form-queue-fields/visit-form-queue-fields.component';
+
+interface ExistingVisitFormProps {
+  closeWorkspace: () => void;
+  visit: Visit;
+}
+
+const ExistingVisitForm: React.FC<ExistingVisitFormProps> = ({ visit, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const config = useConfig<ConfigObject>();
+  const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const [{ service, priority, status, sortWeight, queueLocation }, setVisitFormFields] = useState({
+    service: null,
+    priority: null,
+    status: null,
+    sortWeight: null,
+    queueLocation: null,
+  });
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      setIsSubmitting(true);
+
+      postQueueEntry(
+        visit.uuid,
+        service,
+        visit.patient.uuid,
+        priority,
+        status,
+        sortWeight,
+        queueLocation,
+        visitQueueNumberAttributeUuid,
+      ).then(
+        ({ status }) => {
+          if (status === 201) {
+            showSnackbar({
+              kind: 'success',
+              isLowContrast: true,
+              title: t('addPatientToQueue', 'Add patient to queue'),
+              subtitle: t('queueEntryAddedSuccessfully', 'Queue entry added successfully'),
+            });
+            closeWorkspace();
+            setIsSubmitting(false);
+            mutateQueueEntries();
+          }
+        },
+        (error) => {
+          let subtitle = error?.message;
+          const err = error?.responseBody?.error?.message;
+          if (err && err === '[queue.entry.duplicate.patient]') {
+            subtitle = t('patientAlreadyInQueue', 'Patient is already in the queue');
+          }
+          showSnackbar({
+            title: t('queueEntryError', 'Error adding patient to the queue'),
+            kind: 'error',
+            subtitle,
+          });
+          setIsSubmitting(false);
+        },
+      );
+    },
+    [closeWorkspace, mutateQueueEntries, visit, t, visitQueueNumberAttributeUuid],
+  );
+
+  return visit ? (
+    <>
+      {isTablet && (
+        <Row className={styles.headerGridRow}>
+          <ExtensionSlot
+            name="visit-form-header-slot"
+            className={styles.dataGridRow}
+            state={{ patientUuid: visit.patient.uuid }}
+          />
+        </Row>
+      )}
+      <Form className={classNames(styles.form, styles.container)} onSubmit={handleSubmit}>
+        <VisitFormQueueFields setFormFields={setVisitFormFields} />
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button className={styles.button} disabled={isSubmitting} kind="primary" type="submit">
+            {t('addPatientToQueue', 'Add patient to queue')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </>
+  ) : null;
+};
+
+export default ExistingVisitForm;

package/src/patient-search/visit-form/queue.resource.ts

@@ -0,0 +1,64 @@
+import { openmrsFetch, restBaseUrl, toDateObjectStrict, toOmrsIsoString } from '@openmrs/esm-framework';
+import { generateVisitQueueNumber } from '../../active-visits/active-visits-table.resource';
+import { type Appointment } from '../../types';
+
+export async function postQueueEntry(
+  visitUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  queueServiceUuid: string,
+  appointment: Appointment,
+  locationUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await Promise.all([
+    saveAppointment(appointment),
+    generateVisitQueueNumber(locationUuid, visitUuid, queueServiceUuid, visitQueueNumberAttributeUuid),
+  ]);
+
+  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: visitUuid,
+      queueEntry: {
+        status: status,
+        priority: priority,
+        queue: queueServiceUuid,
+        patient: patientUuid,
+        startedAt: new Date(),
+      },
+    },
+  });
+}
+
+export async function saveAppointment(appointment: Appointment) {
+  const abortController = new AbortController();
+
+  await openmrsFetch(`${restBaseUrl}/appointment`, {
+    method: 'POST',
+    signal: abortController.signal,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: {
+      patientUuid: appointment?.patient.uuid,
+      serviceUuid: appointment?.service?.uuid,
+      startDateTime: appointment?.startDateTime,
+      endDateTime: appointment?.endDateTime,
+      appointmentKind: appointment?.appointmentKind,
+      locationUuid: appointment?.location?.uuid,
+      comments: appointment?.comments,
+      status: 'CheckedIn',
+      appointmentNumber: appointment?.appointmentNumber,
+      uuid: appointment?.uuid,
+      providerUuid: appointment?.provider?.uuid,
+    },
+  });
+}