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

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

@@ -1,8 +1,8 @@
 // @ts-nocheck
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import moment from 'moment';
 
-import { getDefaultAPAgingSummaryQuery } from './common';
+import { useAPAgingSummaryQuery } from './common';
 import { FinancialStatement, DashboardPageContent } from '@/components';
 
 import APAgingSummaryHeader from './APAgingSummaryHeader';
@@ -26,25 +26,23 @@ function APAgingSummary({
   // #withAPAgingSummaryActions
   toggleAPAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    ...getDefaultAPAgingSummaryQuery(),
-  });
+  const { query, setLocationQuery } = useAPAgingSummaryQuery();
 
   // Handle filter submit.
-  const handleFilterSubmit = useCallback((filter) => {
-    const _filter = {
-      ...filter,
-      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
-    };
-    setFilter(_filter);
-  }, []);
+  const handleFilterSubmit = useCallback(
+    (filter) => {
+      const _filter = {
+        ...filter,
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+      };
+      setLocationQuery(_filter);
+    },
+    [setLocationQuery],
+  );
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setFilter({
-      ...filter,
-      numberFormat,
-    });
+    setLocationQuery({ ...filter, numberFormat });
   };
   // Hide the report filter drawer once the page unmount.
   useEffect(
@@ -55,9 +53,9 @@ function APAgingSummary({
   );
 
   return (
-    <APAgingSummaryProvider filter={filter}>
+    <APAgingSummaryProvider filter={query}>
       <APAgingSummaryActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <APAgingSummarySheetLoadingBar />
@@ -65,7 +63,7 @@ function APAgingSummary({
       <DashboardPageContent>
         <FinancialStatement name={'AP-aging-summary'}>
           <APAgingSummaryHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <APAgingSummaryBody organizationName={organizationName} />

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.tsx

@@ -1,7 +1,5 @@
 // @ts-nocheck
 import React from 'react';
-import moment from 'moment';
-import * as Yup from 'yup';
 import styled from 'styled-components';
 import { FormattedMessage as T } from '@/components';
 import { Formik, Form } from 'formik';
@@ -17,6 +15,10 @@ import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 import { transformToForm, compose } from '@/utils';
 import { useFeatureCan } from '@/hooks/state';
 import { Features } from '@/constants';
+import {
+  getAPAgingSummaryQuerySchema,
+  getDefaultAPAgingSummaryQuery,
+} from './common';
 
 /**
  * AP Aging Summary Report - Drawer Header.
@@ -33,39 +35,22 @@ function APAgingSummaryHeader({
   isFilterDrawerOpen,
 }) {
   // Validation schema.
-  const validationSchema = Yup.object({
-    asDate: Yup.date().required().label('asDate'),
-    agingDaysBefore: Yup.number()
-      .required()
-      .integer()
-      .positive()
-      .label('agingBeforeDays'),
-    agingPeriods: Yup.number()
-      .required()
-      .integer()
-      .positive()
-      .label('agingPeriods'),
-  });
+  const validationSchema = getAPAgingSummaryQuerySchema();
 
   // Initial values.
-  const defaultValues = {
-    asDate: moment(pageFilter.asDate).toDate(),
-    agingDaysBefore: 30,
-    agingPeriods: 3,
-    vendorsIds: [],
-    branchesIds: [],
-    filterByOption: 'without-zero-balance',
-  };
-  // Formik initial values.
-  const initialValues = transformToForm({ ...pageFilter }, defaultValues);
+  const defaultValues = getDefaultAPAgingSummaryQuery();
 
+  // Formik initial values.
+  const initialValues = transformToForm(
+    { ...defaultValues, ...pageFilter },
+    defaultValues,
+  );
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
-
   // Handle cancel button click.
   const handleCancelClick = () => {
     toggleFilterDrawerDisplay(false);
@@ -76,7 +61,6 @@ function APAgingSummaryHeader({
   };
   // Detarmines the feature whether is enabled.
   const { featureCan } = useFeatureCan();
-
   const isBranchesFeatureCan = featureCan(Features.Branches);
 
   return (

packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx

@@ -1,21 +1,15 @@
 // @ts-nocheck
 import React from 'react';
-import { FastField, Field } from 'formik';
+import { FastField } from 'formik';
+import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import {
-  Intent,
-  FormGroup,
-  InputGroup,
-  Position,
-  Classes,
-} from '@blueprintjs/core';
-import classNames from 'classnames';
 import {
   FormattedMessage as T,
-  ContactsMultiSelect,
   Row,
   Col,
   FieldHint,
+  FFormGroup,
+  VendorsMultiSelect,
 } from '@/components';
 import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
 import FinancialStatementsFilter from '../FinancialStatementsFilter';
@@ -104,22 +98,9 @@ export default function APAgingSummaryHeaderGeneralContent() {
 
       <Row>
         <Col xs={5}>
-          <Field name={'vendorsIds'}>
-            {({ form: { setFieldValue }, field: { value } }) => (
-              <FormGroup
-                label={<T id={'specific_vendors'} />}
-                className={classNames('form-group--select-list', Classes.FILL)}
-              >
-                <ContactsMultiSelect
-                  items={vendors}
-                  onItemSelect={(vendors) => {
-                    const vendorsIds = vendors.map((customer) => customer.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/APAgingSummary/common.tsx

@@ -1,18 +1,78 @@
 // @ts-nocheck
 import moment from 'moment';
-import { transformToCamelCase, flatObject } from '@/utils';
+import * as Yup from 'yup';
+import { transformToCamelCase, flatObject, transformToForm } from '@/utils';
+import { useAppQueryString } from '@/hooks';
+import { useMemo } from 'react';
 
 export const transformFilterFormToQuery = (form) => {
   return flatObject(transformToCamelCase(form));
 };
 
+/**
+ *
+ * @returns
+ */
 export const getDefaultAPAgingSummaryQuery = () => {
   return {
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
     agingDaysBefore: 30,
     agingPeriods: 3,
+    filterByOption: 'without-zero-balance',
     vendorsIds: [],
     branchesIds: [],
-    filterByOption: 'without-zero-balance',
-  }
-}
+  };
+};
+
+/**
+ * Retrieves the query validation schema.
+ * @returns {Yup}
+ */
+export const getAPAgingSummaryQuerySchema = () => {
+  return Yup.object({
+    asDate: Yup.date().required().label('asDate'),
+    agingDaysBefore: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingBeforeDays'),
+    agingPeriods: Yup.number()
+      .required()
+      .integer()
+      .positive()
+      .label('agingPeriods'),
+  });
+};
+
+/**
+ * 
+ * @param locationQuery 
+ * @returns 
+ */
+const parseAPAgingSummaryQuery = (locationQuery) => {
+  const defaultQuery = getDefaultAPAgingSummaryQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+  return {
+    ...transformed,
+  };
+};
+
+/**
+ *
+ * @returns
+ */
+export const useAPAgingSummaryQuery = () => {
+  // Retrieves location query.
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  // Merges the default filter query with location URL query.
+  const query = useMemo(
+    () => parseAPAgingSummaryQuery(locationQuery),
+    [locationQuery],
+  );
+  return { query, locationQuery, setLocationQuery };
+};