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

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

@@ -0,0 +1,96 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: spacing.$spacing-05 0rem;
+  background-color: $ui-background;
+
+  & section {
+    margin: spacing.$spacing-02 spacing.$spacing-05 0;
+  }
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  margin: spacing.$spacing-05;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.dateTimeSection {
+  display: flex;
+}
+
+.radioButton {
+  margin: spacing.$spacing-05 0;
+}
+
+.headerGridRow {
+  border-bottom: 0.0625rem solid $grey-2;
+  margin: 0;
+}
+
+.dataGridRow {
+  display: grid;
+  grid-template-columns: 50% 10% 1fr;
+  margin: spacing.$spacing-03 spacing.$spacing-05;
+  width: 100%;
+}
+
+.form {
+  background-color: $ui-background;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+@media screen and (max-width: 600px) {
+  .dateTimeSection {
+    flex-direction: column;
+  }
+}
+
+.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/visit-form-queue-fields/visit-form-queue-fields.component.tsx

@@ -0,0 +1,160 @@
+import React, { useEffect, useState } from 'react';
+import { InlineNotification, Layer, Select, SelectItem, RadioButtonGroup, RadioButton, TextInput } from '@carbon/react';
+import { useQueueLocations } from '../hooks/useQueueLocations';
+import { usePriority, useStatus } from '../../active-visits/active-visits-table.resource';
+import { useServices } from '../../patient-queue-metrics/queue-metrics.resource';
+import styles from './visit-form-queue-fields.scss';
+import { ConfigObject, useConfig, useLayoutType } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+const StartVisitQueueFields: React.FC = () => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { priorities } = usePriority();
+  const { statuses } = useStatus();
+  const { queueLocations } = useQueueLocations();
+  const config = useConfig() as ConfigObject;
+  const defaultStatus = config.concepts.defaultStatusConceptUuid;
+  const defaultPriority = config.concepts.defaultPriorityConceptUuid;
+  const emergencyPriorityConceptUuid = config.concepts.emergencyPriorityConceptUuid;
+  const [selectedQueueLocation, setSelectedQueueLocation] = useState(queueLocations[0]?.id);
+  const { allServices, isLoading } = useServices(selectedQueueLocation);
+  const [priority, setPriority] = useState(defaultPriority);
+  const [status, setStatus] = useState(defaultStatus);
+  const [sortWeight, setSortWeight] = useState(0);
+  const [service, setSelectedService] = useState('');
+
+  useEffect(() => {
+    if (priority === emergencyPriorityConceptUuid) {
+      setSortWeight(1);
+    }
+  }, [priority]);
+
+  useEffect(() => {
+    if (allServices?.length > 0) {
+      setSelectedService(allServices[0].uuid);
+    }
+  }, [allServices]);
+
+  useEffect(() => {
+    if (queueLocations?.length > 0) {
+      setSelectedQueueLocation(queueLocations[0].id);
+    }
+  }, [queueLocations]);
+
+  return (
+    <div className={styles.container}>
+      <section className={styles.section}>
+        <div className={styles.sectionTitle}>{t('queueLocation', 'Queue Location')}</div>
+        <ResponsiveWrapper isTablet={isTablet}>
+          <Select
+            labelText={t('selectQueueLocation', 'Select a queue location')}
+            id="queueLocation"
+            name="queueLocation"
+            invalidText="Required"
+            value={selectedQueueLocation}
+            onChange={(event) => setSelectedQueueLocation(event.target.value)}>
+            {!selectedQueueLocation ? (
+              <SelectItem text={t('selectLocation', 'Select a queue location')} value="" />
+            ) : null}
+            {queueLocations?.length > 0 &&
+              queueLocations.map((location) => (
+                <SelectItem key={location.id} text={location.name} value={location.id}>
+                  {location.name}
+                </SelectItem>
+              ))}
+          </Select>
+        </ResponsiveWrapper>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionTitle}>{t('service', 'Service')}</div>
+        {!allServices?.length ? (
+          <InlineNotification
+            className={styles.inlineNotification}
+            kind={'error'}
+            lowContrast
+            subtitle={t('configureServices', 'Please configure services to continue.')}
+            title={t('noServicesConfigured', 'No services configured')}
+          />
+        ) : (
+          <Select
+            labelText={t('selectService', 'Select a service')}
+            id="service"
+            name="service"
+            invalidText="Required"
+            value={service}
+            onChange={(event) => setSelectedService(event.target.value)}>
+            {!service ? <SelectItem text={t('selectService', 'Select a queue service')} value="" /> : null}
+            {allServices?.length > 0 &&
+              allServices.map((service) => (
+                <SelectItem key={service.uuid} text={service.name} value={service.uuid}>
+                  {service.name}
+                </SelectItem>
+              ))}
+          </Select>
+        )}
+      </section>
+
+      <section className={`${styles.section} ${styles.sectionHidden}`}>
+        <div className={styles.sectionTitle}>{t('status', 'Status')}</div>
+        <Select
+          labelText={t('selectStatus', 'Select a status')}
+          id="status"
+          name="status"
+          invalidText="Required"
+          value={status}
+          onChange={(event) => setStatus(event.target.value)}>
+          {!statuses ? <SelectItem text={t('chooseStatus', 'Select a status')} value="" /> : null}
+          {statuses?.length > 0 &&
+            statuses.map((status) => (
+              <SelectItem key={status.uuid} text={status.display} value={status.uuid}>
+                {status.display}
+              </SelectItem>
+            ))}
+        </Select>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.sectionTitle}>{t('priority', 'Priority')}</div>
+        {!priorities?.length ? (
+          <InlineNotification
+            className={styles.inlineNotification}
+            kind={'error'}
+            lowContrast
+            subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
+            title={t('noPrioritiesConfigured', 'No priorities configured')}
+          />
+        ) : (
+          <RadioButtonGroup
+            className={styles.radioButtonWrapper}
+            name="priority"
+            id="priority"
+            defaultSelected={defaultPriority}
+            onChange={(uuid) => {
+              setPriority(uuid);
+            }}>
+            {priorities?.length > 0 &&
+              priorities.map(({ uuid, display }) => <RadioButton key={uuid} labelText={display} value={uuid} />)}
+          </RadioButtonGroup>
+        )}
+      </section>
+
+      <section className={`${styles.section} ${styles.sectionHidden}`}>
+        <TextInput
+          type="number"
+          id="sortWeight"
+          name="sortWeight"
+          labelText={t('sortWeight', 'Sort weight')}
+          value={sortWeight}
+        />
+      </section>
+    </div>
+  );
+};
+
+function ResponsiveWrapper({ children, isTablet }) {
+  return isTablet ? <Layer>{children}</Layer> : <div>{children}</div>;
+}
+
+export default StartVisitQueueFields;

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.scss

