feat(InventoryValuation): location query.

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({
+  const { query, setLocationQuery } = useInventoryValuationQuery();
-    asDate: moment().endOf('day').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
-  });
 
   // Handle filter form submit.
-  const handleFilterSubmit = useCallback((filter) => {
+  const handleFilterSubmit = useCallback(
-    const _filter = {
+    (filter) => {
-      ...filter,
+      const newFilter = {
-      asDate: moment(filter.asDate).format('YYYY-MM-DD'),
+        ...filter,
-    };
+        asDate: moment(filter.asDate).format('YYYY-MM-DD'),
-    setFilter(_filter);
+      };
-  }, []);
+      setLocationQuery(newFilter);
-
+    },
+    [setLocationQuery],
+  );
   // Handle number format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
-    setFilter({
+    setLocationQuery({
-      ...filter,
+      ...query,
       numberFormat,
     });
   };
-
   // Hide the filter drawer once the page unmount.
   useEffect(
     () => () => {
@@ -54,16 +50,16 @@ function InventoryValuation({
   );
 
   return (
-    <InventoryValuationProvider query={filter}>
+    <InventoryValuationProvider query={query}>
       <InventoryValuationActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <InventoryValuationLoadingBar />
 
       <DashboardPageContent>
         <InventoryValuationHeader
-          pageFilter={filter}
+          pageFilter={query}
           onSubmitFilter={handleFilterSubmit}
         />
         <InventoryValuationBody />

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,
   );

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 (
     <Row>
       <Col xs={4}>
+        <FormGroup
+          label={intl.get('branches_multi_select.label')}
+          className={Classes.FILL}
+        >
+          <BranchMultiSelect name={'branchesIds'} branches={branches} />
+        </FormGroup>
+
         <FormGroup
           label={intl.get('warehouses_multi_select.label')}
           className={Classes.FILL}

src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderDimensionsPanelProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useWarehouses } from 'hooks/query';
+import { useWarehouses, useBranches } from 'hooks/query';
 import { Features } from 'common';
 import { useFeatureCan } from 'hooks/state';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
@@ -11,25 +11,36 @@ const InventoryValuationHeaderDimensionsPanelContext = React.createContext();
  * Inventory valuation header provider.
  * @returns
  */
-function InventoryValuationHeaderDimensionsProvider({ query, ...props }) {
+function InventoryValuationHeaderDimensionsProvider({ ...props }) {
   // Features guard.
   const { featureCan } = useFeatureCan();
 
+  // Detarmines whether the warehouses feature is accessiable.
   const isWarehouseFeatureCan = featureCan(Features.Warehouses);
 
-  // Fetch warehouses list.
+  // Detarmines whether the branches feature is accessiable.
+  const isBranchFeatureCan = featureCan(Features.Branches);
+
+  // Fetches the warehouses list.
   const { data: warehouses, isLoading: isWarehouesLoading } = useWarehouses(
-    query,
+    null,
     { enabled: isWarehouseFeatureCan },
   );
 
+  // Fetches the branches list.
+  const { data: branches, isLoading: isBranchLoading } = useBranches(null, {
+    enabled: isBranchFeatureCan,
+  });
+
   // Provider
   const provider = {
     warehouses,
+    branches,
     isWarehouesLoading,
+    isBranchLoading,
   };
 
-  return isWarehouesLoading ? (
+  return isWarehouesLoading || isBranchLoading ? (
     <FinancialHeaderLoadingSkeleton />
   ) : (
     <InventoryValuationHeaderDimensionsPanelContext.Provider

src/containers/FinancialStatements/InventoryValuation/InventoryValuationProvider.js

@@ -5,21 +5,24 @@ import { transformFilterFormToQuery } from '../common';
 
 const InventoryValuationContext = React.createContext();
 
+/**
+ * Inventory valuation sheet provider.
+ */
 function InventoryValuationProvider({ query, ...props }) {
+  // Transformes the filter form query to request query.
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
+  );
+
   const {
     data: inventoryValuation,
     isFetching,
     isLoading,
     refetch,
-  } = useInventoryValuation(
+  } = useInventoryValuation(requestQuery, {
-    {
+    keepPreviousData: true,
-      ...transformFilterFormToQuery(query),
+  });
-    },
-    {
-      keepPreviousData: true,
-    },
-  );
-
 
   // Provider data.
   const provider = {

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,
+  };
+};