Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/provider filter #1355

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions docusaurus/docs/form/select/components/provider-select.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
title: <AvProviderSelect />
---

A select list that automatically loads and pages through providers when the user scrolls down.

### Example

```jsx
import React from 'react';
import { Form } from '@availity/form';
import { AvProviderSelect } from '@availity/select';
import { Button } from 'reactstrap';
import * as yup from 'yup';
import '@availity/yup';

const Example = () => (
<Form
initialValues={{
providers: '',
}}
onSubmit={(values) => apiResource.submit(values)}
validationSchema={yup.object().shape({
providers: yup.string().isRequired('This field is required.'),
})}
>
<AvProviderSelect
id="providers"
name="providers"
parameters={{ atypical: false }}
requiredParams={['customerId']}
watchParams={['customerId']}
/>
<Button color="primary" type="submit">
Submit
</Button>
</Form>
);
```

#### Live example: [Storybook](https://availity.github.io/availity-react/storybook/?path=/story/formik-select-resources--avProviderselect)

### Props

Extends [ResourceSelect Props](/form/select/components/resource-select/#props).

#### `searchAll?: boolean`

The `providers` API from `sdk-js` accepts a role parameter. By default, most applications will only want to return providers who are assigned to the office of the provider's organization, as opposed to the many third-party providers and organizations that they may do business with from time to time as billing or referring providers. If searchAll is true, we will remove this default behavior and return the full list of first and third-party affiliated providers.

#### `parameters: Record<string, unknown>`

This will either be passed directly to the underlying resourceSelect or modified as described above in the searchAll section.
27 changes: 27 additions & 0 deletions packages/select/src/AvProviderSelect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from 'react';
import PropTypes from 'prop-types';
import { avProvidersApi } from '@availity/api-axios';
import ResourceSelect from './ResourceSelect';

const ProviderSelect = ResourceSelect.create({
resource: avProvidersApi,
labelKey: 'uiDisplayName',
valueKey: 'npi',
requiredParams: ['customerId'],
watchParams: ['customerId'],
});

const AvProviderSelect = ({ searchAll = false, parameters: originalParams, ...props }) => {
let parameters = originalParams;
if (!searchAll && typeof parameters !== 'function') {
parameters = { ...originalParams, role: 'OFFICE' };
}
return <ProviderSelect {...props} parameters={parameters} />;
};

AvProviderSelect.propTypes = {
searchAll: PropTypes.bool,
parameters: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
};

export default AvProviderSelect;
1 change: 1 addition & 0 deletions packages/select/src/SelectField.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { FormText } from 'reactstrap';
// eslint-disable-next-line import/no-unresolved
import { FormGroup, Feedback, Label } from '@availity/form';

import Select from './Select';
Expand Down
24 changes: 16 additions & 8 deletions packages/select/src/resources.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export { AvOrganizationSelect, AvRegionSelect };
type PrebuiltResourceSelectProps<
Option,
IsMulti extends boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
> = Omit<ResourceSelectProps<Option, IsMulti, Group>, 'resource'>;

type Code = {
Expand All @@ -21,7 +21,7 @@ type Code = {
export declare const AvCodeSelect: <
Option = Code,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group>
) => JSX.Element;
Expand All @@ -40,7 +40,7 @@ type NavOption = {
export declare const AvNavigationSelect: <
Option = NavOption,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group>
) => JSX.Element;
Expand All @@ -54,7 +54,7 @@ type Payer = {
export declare const AvPayerSelect: <
Option = Payer,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group> & { customerId: string }
) => JSX.Element;
Expand Down Expand Up @@ -84,7 +84,7 @@ type Permission = {
export declare const AvPermissionSelect: <
Option = Permission,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group>
) => JSX.Element;
Expand All @@ -109,12 +109,20 @@ type Provider = {
};
};

type AvProviderSelectProps<
Option,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>,
> = PrebuiltResourceSelectProps<Option, IsMulti, Group> & {
searchAll?: boolean;
};

export declare const AvProviderSelect: <
Option = Provider,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group> & { customerId: string }
props: AvProviderSelectProps<Option, IsMulti, Group> & { customerId: string }
) => JSX.Element;

