UISACQCOMP-169: add donor filters component

CHANGELOG.md

@@ -7,6 +7,7 @@
 * View the list of donors. Refs UISACQCOMP-166.
 * Added `indexRef` and `inputRef` props to `<SingleSearchForm>`. Refs UISACQCOMP-167.
 * Extend Donors component functionality. Refs UISACQCOMP-168.
+* Add Donors Filter component. Refs UISACQCOMP-169.
 
 ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0)

lib/DonorFilter/PluggableDonorFilter.js

@@ -0,0 +1,113 @@
+import { map, sortBy } from 'lodash';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { MultiSelection } from '@folio/stripes/components';
+import { stripesConnect } from '@folio/stripes/core';
+
+import {
+  DonorsLookup,
+  useFetchDonors,
+} from '../Donors';
+import { FilterAccordion } from '../FilterAccordion';
+import { organizationByPropManifest } from '../manifests';
+
+const PluggableDonorFilter = ({
+  id,
+  activeFilters,
+  closedByDefault,
+  disabled,
+  labelId,
+  name,
+  onChange,
+}) => {
+  const { donors } = useFetchDonors(activeFilters);
+  const [selectedDonors, setSelectedDonors] = useState([]);
+
+  useEffect(() => {
+    if (activeFilters?.length && !selectedDonors?.length) {
+      setSelectedDonors(donors);
+    }
+  }, [activeFilters, donors, selectedDonors]);
+
+  const onSelectDonor = useCallback((values) => {
+    setSelectedDonors(donors);
+    onChange({
+      name,
+      values: map(values, 'id'),
+    });
+  }, [donors, name, onChange]);
+
+  const onRemove = useCallback((donor) => {
+    const updatedDonorIds = selectedDonors.filter(({ id: donorId }) => donorId !== donor.value);
+
+    setSelectedDonors(updatedDonorIds);
+    onChange({
+      name,
+      values: map(updatedDonorIds, 'id'),
+    });
+  }, [name, onChange, selectedDonors]);
+
+  const intl = useIntl();
+  const label = intl.formatMessage({ id: labelId });
+  const dataOptions = useMemo(() => {
+    return selectedDonors.map(donor => ({ value: donor.id, label: donor.name }));
+  }, [selectedDonors]);
+
+  return (
+    <FilterAccordion
+      activeFilters={activeFilters}
+      closedByDefault={closedByDefault}
+      disabled={disabled}
+      id={id}
+      labelId={labelId}
+      name={name}
+      onChange={onChange}
+    >
+      <MultiSelection
+        id="input-tag"
+        aria-label={label}
+        disabled
+        dataOptions={sortBy(dataOptions, ['value'])}
+        value={sortBy(dataOptions, ['value'])}
+        onRemove={onRemove}
+      />
+      <DonorsLookup
+        searchButtonStyle="link"
+        onAddDonors={onSelectDonor}
+        searchLabel={<FormattedMessage id="stripes-acq-components.filter.donor.lookup" />}
+      />
+    </FilterAccordion>
+  );
+};
+
+PluggableDonorFilter.manifest = {
+  filterOrganization: {
+    ...organizationByPropManifest,
+    accumulate: true,
+    fetch: false,
+  },
+};
+
+PluggableDonorFilter.propTypes = {
+  activeFilters: PropTypes.arrayOf(PropTypes.string),
+  closedByDefault: PropTypes.bool,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  labelId: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+PluggableDonorFilter.defaultProps = {
+  closedByDefault: true,
+  disabled: false,
+};
+
+export default stripesConnect(PluggableDonorFilter);

lib/DonorFilter/index.js

@@ -0,0 +1 @@
+export { default as PluggableDonorFilter } from './PluggableDonorFilter';

lib/Donors/DonorsLookup.js

@@ -22,6 +22,7 @@ export const DonorsLookup = ({
   onAddDonors,
   searchLabel,
   visibleColumns,
+  searchButtonStyle,
 }) => {
   const stripes = useStripes();
 
@@ -32,7 +33,7 @@ export const DonorsLookup = ({
       type="find-organization"
       dataKey="organization"
       searchLabel={searchLabel}
-      searchButtonStyle="default"
+      searchButtonStyle={searchButtonStyle}
       disableRecordCreation
       stripes={stripes}
       selectVendor={onAddDonors}
@@ -59,9 +60,11 @@ DonorsLookup.propTypes = {
   searchLabel: PropTypes.node,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
   columnWidths: PropTypes.object,
+  searchButtonStyle: PropTypes.string,
 };
 
 DonorsLookup.defaultProps = {
   searchLabel: <FormattedMessage id="stripes-acq-components.donors.button.addDonor" />,
   visibleColumns: pluginVisibleColumns,
+  searchButtonStyle: 'default',
 };

lib/index.js

@@ -17,6 +17,7 @@ export * from './CurrencyExchangeRateFields';
 export * from './CurrencySymbol';
 export * from './DeleteHoldingsModal';
 export * from './Donors';
+export * from './DonorFilter';
 export * from './DragDropMCL';
 export * from './DynamicSelection';
 export * from './DynamicSelectionFilter';

translations/stripes-acq-components/en.json

@@ -107,6 +107,8 @@
   "organization": "Organization",
   "filter.organization.lookup": "Organization look-up",
   "filter.organization.lookupNoSupport": "Organization look-up is not supported",
+  "filter.donor.lookup": "Donor look-up",
+  "filter.donor.lookupNoSupport": "Donor look-up is not supported",
   "filter.user.lookup": "User look-up",
   "filter.user.lookupNoSupport": "user look-up is not supported",
   "filter.expenseClass": "Expense class",