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

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

@@ -13,7 +13,7 @@ import { VendorBalanceSummaryBody } from './VendorsBalanceSummaryBody';
 
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
 
-import { getDefaultVendorsBalanceQuery } from './utils';
+import { useVendorsBalanceSummaryQuery } from './utils';
 import { compose } from '@/utils';
 
 /**
@@ -23,9 +23,7 @@ function VendorsBalanceSummary({
   // #withVendorsBalanceSummaryActions
   toggleVendorSummaryFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultVendorsBalanceQuery(),
-  });
+  const { query, setLocationQuery } = useVendorsBalanceSummaryQuery();
 
   // Handle refetch vendors balance summary.
   const handleFilterSubmit = (filter) => {
@@ -33,28 +31,26 @@ function VendorsBalanceSummary({
       ...filter,
       asDate: moment(filter.asDate).format('YYYY-MM-DD'),
     };
-    setFilter(_filter);
+    setLocationQuery(_filter);
   };
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (format) => {
-    setFilter({
+    setLocationQuery({
       ...filter,
       numberFormat: format,
     });
   };
 
   useEffect(
-    () => () => {
-      toggleVendorSummaryFilterDrawer(false);
-    },
+    () => () => toggleVendorSummaryFilterDrawer(false),
     [toggleVendorSummaryFilterDrawer],
   );
 
   return (
-    <VendorsBalanceSummaryProvider filter={filter}>
+    <VendorsBalanceSummaryProvider filter={query}>
       <VendorsBalanceSummaryActionsBar
-        numberFormat={filter?.numberFormat}
+        numberFormat={query?.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <VendorsSummarySheetLoadingBar />
@@ -62,7 +58,7 @@ function VendorsBalanceSummary({
       <DashboardPageContent>
         <FinancialStatement>
           <VendorsBalanceSummaryHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <VendorBalanceSummaryBody />

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React from 'react';
-import * as Yup from 'yup';
+
 import moment from 'moment';
 import styled from 'styled-components';
 import { Formik, Form } from 'formik';
@@ -13,6 +13,7 @@ import FinancialStatementHeader from '../FinancialStatementHeader';
 import VendorsBalanceSummaryHeaderGeneral from './VendorsBalanceSummaryHeaderGeneral';
 import withVendorsBalanceSummary from './withVendorsBalanceSummary';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';
+import { getVendorsBalanceQuerySchema } from './utils';
 
 /**
  * Vendors balance summary drawer header.
@@ -28,10 +29,8 @@ function VendorsBalanceSummaryHeader({
   //#withVendorsBalanceSummaryActions
   toggleVendorSummaryFilterDrawer,
 }) {
-  // validation schema.
-  const validationSchema = Yup.object().shape({
-    asDate: Yup.date().required().label('asDate'),
-  });
+  // Validation schema.
+  const validationSchema = getVendorsBalanceQuerySchema();
 
   // filter form initial values.
   const defaultValues = {
@@ -80,6 +79,7 @@ function VendorsBalanceSummaryHeader({
               panel={<VendorsBalanceSummaryHeaderGeneral />}
             />
           </Tabs>
+
           <div className={'financial-header-drawer__footer'}>
             <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />

packages/webapp/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.tsx

@@ -1,19 +1,18 @@
 // @ts-nocheck
 import React from 'react';
-import { Field, FastField } from 'formik';
+import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import classNames from 'classnames';
-import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
+import { FormGroup, Position, Checkbox } from '@blueprintjs/core';
 
 import {
-  ContactsMultiSelect,
   Row,
   Col,
   FieldHint,
   FormattedMessage as T,
+  FFormGroup,
+  VendorsMultiSelect,
 } from '@/components';
 import { filterVendorsOptions } from '../constants';
-
 import {
   momentFormatter,
   tansformDateValue,
@@ -87,22 +86,9 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() {
 
       <Row>
         <Col xs={5}>
-          <Field name={'vendorsIds'}>
-            {({ form: { setFieldValue } }) => (
-              <FormGroup
-                label={<T id={'specific_vendors'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ContactsMultiSelect
-                  items={vendors}
-                  onItemSelect={(contacts) => {
-                    const vendorsIds = contacts.map((contact) => contact.id);
-                    setFieldValue('vendorsIds', vendorsIds);
-                  }}
-                />
-              </FormGroup>
-            )}
-          </Field>
+          <FFormGroup label={<T id={'specific_vendors'} />} name={'vendorsIds'}>
+            <VendorsMultiSelect name={'vendorsIds'} items={vendors} />
+          </FFormGroup>
         </Col>
       </Row>
     </div>

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

@@ -1,9 +1,44 @@
 // @ts-nocheck
 import moment from 'moment';
+import { useMemo } from 'react';
+import * as Yup from 'yup';
+import { castArray } from 'lodash';
+import { useAppQueryString } from '@/hooks';
+import { transformToForm } from '@/utils';
 
 export const getDefaultVendorsBalanceQuery = () => {
   return {
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     filterByOption: 'with-transactions',
+    vendorsIds: [],
   };
-}
+};
+
+export const getVendorsBalanceQuerySchema = () => {
+  return Yup.object().shape({
+    asDate: Yup.date().required().label('asDate'),
+  });
+};
+
+export const parseVendorsBalanceSummaryQuery = (locationQuery) => {
+  const defaultQuery = getDefaultVendorsBalanceQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+    vendorsIds: castArray(transformed.vendorsIds),
+  };
+};
+
+export const useVendorsBalanceSummaryQuery = () => {
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const query = useMemo(
+    () => parseVendorsBalanceSummaryQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};