From cffcef6f43fa84c5a69dfffcbe1d9feba1a112a7 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Wed, 16 Feb 2022 20:43:00 +0200 Subject: [PATCH] feat(financial reports): add branch multi select. --- .../BalanceSheetHeaderDimensionsPanel.js | 32 ++++++++------- .../BalanceSheetHeaderDimensionsProvider.js | 32 +++++++++++++++ .../CashFlowStatementDimensionsPanel.js | 20 +++++++-- ...ashFlowStatementDimensionsPanelProvider.js | 37 +++++++++++++++++ .../GeneralLedger/GeneralLedgerHeader.js | 8 ++++ .../GeneralLedgerHeaderDimensionsPanel.js | 41 +++++++++++++++++++ ...eralLedgerHeaderDimensionsPanelProvider.js | 38 +++++++++++++++++ .../Journal/JournalSheetHeaderDimensions.js | 22 +++++++--- .../JournalSheetHeaderDimensionsProvider.js | 38 +++++++++++++++++ .../ProfitLossSheet/ProfitLossSheetHeader.js | 8 +++- .../ProfitLossSheetHeaderDimensionsPanel.js | 41 +++++++++++++++++++ ...ProfitLossSheetHeaderDimensionsProvider.js | 38 +++++++++++++++++ .../ProfitLossSheet/utils.js | 2 + .../TrialBalanceSheetHeaderDimensionsPanel.js | 23 ++++++++--- ...lanceSheetHeaderDimensionsPanelProvider.js | 31 ++++++++++++++ .../TrialBalanceSheet/utils.js | 3 +- src/lang/en/index.json | 5 ++- src/style/App.scss | 4 ++ 18 files changed, 392 insertions(+), 31 deletions(-) create mode 100644 src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js create mode 100644 src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js create mode 100644 src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.js create mode 100644 src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js create mode 100644 src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js create mode 100644 src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.js create mode 100644 src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js create mode 100644 src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js index 6b93d6c04..697a42f42 100644 --- a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsPanel.js @@ -1,19 +1,31 @@ import React from 'react'; -import styled from 'styled-components'; import intl from 'react-intl-universal'; import { FormGroup, Classes } from '@blueprintjs/core'; import { BranchMultiSelect, Row, Col } from 'components'; -import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; -import { useBranches } from 'hooks/query'; +import { + BalanceSheetHeaderDimensionsProvider, + useBalanceSheetHeaderDimensionsPanelContext, +} from './BalanceSheetHeaderDimensionsProvider'; /** * Balance sheet header dismension panel. * @returns */ -function BalanceSheetHeaderDimensionsPanel() { - // Fetches the branches list. - const { isLoading: isBranchesLoading, data: branches } = useBranches(); +export default function BalanceSheetHeaderDimensionsPanel() { + return ( + + + + ); +} +/** + * Balance sheet header dismension panel content. + * @returns + */ +function BalanceSheetHeaderDimensionsPanelContent() { + const { branches } = useBalanceSheetHeaderDimensionsPanelContext(); + return ( @@ -27,11 +39,3 @@ function BalanceSheetHeaderDimensionsPanel() { ); } - -export default BalanceSheetHeaderDimensionsPanel; - -const BalanceMulitSelectRoot = styled.div` - .bp3-tag-input { - height: auto; - } -`; diff --git a/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js new file mode 100644 index 000000000..a3ea4de19 --- /dev/null +++ b/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeaderDimensionsProvider.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const BalanceSheetHeaderDimensionsPanelConext = React.createContext(); + +/** + * BL sheet header provider. + * @returns + */ +function BalanceSheetHeaderDimensionsProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useBalanceSheetHeaderDimensionsPanelContext = () => + React.useContext(BalanceSheetHeaderDimensionsPanelConext); + +export { BalanceSheetHeaderDimensionsProvider, useBalanceSheetHeaderDimensionsPanelContext }; diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js index 14b59aee3..902a29bb9 100644 --- a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js +++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanel.js @@ -2,16 +2,30 @@ import React from 'react'; import intl from 'react-intl-universal'; import { FormGroup, Classes } from '@blueprintjs/core'; import { BranchMultiSelect, Row, Col } from 'components'; -import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; -import { useBranches } from 'hooks/query'; +import { + CashFlowStatementDimensionsPanelProvider, + useCashFlowStatementDimensionsPanelContext, +} from './CashFlowStatementDimensionsPanelProvider'; /** * Cash flow statement dismension panel. * @returns */ export default function CashFlowStatementDimensionsPanel() { + return ( + + + + ); +} + +/** + * Cash flow statement dismension panel content. + * @returns + */ +function CashFlowStatementDimensionsPanelContent() { // Fetches the branches list. - const { isLoading: isBranchesLoading, data: branches } = useBranches(); + const { branches } = useCashFlowStatementDimensionsPanelContext(); return ( diff --git a/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js new file mode 100644 index 000000000..90f304924 --- /dev/null +++ b/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementDimensionsPanelProvider.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const CashFlowStatementDimensionsPanelContext = React.createContext(); + +/** + * cash flow statement dimensions panel provider. + * @returns + */ +function CashFlowStatementDimensionsPanelProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useCashFlowStatementDimensionsPanelContext = () => + React.useContext(CashFlowStatementDimensionsPanelContext); + +export { + CashFlowStatementDimensionsPanelProvider, + useCashFlowStatementDimensionsPanelContext, +}; diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js index 80b2de834..2d631a4c9 100644 --- a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js @@ -7,6 +7,7 @@ import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane'; +import GeneralLedgerHeaderDimensionsPanel from './GeneralLedgerHeaderDimensionsPanel'; import withGeneralLedger from './withGeneralLedger'; import withGeneralLedgerActions from './withGeneralLedgerActions'; @@ -31,6 +32,7 @@ function GeneralLedgerHeader({ const defaultValues = { fromDate: moment().toDate(), toDate: moment().toDate(), + branchesIds: [], }; // Initial values. @@ -39,6 +41,7 @@ function GeneralLedgerHeader({ ...pageFilter, fromDate: moment(pageFilter.fromDate).toDate(), toDate: moment(pageFilter.toDate).toDate(), + branchesIds: [], }, defaultValues, ); @@ -84,6 +87,11 @@ function GeneralLedgerHeader({ title={} panel={} /> + } + panel={} + />
diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.js new file mode 100644 index 000000000..d1ff69958 --- /dev/null +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanel.js @@ -0,0 +1,41 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { FormGroup, Classes } from '@blueprintjs/core'; +import { BranchMultiSelect, Row, Col } from 'components'; +import { + GeneralLedgerHeaderDimensionsPanelProvider, + useGeneralLedgerHeaderDimensionsContext, +} from './GeneralLedgerHeaderDimensionsPanelProvider'; + +/** + * Gereral ledger sheet header dismension panel. + * @returns + */ +export default function GeneralLedgerHeaderDimensionsPanel() { + return ( + + + + ); +} + +/** + * Gereral ledger sheet header dismension panel content. + * @returns + */ +function GeneralLedgerHeaderDimensionsPanelContent() { + const { branches } = useGeneralLedgerHeaderDimensionsContext(); + + return ( + + + + + + + + ); +} diff --git a/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js new file mode 100644 index 000000000..eb72ff66b --- /dev/null +++ b/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderDimensionsPanelProvider.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const GeneralLedgerHeaderDimensionsPanelContext = React.createContext(); + +/** + * General Ledger Header Dimensions Panel provider. + * @returns + */ +function GeneralLedgerHeaderDimensionsPanelProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useGeneralLedgerHeaderDimensionsContext = () => + React.useContext(GeneralLedgerHeaderDimensionsPanelContext); + +export { + GeneralLedgerHeaderDimensionsPanelProvider, + useGeneralLedgerHeaderDimensionsContext, +}; diff --git a/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js b/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js index e77ec46db..fb3dcdbbf 100644 --- a/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js +++ b/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensions.js @@ -1,18 +1,30 @@ import React from 'react'; -import styled from 'styled-components'; import intl from 'react-intl-universal'; import { FormGroup, Classes } from '@blueprintjs/core'; import { BranchMultiSelect, Row, Col } from 'components'; -import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; -import { useBranches } from 'hooks/query'; +import { + JournalSheetHeaderDimensionsProvider, + useJournalSheetHeaderDimensionsPanelContext, +} from './JournalSheetHeaderDimensionsProvider'; /** * Journal sheet header dismension panel. * @returns */ export default function JournalSheetHeaderDimensions() { - // Fetches the branches list. - const { isLoading: isBranchesLoading, data: branches } = useBranches(); + return ( + + + + ); +} + +/** + * Journal sheet header dismension panel content. + * @returns + */ +function JournalSheetHeaderDimensionsContent() { + const { branches } = useJournalSheetHeaderDimensionsPanelContext(); return ( diff --git a/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js b/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js new file mode 100644 index 000000000..90b873a76 --- /dev/null +++ b/src/containers/FinancialStatements/Journal/JournalSheetHeaderDimensionsProvider.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const JournalSheetHeaderDimensionsPanelContext = React.createContext(); + +/** + * Journal sheet header provider. + * @returns + */ +function JournalSheetHeaderDimensionsProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useJournalSheetHeaderDimensionsPanelContext = () => + React.useContext(JournalSheetHeaderDimensionsPanelContext); + +export { + JournalSheetHeaderDimensionsProvider, + useJournalSheetHeaderDimensionsPanelContext, +}; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js index b94abca64..07877f916 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js @@ -8,6 +8,7 @@ import { FormattedMessage as T } from 'components'; import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader'; import ProfitLossSheetHeaderGeneralPane from './ProfitLossSheetHeaderGeneralPane'; import ProfitLossSheetHeaderComparisonPanel from './ProfitLossSheetHeaderComparisonPanel'; +import ProfitLossSheetHeaderDimensionsPanel from './ProfitLossSheetHeaderDimensionsPanel'; import withProfitLoss from './withProfitLoss'; import withProfitLossActions from './withProfitLossActions'; @@ -52,7 +53,7 @@ function ProfitLossHeader({ toggleFilterDrawer(false); }; - return ( + return ( } panel={} /> + } + />
diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.js new file mode 100644 index 000000000..91874b7d5 --- /dev/null +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsPanel.js @@ -0,0 +1,41 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { FormGroup, Classes } from '@blueprintjs/core'; +import { BranchMultiSelect, Row, Col } from 'components'; +import { + ProfitLossSheetHeaderDimensionsProvider, + useProfitLossSheetPanelContext, +} from './ProfitLossSheetHeaderDimensionsProvider'; + +/** + * profit loss Sheet Header dimensions panel. + * @returns + */ +export default function ProfitLossSheetHeaderDimensionsPanel() { + return ( + + + + ); +} + +/** + * profit loss Sheet Header dimensions panel content. + * @returns + */ +function ProfitLossSheetHeaderDimensionsPanelContent() { + const { branches } = useProfitLossSheetPanelContext(); + + return ( + + + + + + + + ); +} diff --git a/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js new file mode 100644 index 000000000..018aff822 --- /dev/null +++ b/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeaderDimensionsProvider.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const ProfitLossSheetHeaderDimensionsPanelConext = React.createContext(); + +/** + * profit loss sheet header provider. + * @returns + */ +function ProfitLossSheetHeaderDimensionsProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useProfitLossSheetPanelContext = () => + React.useContext(ProfitLossSheetHeaderDimensionsPanelConext); + +export { + ProfitLossSheetHeaderDimensionsProvider, + useProfitLossSheetPanelContext, +}; diff --git a/src/containers/FinancialStatements/ProfitLossSheet/utils.js b/src/containers/FinancialStatements/ProfitLossSheet/utils.js index a2e889d9c..f40d5c1cb 100644 --- a/src/containers/FinancialStatements/ProfitLossSheet/utils.js +++ b/src/containers/FinancialStatements/ProfitLossSheet/utils.js @@ -31,6 +31,8 @@ export const getDefaultProfitLossQuery = () => ({ percentageRow: false, percentageIncome: false, percentageExpense: false, + + branchesIds: [], }); /** diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js index 5f0e18c76..d5d2b79fd 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanel.js @@ -1,17 +1,30 @@ import React from 'react'; -import styled from 'styled-components'; import intl from 'react-intl-universal'; import { FormGroup, Classes } from '@blueprintjs/core'; import { BranchMultiSelect, Row, Col } from 'components'; -import { useBranches } from 'hooks/query'; +import { + TrialBLHeaderDimensionsPanelProvider, + useTrialBalanceSheetPanelContext, +} from './TrialBalanceSheetHeaderDimensionsPanelProvider'; /** - * trial balance sheet header dismension panel. + * Trial balance sheet header dismension panel. * @returns */ export default function TrialBalanceSheetHeaderDimensionsPanel() { - // Fetches the branches list. - const { isLoading: isBranchesLoading, data: branches } = useBranches(); + return ( + + + + ); +} + +/** + * trial balance sheet header dismension panel content. + * @returns + */ +function TrialBLSheetHeaderDimensionsPanelContent() { + const { branches } = useTrialBalanceSheetPanelContext(); return ( diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js new file mode 100644 index 000000000..23d942903 --- /dev/null +++ b/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeaderDimensionsPanelProvider.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { useBranches } from 'hooks/query'; +import { FinancialHeaderLoadingSkeleton } from '../FinancialHeaderLoadingSkeleton'; + +const TrialBLSheetHeaderDimensionsContext = React.createContext(); + +/** + * Trial BL sheet header provider. + * @returns + */ +function TrialBLHeaderDimensionsPanelProvider({ ...props }) { + // Fetches the branches list. + const { isLoading: isBranchesLoading, data: branches } = useBranches(); + + // Provider + const provider = { + branches, + isBranchesLoading, + }; + + return isBranchesLoading ? ( + + ) : ( + + ); +} + +const useTrialBalanceSheetPanelContext = () => + React.useContext(TrialBLSheetHeaderDimensionsContext); + +export { TrialBLHeaderDimensionsPanelProvider, useTrialBalanceSheetPanelContext }; diff --git a/src/containers/FinancialStatements/TrialBalanceSheet/utils.js b/src/containers/FinancialStatements/TrialBalanceSheet/utils.js index 4c0a90a26..13413f4cc 100644 --- a/src/containers/FinancialStatements/TrialBalanceSheet/utils.js +++ b/src/containers/FinancialStatements/TrialBalanceSheet/utils.js @@ -1,6 +1,5 @@ import moment from 'moment'; - export function getDefaultTrialBalanceQuery() { return { fromDate: moment().startOf('year').format('YYYY-MM-DD'), @@ -8,4 +7,4 @@ export function getDefaultTrialBalanceQuery() { basis: 'accural', filterByOption: 'with-transactions', }; -} \ No newline at end of file +} diff --git a/src/lang/en/index.json b/src/lang/en/index.json index f71e9bae9..8ad5881a0 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -1853,5 +1853,8 @@ "warehouse.alert.are_you_sure_you_want_to_make": "Are you sure you want to make a primary warehouse?", "make_primary": "Make as Primary", "invoice.branch_button.label": "Branch: {label}", - "invoice.warehouse_button.label": "Warehouse: {label}" + "invoice.warehouse_button.label": "Warehouse: {label}", + "branches_multi_select.label":"Branches", + "branches_multi_select.placeholder": "Filter by branches…", + "dimensions": "Dimensions" } \ No newline at end of file diff --git a/src/style/App.scss b/src/style/App.scss index f4a0e9186..18ec4f3d8 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -291,4 +291,8 @@ html[lang^="ar"] { .font-bold { font-weight: 600; +} + +.bp3-tag-input { + height: auto; } \ No newline at end of file