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,54 +8,48 @@ 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 = {
  ...filter,
  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,24 +32,17 @@ 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(
  {
  ...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,35 +1,46 @@
 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();
 
 /**
  * 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,
+ };
+};