feat: Customers Multi Select

client/src/components/CustomersMultiSelect.js

@@ -0,0 +1,82 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { omit } from 'lodash';
+import MultiSelect from 'components/MultiSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function CustomersMultiSelect({
+  customers,
+  defaultText = <T id={'all_customers'} />,
+  buttonProps,
+
+  onCustomerSelected,
+  ...selectProps
+}) {
+  const [selectedCustomers, setSelectedCustomers] = useState({});
+
+  const isCustomerSelect = useCallback(
+    (id) => typeof selectedCustomers[id] !== 'undefined',
+    [selectedCustomers],
+  );
+
+  const customerRenderer = useCallback(
+    (customer, { handleClick }) => (
+      <MenuItem
+        icon={isCustomerSelect(customer.id) ? 'tick' : 'blank'}
+        text={customer.display_name}
+        key={customer.id}
+        onClick={handleClick}
+      />
+    ),
+    [isCustomerSelect],
+  );
+
+  const countSelected = useMemo(() => Object.values(selectedCustomers).length, [
+    selectedCustomers,
+  ]);
+
+  const onContactSelect = useCallback(
+    ({ id }) => {
+      const selected = {
+        ...(isCustomerSelect(id)
+          ? {
+              ...omit(selectedCustomers, [id]),
+            }
+          : {
+              ...selectedCustomers,
+              [id]: true,
+            }),
+      };
+      setSelectedCustomers({ ...selected });
+      onCustomerSelected && onCustomerSelected(selected);
+    },
+    [
+      setSelectedCustomers,
+      selectedCustomers,
+      isCustomerSelect,
+      onCustomerSelected,
+    ],
+  );
+
+  return (
+    <MultiSelect
+      items={customers}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={customerRenderer}
+      popoverProps={{ minimal: true }}
+      filterable={true}
+      onItemSelect={onContactSelect}
+    >
+      <Button
+        text={
+          countSelected === 0 ? (
+            defaultText
+          ) : (
+            <T id={'selected_customers'} values={{ count: countSelected }} />
+          )
+        }
+        {...buttonProps}
+      />
+    </MultiSelect>
+  );
+}

client/src/components/index.js

@@ -43,6 +43,7 @@ import DashboardCard from './Dashboard/DashboardCard';
 import InputPrependText from './Forms/InputPrependText';
 import PageFormBigNumber from './PageFormBigNumber';
 import AccountsMultiSelect from './AccountsMultiSelect';
+import CustomersMultiSelect from './CustomersMultiSelect';
 
 const Hint = FieldHint;
 
@@ -91,5 +92,6 @@ export {
   InputPrependText,
   PageFormBigNumber,
   AccountsMultiSelect,
-  DataTableEditable
+  DataTableEditable,
+  CustomersMultiSelect
 };

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js

@@ -1,15 +1,28 @@
 import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
+import {
+  Intent,
+  FormGroup,
+  InputGroup,
+  Position,
+  Classes,
+} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { Row, Col, FieldHint } from 'components';
+import classNames from 'classnames';
+import { CustomersMultiSelect, Row, Col, FieldHint } from 'components';
 import { momentFormatter } from 'utils';
+import withCustomers from 'containers/Customers/withCustomers';
+
+import { compose } from 'redux';
 
 /**
  * AR Aging Summary - Drawer Header - General Fields.
  */
-export default function ARAgingSummaryHeaderGeneral({}) {
+function ARAgingSummaryHeaderGeneral({
+  // #withCustomers
+  customers,
+}) {
   return (
     <div>
       <Row>
@@ -48,7 +61,11 @@ export default function ARAgingSummaryHeaderGeneral({}) {
                 className={'form-group--aging-before-days'}
                 intent={error && Intent.DANGER}
               >
-                <InputGroup medium={true} intent={error && Intent.DANGER} {...field } />
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
               </FormGroup>
             )}
           </FastField>
@@ -65,12 +82,31 @@ export default function ARAgingSummaryHeaderGeneral({}) {
                 className={'form-group--aging-periods'}
                 intent={error && Intent.DANGER}
               >
-                <InputGroup medium={true} intent={error && Intent.DANGER} {...field} />
+                <InputGroup
+                  medium={true}
+                  intent={error && Intent.DANGER}
+                  {...field}
+                />
               </FormGroup>
             )}
           </FastField>
         </Col>
       </Row>
+      <Row>
+        <Col xs={5}>
+          <FormGroup
+            label={<T id={'specific_customers'} />}
+            className={classNames('form-group--select-list', Classes.FILL)}
+          >
+            <CustomersMultiSelect customers={customers} />
+          </FormGroup>
+        </Col>
+      </Row>
     </div>
   );
 }
+export default compose(
+  withCustomers(({ customers }) => ({
+    customers,
+  })),
+)(ARAgingSummaryHeaderGeneral);

client/src/lang/en/index.js

@@ -970,5 +970,8 @@ export default {
     'You could not delete item that has associated inventory adjustments transactions',
   format: 'Format',
   current: 'Current',
-  adjustment_reasons: 'Adjustment reasons'
+  adjustment_reasons: 'Adjustment reasons',
+  specific_customers: 'Specific Customers',
+  all_customers: 'All Customers',
+  selected_customers: '{count} Selected Customers',
 };