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

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;

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

@@ -0,0 +1,29 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { PatientProgram } from '../../types';
+import uniqBy from 'lodash-es/uniqBy';
+const customRepresentation = `custom:(uuid,display,program,dateEnrolled,dateCompleted,location:(uuid,display))`;
+
+export const useActivePatientEnrollment = (patientUuid: string) => {
+  const apiUrl = `/ws/rest/v1/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.tsx

@@ -0,0 +1,14 @@
+import { 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,
+    isError: error,
+  };
+};

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

@@ -0,0 +1,25 @@
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+
+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/useQueueLocations.tsx

@@ -0,0 +1,20 @@
+import useSWR from 'swr';
+import { fhirBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+
+interface FHIRResponse {
+  entry: Array<{ resource: fhir.Location }>;
+  total: number;
+  type: string;
+  resourceType: string;
+}
+export function useQueueLocations() {
+  const apiUrl = `${fhirBaseUrl}/Location?_summary=data&_tag=queue location`;
+  const { data, error, isLoading } = useSWR<{ data: FHIRResponse }>(apiUrl, openmrsFetch);
+
+  const queueLocations = useMemo(
+    () => data?.data?.entry?.map((response) => response.resource) ?? [],
+    [data?.data?.entry],
+  );
+  return { queueLocations: queueLocations ? queueLocations : [], isLoading, error };
+}

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

@@ -0,0 +1,36 @@
+import useSWR from 'swr';
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import { ConfigObject, OutpatientConfig } 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 } = useConfig() as OutpatientConfig;
+  const { showRecommendedVisitTypeTab } = useConfig() as 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.tsx

@@ -0,0 +1,50 @@
+import useSWR from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { AppointmentsFetchResponse } from '../../types';
+
+export function useScheduledVisits(patientUuid: string) {
+  const abortController = new AbortController();
+  let startDate = dayjs(new Date().toISOString()).subtract(6, 'month').toISOString();
+  const appointmentsSearchUrl = `/ws/rest/v1/appointments/search`;
+
+  const fetcher = () =>
+    openmrsFetch(appointmentsSearchUrl, {
+      method: 'POST',
+      signal: abortController.signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        patientUuid: patientUuid,
+        startDate: startDate,
+      },
+    });
+
+  const { data, error, isLoading } = useSWR<AppointmentsFetchResponse, Error>(
+    patientUuid ? appointmentsSearchUrl : null,
+    fetcher,
+  );
+
+  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,
+    isError: error,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,350 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  Switch,
+  ContentSwitcher,
+  RadioTile,
+  TileGroup,
+  DataTableSkeleton,
+  InlineLoading,
+  InlineNotification,
+} from '@carbon/react';
+import {
+  formatDatetime,
+  useLayoutType,
+  parseDate,
+  ErrorState,
+  toOmrsIsoString,
+  toDateObjectStrict,
+  showNotification,
+  showToast,
+  useSession,
+  useLocations,
+  NewVisitPayload,
+  saveVisit,
+  useVisitTypes,
+  useVisit,
+  useConfig,
+  ConfigObject,
+} from '@openmrs/esm-framework';
+import { Appointment, SearchTypes } from '../types';
+import styles from './patient-scheduled-visits.scss';
+import { useScheduledVisits } from './hooks/useScheduledVisits';
+import isNil from 'lodash-es/isNil';
+import {
+  usePriority,
+  useServices,
+  useStatus,
+  useVisitQueueEntries,
+} from '../active-visits/active-visits-table.resource';
+import { addQueueEntry } from './visit-form/queue.resource';
+import { first } from 'rxjs/operators';
+import { convertTime12to24, amPm } from '../helpers/time-helpers';
+import dayjs from 'dayjs';
+import head from 'lodash-es/head';
+import { useQueueLocations } from './hooks/useQueueLocations';
+interface PatientScheduledVisitsProps {
+  toggleSearchType: (searchMode: SearchTypes, patientUuid, mode) => void;
+  patientUuid: string;
+  closePanel: () => void;
+}
+
+enum visitType {
+  RECENT = 'Recent',
+  FUTURE = 'Future',
+}
+
+const ScheduledVisits: React.FC<{
+  visits;
+  visitType;
+  scheduledVisitHeader;
+  patientUuid;
+  closePanel: () => void;
+}> = ({ visits, scheduledVisitHeader, patientUuid, closePanel }) => {
+  const { t } = useTranslation();
+  const [visitsIndex, setVisitsIndex] = useState(0);
+  const [hasPriority, setHasPriority] = useState(false);
+  const [priority, setPriority] = useState('');
+  const { priorities, isLoading } = usePriority();
+  const { statuses } = useStatus();
+  const [userLocation, setUserLocation] = useState('');
+  const locations = useLocations();
+  const session = useSession();
+  const { services } = useServices(userLocation);
+  const { mutate } = useVisitQueueEntries('', '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [timeFormat, setTimeFormat] = useState<amPm>(new Date().getHours() >= 12 ? 'PM' : 'AM');
+  const [visitDate, setVisitDate] = useState(new Date());
+  const [visitTime, setVisitTime] = useState(dayjs(new Date()).format('hh:mm'));
+  const [appointment, setAppointment] = useState<Appointment>();
+  const [patientId, setPatientId] = useState('');
+  const allVisitTypes = useVisitTypes();
+  const { currentVisit } = useVisit(patientUuid);
+  const config = useConfig() as ConfigObject;
+  const visitQueueNumberAttributeUuid = config.concepts.visitQueueNumberAttributeUuid;
+  const { queueLocations } = useQueueLocations();
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState(queueLocations[0]?.id);
+
+  useEffect(() => {
+    if (!userLocation && session?.sessionLocation !== null) {
+      setUserLocation(session?.sessionLocation?.uuid);
+    } else if (!userLocation && locations) {
+      setUserLocation(head(locations)?.uuid);
+    }
+  }, [session, locations, userLocation]);
+
+  const handleSubmit = useCallback(
+    (event) => {
+      setIsSubmitting(true);
+
+      const [hours, minutes] = convertTime12to24(visitTime, timeFormat);
+      const visitType = [...allVisitTypes].shift().uuid;
+
+      const payload: NewVisitPayload = {
+        patient: patientId,
+        startDatetime: toDateObjectStrict(
+          toOmrsIsoString(
+            new Date(dayjs(visitDate).year(), dayjs(visitDate).month(), dayjs(visitDate).date(), hours, minutes),
+          ),
+        ),
+        visitType: visitType,
+        location: userLocation,
+      };
+
+      const service = head(services)?.uuid;
+      const defaultStatus = config.concepts.defaultStatusConceptUuid;
+      const defaultPriority = config.concepts.defaultPriorityConceptUuid;
+
+      const abortController = new AbortController();
+      if (currentVisit) {
+        showNotification({
+          title: t('startVisitError', 'Error starting visit'),
+          kind: 'error',
+          critical: true,
+          description: t('patientHasActiveVisit', 'The patient already has an active visit'),
+        });
+        setIsSubmitting(false);
+      } else {
+        const abortController = new AbortController();
+
+        saveVisit(payload, abortController)
+          .pipe(first())
+          .subscribe(
+            (response) => {
+              if (response.status === 201) {
+                addQueueEntry(
+                  response.data.uuid,
+                  patientId,
+                  priority ? priority : defaultPriority,
+                  defaultStatus,
+                  service,
+                  appointment,
+                  selectedQueueLocation,
+                  visitQueueNumberAttributeUuid,
+                ).then(
+                  ({ status }) => {
+                    if (status === 201) {
+                      showToast({
+                        kind: 'success',
+                        title: t('startVisit', 'Start a visit'),
+                        description: t(
+                          'startVisitQueueSuccessfully',
+                          'Patient has been added to active visits list and queue.',
+                          `${hours} : ${minutes}`,
+                        ),
+                      });
+                      closePanel();
+                      setIsSubmitting(false);
+                      mutate();
+                    }
+                  },
+                  (error) => {
+                    showNotification({
+                      title: t('queueEntryError', 'Error adding patient to the queue'),
+                      kind: 'error',
+                      critical: true,
+                      description: error?.message,
+                    });
+                    setIsSubmitting(false);
+                  },
+                );
+              }
+            },
+            (error) => {
+              showNotification({
+                title: t('startVisitError', 'Error starting visit'),
+                kind: 'error',
+                critical: true,
+                description: error?.message,
+              });
+              setIsSubmitting(false);
+            },
+          );
+      }
+    },
+    [
+      visitTime,
+      timeFormat,
+      allVisitTypes,
+      patientId,
+      visitDate,
+      userLocation,
+      services,
+      config.concepts.defaultStatusConceptUuid,
+      config.concepts.defaultPriorityConceptUuid,
+      currentVisit,
+      t,
+      priority,
+      appointment,
+      selectedQueueLocation,
+      visitQueueNumberAttributeUuid,
+      closePanel,
+      mutate,
+    ],
+  );
+
+  if (visits) {
+    return (
+      <div className={styles.row}>
+        <p className={styles.heading}>{scheduledVisitHeader} </p>
+        {visits?.length > 0 ? (
+          <TileGroup name="tile-group" defaultSelected="default-selected">
+            {visits?.map((visit, ind) => {
+              return (
+                <RadioTile
+                  value={visit.uuid}
+                  key={visit.uuid}
+                  className={styles.visitTile}
+                  onClick={(e) => {
+                    setHasPriority(true);
+                    setVisitsIndex(ind);
+                    setPatientId(visit?.patient?.uuid);
+                    setAppointment(visit);
+                  }}>
+                  <div className={styles.helperText}>
+                    <p className={styles.primaryText}>{visit.service?.name}</p>
+                    <p className={styles.secondaryText}>
+                      {' '}
+                      {formatDatetime(parseDate(visit?.startDateTime))} · {visit.location?.name}{' '}
+                    </p>
+
+                    {isLoading ? (
+                      <DataTableSkeleton />
+                    ) : !priorities?.length ? (
+                      <InlineNotification
+                        className={styles.inlineNotification}
+                        kind={'error'}
+                        lowContrast
+                        subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
+                        title={t('noPrioritiesConfigured', 'No priorities configured')}
+                      />
+                    ) : hasPriority && ind == visitsIndex ? (
+                      <ContentSwitcher
+                        size="sm"
+                        selectedIndex={1}
+                        className={styles.prioritySwitcher}
+                        onChange={(e) => {
+                          setPriority(e.name as any);
+                          handleSubmit(e);
+                        }}>
+                        {priorities?.length > 0
+                          ? priorities.map(({ uuid, display }) => {
+                              return <Switch name={uuid} text={display} value={uuid} />;
+                            })
+                          : null}
+                      </ContentSwitcher>
+                    ) : null}
+                    {hasPriority && ind == visitsIndex && isSubmitting ? (
+                      <InlineLoading description={t('loading', 'Loading...')} />
+                    ) : null}
+                  </div>
+                </RadioTile>
+              );
+            })}
+          </TileGroup>
+        ) : (
+          <div className={styles.emptyAppointment}>
+            <p>{t('noAppointmentsFound', 'No appointments found')} </p>
+          </div>
+        )}
+      </div>
+    );
+  }
+  return (
+    <div className={styles.emptyAppointment}>
+      <p className={styles.heading}> {scheduledVisitHeader} </p>
+    </div>
+  );
+};
+
+const PatientScheduledVisits: React.FC<PatientScheduledVisitsProps> = ({
+  toggleSearchType,
+  patientUuid,
+  closePanel,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { appointments, isLoading, isError } = useScheduledVisits(patientUuid);
+
+  if (isError) {
+    return <ErrorState headerTitle={t('errorFetchingAppoinments', 'Error fetching appointments')} error={isError} />;
+  }
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (isNil(appointments?.futureVisits) && isNil(appointments?.recentVisits)) {
+    toggleSearchType(SearchTypes.VISIT_FORM, patientUuid, true);
+  }
+
+  return (
+    <div className={styles.container}>
+      <ScheduledVisits
+        visitType={visitType.RECENT}
+        visits={appointments?.recentVisits}
+        scheduledVisitHeader={t('recentScheduledVisits', '{count} visit(s) scheduled for +/- 7 days', {
+          count: appointments?.recentVisits?.length,
+        })}
+        patientUuid={patientUuid}
+        closePanel={closePanel}
+      />
+      <ScheduledVisits
+        visitType={visitType.FUTURE}
+        visits={appointments?.futureVisits}
+        scheduledVisitHeader={t('futureScheduledVisits', '{count} visit(s) scheduled for dates in the future', {
+          count: appointments?.futureVisits?.length,
+        })}
+        patientUuid={patientUuid}
+        closePanel={closePanel}
+      />
+
+      <div className={styles['text-divider']}>{t('or', 'Or')}</div>
+
+      <div className={styles.buttonContainer}>
+        <Button
+          kind="ghost"
+          iconDescription="Start another visit type"
+          onClick={() => toggleSearchType(SearchTypes.VISIT_FORM, patientUuid, false)}>
+          {t('anotherVisitType', 'Start another visit type')}
+        </Button>
+      </div>
+
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button
+          className={styles.button}
+          kind="secondary"
+          onClick={() => toggleSearchType(SearchTypes.BASIC, patientUuid, false)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit">
+          {t('search', 'Search')}
+        </Button>
+      </ButtonSet>
+    </div>
+  );
+};
+
+export default PatientScheduledVisits;