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

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

@@ -0,0 +1,344 @@
+import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
+import dayjs from 'dayjs';
+import { first } from 'rxjs/operators';
+import {
+  Button,
+  ButtonSet,
+  ContentSwitcher,
+  DatePicker,
+  DatePickerInput,
+  Form,
+  FormGroup,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  Row,
+  Select,
+  SelectItem,
+  Stack,
+  Switch,
+  TimePicker,
+  TimePickerSelect,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  ExtensionSlot,
+  ResponsiveWrapper,
+  saveVisit,
+  showSnackbar,
+  toDateObjectStrict,
+  toOmrsIsoString,
+  useConfig,
+  useLayoutType,
+  useLocations,
+  useSession,
+} from '@openmrs/esm-framework';
+import { RecommendedVisitTypeSelector, VisitTypeSelector } from './visit-type-selector.component';
+import { postQueueEntry } from '../../active-visits/active-visits-table.resource';
+import { type amPm, convertTime12to24 } from '../../helpers/time-helpers';
+import { useActivePatientEnrollment } from '../hooks/useActivePatientEnrollment';
+import { type NewVisitPayload, type PatientProgram } from '../../types';
+import styles from './visit-form.scss';
+import { useDefaultLoginLocation } from '../hooks/useDefaultLocation';
+import isEmpty from 'lodash-es/isEmpty';
+import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
+import { type ConfigObject } from '../../config-schema';
+import { datePickerFormat, datePickerPlaceHolder } from '../../constants';
+import VisitFormQueueFields from '../visit-form-queue-fields/visit-form-queue-fields.component';
+
+interface VisitFormProps {
+  patientUuid: string;
+  closeWorkspace: () => void;
+}
+
+const VisitForm: React.FC<VisitFormProps> = ({ patientUuid, closeWorkspace }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const locations = useLocations();
+  const sessionUser = useSession();
+  const { defaultFacility, isLoading: loadingDefaultFacility } = useDefaultLoginLocation();
+
+  const config = useConfig<ConfigObject>();
+  const [contentSwitcherIndex, setContentSwitcherIndex] = useState(config.showRecommendedVisitTypeTab ? 0 : 1);
+  const [isMissingVisitType, setIsMissingVisitType] = useState(false);
+  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 state = useMemo(() => ({ patientUuid }), [patientUuid]);
+  const [ignoreChanges, setIgnoreChanges] = useState(true);
+  const { activePatientEnrollment, isLoading } = useActivePatientEnrollment(patientUuid);
+  const [enrollment, setEnrollment] = useState<PatientProgram>(activePatientEnrollment[0]);
+  const { mutateQueueEntries } = useMutateQueueEntries();
+  const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [visitType, setVisitType] = useState('');
+  const [{ service, priority, status, sortWeight, queueLocation }, setVisitFormFields] = useState({
+    service: null,
+    priority: null,
+    status: null,
+    sortWeight: null,
+    queueLocation: null,
+  });
+
+  useEffect(() => {
+    if (locations?.length && sessionUser) {
+      setSelectedLocation(sessionUser?.sessionLocation?.uuid);
+    } else if (!loadingDefaultFacility && defaultFacility) {
+      setSelectedLocation(defaultFacility?.uuid);
+    }
+  }, [locations, sessionUser, loadingDefaultFacility]);
+
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      if (!visitType) {
+        setIsMissingVisitType(true);
+        return;
+      }
+
+      setIsSubmitting(true);
+
+      const [hours, minutes] = convertTime12to24(visitTime, timeFormat);
+
+      const payload: NewVisitPayload = {
+        patient: patientUuid,
+        startDatetime: toDateObjectStrict(
+          toOmrsIsoString(
+            new Date(dayjs(visitDate).year(), dayjs(visitDate).month(), dayjs(visitDate).date(), hours, minutes),
+          ),
+        ),
+        visitType: visitType,
+        location: selectedLocation,
+        attributes: [],
+      };
+
+      const abortController = new AbortController();
+
+      saveVisit(payload, abortController)
+        .pipe(first())
+        .subscribe(
+          (response) => {
+            if (response.status === 201) {
+              // add new queue entry if visit created successfully
+              postQueueEntry(
+                response.data.uuid,
+                service,
+                patientUuid,
+                priority,
+                status,
+                sortWeight,
+                queueLocation,
+                visitQueueNumberAttributeUuid,
+              ).then(
+                ({ status }) => {
+                  if (status === 201) {
+                    showSnackbar({
+                      kind: 'success',
+                      isLowContrast: true,
+                      title: t('startAVisit', 'Start a visit'),
+                      subtitle: t(
+                        'startVisitQueueSuccessfully',
+                        'Patient has been added to active visits list and queue.',
+                        `${hours} : ${minutes}`,
+                      ),
+                    });
+                    closeWorkspace();
+                    mutateQueueEntries();
+                  }
+                },
+                (error) => {
+                  showSnackbar({
+                    title: t('queueEntryError', 'Error adding patient to the queue'),
+                    kind: 'error',
+                    subtitle: error?.message,
+                  });
+                },
+              );
+            }
+          },
+          (error) => {
+            showSnackbar({
+              title: t('startVisitError', 'Error starting visit'),
+              kind: 'error',
+              subtitle: error?.message,
+            });
+          },
+        );
+    },
+    [
+      closeWorkspace,
+      mutateQueueEntries,
+      patientUuid,
+      selectedLocation,
+      t,
+      timeFormat,
+      visitDate,
+      visitQueueNumberAttributeUuid,
+      visitTime,
+      visitType,
+    ],
+  );
+
+  const handleOnChange = () => {
+    setIgnoreChanges((prevState) => !prevState);
+  };
+
+  return (
+    <Form className={styles.form} onChange={handleOnChange} onSubmit={handleSubmit}>
+      <div>
+        {isTablet && (
+          <Row className={styles.headerGridRow}>
+            <ExtensionSlot name="visit-form-header-slot" className={styles.dataGridRow} state={state} />
+          </Row>
+        )}
+        <Stack gap={8} className={styles.container}>
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('dateAndTimeOfVisit', 'Date and time of visit')}</div>
+            <div className={styles.dateTimeSection}>
+              <DatePicker
+                dateFormat={datePickerFormat}
+                datePickerType="single"
+                id="visitDate"
+                style={{ paddingBottom: '1rem' }}
+                maxDate={new Date().toISOString()}
+                onChange={([date]) => setVisitDate(date)}
+                value={visitDate}>
+                <DatePickerInput
+                  id="visitStartDateInput"
+                  labelText={t('date', 'Date')}
+                  placeholder={datePickerPlaceHolder}
+                  style={{ width: '100%' }}
+                />
+              </DatePicker>
+              <ResponsiveWrapper>
+                <TimePicker
+                  id="visitStartTime"
+                  labelText={t('time', 'Time')}
+                  onChange={(event) => setVisitTime(event.target.value as amPm)}
+                  pattern="^(1[0-2]|0?[1-9]):([0-5]?[0-9])$"
+                  style={{ marginLeft: '0.125rem', flex: 'none' }}
+                  value={visitTime}>
+                  <TimePickerSelect
+                    id="visitStartTimeSelect"
+                    onChange={(event) => setTimeFormat(event.target.value as amPm)}
+                    value={timeFormat}
+                    labelText={t('time', 'Time')}
+                    aria-label={t('time', 'Time')}>
+                    <SelectItem value="AM" text="AM" />
+                    <SelectItem value="PM" text="PM" />
+                  </TimePickerSelect>
+                </TimePicker>
+              </ResponsiveWrapper>
+            </div>
+          </section>
+
+          <section className={styles.section}>
+            <div className={styles.sectionTitle}>{t('facility', 'Facility')}</div>
+            <Select
+              labelText={t('selectFacility', 'Select a facility')}
+              id="location"
+              invalidText="Required"
+              value={selectedLocation}
+              defaultSelected={selectedLocation}
+              onChange={(event) => setSelectedLocation(event.target.value)}>
+              {!selectedLocation ? <SelectItem text={t('selectOption', 'Select an option')} value="" /> : null}
+              {!isEmpty(defaultFacility) ? (
+                <SelectItem key={defaultFacility?.uuid} text={defaultFacility?.display} value={defaultFacility?.uuid}>
+                  {defaultFacility?.display}
+                </SelectItem>
+              ) : locations?.length > 0 ? (
+                locations.map((location) => (
+                  <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                    {location.display}
+                  </SelectItem>
+                ))
+              ) : null}
+            </Select>
+          </section>
+
+          {config.showRecommendedVisitTypeTab && (
+            <section>
+              <div className={styles.sectionTitle}>{t('program', 'Program')}</div>
+              <FormGroup legendText={t('selectProgramType', 'Select program type')}>
+                <RadioButtonGroup
+                  defaultSelected={enrollment?.program?.uuid}
+                  orientation="vertical"
+                  onChange={(uuid) =>
+                    setEnrollment(activePatientEnrollment.find(({ program }) => program.uuid === uuid))
+                  }
+                  name="program-type-radio-group"
+                  valueSelected="default-selected">
+                  {activePatientEnrollment.map(({ uuid, display, program }) => (
+                    <RadioButton
+                      key={uuid}
+                      className={styles.radioButton}
+                      id={uuid}
+                      labelText={display}
+                      value={program.uuid}
+                    />
+                  ))}
+                </RadioButtonGroup>
+              </FormGroup>
+            </section>
+          )}
+          <section>
+            <div className={styles.sectionTitle}>{t('visitType', 'Visit Type')}</div>
+            {config.showRecommendedVisitTypeTab && (
+              <ContentSwitcher
+                selectedIndex={contentSwitcherIndex}
+                className={styles.contentSwitcher}
+                onChange={({ index }) => setContentSwitcherIndex(index)}>
+                <Switch name="recommended" text={t('recommended', 'Recommended')} />
+                <Switch name="all" text={t('all', 'All')} />
+              </ContentSwitcher>
+            )}
+            {config.showRecommendedVisitTypeTab && contentSwitcherIndex === 0 && (
+              <RecommendedVisitTypeSelector
+                onChange={(visitType) => {
+                  setVisitType(visitType);
+                  setIsMissingVisitType(false);
+                }}
+                patientUuid={patientUuid}
+                patientProgram={enrollment}
+                locationUuid={selectedLocation}
+              />
+            )}
+            {(!config.showRecommendedVisitTypeTab || contentSwitcherIndex === 1) && (
+              <VisitTypeSelector
+                onChange={(visitType) => {
+                  setVisitType(visitType);
+                  setIsMissingVisitType(false);
+                }}
+              />
+            )}
+          </section>
+          {isMissingVisitType && (
+            <section>
+              <InlineNotification
+                style={{ margin: '0', minWidth: '100%' }}
+                kind="error"
+                lowContrast={true}
+                title={t('missingVisitType', 'Missing visit type')}
+                subtitle={t('selectVisitType', 'Please select a Visit Type')}
+              />
+            </section>
+          )}
+
+          <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('startVisit', 'Start visit')}
+            </Button>
+          </ButtonSet>
+        </Stack>
+      </div>
+    </Form>
+  );
+};
+
+export default VisitForm;

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

