feat(InventoryItemDetail): Location query.

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import moment from 'moment';
 
 import { FinancialStatement } from 'components';
@@ -8,30 +8,25 @@ import InventoryItemDetailsActionsBar from './InventoryItemDetailsActionsBar';
 import InventoryItemDetailsHeader from './InventoryItemDetailsHeader';
 
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { InventoryItemDetailsProvider } from './InventoryItemDetailsProvider';
 import {
   InventoryItemDetailsLoadingBar,
   InventoryItemDetailsAlerts,
 } from './components';
 
-import { compose } from 'utils';
 import { InventoryItemDetailsBody } from './InventoryItemDetailsBody';
+import { useInventoryValuationQuery } from './utils2';
+import { compose } from 'utils';
 
 /**
  * inventory item details.
  */
 function InventoryItemDetails({
-  // #withSettings
-  organizationName,
-
   //#withInventoryItemDetailsActions
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
-  const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-  });
+  const { query, setLocationQuery } = useInventoryValuationQuery();
+
   // Handle filter submit.
   const handleFilterSubmit = (filter) => {
     const _filter = {
@@ -39,23 +34,22 @@ function InventoryItemDetails({
       fromDate: moment(filter.fromDate).format('YYYY-MM-DD'),
       toDate: moment(filter.toDate).format('YYYY-MM-DD'),
     };
-    setFilter({ ..._filter });
+    setLocationQuery({ ..._filter });
   };
-
   // Handle number format submit.
   const handleNumberFormatSubmit = (values) => {
-    setFilter({
-      ...filter,
+    setLocationQuery({
+      ...query,
       numberFormat: values,
     });
   };
-
+  // Close the report header once the browser leave the page.
   useEffect(() => () => toggleFilterDrawer(false), [toggleFilterDrawer]);
 
   return (
-    <InventoryItemDetailsProvider filter={filter}>
+    <InventoryItemDetailsProvider query={query}>
       <InventoryItemDetailsActionsBar
-        numberFormat={filter.numberFormat}
+        numberFormat={query.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
       <InventoryItemDetailsLoadingBar />
@@ -64,7 +58,7 @@ function InventoryItemDetails({
       <DashboardPageContent>
         <FinancialStatement>
           <InventoryItemDetailsHeader
-            pageFilter={filter}
+            pageFilter={query}
             onSubmitFilter={handleFilterSubmit}
           />
           <InventoryItemDetailsBody />
@@ -74,9 +68,4 @@ function InventoryItemDetails({
   );
 }
 
-export default compose(
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-  withInventoryItemDetailsActions,
-)(InventoryItemDetails);
+export default compose(withInventoryItemDetailsActions)(InventoryItemDetails);

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js

@@ -15,6 +15,7 @@ import InventoryItemDetailsHeaderDimensionsPanel from './InventoryItemDetailsHea
 import withInventoryItemDetails from './withInventoryItemDetails';
 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
 
+import { getInventoryItemDetailsDefaultQuery } from './utils2';
 import { compose, transformToForm } from 'utils';
 
 /**
@@ -31,12 +32,7 @@ function InventoryItemDetailsHeader({
   toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
   // Default form values.
-  const defaultValues = {
-    fromDate: moment().toDate(),
-    toDate: moment().toDate(),
-    itemsIds: [],
-    warehousesIds: [],
-  };
+  const defaultValues = getInventoryItemDetailsDefaultQuery();
 
   // Filter form initial values.
   const initialValues = transformToForm(
@@ -44,11 +40,9 @@ function InventoryItemDetailsHeader({
       ...pageFilter,
       fromDate: moment(pageFilter.fromDate).toDate(),
       toDate: moment(pageFilter.toDate).toDate(),
-      warehousesIds: [],
     },
     defaultValues,
   );
-
   // Validation schema.
   const validationSchema = Yup.object().shape({
     fromDate: Yup.date().required().label(intl.get('fromDate')),

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.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 {
   InventoryItemDetailsHeaderDimensionsProvider,
   useInventoryItemDetailsHeaderDimensionsPanelContext,
@@ -24,11 +24,19 @@ export default function InventoryItemDetailsHeaderDimensionsPanel() {
  * @returns
  */
 function InventoryItemDetailsHeaderDimensionsPanelContent() {
-  const { warehouses } = useInventoryItemDetailsHeaderDimensionsPanelContext();
+  const { warehouses, branches } =
+    useInventoryItemDetailsHeaderDimensionsPanelContext();
 
   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/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanelProvider.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Features } from 'common';
-import { useWarehouses } from 'hooks/query';
+import { useWarehouses, useBranches } from 'hooks/query';
 import { useFeatureCan } from 'hooks/state';
 import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton';
+import { Features } from 'common';
 
 const InventoryItemDetailsHeaderDimensionsPanelContext = React.createContext();
 
@@ -11,25 +11,36 @@ const InventoryItemDetailsHeaderDimensionsPanelContext = React.createContext();
  * Inventory Item details header provider.
  * @returns
  */
-function InventoryItemDetailsHeaderDimensionsProvider({ query, ...props }) {
+function InventoryItemDetailsHeaderDimensionsProvider({ ...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 isBranchesFeatureCan = 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: isBranchesLoading } = useBranches(null, {
+    enabled: isBranchesFeatureCan,
+  });
+
   // Provider
   const provider = {
     warehouses,
+    branches,
     isWarehouesLoading,
+    isBranchesLoading,
   };
 
-  return isWarehouesLoading ? (
+  return isWarehouesLoading || isBranchesLoading ? (
     <FinancialHeaderLoadingSkeleton />
   ) : (
     <InventoryItemDetailsHeaderDimensionsPanelContext.Provider

src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsProvider.js

@@ -8,10 +8,10 @@ const InventoryItemDetailsContext = React.createContext();
 /**
  * Inventory item details provider.
  */
-function InventoryItemDetailsProvider({ filter, ...props }) {
-  const query = React.useMemo(
-    () => transformFilterFormToQuery(filter),
-    [filter],
+function InventoryItemDetailsProvider({ query, ...props }) {
+  const requestQuery = React.useMemo(
+    () => transformFilterFormToQuery(query),
+    [query],
   );
 
   // Fetching inventory item details report based on the givne query.
@@ -20,7 +20,7 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     isFetching: isInventoryItemDetailsFetching,
     isLoading: isInventoryItemDetailsLoading,
     refetch: inventoryItemDetailsRefetch,
-  } = useInventoryItemDetailsReport(query, { keepPreviousData: true });
+  } = useInventoryItemDetailsReport(requestQuery, { keepPreviousData: true });
 
   const provider = {
     inventoryItemDetails,
@@ -29,7 +29,6 @@ function InventoryItemDetailsProvider({ filter, ...props }) {
     inventoryItemDetailsRefetch,
 
     query,
-    filter,
   };
 
   return (

src/containers/FinancialStatements/InventoryItemDetails/utils2.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { castArray } from 'lodash';
+import moment from 'moment';
+
+import { useAppQueryString } from 'hooks';
+import { transformToForm } from 'utils';
+
+/**
+ * Retrieves inventory item details default query.
+ */
+export const getInventoryItemDetailsDefaultQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    warehousesIds: [],
+    branchesIds: [],
+  };
+};
+
+/**
+ * Parses inventory item details browser location query.
+ */
+const parseInventoryItemDetailsQuery = (locationQuery) => {
+  const defaultQuery = getInventoryItemDetailsDefaultQuery();
+
+  const transformed = {
+    ...defaultQuery,
+    ...transformToForm(locationQuery, defaultQuery),
+  };
+
+  return {
+    ...transformed,
+
+    // Ensures the branches/warehouses ids is always array.
+    branchesIds: castArray(transformed.branchesIds),
+    warehousesIds: castArray(transformed.warehousesIds),
+  };
+};
+
+/**
+ * State setter/getter of inventory valuation browser 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(
+    () => parseInventoryItemDetailsQuery(locationQuery),
+    [locationQuery],
+  );
+
+  return {
+    query,
+    locationQuery,
+    setLocationQuery,
+  };
+};