@@ -0,0 +1,21 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.section {
+  margin: spacing.$spacing-03;
+}
+
+.sectionHidden {
+  display: none;
+}
+
+.container {
+  margin: spacing.$spacing-05;
+}

package/src/patient-search/visit-form-queue-fields/visit-form-queue-fields.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import StartVisitQueueFields from './visit-form-queue-fields.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: () => 'desktop',
+  showNotification: jest.fn(),
+  showToast: jest.fn(),
+  useConfig: jest.fn(() => ({
+    concepts: {
+      visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+      defaultStatusConceptUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    },
+  })),
+}));
+jest.mock('../hooks/useQueueLocations', () => ({
+  useQueueLocations: jest.fn(() => ({
+    queueLocations: [{ id: '1', name: 'Location 1' }],
+  })),
+}));
+
+jest.mock('../../active-visits/active-visits-table.resource', () => ({
+  usePriority: jest.fn(() => ({
+    priorities: [{ uuid: '197852c7-5fd4-4b33-89cc-7bae6848c65a', display: 'High' }],
+  })),
+  useStatus: jest.fn(() => ({
+    statuses: [{ uuid: '176052c7-5fd4-4b33-89cc-7bae6848c65a', display: 'In Progress' }],
+  })),
+}));
+
+jest.mock('../../patient-queue-metrics/queue-metrics.resource', () => ({
+  useServices: jest.fn((selectedQueueLocation) => ({
+    allServices: [{ uuid: 'e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90', name: 'Service 1' }],
+    isLoading: false,
+  })),
+}));
+
+describe('StartVisitQueueFields', () => {
+  it('renders the form fields', () => {
+    const { getByLabelText, getByText } = render(<StartVisitQueueFields />);
+
+    expect(getByLabelText('Select a queue location')).toBeInTheDocument();
+    expect(getByLabelText('Select a service')).toBeInTheDocument();
+    expect(getByLabelText('Select a status')).toBeInTheDocument();
+    expect(getByText('High')).toBeInTheDocument();
+    expect(getByLabelText('Sort weight')).toBeInTheDocument();
+  });
+
+  it('updates the selected queue location', () => {
+    const { getByLabelText } = render(<StartVisitQueueFields />);
+
+    const selectQueueLocation = getByLabelText('Select a queue location') as HTMLInputElement;
+    fireEvent.change(selectQueueLocation, { target: { value: '1' } });
+
+    expect(selectQueueLocation.value).toBe('1');
+  });
+
+  it('updates the selected service', () => {
+    const { getByLabelText } = render(<StartVisitQueueFields />);
+
+    const selectService = getByLabelText('Select a service') as HTMLInputElement;
+    fireEvent.change(selectService, { target: { value: 'service-1' } });
+
+    expect(selectService.value).toBe('e2ec9cf0-ec38-4d2b-af6c-59c82fa30b90');
+  });
+});

