From 73cb0ec32efe7eec7fb8435a8e1c9719d1c43c5d Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 23 Mar 2022 21:28:13 +0200 Subject: [PATCH] feat(InventoryItemDetail): Location query. --- .../InventoryItemDetails.js | 37 +++++------- .../InventoryItemDetailsHeader.js | 10 +--- ...ventoryItemDetailsHeaderDimensionsPanel.js | 12 +++- ...temDetailsHeaderDimensionsPanelProvider.js | 23 ++++++-- .../InventoryItemDetailsProvider.js | 11 ++-- .../InventoryItemDetails/utils2.js | 58 +++++++++++++++++++ 6 files changed, 105 insertions(+), 46 deletions(-) create mode 100644 src/containers/FinancialStatements/InventoryItemDetails/utils2.js diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js index b9d7cb670..86946b14a 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js +++ b/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 ( - + @@ -64,7 +58,7 @@ function InventoryItemDetails({ @@ -74,9 +68,4 @@ function InventoryItemDetails({ ); } -export default compose( - withCurrentOrganization(({ organization }) => ({ - organizationName: organization.name, - })), - withInventoryItemDetailsActions, -)(InventoryItemDetails); +export default compose(withInventoryItemDetailsActions)(InventoryItemDetails); diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js index c617f94e1..f7cec4c81 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js +++ b/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')), diff --git a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.js b/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.js index fee0a9729..11323b911 100644 --- a/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeaderDimensionsPanel.js +++ b/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 ( + + + + ) : ( 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 ( diff --git a/src/containers/FinancialStatements/InventoryItemDetails/utils2.js b/src/containers/FinancialStatements/InventoryItemDetails/utils2.js new file mode 100644 index 000000000..ee7dd2e61 --- /dev/null +++ b/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, + }; +};