@digihmis/esm-service-queue-app 1.0.0

package/src/move-patient-new-room/type/index.ts

@@ -0,0 +1,156 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export interface Concept extends OpenmrsResource {
+  setMembers?: Array<Concept>;
+  answers?: Array<ConceptAnswer>;
+}
+
+export interface ConceptAnswer {
+  uuid: string;
+  display: string;
+}
+
+export interface ConceptAnswers {
+  uuid: string;
+  display: string;
+}
+
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  answers: Array<ConceptAnswers>;
+}
+
+export interface QueueEntry {
+  uuid: string;
+  queue: {
+    uuid: string;
+    display: string;
+  };
+  queueRoom: {
+    uuid: string;
+    display: string;
+  };
+  status: {
+    uuid: string;
+    display: string;
+  };
+  priority: {
+    uuid: string;
+    display: string;
+  };
+  patient: {
+    uuid: string;
+    display: string;
+    person?: {
+      age: number;
+      gender: string;
+    };
+  };
+  visit?: {
+    uuid: string;
+    display?: string;
+  };
+  startedAt: string;
+  endedAt?: string;
+  sortWeight?: number;
+  priorityComment?: string;
+  queueComingFrom?: {
+    uuid: string;
+    display: string;
+  };
+  queueRoomComingFrom?: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Queue {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  location: {
+    uuid: string;
+    display: string;
+  };
+  service: {
+    uuid: string;
+    display: string;
+  };
+  allowedPriorities: Array<{
+    uuid: string;
+    display: string;
+  }>;
+  allowedStatuses: Array<{
+    uuid: string;
+    display: string;
+  }>;
+  queueRooms: Array<QueueRoom>;
+}
+
+export interface QueueRoom {
+  uuid: string;
+  display: string;
+  name: string;
+  description: string;
+  queue?: {
+    uuid: string;
+    display: string;
+  };
+}
+
+export interface Patient {
+  uuid: string;
+  display: string;
+  person: {
+    uuid: string;
+    display: string;
+    gender: string;
+    age: number;
+    birthdate: string;
+    dead: boolean;
+    deathDate?: string;
+    causeOfDeath?: {
+      uuid: string;
+      display: string;
+    };
+    identifiers: Array<{
+      uuid: string;
+      identifier: string;
+      identifierType: {
+        uuid: string;
+        display: string;
+      };
+      preferred: boolean;
+    }>;
+  };
+}
+
+export interface QueueEntryPayload {
+  patientUuid: string;
+  queueUuid: string;
+  queueRoomUuid?: string;
+  priorityUuid: string;
+  statusUuid: string;
+  sortWeight: number;
+  queueComingFrom?: string;
+  queueRoomComingFrom?: string;
+  visitUuid?: string;
+  startedAt?: string;
+  priorityComment?: string;
+}
+
+export interface QueueEntryRequestBody {
+  patient: string;
+  queue: string;
+  status: string;
+  priority: string;
+  sortWeight: number;
+  startedAt: string;
+  queueRoom?: string;
+  queueComingFrom?: string;
+  queueRoomComingFrom?: string;
+  visit?: string;
+  priorityComment?: string;
+}

package/src/routes.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "name": "service-queue-check-in-form",
+      "slot": "visit-form-bottom-slot",
+      "component": "serviceQueueCheckIn",
+      "order": 1
+    }
+  ],
+  "modals": [
+    {
+      "name": "move-patient-to-new-room-modal",
+      "component": "moveToNextRoomModal"
+    }
+  ]
+
+}

package/src/service-queue-checkin-form/queue-fields.component.tsx