package/src/queue-entry-table-components/actions-menu.component.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { navigate, showModal } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { MappedVisitQueueEntry } from '../active-visits/active-visits-table.resource';
+import { Layer, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import styles from './actions-menu.scss';
+
+interface ActionsMenuProps {
+  queueEntry: MappedVisitQueueEntry;
+  closeModal: () => void;
+}
+
+const ActionsMenu: React.FC<ActionsMenuProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const launchEndVisitModal = useCallback(() => {
+    const dispose = showModal('remove-queue-entry', {
+      closeModal: () => dispose(),
+      queueEntry,
+    });
+  }, [queueEntry]);
+
+  return (
+    <Layer>
+      <OverflowMenu ariaLabel="Actions menu" selectorPrimaryFocus={'#editPatientDetails'} size="sm" flipped>
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="#editPatientDetails"
+          itemText={t('editPatientDetails', 'Edit patient details')}
+          onClick={() =>
+            navigate({
+              to: `\${openmrsSpaBase}/patient/${queueEntry.patientUuid}/edit`,
+            })
+          }>
+          {t('editPatientDetails', 'Edit patient details')}
+        </OverflowMenuItem>
+        <OverflowMenuItem
+          className={styles.menuItem}
+          id="#endVisit"
+          onClick={launchEndVisitModal}
+          hasDivider
+          isDelete
+          itemText={t('endVisit', 'End visit')}>
+          {t('endVisit', 'End Visit')}
+        </OverflowMenuItem>
+      </OverflowMenu>
+    </Layer>
+  );
+};
+
+export default ActionsMenu;

package/src/queue-entry-table-components/actions-menu.scss

@@ -0,0 +1,3 @@
+.menuItem {
+  max-width: none;
+}

package/src/queue-entry-table-components/edit-entry.component.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import { MappedVisitQueueEntry } from '../active-visits/active-visits-table.resource';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import styles from './edit-entry.scss';
+
+interface EditMenuProps {
+  queueEntry: MappedVisitQueueEntry;
+  closeModal: () => void;
+}
+const EditMenu: React.FC<EditMenuProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+  const launchEditPriorityModal = useCallback(() => {
+    const dispose = showModal('edit-queue-entry-status-modal', {
+      closeModal: () => dispose(),
+      queueEntry,
+    });
+  }, [queueEntry]);
+
+  return (
+    <Button onClick={launchEditPriorityModal} className={styles.editIcon} kind="ghost">
+      {t('transfer', 'Transfer')}
+    </Button>
+  );
+};
+
+export default EditMenu;

package/src/queue-entry-table-components/edit-entry.scss

@@ -0,0 +1,14 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.editIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: var(--omrs-color-brand-orange);
+    color: var(--omrs-color-brand-orange);
+  }
+}
+
+.editIcon:hover {
+  background-color: transparent;
+}

