@kenyaemr/esm-service-queues-app 8.1.1-pre.129 → 8.1.2-pre.152

package/src/add-patient-toqueue/add-patient-toqueue-dialog.component.tsx

@@ -1,228 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Form,
-  InlineNotification,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  Select,
-  SelectItem,
-  RadioButtonGroup,
-  RadioButton,
-  RadioButtonSkeleton,
-  SelectSkeleton,
-} from '@carbon/react';
-import { showSnackbar, useConfig } from '@openmrs/esm-framework';
-import { postQueueEntry } from '../active-visits/active-visits-table.resource';
-import { type ActiveVisit } from '../visits-missing-inqueue/visits-missing-inqueue.resource';
-import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
-import { useQueues } from '../hooks/useQueues';
-import { useMutateQueueEntries } from '../hooks/useQueueEntries';
-import { type ConfigObject } from '../config-schema';
-import styles from './add-patient-toqueue-dialog.scss';
-
-interface AddVisitToQueueDialogProps {
-  visitDetails: ActiveVisit;
-  closeModal: () => void;
-}
-
-const AddVisitToQueue: React.FC<AddVisitToQueueDialogProps> = ({ visitDetails, closeModal }) => {
-  const { t } = useTranslation();
-
-  const visitUuid = visitDetails?.visitUuid;
-  const [queueUuid, setQueueUuid] = useState('');
-  const patientUuid = visitDetails?.patientUuid;
-  const patientName = visitDetails?.name;
-  const patientAge = visitDetails?.age;
-  const patientSex = visitDetails?.gender;
-  const [selectedQueueLocation, setSelectedQueueLocation] = useState('');
-  const { queues, isLoading: isLoadingQueues } = useQueues(selectedQueueLocation);
-  const { queueLocations, isLoading: isLoadingQueueLocations } = useQueueLocations();
-  const [isMissingPriority, setIsMissingPriority] = useState(false);
-  const [isMissingService, setIsMissingService] = useState(false);
-  const config = useConfig<ConfigObject>();
-  const { mutateQueueEntries } = useMutateQueueEntries();
-  const [priority, setPriority] = useState(config.concepts.defaultPriorityConceptUuid);
-  const priorities = queues.find((q) => q.uuid === queueUuid)?.allowedPriorities ?? [];
-
-  const addVisitToQueue = useCallback(() => {
-    if (!queueUuid) {
-      setIsMissingService(true);
-      return;
-    }
-    setIsMissingService(false);
-
-    if (!priority) {
-      setIsMissingPriority(true);
-      return;
-    }
-    setIsMissingPriority(false);
-    const emergencyPriorityConceptUuid = config.concepts.emergencyPriorityConceptUuid;
-    const sortWeight = priority === emergencyPriorityConceptUuid ? 1.0 : 0.0;
-    const status = config.concepts.defaultStatusConceptUuid;
-    const visitQueueNumberAttributeUuid = config.visitQueueNumberAttributeUuid;
-
-    postQueueEntry(
-      visitUuid,
-      queueUuid,
-      patientUuid,
-      priority,
-      status,
-      sortWeight,
-      selectedQueueLocation,
-      visitQueueNumberAttributeUuid,
-    ).then(
-      ({ status }) => {
-        if (status === 201) {
-          showSnackbar({
-            isLowContrast: true,
-            title: t('addEntry', 'Add entry'),
-            kind: 'success',
-            subtitle: t('queueEntryAddedSuccessfully', 'Queue entry added successfully'),
-          });
-          closeModal();
-          mutateQueueEntries();
-        }
-      },
-      (error) => {
-        showSnackbar({
-          title: t('queueEntryAddFailed', 'Error adding queue entry status'),
-          kind: 'error',
-          isLowContrast: false,
-          subtitle: error?.message,
-        });
-      },
-    );
-  }, [
-    queueUuid,
-    priority,
-    config.concepts.emergencyPriorityConceptUuid,
-    config.concepts.defaultStatusConceptUuid,
-    config.visitQueueNumberAttributeUuid,
-    visitUuid,
-    patientUuid,
-    selectedQueueLocation,
-    t,
-    closeModal,
-    mutateQueueEntries,
-  ]);
-
-  return (
-    <div>
-      <ModalHeader closeModal={closeModal} title={t('addVisitToQueue', 'Add Visit To Queue?')} />
-      <ModalBody>
-        <Form onSubmit={addVisitToQueue}>
-          <div className={styles.modalBody}>
-            <h5>
-              {patientName} &nbsp; · &nbsp;{patientSex} &nbsp; · &nbsp;{patientAge}&nbsp;{t('years', 'Years')}
-            </h5>
-          </div>
-          <section>
-            {isLoadingQueueLocations ? (
-              <SelectSkeleton />
-            ) : (
-              <Select
-                labelText={t('selectQueueLocation', 'Select a queue location')}
-                id="location"
-                invalidText="Required"
-                value={selectedQueueLocation}
-                onChange={(event) => setSelectedQueueLocation(event.target.value)}>
-                {!selectedQueueLocation ? (
-                  <SelectItem text={t('selectQueueLocation', '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>
-            )}
-          </section>
-
-          <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('queueService', 'Queue service')}</div>
-            {isLoadingQueues ? (
-              <SelectSkeleton />
-            ) : (
-              <Select
-                labelText={t('selectService', 'Select a service')}
-                id="service"
-                invalidText="Required"
-                value={queueUuid}
-                onChange={(event) => setQueueUuid(event.target.value)}>
-                {!queueUuid ? <SelectItem text={t('chooseService', 'Select a service')} value="" /> : null}
-                {queues?.length > 0 &&
-                  queues.map((service) => (
-                    <SelectItem key={service.uuid} text={service.display} value={service.uuid}>
-                      {service.display}
-                    </SelectItem>
-                  ))}
-              </Select>
-            )}
-          </section>
-          {isMissingService && (
-            <section>
-              <InlineNotification
-                style={{ margin: '0', minWidth: '100%' }}
-                kind="error"
-                lowContrast={true}
-                title={t('pleaseSelectService', 'Please select a service')}
-              />
-            </section>
-          )}
-
-          <section className={styles.section}>
-            <div className={styles.sectionTitle}>{t('queueStatus', 'Queue status')}</div>
-            {isLoadingQueues ? (
-              <RadioButtonGroup>
-                <RadioButtonSkeleton />
-                <RadioButtonSkeleton />
-                <RadioButtonSkeleton />
-              </RadioButtonGroup>
-            ) : !priorities?.length ? (
-              <InlineNotification
-                className={styles.inlineNotification}
-                kind={'error'}
-                lowContrast
-                subtitle={t('configurePriorities', 'Please configure priorities to continue.')}
-                title={t('noPriorityFound', 'No priority found')}
-              />
-            ) : (
-              <RadioButtonGroup
-                className={styles.radioButtonWrapper}
-                name="priority"
-                defaultSelected={priority}
-                onChange={(uuid) => {
-                  setPriority(uuid);
-                }}>
-                {priorities?.length > 0 &&
-                  priorities.map(({ uuid, display }) => <RadioButton key={uuid} labelText={display} value={uuid} />)}
-              </RadioButtonGroup>
-            )}
-          </section>
-          {isMissingPriority && (
-            <section>
-              <InlineNotification
-                style={{ margin: '0', minWidth: '100%' }}
-                kind="error"
-                lowContrast={true}
-                title={t('missingPriority', 'Please select a priority')}
-              />
-            </section>
-          )}
-        </Form>
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={closeModal}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button onClick={addVisitToQueue}>{t('save', 'Save')}</Button>
-      </ModalFooter>
-    </div>
-  );
-};
-
-export default AddVisitToQueue;

package/src/add-patient-toqueue/add-patient-toqueue-dialog.scss

@@ -1,32 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.radioButtonGroup {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-top: layout.$spacing-03;
-  min-height: layout.$spacing-10;
-  width: 100%;
-  @include type.type-style('body-compact-01');
-}
-
-.radioButton {
-  padding: layout.$spacing-02 layout.$spacing-02;
-  margin: layout.$spacing-03 0;
-}
-
-section {
-  margin: layout.$spacing-03;
-}
-
-.sectionTitle {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: layout.$spacing-04;
-}
-
-.modalBody {
-  padding-bottom: layout.$spacing-05;
-}

package/src/patient-search/advanced-search.component.tsx

@@ -1,191 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  ButtonSet,
-  Column,
-  ContentSwitcher,
-  DatePicker,
-  DatePickerInput,
-  Form,
-  FormGroup,
-  Layer,
-  Stack,
-  Switch,
-  TextInput,
-} from '@carbon/react';
-import { ArrowLeft } from '@carbon/react/icons';
-import { useLayoutType } from '@openmrs/esm-framework';
-import { SearchTypes } from '../types';
-import styles from './advanced-search.scss';
-import { datePickerFormat, datePickerPlaceHolder } from '../constants';
-
-interface PatientSearchProps {
-  toggleSearchType: (searchMode: SearchTypes) => void;
-}
-
-enum fieldMatcherRange {
-  ANY = 'any',
-  ALL = 'all',
-}
-
-enum genders {
-  ANY = 'any',
-  MALE = 'male',
-  FEMALE = 'female',
-}
-
-const AdvancedSearch: React.FC<PatientSearchProps> = ({ toggleSearchType }) => {
-  const { t } = useTranslation();
-  const isTablet = useLayoutType() === 'tablet';
-  const [firstName, setFirstName] = useState('');
-  const [middleName, setMiddleName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [gender, setGender] = useState('');
-  const [dateOfBirth, setDateOfBirth] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
-  const [postCode, setPostCode] = useState('');
-  const [lastVisitDate, setLastVisitDate] = useState('');
-  const [fieldMatcherRangeSwitcherValue, setFieldMatcherRangeSwitcherValue] = useState(0);
-  const [genderSwitcherValue, setGenderSwitcherValue] = useState(0);
-  const [searchParams, setSearchParams] = useState([]);
-  const [open, setOpen] = useState(false);
-
-  const handleSearch = () => {
-    setSearchParams([firstName, middleName, lastName, gender, dateOfBirth, phoneNumber, postCode, lastVisitDate]);
-  };
-
-  return (
-    <Form onSubmit={handleSearch} className={styles.form}>
-      <div>
-        <div className={styles.backButton}>
-          <Button
-            kind="ghost"
-            renderIcon={(props) => <ArrowLeft size={24} {...props} />}
-            iconDescription="Back to simple search"
-            size="sm"
-            onClick={() => toggleSearchType(SearchTypes.BASIC)}>
-            <span>{t('backToSimpleSearch', 'Back to simple search')}</span>
-          </Button>
-        </div>
-        <Stack gap={4} className={styles.grid}>
-          <Column>
-            <div className={styles.contentSwitcherContainer}>
-              <span>{t('match', 'Match')}</span>
-              <ContentSwitcher
-                size="sm"
-                className={styles.fieldRangeSwitcher}
-                onChange={({ index }) => setFieldMatcherRangeSwitcherValue(index)}>
-                <Switch name={fieldMatcherRange.ANY} text={t('any', 'Any')} />
-                <Switch name={fieldMatcherRange.ALL} text={t('all', 'All')} />
-              </ContentSwitcher>
-              <span>{t('fields', 'of the following fields')}:</span>
-            </div>
-          </Column>
-
-          <Column>
-            <h3 className={styles.heading}>{t('name', 'Name')}</h3>
-            <Layer>
-              <TextInput
-                className={styles.input}
-                id="firstName"
-                labelText={t('firstName', 'First name')}
-                onChange={(event) => setFirstName(event.target.value)}
-                value={firstName}
-              />
-            </Layer>
-            <Layer>
-              <TextInput
-                className={styles.input}
-                id="middleName"
-                labelText={t('middleName', 'Middle name')}
-                onChange={(event) => setMiddleName(event.target.value)}
-                value={middleName}
-              />
-            </Layer>
-            <Layer>
-              <TextInput
-                className={styles.input}
-                id="lastName"
-                labelText={t('lastName', 'Last name')}
-                onChange={(event) => setLastName(event.target.value)}
-                value={lastName}
-              />
-            </Layer>
-          </Column>
-          <span className={styles.spacer} />
-
-          <Column>
-            <h3 className={styles.heading}>{t('personalDetails', 'Personal details')}</h3>
-            <FormGroup legendText={t('sex', 'Sex')}>
-              <ContentSwitcher
-                size="sm"
-                className={styles.genderSwitcher}
-                onChange={({ index }) => setGenderSwitcherValue(index)}>
-                <Switch name={genders.ANY} text={t('any', 'Any')} />
-                <Switch name={genders.MALE} text={t('male', 'Male')} />
-                <Switch name={genders.FEMALE} text={t('female', 'Female')} />
-              </ContentSwitcher>
-            </FormGroup>
-            <Layer>
-              <DatePicker datePickerType="single" dateFormat={datePickerFormat}>
-                <DatePickerInput
-                  id="dateOfBirth"
-                  placeholder={datePickerPlaceHolder}
-                  labelText={t('dateOfBirth', 'Date of birth')}
-                  onChange={(event) => setDateOfBirth(event.target.value)}
-                  type="date"
-                />
-              </DatePicker>
-            </Layer>
-            <Layer>
-              <TextInput
-                className={styles.input}
-                id="phoneNumber"
-                labelText={t('phoneNumber', 'Phone number')}
-                onChange={(event) => setPhoneNumber(event.target.value)}
-                value={phoneNumber}
-              />
-            </Layer>
-            <Layer>
-              <TextInput
-                className={styles.input}
-                id="postCode"
-                labelText={t('postCode', 'Post code')}
-                onChange={(event) => setPostCode(event.target.value)}
-                value={postCode}
-              />
-            </Layer>
-          </Column>
-          <span className={styles.spacer} />
-
-          <Column>
-            <h3 className={styles.heading}>{t('lastVisit', 'Last visit')}</h3>
-            <Layer>
-              <DatePicker datePickerType="single" dateFormat={datePickerFormat}>
-                <DatePickerInput
-                  id="lastVisitDate"
-                  placeholder={datePickerPlaceHolder}
-                  labelText={t('lastVisitDate', 'Date')}
-                  onChange={(event) => setLastVisitDate(event.target.value)}
-                  type="date"
-                  width={'120px'}
-                />
-              </DatePicker>
-            </Layer>
-          </Column>
-        </Stack>
-      </div>
-      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-        <Button className={styles.button} kind="secondary" onClick={() => toggleSearchType(SearchTypes.BASIC)}>
-          {t('cancel', 'Cancel')}
-        </Button>
-        <Button className={styles.button} kind="primary" type="submit">
-          {t('search', 'Search')}
-        </Button>
-      </ButtonSet>
-    </Form>
-  );
-};
-
-export default AdvancedSearch;

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

@@ -1,154 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.form {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: calc(100vh - layout.$spacing-11);
-}
-
-.grid {
-  margin: 0 layout.$spacing-05;
-  padding: 0;
-}
-
-.row {
-  margin: 0;
-
-  :global(.cds--col) {
-    :global(.cds--form-item) {
-      &:not(:first-of-type):not(:last-of-type) {
-        margin: layout.$spacing-05 0;
-      }
-    }
-
-    :global(.cds--fieldset) {
-      margin: 0;
-    }
-
-    :global(.cds--date-picker.cds--date-picker--single .cds--date-picker__input) {
-      width: layout.$spacing-13;
-    }
-  }
-}
-
-.heading {
-  @include type.type-style('heading-compact-02');
-  margin-bottom: layout.$spacing-03;
-}
-
-.spacer {
-  margin-top: layout.$spacing-07;
-  display: inline-block;
-}
-
-.backButton {
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  margin: layout.$spacing-03 0;
-  padding: 0;
-  @include type.type-style('body-compact-01');
-
-  button {
-    display: flex;
-
-    svg {
-      order: 1;
-      margin-right: layout.$spacing-03;
-      margin-left: 0 !important;
-    }
-
-    span {
-      order: 2;
-    }
-  }
-}
-
-.advancePatientSearchContainer {
-  margin: 0 layout.$spacing-05;
-
-  & .backButton {
-    margin: 0;
-  }
-
-  & > button {
-    padding-left: 0;
-  }
-}
-
-.label01 {
-  @include type.type-style('label-01');
-  color: $text-02;
-  margin: layout.$spacing-03 0;
-}
-
-.formTextInput {
-  margin-bottom: layout.$spacing-04;
-}
-
-.contentSwitcherContainer {
-  display: flex;
-  align-items: center;
-  height: layout.$spacing-09;
-  margin-bottom: layout.$spacing-05;
-
-  & > span {
-    @include type.type-style('heading-compact-01');
-    color: $text-02;
-  }
-}
-
-.formTitle {
-  font-weight: bold;
-  @include type.type-style('heading-compact-02');
-  margin-bottom: layout.$spacing-02;
-}
-
-.fieldRangeSwitcher {
-  width: 8rem;
-  margin: 0 layout.$spacing-03 0;
-}
-
-.genderSwitcher {
-  width: 18rem;
-  margin: layout.$spacing-02 0 layout.$spacing-05;
-}
-
-.button {
-  height: layout.$spacing-10;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
-}
-
-.tablet {
-  padding: layout.$spacing-06 layout.$spacing-05;
-  background-color: $ui-02;
-}
-
-.desktop {
-  padding: 0;
-  margin-top: layout.$spacing-05;
-}
-
-/* Desktop */
-:global(.omrs-breakpoint-gt-tablet) {
-  .form {
-    height: calc(100vh - layout.$spacing-11);
-  }
-}
-
-/* Tablet */
-:global(.omrs-breakpoint-lt-desktop) {
-  .form {
-    height: calc(100vh - layout.$spacing-09);
-  }
-}
-
-.input {
-  width: 13.5rem;
-}

package/src/patient-search/advanced-search.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import AdvancedSearch from './advanced-search.component';
-
-describe('AdvancedSearch', () => {
-  test('renders the advanced patient search in an overlay', async () => {
-    render(<AdvancedSearch toggleSearchType={jest.fn()} />);
-
-    expect(screen.getByRole('button', { name: /back to simple search/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^search$/i })).toBeInTheDocument();
-
-    await screen.findAllByText(/any/i);
-
-    expect(screen.getByRole('tab', { name: /^male$/i })).toBeInTheDocument();
-    expect(screen.getByRole('tab', { name: /^female$/i })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /name/i })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /personal details/i })).toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /last visit/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /first name/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /middle name/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /last name/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /phone number/i })).toBeInTheDocument();
-    expect(screen.getByRole('textbox', { name: /post code/i })).toBeInTheDocument();
-  });
-});