BIG-3: add filtering non-zero items.

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js

@@ -31,23 +31,26 @@ function VendorsTransactionsHeader({
 }) {
   // Default form values.
   const defaultValues = {
+    ...pageFilter,
     fromDate: moment().toDate(),
     toDate: moment().toDate(),
     vendorsIds: [],
   };
 
   // Initial form values.
-  const initialValues = transformToForm({
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  }, defaultValues);
+  const initialValues = transformToForm(
+    {
+      ...defaultValues,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultValues,
+  );
 
   // Validation schema.
   const validationSchema = Yup.object().shape({
-    fromDate: Yup.date()
-      .required()
-      .label(intl.get('fromDate')),
+    fromDate: Yup.date().required().label(intl.get('fromDate')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
@@ -62,7 +65,9 @@ function VendorsTransactionsHeader({
   };
 
   // Handle drawer close action.
-  const handleDrawerClose = () => { toggleFilterDrawer(false); };
+  const handleDrawerClose = () => {
+    toggleFilterDrawer(false);
+  };
 
   return (
     <FinancialStatementHeader

src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeaderGeneralPanel.js

@@ -4,12 +4,16 @@ import classNames from 'classnames';
 import { Classes, FormGroup } from '@blueprintjs/core';
 
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
+import FinancialStatementsFilter from '../FinancialStatementsFilter';
+
 import {
   Row,
   Col,
   ContactsMultiSelect,
   FormattedMessage as T,
 } from '../../../components';
+import { filterVendorsOptions } from '../common';
+
 import {
   VendorsTransactionsGeneralPanelProvider,
   useVendorsTransactionsGeneralPanelContext,
@@ -35,7 +39,11 @@ function VendorsTransactionsHeaderGeneralPanelContent() {
   return (
     <div>
       <FinancialStatementDateRange />
-
+      <FinancialStatementsFilter
+        items={filterVendorsOptions}
+        label={<T id={'vendors.label_filter_vendors'} />}
+        initialSelectedItem={'all-vendors'}
+      />
       <Row>
         <Col xs={5}>
           <Field name={'vendorsIds'}>