@@ -0,0 +1,73 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  flex: 1;
+
+  & section {
+    margin: spacing.$spacing-05 spacing.$spacing-05 spacing.$spacing-05;
+  }
+}
+
+.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 {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(var(--desktop-workspace-window-height) - 7rem - 2px); // 7rem patient banner, plus border
+}
+
+.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;
+  }
+}

package/src/patient-search/visit-form/visit-type-selector.component.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash-es/debounce';
+import isEmpty from 'lodash-es/isEmpty';
+import { useTranslation } from 'react-i18next';
+import { Layer, Search, RadioButtonGroup, RadioButton, StructuredListSkeleton, Tile } from '@carbon/react';
+import {
+  ResponsiveWrapper,
+  reportError,
+  useDebounce,
+  useLayoutType,
+  usePagination,
+  useVisitTypes,
+  type VisitType,
+} from '@openmrs/esm-framework';
+import EmptyDataIllustration from '../empty-data-illustration.component';
+import styles from './visit-type-selector.scss';
+import { useRecommendedVisitTypes } from '../hooks/useRecommendedVisitTypes';
+import { type PatientProgram } from '../../types';
+import { InlineNotification } from '@carbon/react';
+
+export interface VisitTypeSelectorProps {
+  onChange: (event) => void;
+}
+
+export const VisitTypeSelector: React.FC<VisitTypeSelectorProps> = ({ onChange }) => {
+  const allVisitTypes = useVisitTypes();
+
+  return (
+    <div>
+      {allVisitTypes.length == 0 ? (
+        <StructuredListSkeleton />
+      ) : (
+        <VisitTypeSelectorPresentation visitTypes={allVisitTypes} onChange={onChange} />
+      )}
+    </div>
+  );
+};
+
+export interface RecommendedVisitTypeSelectorProps {
+  onChange: (event) => void;
+  patientUuid: string;
+  patientProgram: PatientProgram;
+  locationUuid: string;
+}
+
+/** Recommended visits are specfic to a patient, patient program, and location. */
+export const RecommendedVisitTypeSelector: React.FC<RecommendedVisitTypeSelectorProps> = ({
+  onChange,
+  patientUuid,
+  patientProgram,
+  locationUuid,
+}) => {
+  const { t } = useTranslation();
+  const { recommendedVisitTypes, error, isLoading } = useRecommendedVisitTypes(
+    patientUuid,
+    patientProgram?.uuid,
+    patientProgram?.program?.uuid,
+    locationUuid,
+  );
+
+  return (
+    <div style={{ marginTop: '0.625rem' }}>
+      {isLoading ? (
+        <StructuredListSkeleton />
+      ) : (
+        <VisitTypeSelectorPresentation onChange={onChange} visitTypes={recommendedVisitTypes} />
+      )}
+      {error && (
+        <InlineNotification
+          kind="error"
+          title={t('failedToLoadRecommendedVisitTypes', 'Failed to load recommended visit types')}></InlineNotification>
+      )}
+    </div>
+  );
+};
+
+interface VisitTypeSelectorPresentationProps {
+  onChange: (event) => void;
+  visitTypes: VisitType[];
+}
+
+const MAX_RESULTS = 5;
+
+const VisitTypeSelectorPresentation: React.FC<VisitTypeSelectorPresentationProps> = ({ visitTypes, onChange }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const [selectedVisitType, setSelectedVisitType] = useState<string>();
+
+  const results = useMemo(() => {
+    if (!isEmpty(debouncedSearchTerm)) {
+      return visitTypes.filter(
+        (visitType) => visitType.display.toLowerCase().search(debouncedSearchTerm.toLowerCase()) !== -1,
+      );
+    } else {
+      return visitTypes;
+    }
+  }, [debouncedSearchTerm, visitTypes]);
+
+  const truncatedResults = results.slice(0, MAX_RESULTS);
+
+  useEffect(() => {
+    if (results.length > 0) {
+      onChange(results[0].uuid);
+      setSelectedVisitType(results[0].uuid);
+    }
+  }, [results]);
+
+  return (
+    <div
+      className={classNames(styles.visitTypeOverviewWrapper, {
+        [styles.tablet]: isTablet,
+        [styles.desktop]: !isTablet,
+      })}>
+      {truncatedResults.length < visitTypes.length ? (
+        <ResponsiveWrapper>
+          <Search
+            onChange={(event) => setSearchTerm(event.target.value)}
+            placeholder={t('searchForAVisitType', 'Search for a visit type')}
+            labelText=""
+          />
+        </ResponsiveWrapper>
+      ) : null}
+      {truncatedResults.length ? (
+        <RadioButtonGroup
+          className={styles.radioButtonGroup}
+          defaultSelected={results[0].uuid}
+          orientation="vertical"
+          onChange={(visitType) => {
+            setSelectedVisitType(visitType);
+            onChange(visitType);
+          }}
+          name="radio-button-group"
+          valueSelected={selectedVisitType}>
+          {truncatedResults.map(({ uuid, display, name }) => (
+            <RadioButton key={uuid} className={styles.radioButton} id={name} labelText={display} value={uuid} />
+          ))}
+          {/* TODO: This is supposed to paginate. Right now it just shows the user a truncated list
+                with no indication that the list is truncated. */}
+        </RadioButtonGroup>
+      ) : (
+        <Layer>
+          <Tile className={styles.tile}>
+            <EmptyDataIllustration />
+            <p className={styles.content}>
+              {t('noVisitTypesMatchingSearch', 'There are no visit types matching this search text')}
+            </p>
+          </Tile>
+        </Layer>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,100 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.visitTypeOverviewWrapper {
+  margin: spacing.$spacing-05 0rem;
+  border: 0.0625rem solid $grey-2;
+}
+
+.tablet {
+  background-color: $ui-02;
+}
+
+.desktop {
+  background-color: $ui-01;
+
+  .paginationContainer div {
+    background-color: $ui-01;
+  }
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) > div:nth-child(2) {
+  position: relative;
+}
+
+.visitTypeOverviewWrapper div:nth-child(3) span * {
+  display: none;
+}
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: spacing.$spacing-03;
+  min-height: spacing.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: spacing.$spacing-02 spacing.$spacing-05;
+  margin: spacing.$spacing-03 0;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: '';
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .desktopHeading,
+  .tabletHeading {
+    text-align: right;
+  }
+}