diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js index 191670ea5..75f95553c 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js @@ -11,40 +11,36 @@ import { InventoryValuationLoadingBar } from './components'; import withInventoryValuationActions from './withInventoryValuationActions'; import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization'; +import { useInventoryValuationQuery } from './utils'; import { compose } from 'utils'; /** * Inventory valuation. */ function InventoryValuation({ - // #withPreferences - organizationName, - // #withInventoryValuationActions toggleInventoryValuationFilterDrawer, }) { - const [filter, setFilter] = useState({ - asDate: moment().endOf('day').format('YYYY-MM-DD'), - filterByOption: 'with-transactions', - }); + const { query, setLocationQuery } = useInventoryValuationQuery(); // Handle filter form submit. - const handleFilterSubmit = useCallback((filter) => { - const _filter = { - ...filter, - asDate: moment(filter.asDate).format('YYYY-MM-DD'), - }; - setFilter(_filter); - }, []); - + const handleFilterSubmit = useCallback( + (filter) => { + const newFilter = { + ...filter, + asDate: moment(filter.asDate).format('YYYY-MM-DD'), + }; + setLocationQuery(newFilter); + }, + [setLocationQuery], + ); // Handle number format form submit. const handleNumberFormatSubmit = (numberFormat) => { - setFilter({ - ...filter, + setLocationQuery({ + ...query, numberFormat, }); }; - // Hide the filter drawer once the page unmount. useEffect( () => () => { @@ -54,16 +50,16 @@ function InventoryValuation({ ); return ( - + diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js index df27f7647..58199f11c 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js @@ -44,10 +44,9 @@ function InventoryValuationHeader({ // Initial values. const initialValues = transformToForm( { - ...pageFilter, ...defaultValues, + ...pageFilter, asDate: moment(pageFilter.asDate).toDate(), - warehousesIds: [], }, defaultValues, ); diff --git a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.js b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.js index 37c80c236..401af6fe7 100644 --- a/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.js +++ b/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanel.js @@ -1,7 +1,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { FormGroup, Classes } from '@blueprintjs/core'; -import { WarehouseMultiSelect, Row, Col } from 'components'; +import { BranchMultiSelect, WarehouseMultiSelect, Row, Col } from 'components'; import { InventoryValuationHeaderDimensionsProvider, useInventoryValuationHeaderDimensionsPanelContext, @@ -9,7 +9,7 @@ import { /** * Inventory Valuation header dismension panel. - * @returns + * @returns {JSX.Element} */ export default function InventoryValuationHeaderDimensionsPanel() { return ( @@ -21,14 +21,22 @@ export default function InventoryValuationHeaderDimensionsPanel() { /** * Inventory Valuation header dismension panel content. - * @returns + * @returns {JSX.Element} */ function InventoryValuationHeaderDimensionsPanelContent() { - const { warehouses } = useInventoryValuationHeaderDimensionsPanelContext(); + const { warehouses, branches } = + useInventoryValuationHeaderDimensionsPanelContext(); return ( + + + + ) : ( transformFilterFormToQuery(query), + [query], + ); + const { data: inventoryValuation, isFetching, isLoading, refetch, - } = useInventoryValuation( - { - ...transformFilterFormToQuery(query), - }, - { - keepPreviousData: true, - }, - ); - + } = useInventoryValuation(requestQuery, { + keepPreviousData: true, + }); // Provider data. const provider = { diff --git a/src/containers/FinancialStatements/InventoryValuation/utils.js b/src/containers/FinancialStatements/InventoryValuation/utils.js new file mode 100644 index 000000000..6f3632ece --- /dev/null +++ b/src/containers/FinancialStatements/InventoryValuation/utils.js @@ -0,0 +1,58 @@ +import React from 'react'; +import moment from 'moment'; +import { castArray } from 'lodash'; + +import { useAppQueryString } from 'hooks'; +import { transformToForm } from 'utils'; + +/** + * Retrieves the inventory valuation sheet default query. + */ +export const getInventoryValuationQuery = () => { + return { + asDate: moment().endOf('day').format('YYYY-MM-DD'), + filterByOption: 'with-transactions', + + branchesIds: [], + warehousesIds: [], + }; +}; + +/** + * Parses inventory valiation location query to report query. + */ +const parseInventoryValuationQuery = (locationQuery) => { + const defaultQuery = getInventoryValuationQuery(); + + const transformed = { + ...defaultQuery, + ...transformToForm(locationQuery, defaultQuery), + }; + return { + ...transformed, + + // Ensures the branches/warehouses ids is always array. + branchesIds: castArray(transformed.branchesIds), + warehousesIds: castArray(transformed.warehousesIds), + }; +}; + +/** + * Retrieves the inventory valuation sheet location query. + */ +export const useInventoryValuationQuery = () => { + // Retrieves location query. + const [locationQuery, setLocationQuery] = useAppQueryString(); + + // Merges the default filter query with location URL query. + const query = React.useMemo( + () => parseInventoryValuationQuery(locationQuery), + [locationQuery], + ); + + return { + query, + locationQuery, + setLocationQuery, + }; +};