diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js index d3cb35169..5171a460a 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js @@ -15,9 +15,8 @@ import { GeneralLedgerBody } from './GeneralLedgerBody'; import withGeneralLedgerActions from './withGeneralLedgerActions'; -import { transformFilterFormToQuery } from 'containers/FinancialStatements/common'; +import { useGeneralLedgerQuery } from './common'; import { compose } from 'utils'; -import { getDefaultGeneralLedgerQuery } from './common'; /** * General Ledger (GL) sheet. @@ -26,9 +25,8 @@ function GeneralLedger({ // #withGeneralLedgerActions toggleGeneralLedgerFilterDrawer, }) { - const [filter, setFilter] = useState({ - ...getDefaultGeneralLedgerQuery(), - }); + // General ledger query. + const { query, setLocationQuery } = useGeneralLedgerQuery(); // Handle financial statement filter change. const handleFilterSubmit = useCallback( @@ -38,9 +36,9 @@ function GeneralLedger({ fromDate: moment(filter.fromDate).format('YYYY-MM-DD'), toDate: moment(filter.toDate).format('YYYY-MM-DD'), }; - setFilter(parsedFilter); + setLocationQuery(parsedFilter); }, - [setFilter], + [setLocationQuery], ); // Hide the filter drawer once the page unmount. @@ -52,13 +50,13 @@ function GeneralLedger({ ); return ( - + diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js index 8ce5f75a7..ec6a93d22 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js @@ -14,6 +14,7 @@ import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsP import withGeneralLedger from './withGeneralLedger'; import withGeneralLedgerActions from './withGeneralLedgerActions'; +import { getDefaultGeneralLedgerQuery } from './common'; import { compose, transformToForm, saveInvoke } from 'utils'; /** @@ -31,11 +32,7 @@ function GeneralLedgerHeader({ isFilterDrawerOpen, }) { // Default values. - const defaultValues = { - fromDate: moment().toDate(), - toDate: moment().toDate(), - branchesIds: [], - }; + const defaultValues = getDefaultGeneralLedgerQuery(); // Initial values. const initialValues = transformToForm( @@ -43,30 +40,25 @@ function GeneralLedgerHeader({ ...pageFilter, fromDate: moment(pageFilter.fromDate).toDate(), toDate: moment(pageFilter.toDate).toDate(), - branchesIds: [], }, defaultValues, ); - // Validation schema. const validationSchema = Yup.object().shape({ dateRange: Yup.string().optional(), fromDate: Yup.date().required(), toDate: Yup.date().min(Yup.ref('fromDate')).required(), }); - // Handle form submit. const handleSubmit = (values, { setSubmitting }) => { saveInvoke(onSubmitFilter, values); - toggleDisplayFilterDrawer(); + toggleDisplayFilterDrawer(false); setSubmitting(false); }; - // Handle cancel button click. const handleCancelClick = () => { toggleDisplayFilterDrawer(false); }; - // Handle drawer close action. const handleDrawerClose = () => { toggleDisplayFilterDrawer(false); diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js index a2979d236..e83a7d882 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js @@ -1,6 +1,8 @@ import React, { createContext, useContext } from 'react'; + import FinancialReportPage from '../FinancialReportPage'; -import { useGeneralLedgerSheet, useAccounts } from 'hooks/query'; +import { useGeneralLedgerSheet } from 'hooks/query'; +import { transformFilterFormToQuery } from '../common'; const GeneralLedgerContext = createContext(); @@ -8,12 +10,18 @@ const GeneralLedgerContext = createContext(); * General ledger provider. */ function GeneralLedgerProvider({ query, ...props }) { + // Transformes the report query to request query. + const requestQuery = React.useMemo( + () => transformFilterFormToQuery(query), + [query], + ); + const { data: generalLedger, isFetching, isLoading, refetch, - } = useGeneralLedgerSheet(query, { keepPreviousData: true }); + } = useGeneralLedgerSheet(requestQuery, { keepPreviousData: true }); const provider = { generalLedger, diff --git a/src/containers/FinancialStatements/GeneralLedger/common.js b/src/containers/FinancialStatements/GeneralLedger/common.js index 211d588be..8463342b1 100644 --- a/src/containers/FinancialStatements/GeneralLedger/common.js +++ b/src/containers/FinancialStatements/GeneralLedger/common.js @@ -1,6 +1,12 @@ +import React from 'react'; import intl from 'react-intl-universal'; import moment from 'moment'; +import { castArray } from 'lodash'; +import { useAppQueryString } from 'hooks'; +import { transformToForm } from 'utils'; + +// Filters accounts options. export const filterAccountsOptions = [ { key: 'all-accounts', @@ -25,5 +31,39 @@ export const getDefaultGeneralLedgerQuery = () => { toDate: moment().endOf('year').format('YYYY-MM-DD'), basis: 'accural', filterByOption: 'with-transactions', + branchesIds: [], }; }; + +/** + * Parses general ledger query of browser location. + */ +const parseGeneralLedgerQuery = (locationQuery) => { + const defaultQuery = getDefaultGeneralLedgerQuery(); + + const transformed = { + ...defaultQuery, + ...transformToForm(locationQuery, defaultQuery), + }; + return { + ...transformed, + + // Ensures the branches ids is always array. + branchesIds: castArray(transformed.branchesIds), + }; +}; + +/** + * Retrieves the general ledger location query. + */ +export const useGeneralLedgerQuery = () => { + // Retrieves location query. + const [locationQuery, setLocationQuery] = useAppQueryString(); + + // Merges the default filter query with location URL query. + const query = React.useMemo( + () => parseGeneralLedgerQuery(locationQuery), + [locationQuery], + ); + return { query, locationQuery, setLocationQuery }; +};