@openmrs/esm-service-queues-app 9.2.1-pre.7118 → 9.2.1-pre.7125

package/src/hooks/usePatientSearchVisibility.tsx

@@ -1,26 +0,0 @@
-import { useCallback, useState } from 'react';
-
-const usePatientSearchVisibility = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const showPatientSearch = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-
-  const hidePatientSearch = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  const togglePatientSearch = useCallback(() => {
-    setIsOpen(!isOpen);
-  }, [isOpen]);
-
-  return {
-    hidePatientSearch,
-    isPatientSearchOpen: isOpen,
-    showPatientSearch,
-    togglePatientSearch,
-  };
-};
-
-export default usePatientSearchVisibility;

package/src/queue-patient-linelists/queue-linelist-filter.scss

@@ -1,53 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@openmrs/esm-styleguide/src/vars' as *;
-
-.wrapper {
-  background-color: $ui-02;
-  padding: layout.$spacing-06;
-}
-
-.grid {
-  padding: 0 layout.$spacing-06 layout.$spacing-03;
-  background-color: $ui-01;
-  margin-bottom: layout.$spacing-05;
-}
-
-.heading {
-  color: $text-02;
-  @include type.type-style('heading-compact-02');
-  margin: layout.$spacing-04 0 layout.$spacing-04;
-}
-
-.radioButton {
-  margin-top: layout.$spacing-03;
-}
-
-.button {
-  height: layout.$spacing-10;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 50%;
-}
-
-.numberInputs {
-  margin-top: layout.$spacing-02;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.tablet {
-  padding: layout.$spacing-06 layout.$spacing-05;
-  background-color: $ui-02;
-}
-
-.desktop {
-  padding: 0;
-  margin-top: layout.$spacing-05;
-}
-
-.form {
-  height: 100%;
-}

package/src/queue-patient-linelists/queue-linelist-filter.test.tsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { render, screen, within } from '@testing-library/react';
-import { useLayoutType, useVisitTypes } from '@openmrs/esm-framework';
-import { mockVisitTypes } from '__mocks__';
-import QueueLinelistFilter from './queue-linelist-filter.workspace';
-
-const mockUseLayoutType = jest.mocked(useLayoutType);
-const mockUseVisitTypes = jest.mocked(useVisitTypes);
-
-const workspaceProps = {
-  closeWorkspace: jest.fn(),
-  promptBeforeClosing: jest.fn(),
-  closeWorkspaceWithSavedChanges: jest.fn(),
-  setTitle: jest.fn(),
-};
-
-describe('QueueLinelistFilter', () => {
-  beforeEach(() => {
-    mockUseLayoutType.mockReturnValue('tablet');
-    mockUseVisitTypes.mockReturnValue(mockVisitTypes);
-  });
-
-  it('renders the form with filter elements', () => {
-    render(<QueueLinelistFilter {...workspaceProps} />);
-
-    expect(screen.getByText('Gender')).toBeInTheDocument();
-    expect(screen.getByLabelText('Age')).toBeInTheDocument();
-    expect(screen.getByLabelText('Between')).toBeInTheDocument();
-    expect(screen.getByLabelText('And')).toBeInTheDocument();
-    expect(screen.getByText("Use today's date")).toBeInTheDocument();
-    expect(screen.getByRole('combobox', { name: /Select visit type/i })).toBeInTheDocument();
-    expect(screen.getByText('Cancel')).toBeInTheDocument();
-    expect(screen.getByText('Apply filters')).toBeInTheDocument();
-  });
-
-  it('calls closePanel function when cancel button is clicked', async () => {
-    const user = userEvent.setup();
-    const closeWorkspace = jest.fn();
-
-    render(<QueueLinelistFilter {...{ ...workspaceProps, closeWorkspace }} />);
-
-    const cancelButton = screen.getByText('Cancel');
-    await user.click(cancelButton);
-
-    expect(closeWorkspace).toHaveBeenCalledTimes(1);
-  });
-
-  it('updates gender state when a radio button is selected', async () => {
-    const user = userEvent.setup();
-
-    render(<QueueLinelistFilter {...workspaceProps} />);
-
-    const maleRadioButton = screen.getByLabelText('Male');
-    await user.click(maleRadioButton);
-
-    expect(maleRadioButton).toBeChecked();
-  });
-
-  it('updates startAge state when a number is entered', async () => {
-    const user = userEvent.setup();
-    render(<QueueLinelistFilter {...workspaceProps} />);
-
-    const startAgeInput = screen.getByLabelText('Between');
-    await user.type(startAgeInput, '10');
-
-    expect(startAgeInput).toHaveValue(10);
-  });
-
-  it('should open the visit type dropdown and close after selection', async () => {
-    const user = userEvent.setup();
-
-    render(<QueueLinelistFilter {...workspaceProps} />);
-
-    const visitTypeDropdown = screen.getByRole('combobox', { name: /Select visit type/i });
-    await user.click(visitTypeDropdown);
-
-    const type1Option = screen.getByText('Outpatient Visit');
-    await user.click(type1Option);
-
-    expect(visitTypeDropdown).toHaveTextContent('Open menu');
-  });
-});

package/src/queue-patient-linelists/queue-linelist-filter.workspace.tsx

@@ -1,180 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  ButtonSet,
-  Column,
-  Dropdown,
-  Form,
-  Layer,
-  NumberInput,
-  RadioButton,
-  RadioButtonGroup,
-  Stack,
-  Toggle,
-} from '@carbon/react';
-import dayjs from 'dayjs';
-import {
-  type DefaultWorkspaceProps,
-  OpenmrsDatePicker,
-  toDateObjectStrict,
-  toOmrsIsoString,
-  useLayoutType,
-  useVisitTypes,
-} from '@openmrs/esm-framework';
-import { datePickerFormat, datePickerPlaceHolder } from '../constants';
-import styles from './queue-linelist-filter.scss';
-
-const QueueLinelistFilter: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
-  const { t } = useTranslation();
-  const allVisitTypes = useVisitTypes();
-  const isTablet = useLayoutType() === 'tablet';
-
-  const [endAge, setEndAge] = useState();
-  const [gender, setGender] = useState('');
-  const [returnDate, setReturnDate] = useState(new Date());
-  const [startAge, setStartAge] = useState();
-  const [visitType, setVisitType] = useState('');
-
-  const handleFilter = useCallback(
-    (event) => {
-      event.preventDefault();
-
-      const payload = {
-        gender: gender,
-        startAge: startAge,
-        endAge: endAge,
-        returnDate: toDateObjectStrict(
-          toOmrsIsoString(new Date(dayjs(returnDate).year(), dayjs(returnDate).month(), dayjs(returnDate).date())),
-        ),
-        visitType: visitType,
-      };
-    },
-    [gender, startAge, endAge, returnDate, visitType],
-  );
-
-  const handleTodaysDate = () => {
-    setReturnDate(new Date());
-  };
-
-  return (
-    <>
-      <Form onSubmit={handleFilter}>
-        <div className={styles.wrapper}>
-          <Stack gap={4} className={styles.grid}>
-            <Column>
-              <p className={styles.heading}> {t('gender', 'Gender')}</p>
-              <RadioButtonGroup name="gender" orientation="vertical" onChange={(event) => setGender(event.toString())}>
-                <RadioButton
-                  className={styles.radioButton}
-                  id="male"
-                  labelText={t('maleLabelText', 'Male')}
-                  value="Male"
-                />
-                <RadioButton
-                  className={styles.radioButton}
-                  id="female"
-                  labelText={t('femaleLabelText', 'Female')}
-                  value="Female"
-                />
-              </RadioButtonGroup>
-            </Column>
-          </Stack>
-
-          <Stack gap={4} className={styles.grid}>
-            <Column md={2}>
-              <p className={styles.heading}> {t('age', 'Age')}</p>
-              <Layer>
-                <Toggle
-                  size="sm"
-                  aria-label={t('age', 'Age')}
-                  defaultToggled
-                  id="age"
-                  labelA={t('off', 'Off')}
-                  labelB={t('on', 'On')}
-                  labelText=""
-                />
-              </Layer>
-              <Layer className={styles.numberInputs}>
-                <Layer>
-                  <NumberInput
-                    id="startAge"
-                    invalidText={t('startAgeRangeInvalid', 'Start age range is not valid')}
-                    label={t('between', 'Between')}
-                    max={100}
-                    min={0}
-                    onChange={(event) => setStartAge(event.target.value)}
-                    size="md"
-                    value={startAge}
-                  />
-                </Layer>
-                <Layer>
-                  <NumberInput
-                    id="endAge"
-                    invalidText={t('endAgeRangeInvalid', 'End age range is not valid')}
-                    label={t('and', 'And')}
-                    max={100}
-                    min={0}
-                    onChange={(event) => setEndAge(event.target.value)}
-                    size="md"
-                    value={endAge}
-                  />
-                </Layer>
-              </Layer>
-            </Column>
-          </Stack>
-
-          <Stack gap={4} className={styles.grid}>
-            <Column md={2}>
-              <p className={styles.heading}> {t('returnDate', 'Return Date')}</p>
-              <Layer>
-                <OpenmrsDatePicker
-                  data-testid="returnDate"
-                  id="returnDate"
-                  labelText={t('date', 'Date')}
-                  onChange={setReturnDate}
-                  value={returnDate}
-                />
-              </Layer>
-              <Button
-                kind="ghost"
-                onClick={() => {
-                  handleTodaysDate();
-                }}>
-                {t('useTodaysDate', "Use today's date")}
-              </Button>
-            </Column>
-          </Stack>
-
-          <Stack gap={4} className={styles.grid}>
-            <Column>
-              <p className={styles.heading}>{t('visitType', 'Visit Type')}</p>
-              <Layer>
-                <Dropdown
-                  id="visitType"
-                  label={t('selectAVisitType', 'Select visit type')}
-                  titleText={t('selectAVisitType', 'Select visit type')}
-                  items={allVisitTypes}
-                  onChange={(event) => setVisitType(event.selectedItem.toString)}
-                  size="sm"
-                  itemToElement={(item) => (item ? <span>{item.display}</span> : null)}
-                />
-              </Layer>
-            </Column>
-          </Stack>
-        </div>
-
-        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
-          <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
-            {t('cancel', 'Cancel')}
-          </Button>
-          <Button className={styles.button} kind="primary" type="submit">
-            {t('applyFilters', 'Apply filters')}
-          </Button>
-        </ButtonSet>
-      </Form>
-    </>
-  );
-};
-
-export default QueueLinelistFilter;