UISACQCOMP-221: Change FundFilter component to support multi-select…

…ion for Fund codes (#822) * UISACQCOMP-221: Change `FundFilter` component to support multi-selection for Fund codes * test: fix failing test
folio-org · Oct 23, 2024 · 1ba2c0e · 1ba2c0e
1 parent a7b4bdc
commit 1ba2c0e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@
 * Add "Amount must be a positive number" validation for "Set exchange rate" field. Refs UISACQCOMP-218.
 * Create common utilities for managing response errors. Refs UISACQCOMP-219.
 * ECS - expand `ConsortiumFieldInventory` component with `additionalAffiliationIds` prop to display affiliation name for User without affiliation in specific tenant. Refs UISACQCOMP-220.
+* Change `FundFilter` component to support multi-selection for Fund codes. Refs UISACQCOMP-221.
 
 ## [5.1.2](https://github.com/folio-org/stripes-acq-components/tree/v5.1.2) (2024-09-13)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.1.1...v5.1.2)

diff --git a/lib/FundFilter/FundFilter.js b/lib/FundFilter/FundFilter.js
@@ -1,28 +1,62 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import { SelectionFilter } from '../SelectionFilter';
+import { MultiSelectionFilter } from '@folio/stripes/smart-components';
+
+import { FilterAccordion } from '../FilterAccordion';
 
 const getFundOptions = (funds = []) => funds.map(fund => ({
   value: fund.id,
   label: fund.code,
 }));
 
-const FundFilter = ({ funds, labelId, ...rest }) => {
-  const options = getFundOptions(funds);
+const FundFilter = ({
+  funds,
+  labelId,
+  name,
+  id,
+  disabled,
+  activeFilters,
+  closedByDefault,
+  onChange,
+  ...rest
+}) => {
+  const dataOptions = getFundOptions(funds);
 
   return (
-    <SelectionFilter
-      {...rest}
-      options={options}
+    <FilterAccordion
+      activeFilters={activeFilters}
+      closedByDefault={closedByDefault}
+      disabled={disabled}
+      id={id}
       labelId={labelId}
-    />
+      name={name}
+      onChange={onChange}
+    >
+      {!dataOptions ? '' : (
+        <MultiSelectionFilter
+          ariaLabelledBy={`accordion-toggle-button-${id}`}
+          dataOptions={dataOptions}
+          disabled={disabled}
+          id="fund-filter"
+          name={name}
+          onChange={onChange}
+          selectedValues={activeFilters}
+          {...rest}
+        />
+      )}
+    </FilterAccordion>
   );
 };
 
 FundFilter.propTypes = {
   funds: PropTypes.arrayOf(PropTypes.object),
+  activeFilters: PropTypes.arrayOf(PropTypes.string),
+  closedByDefault: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string.isRequired,
   labelId: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
 };
 
 FundFilter.defaultProps = {

diff --git a/lib/FundFilter/FundFilter.test.js b/lib/FundFilter/FundFilter.test.js
@@ -48,7 +48,7 @@ describe('FundFilter component', () => {
   it('should render all passed options', async () => {
     const { findAllByText, getByText } = renderFundFilter(fundRecords);
 
-    fireEvent.click(getByText('stripes-components.selection.controlLabel'));
+    fireEvent.click(getByText('0 items selected'));
 
     const renderedFilterOptions = await findAllByText(/Fund #[0-9]/);