fix(webapp): filter by customers, vendors and items in reports do not work

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
 import moment from 'moment';
-import intl from 'react-intl-universal';
 import styled from 'styled-components';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
@@ -14,7 +12,11 @@ import SalesByItemsHeaderGeneralPanel from './SalesByItemsHeaderGeneralPanel';
 import withSalesByItems from './withSalesByItems';
 import withSalesByItemsActions from './withSalesByItemsActions';
 
-import { compose } from '@/utils';
+import { compose, transformToForm } from '@/utils';
+import {
+  getDefaultSalesByItemsQuery,
+  getSalesByItemsQueryShema,
+} from './utils';
 
 /**
  * Sales by items header.
@@ -31,21 +33,22 @@ function SalesByItemsHeader({
   toggleSalesByItemsFilterDrawer,
 }) {
   // Form validation schema.
-  const validationSchema = Yup.object().shape({
-    fromDate: Yup.date().required().label(intl.get('from_date')),
-    toDate: Yup.date()
-      .min(Yup.ref('fromDate'))
-      .required()
-      .label(intl.get('to_date')),
-  });
+  const validationSchema = getSalesByItemsQueryShema();
+
+  const defaultQuery = getDefaultSalesByItemsQuery();
 
   // Initial values.
-  const initialValues = {
-    ...pageFilter,
-    fromDate: moment(pageFilter.fromDate).toDate(),
-    toDate: moment(pageFilter.toDate).toDate(),
-  };
+  const initialValues = transformToForm(
+    {
+      ...defaultQuery,
+      ...pageFilter,
+      fromDate: moment(pageFilter.fromDate).toDate(),
+      toDate: moment(pageFilter.toDate).toDate(),
+    },
+    defaultQuery,
+  );
 
+  // Handle the form submitting.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);

packages/webapp/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeaderGeneralPanel.tsx

@@ -1,13 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup, Classes } from '@blueprintjs/core';
-import { Field } from 'formik';
-import classNames from 'classnames';
-
-import { filterItemsOptions } from '../constants';
-import { Row, Col, ItemsMultiSelect, FormattedMessage as T } from '@/components';
+import {
+  Row,
+  Col,
+  ItemsMultiSelect,
+  FormattedMessage as T,
+  FFormGroup,
+} from '@/components';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
+import { filterItemsOptions } from '../constants';
 import {
   SalesByItemGeneralPanelProvider,
   useSalesByItemsGeneralPanelContext,
@@ -46,22 +48,9 @@ function SalesByItemsHeaderGeneralPanelContent() {
 
       <Row>
         <Col xs={4}>
-          <Field name={'itemsIds'}>
-            {({ form: { setFieldValue }, field: { value } }) => (
-              <FormGroup
-                label={<T id={'Specific items'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ItemsMultiSelect
-                  items={items}
-                  onItemSelect={(items) => {
-                    const itemsIds = items.map((item) => item.id);
-                    setFieldValue('itemsIds', itemsIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup label={<T id={'Specific items'} />} name={'itemsIds'}>
+            <ItemsMultiSelect name={'itemsIds'} items={items} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/FinancialStatements/SalesByItems/utils.tsx

@@ -1,10 +1,28 @@
 // @ts-nocheck
 import moment from 'moment';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
 
-export const getDefaultSalesByItemsQuery = () => {
-  return {
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-  };
+/**
+ * Retrieves the validation schema.
+ * @returns {Yup}
+ */
+export const getSalesByItemsQueryShema = () => {
+  return Yup.object().shape({
+    fromDate: Yup.date().required().label(intl.get('from_date')),
+    toDate: Yup.date()
+      .min(Yup.ref('fromDate'))
+      .required()
+      .label(intl.get('to_date')),
+  });
 };
+
+/**
+ * Retrieves the default query.
+ */
+export const getDefaultSalesByItemsQuery = () => ({
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  filterByOption: 'with-transactions',
+  itemsIds: [],
+});