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

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import moment from 'moment';
 
 import PurchasesByItemsActionsBar from './PurchasesByItemsActionsBar';
@@ -9,7 +9,7 @@ import { FinancialStatement, DashboardPageContent } from '@/components';
 import { PurchasesByItemsLoadingBar } from './components';
 import { PurchasesByItemsProvider } from './PurchasesByItemsProvider';
 import { PurchasesByItemsBody } from './PurchasesByItemsBody';
-import { getDefaultPurchasesByItemsQuery } from './utils';
+import { usePurchasesByItemsQuery } from './utils';
 import { compose } from '@/utils';
 
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
@@ -21,9 +21,7 @@ function PurchasesByItems({
   // #withPurchasesByItemsActions
   togglePurchasesByItemsFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultPurchasesByItemsQuery(),
-  });
+  const { query, setLocationQuery } = usePurchasesByItemsQuery();
 
   // Handle filter form submit.
   const handleFilterSubmit = useCallback(
@@ -33,11 +31,10 @@ function PurchasesByItems({
         fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
-      setFilter(parsedFilter);
+      setLocationQuery(parsedFilter);
     },
-    [setFilter],
+    [setLocationQuery],
   );
-
   // Handle number format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({
@@ -45,7 +42,6 @@ function PurchasesByItems({
       numberFormat,
     });
   };
-
   // Hide the filter drawer once the page unmount.
   useEffect(
     () => () => {
@@ -55,9 +51,9 @@ function PurchasesByItems({
   );
 
   return (
-    <PurchasesByItemsProvider query={filter}>
+    <PurchasesByItemsProvider query={query}>
       <PurchasesByItemsActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <PurchasesByItemsLoadingBar />
@@ -65,7 +61,7 @@ function PurchasesByItems({
       <DashboardPageContent>
         <FinancialStatement>
           <PurchasesByItemsHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <PurchasesByItemsBody />

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsGeneralPanel.tsx

@@ -1,14 +1,12 @@
 // @ts-nocheck
 import React from 'react';
-import { FormGroup, Classes } from '@blueprintjs/core';
-import { Field } from 'formik';
 import {
   Row,
   Col,
   FormattedMessage as T,
   ItemsMultiSelect,
+  FFormGroup,
 } from '@/components';
-import classNames from 'classnames';
 import FinancialStatementDateRange from '../FinancialStatementDateRange';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
 import { filterItemsOptions } from '../constants';
@@ -51,22 +49,9 @@ function PurchasesByItemsGeneralPanelContent() {
 
       <Row>
         <Col xs={4}>
-          <Field name={'itemsIds'}>
-            {({ form: { setFieldValue } }) => (
-              <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 name={'itemsIds'} label={<T id={'Specific items'} />}>
+            <ItemsMultiSelect name={'itemsIds'} items={items} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

packages/webapp/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.tsx

@@ -1,14 +1,11 @@
 // @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 styled from 'styled-components';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
 
 import { FormattedMessage as T } from '@/components';
-
 import FinancialStatementHeader from '@/containers/FinancialStatements/FinancialStatementHeader';
 import PurchasesByItemsGeneralPanel from './PurchasesByItemsGeneralPanel';
 
@@ -16,6 +13,10 @@ import withPurchasesByItems from './withPurchasesByItems';
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
 
 import { compose, transformToForm } from '@/utils';
+import {
+  getDefaultPurchasesByItemsQuery,
+  getPurchasesByItemsQuerySchema,
+} from './utils';
 
 /**
  * Purchases by items header.
@@ -32,38 +33,26 @@ function PurchasesByItemsHeader({
   togglePurchasesByItemsFilterDrawer,
 }) {
   // 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')),
-  });
-  // Default form values.
-  const defaultValues = {
-    ...pageFilter,
-    fromDate: moment().toDate(),
-    toDate: moment().toDate(),
-    itemsIds: [],
-  };
+  const validationSchema = getPurchasesByItemsQuerySchema();
+
+  const defaultQuery = getDefaultPurchasesByItemsQuery();
+
   // Initial form values.
   const initialValues = transformToForm(
     {
-      ...defaultValues,
+      ...defaultQuery,
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
     },
-    defaultValues,
+    defaultQuery,
   );
-
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);
     togglePurchasesByItemsFilterDrawer(false);
   };
-
   // Handle drawer close & cancel action.
   const handleDrawerClose = () => {
     togglePurchasesByItemsFilterDrawer(false);

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

@@ -1,11 +1,67 @@
 // @ts-nocheck
+import React from 'react';
 import moment from 'moment';
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
+import { castArray } from 'lodash';
 
+/**
+ * Retrieves the purchases by items query.
+ */
+export const getDefaultPurchasesByItemsQuery = () => ({
+  fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+  toDate: moment().endOf('year').format('YYYY-MM-DD'),
+  filterByOption: 'with-transactions',
+  itemsIds: [],
+});
 
-export const getDefaultPurchasesByItemsQuery = () => {
+/**
+ *
+ * @returns
+ */
+export const getPurchasesByItemsQuerySchema = () => {
+  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')),
+  });
+};
+
+/**
+ *
+ * @param locationQuery
+ * @returns
+ */
+const parsePurchasesByItemsQuery = (locationQuery) => {
+  const defaultQuery = getDefaultPurchasesByItemsQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
   return {
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-  }
-}
+    ...transformed,
+
+    //
+    itemsIds: castArray(transformed.itemsIds),
+  };
+};
+
+/**
+ *
+ * @returns
+ */
+export const usePurchasesByItemsQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = React.useMemo(
+    () => parsePurchasesByItemsQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};