type User = {
Expand All @@ -135,7 +143,7 @@ type User = {
export declare const AvUserSelect: <
Option = User,
IsMulti extends boolean = boolean,
Group extends GroupBase<Option> = GroupBase<Option>
Group extends GroupBase<Option> = GroupBase<Option>,
>(
props: PrebuiltResourceSelectProps<Option, IsMulti, Group>
) => JSX.Element;
Expand Down
11 changes: 2 additions & 9 deletions packages/select/src/resources.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { avCodesApi, avNavigationApi, avPermissionsApi, avProvidersApi, avUserApi } from '@availity/api-axios';
import { avCodesApi, avNavigationApi, avPermissionsApi, avUserApi } from '@availity/api-axios';

import ResourceSelect from './ResourceSelect';
import AvOrganizationSelect from './AvOrganizationSelect';
import AvPayerSelect from './AvPayerSelect';
import AvRegionSelect from './AvRegionSelect';
import AvProviderSelect from './AvProviderSelect';

const AvCodeSelect = ResourceSelect.create({
resource: avCodesApi,
Expand All @@ -25,14 +26,6 @@ const AvPermissionSelect = ResourceSelect.create({
valueKey: 'id',
});

const AvProviderSelect = ResourceSelect.create({
resource: avProvidersApi,
labelKey: 'uiDisplayName',
valueKey: 'npi',
requiredParams: ['customerId'],
watchParams: ['customerId'],
});

const AvUserSelect = ResourceSelect.create({
resource: avUserApi,
getOptionLabel: (option) => `${option.firstName} ${option.lastName} (${option.id}) - ${option.userId}`,
Expand Down
5 changes: 3 additions & 2 deletions packages/select/tests/ResourceSelect.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
import AvApi, { avRegionsApi, avProvidersApi, avCodesApi } from '@availity/api-axios';
import userEvent from '@testing-library/user-event';
import { Button } from 'reactstrap';
// eslint-disable-next-line import/no-unresolved
import { Form } from '@availity/form';

import { ResourceSelect } from '../src';
Expand Down Expand Up @@ -214,7 +215,7 @@ describe('ResourceSelect', () => {

expect(providerOption).toBeDefined();
expect(avProvidersApi.postGet).toHaveBeenCalledTimes(1);
expect(avProvidersApi.postGet.mock.calls[0][0]).toBe('q=&limit=50&customerId=1194&offset=0');
expect(avProvidersApi.postGet.mock.calls[0][0]).toBe('q=&limit=50&customerId=1194&offset=0&role=OFFICE');

// rerender with same props should not trigger api call
rerender(<ProviderComponent providerProps={providerProps} />);
Expand All @@ -234,7 +235,7 @@ describe('ResourceSelect', () => {

expect(providerOption).toBeDefined();
expect(avProvidersApi.postGet).toHaveBeenCalledTimes(2);
expect(avProvidersApi.postGet.mock.calls[1][0]).toBe('q=&limit=50&customerId=1195&offset=0');
expect(avProvidersApi.postGet.mock.calls[1][0]).toBe('q=&limit=50&customerId=1195&offset=0&role=OFFICE');
});

it('waits to query resource until input is focused when waitUntilFocused is true', async () => {
Expand Down
1 change: 1 addition & 0 deletions packages/select/tests/Select.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
import { Button } from 'reactstrap';
import { components } from 'react-select';
import * as yup from 'yup';
// eslint-disable-next-line import/no-unresolved
import { Form, Input } from '@availity/form';

import Select from '../src';
Expand Down
1 change: 1 addition & 0 deletions packages/select/tests/SelectField.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { Button } from 'reactstrap';
// eslint-disable-next-line import/no-unresolved
import { Form } from '@availity/form';

import { SelectField } from '../src';
Expand Down