package/src/queue-entry-table-components/open-chart.component.tsx

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigObject, navigate, useConfig } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import styles from './open-chart.scss';
+import usePatientId from './open-chart.resource';
+
+interface OpenChartMenuProps {
+  patientUuid: string;
+}
+const OpenChartMenu: React.FC<OpenChartMenuProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { isLoading, patient } = usePatientId(patientUuid);
+  const config = useConfig() as ConfigObject;
+
+  const redirectPatientChart = useCallback(() => {
+    if (!isLoading) {
+      navigate({
+        to: config.customPatientChartUrl
+          ? `${config.customPatientChartUrl}=${patient?.patientId}&`
+          : `\${openmrsSpaBase}/patient/${patientUuid}/chart`,
+      });
+    }
+  }, [patient, config.customPatientChartUrl]);
+
+  return (
+    <Button onClick={redirectPatientChart} className={styles.editIcon} kind="ghost">
+      {config.customPatientChartText ? config.customPatientChartText : t('profile', 'Profile')}
+    </Button>
+  );
+};
+
+export default OpenChartMenu;

package/src/queue-entry-table-components/open-chart.resource.tsx

@@ -0,0 +1,14 @@
+import { ConfigObject, openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+const usePatientId = (patientUuid: string) => {
+  const config = useConfig() as ConfigObject;
+
+  const { isLoading, data, error } = useSWR<{ data: { results: { patientId: string; age: number } } }>(
+    `${config.customPatientIdUrl}=${patientUuid}`,
+    openmrsFetch,
+  );
+  return { patient: data?.data?.results, error, isLoading };
+};
+
+export default usePatientId;

package/src/queue-entry-table-components/open-chart.scss

@@ -0,0 +1,14 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.editIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: $color-blue-60-2;
+    color: $color-blue-60-2;
+  }
+}
+
+.editIcon:hover {
+  background-color: transparent;
+}

package/src/queue-entry-table-components/status-icon.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Group, InProgress } from '@carbon/react/icons';
+
+function StatusIcon({ status }) {
+  switch (status) {
+    case 'waiting':
+      return <InProgress size={16} />;
+    case 'in service':
+      return <Group size={16} />;
+    case 'finished service':
+      return <Group size={16} />;
+    default:
+      return null;
+  }
+}
+
+export default StatusIcon;

package/src/queue-entry-table-components/transition-entry.component.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback } from 'react';
+import { Notification } from '@carbon/react/icons';
+import { MappedVisitQueueEntry, serveQueueEntry } from '../active-visits/active-visits-table.resource';
+import { useTranslation } from 'react-i18next';
+import { showModal, showNotification } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import styles from './transition-entry.scss';
+import { mutate } from 'swr';
+interface TransitionMenuProps {
+  queueEntry: MappedVisitQueueEntry;
+  closeModal: () => void;
+}
+const TransitionMenu: React.FC<TransitionMenuProps> = ({ queueEntry, closeModal }) => {
+  const { t } = useTranslation();
+
+  const launchTransitionPriorityModal = useCallback(() => {
+    serveQueueEntry(queueEntry?.service, queueEntry?.visitQueueNumber, 'calling').then(
+      ({ status }) => {
+        if (status === 200) {
+          mutate(`/ws/rest/v1/queueutil/assignticket`);
+        }
+      },
+      (error) => {
+        showNotification({
+          title: t('errorPostingToScreen', 'Error posting to screen'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      },
+    );
+    const dispose = showModal('transition-queue-entry-status-modal', {
+      closeModal: () => dispose(),
+      queueEntry,
+    });
+  }, [queueEntry]);
+
+  return (
+    <Button
+      renderIcon={(props) => <Notification size={16} {...props} />}
+      className={`${styles.callBtn} ${
+        queueEntry?.priorityComment === 'Requeued' ? styles.requeueIcon : styles.normalIcon
+      }`}
+      onClick={launchTransitionPriorityModal}
+      iconDescription={t('call', 'Call')}
+      hasIconOnly
+      tooltipAlignment="end"
+      tooltipPosition="bottom"
+    />
+  );
+};
+
+export default TransitionMenu;

package/src/queue-entry-table-components/transition-entry.scss

@@ -0,0 +1,22 @@
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.callBtn:hover {
+  background-color: transparent;
+}
+
+.requeueIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: $danger;
+    color: $danger;
+  }
+}
+
+.normalIcon {
+  background-color: transparent;
+
+  & svg {
+    fill: var(--omrs-color-success);
+  }
+}