@@ -0,0 +1,316 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormGroup, InlineNotification, Select, SelectItem, SelectSkeleton, Stack } from '@carbon/react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { type TFunction } from 'i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ResponsiveWrapper, showSnackbar, useConfig, useSession, Visit } from '@openmrs/esm-framework';
+import styles from './service-queue-checkin-form.scss';
+import { postQueueEntry, useMutateQueueEntries, useQueue } from './service-queue-checkin-form.resource';
+import { ServiceQueueConfig } from '../config-schema';
+
+type QueueFieldsProps = {
+  setOnSubmit(onSubmit: (visit: Visit) => Promise<void>): void;
+};
+
+const createQueueRoomSchema = (t: TFunction) =>
+  z.object({
+    roomToVisit: z.string().trim().min(1, t('roomToVisitRequired', 'Room to visit is required')),
+    roomType: z.string().trim().min(1, t('roomTypeRequired', 'Room type is required')),
+  });
+
+const QueueFields: React.FC<QueueFieldsProps> = React.memo(({ setOnSubmit }) => {
+  const { t } = useTranslation();
+  const { queues, isLoading } = useQueue();
+  const { sessionLocation } = useSession();
+  const {
+    visitQueueNumberAttributeUuid,
+    concepts: { defaultStatusConceptUuid, defaultPriorityConceptUuid, emergencyPriorityConceptUuid },
+    defualtQueueRoom: { triageQueueUuid, outPatienttriageUuid },
+  } = useConfig<ServiceQueueConfig>();
+  const schema = useMemo(() => createQueueRoomSchema(t), [t]);
+  const [priority, setPriority] = useState(defaultPriorityConceptUuid);
+
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const memoMutateQueueEntries = useCallback(mutateQueueEntries, [mutateQueueEntries]);
+
+  const sortWeight = priority === emergencyPriorityConceptUuid ? 1 : 0;
+
+  const [extraVisitInfo, setExtraVisitInfo] = useState<{
+    roomToVisit: string;
+    roomToVisitName: string;
+    roomType: string;
+    roomTypeName: string;
+  } | null>(null);
+
+  const {
+    control,
+    formState: { errors, touchedFields, isSubmitted },
+    setValue,
+    watch,
+    getValues,
+    clearErrors,
+  } = useForm({
+    defaultValues: {
+      roomToVisit: triageQueueUuid,
+      roomType: outPatienttriageUuid,
+    },
+    mode: 'onChange',
+    resolver: zodResolver(schema),
+  });
+
+  const roomToVisit = watch('roomToVisit');
+  const roomType = watch('roomType');
+
+  const queueResults = useMemo(() => queues || [], [queues]);
+
+  const memoizedQueueLocations = useMemo(
+    () => queueResults.map((q) => ({ uuid: q.uuid, name: q.display })),
+    [queueResults],
+  );
+
+  const memoizedQueueRooms = useMemo(() => {
+    const selectedQueue = queueResults.find((q) => q.uuid === roomToVisit);
+    return selectedQueue?.queueRooms?.map((room) => ({ uuid: room.uuid, name: room.display })) || [];
+  }, [queueResults, roomToVisit]);
+
+  const isDataLoaded = !isLoading;
+
+  const selectedQueueLocation = useMemo(
+    () => queueResults.find((q) => q.uuid === roomToVisit),
+    [queueResults, roomToVisit],
+  );
+
+  const selectedRoom = useMemo(
+    () => selectedQueueLocation?.queueRooms?.find((room) => room.uuid === roomType),
+    [selectedQueueLocation, roomType],
+  );
+
+  useEffect(() => {
+    if (roomToVisit && roomType && selectedQueueLocation && selectedRoom) {
+      setExtraVisitInfo({
+        roomToVisit: roomToVisit,
+        roomToVisitName: selectedQueueLocation.display,
+        roomType: roomType,
+        roomTypeName: selectedRoom.display,
+      });
+    } else {
+      setExtraVisitInfo(null);
+    }
+  }, [roomToVisit, roomType, selectedQueueLocation, selectedRoom]);
+
+  useEffect(() => {
+    const currentRoomToVisit = getValues('roomToVisit');
+    const defaultRoomExists = queueResults.some((q) => q.uuid === triageQueueUuid);
+
+    if (
+      !defaultRoomExists &&
+      sessionLocation?.uuid &&
+      !touchedFields.roomToVisit &&
+      memoizedQueueLocations.length > 0
+    ) {
+      const locationExists = memoizedQueueLocations.some((loc) => loc.uuid === sessionLocation.uuid);
+      if (locationExists && currentRoomToVisit !== sessionLocation.uuid) {
+        setValue('roomToVisit', sessionLocation.uuid, { shouldValidate: isDataLoaded });
+      }
+    }
+  }, [
+    sessionLocation?.uuid,
+    memoizedQueueLocations,
+    touchedFields.roomToVisit,
+    setValue,
+    isDataLoaded,
+    getValues,
+    queueResults,
+    triageQueueUuid,
+  ]);
+
+  const onSubmit = useCallback(
+    (visit: Visit) => {
+      const currentRoomType = getValues('roomType');
+      const currentRoomToVisit = getValues('roomToVisit');
+
+      if (!currentRoomType || !currentRoomToVisit) {
+        showSnackbar({
+          title: t('queueEntryError', 'Error adding patient to the queue'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: t('selectRoomAndType', 'Please select both room to visit and room type'),
+        });
+        return Promise.reject(new Error('Room to visit and room type are required'));
+      }
+
+      const selectedQueue = queueResults.find((q) => q.uuid === currentRoomToVisit);
+      const selectedQueueRoom = selectedQueue?.queueRooms?.find((room) => room.uuid === currentRoomType);
+
+      const queueUuid = selectedQueue?.uuid;
+
+      if (!queueUuid) {
+        showSnackbar({
+          title: t('queueEntryError', 'Error adding patient to the queue'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: t('noQueueAssociated', 'No queue associated with selected room'),
+        });
+        return Promise.reject(new Error('No queue associated with selected room'));
+      }
+
+      return postQueueEntry(
+        visit.uuid,
+        queueUuid,
+        visit.patient.uuid,
+        priority,
+        defaultStatusConceptUuid,
+        sortWeight,
+        sessionLocation.uuid,
+        visitQueueNumberAttributeUuid,
+        currentRoomType,
+      )
+        .then(() => {
+          showSnackbar({
+            kind: 'success',
+            isLowContrast: true,
+            title: t('addedPatientToQueue', 'Added patient to {{queueRoom}}', {
+              queueRoom: selectedQueueRoom?.display,
+            }),
+            subtitle: t('queueEntryAddedSuccessfully', 'Queue entry added successfully'),
+          });
+          memoMutateQueueEntries();
+        })
+        .catch((error) => {
+          showSnackbar({
+            title: t('queueEntryError', 'Error adding patient to the queue'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+          throw error;
+        });
+    },
+    [
+      getValues,
+      queueResults,
+      priority,
+      defaultStatusConceptUuid,
+      sortWeight,
+      sessionLocation?.uuid,
+      visitQueueNumberAttributeUuid,
+      memoMutateQueueEntries,
+      t,
+    ],
+  );
+  useEffect(() => {
+    setOnSubmit(onSubmit);
+  }, [onSubmit, setOnSubmit]);
+
+  useEffect(() => {
+    if (isDataLoaded && roomToVisit && memoizedQueueRooms.length > 0) {
+      const defaultRoomType = outPatienttriageUuid;
+      const currentRoomType = getValues('roomType');
+
+      if (currentRoomType === defaultRoomType) {
+        const isRoomTypeValid = memoizedQueueRooms.some((room) => room.uuid === defaultRoomType);
+        if (isRoomTypeValid) {
+          setValue('roomType', defaultRoomType, { shouldValidate: true });
+        } else {
+          setValue('roomType', '', { shouldValidate: false });
+        }
+      } else if (currentRoomType && currentRoomType !== '') {
+        const isRoomTypeValid = memoizedQueueRooms.some((room) => room.uuid === currentRoomType);
+        if (!isRoomTypeValid) {
+          setValue('roomType', '', { shouldValidate: isDataLoaded });
+        }
+      }
+    }
+  }, [roomToVisit, memoizedQueueRooms, isDataLoaded, setValue, getValues, outPatienttriageUuid]);
+
+  useEffect(() => {
+    if (!roomToVisit && roomToVisit !== triageQueueUuid) {
+      setValue('roomType', '', { shouldValidate: false });
+      clearErrors('roomType');
+    }
+  }, [roomToVisit, setValue, clearErrors, triageQueueUuid]);
+
+  return (
+    <div>
+      <h1 className={styles.sectionTitle}>{t('roomToVisit', 'Room to Visit')}</h1>
+      <Stack>
+        <ResponsiveWrapper>
+          <FormGroup>
+            <Controller
+              name="roomToVisit"
+              control={control}
+              render={({ field }) =>
+                isLoading ? (
+                  <SelectSkeleton />
+                ) : (
+                  <Select
+                    {...field}
+                    labelText=""
+                    id="roomToVisit"
+                    invalid={!!errors.roomToVisit && (touchedFields.roomToVisit || isSubmitted)}
+                    invalidText={errors.roomToVisit?.message}
+                    onChange={(event) => {
+                      field.onChange(event.target.value);
+                      if (event.target.value !== roomToVisit) {
+                        setValue('roomType', '', { shouldValidate: false });
+                        clearErrors('roomType');
+                      }
+                    }}>
+                    <SelectItem text={t('selectRoomVisit', 'Select a room to visit')} value="" />
+                    {memoizedQueueLocations?.map((location) => (
+                      <SelectItem key={location.uuid} text={location.name} value={location.uuid}>
+                        {location.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )
+              }
+            />
+          </FormGroup>
+        </ResponsiveWrapper>
+
+        {roomToVisit && (
+          <FormGroup>
+            <Controller
+              name="roomType"
+              control={control}
+              render={({ field }) =>
+                isLoading ? (
+                  <SelectSkeleton />
+                ) : !memoizedQueueRooms?.length ? (
+                  <InlineNotification
+                    kind="error"
+                    lowContrast
+                    subtitle={t('configureRooms', 'Please configure rooms to continue.')}
+                    title={t('noRoomsConfigured', 'No rooms configured')}
+                  />
+                ) : (
+                  <Select
+                    {...field}
+                    labelText=""
+                    id="roomType"
+                    invalid={!!errors.roomType && (touchedFields.roomType || isSubmitted)}
+                    invalidText={errors.roomType?.message}
+                    onChange={(event) => {
+                      field.onChange(event.target.value);
+                    }}>
+                    <SelectItem text={t('selectRoomType', 'Select a room type')} value="" />
+                    {memoizedQueueRooms?.map((room) => (
+                      <SelectItem key={room.uuid} text={room.name} value={room.uuid}>
+                        {room.name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                )
+              }
+            />
+          </FormGroup>
+        )}
+      </Stack>
+    </div>
+  );
+});
+
+export default QueueFields;

package/src/service-queue-checkin-form/service-queue-checkin-form.extension.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useConfig, Visit } from '@openmrs/esm-framework';
+import QueueFields from './queue-fields.component';
+import { ServiceQueueConfig } from '../config-schema';
+
+interface VisitFormCallbacks {
+  onVisitCreatedOrUpdated: (visit: Visit) => Promise<any>;
+}
+
+export interface VisitFormQueueFieldsProps {
+  setVisitFormCallbacks: (callbacks: VisitFormCallbacks) => void;
+  visitFormOpenedFrom: string;
+  patientUuid: string;
+}
+
+const ServiceQueueCheckIn: React.FC<VisitFormQueueFieldsProps> = (props) => {
+  const config = useConfig<ServiceQueueConfig>();
+  const { setVisitFormCallbacks, patientUuid, visitFormOpenedFrom } = props;
+
+  if (!config.showServiceQueueFields) {
+    return null;
+  }
+
+  return <QueueFields setOnSubmit={(onSubmit) => setVisitFormCallbacks({ onVisitCreatedOrUpdated: onSubmit })} />;
+};
+
+export default ServiceQueueCheckIn;

package/src/service-queue-checkin-form/service-queue-checkin-form.resource.ts

@@ -0,0 +1,99 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { QueueResponse } from '../type';
+import { useSWRConfig } from 'swr/_internal';
+
+export const useQueue = () => {
+  const customRepresentation = 'custom:(uuid,display,queueRooms:(uuid,display))';
+  const apiUrl = `${restBaseUrl}/queue?v=${customRepresentation}`;
+
+  const { data, ...rest } = useSWR<FetchResponse<QueueResponse>>(apiUrl, openmrsFetch);
+
+  return {
+    queues: data?.data?.results ?? [],
+    ...rest,
+  };
+};
+
+export async function generateVisitQueueNumber(
+  location: string,
+  visitUuid: string,
+  queueUuid: string,
+  visitQueueNumberAttributeUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await openmrsFetch(
+    `${restBaseUrl}/queue-entry-number?location=${location}&queue=${queueUuid}&visit=${visitUuid}&visitAttributeType=${visitQueueNumberAttributeUuid}`,
+    {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: abortController.signal,
+    },
+  );
+}
+
+export async function postQueueEntry(
+  visitUuid: string,
+  queueUuid: string,
+  patientUuid: string,
+  priority: string,
+  status: string,
+  sortWeight: number,
+  locationUuid: string,
+  visitQueueNumberAttributeUuid: string,
+  queueRoomUuid: string,
+) {
+  const abortController = new AbortController();
+
+  await Promise.all([generateVisitQueueNumber(locationUuid, visitUuid, queueUuid, visitQueueNumberAttributeUuid)]);
+
+  return openmrsFetch(`${restBaseUrl}/visit-queue-entry`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    signal: abortController.signal,
+    body: {
+      visit: { uuid: visitUuid },
+      queueEntry: {
+        status: {
+          uuid: status,
+        },
+        priority: {
+          uuid: priority,
+        },
+        queue: {
+          uuid: queueUuid,
+        },
+        queueRoom: {
+          uuid: queueRoomUuid,
+        },
+        patient: {
+          uuid: patientUuid,
+        },
+        startedAt: new Date(),
+        sortWeight: sortWeight,
+      },
+    },
+  });
+}
+
+export function useMutateQueueEntries() {
+  const { mutate } = useSWRConfig();
+
+  return {
+    mutateQueueEntries: () => {
+      return mutate((key) => {
+        return (
+          typeof key === 'string' &&
+          (key.includes(`${restBaseUrl}/queue-entry`) || key.includes(`${restBaseUrl}/visit-queue-entry`))
+        );
+      }).then(() => {
+        window.dispatchEvent(new CustomEvent('queue-entry-updated'));
+      });
+    },
+  };
+}

package/src/service-queue-checkin-form/service-queue-checkin-form.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    @include type.type-style('heading-compact-01');
+    margin: 0 0 layout.$spacing-05 0;
+  }
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    margin: 0 0 layout.$spacing-04 0;
+  }
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/type/index.ts

@@ -0,0 +1,10 @@
+export interface QueueResponse {
+  results: Array<{
+    uuid: string;
+    display: string;
+    queueRooms: Array<{
+      uuid: string;
+      display: string;
+    }>;
+  }>;
+}

package/translations/am.json

@@ -0,0 +1,14 @@
+{
+  "addedPatientToQueue": "Added patient to {{queueRoom}}",
+  "configureRooms": "Please configure rooms to continue.",
+  "noQueueAssociated": "No queue associated with selected room",
+  "noRoomsConfigured": "No rooms configured",
+  "queueEntryAddedSuccessfully": "Queue entry added successfully",
+  "queueEntryError": "Error adding patient to the queue",
+  "roomToVisit": "Room to Visit",
+  "roomToVisitRequired": "Room to visit is required",
+  "roomTypeRequired": "Room type is required",
+  "selectRoomAndType": "Please select both room to visit and room type",
+  "selectRoomType": "Select a room type",
+  "selectRoomVisit": "Select a room to visit"
+}

package/translations/ar.json

@@ -0,0 +1,14 @@
+{
+  "addedPatientToQueue": "Added patient to {{queueRoom}}",
+  "configureRooms": "Please configure rooms to continue.",
+  "noQueueAssociated": "No queue associated with selected room",
+  "noRoomsConfigured": "No rooms configured",
+  "queueEntryAddedSuccessfully": "Queue entry added successfully",
+  "queueEntryError": "Error adding patient to the queue",
+  "roomToVisit": "Room to Visit",
+  "roomToVisitRequired": "Room to visit is required",
+  "roomTypeRequired": "Room type is required",
+  "selectRoomAndType": "Please select both room to visit and room type",
+  "selectRoomType": "Select a room type",
+  "selectRoomVisit": "Select a room to visit"
+}

package/translations/en.json

@@ -0,0 +1,14 @@
+{
+  "addedPatientToQueue": "Added patient to {{queueRoom}}",
+  "configureRooms": "Please configure rooms to continue.",
+  "noQueueAssociated": "No queue associated with selected room",
+  "noRoomsConfigured": "No rooms configured",
+  "queueEntryAddedSuccessfully": "Queue entry added successfully",
+  "queueEntryError": "Error adding patient to the queue",
+  "roomToVisit": "Room to Visit",
+  "roomToVisitRequired": "Room to visit is required",
+  "roomTypeRequired": "Room type is required",
+  "selectRoomAndType": "Please select both room to visit and room type",
+  "selectRoomType": "Select a room type",
+  "selectRoomVisit": "Select a room to visit"
+}