From 164eebd6ae6c90881c5dbc14f1e0199c63b993e2 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Thu, 3 Feb 2022 22:47:38 +0200 Subject: [PATCH] feat(RealizedGainorLoss): add realized gain or loss. --- src/config/sidebarMenu.js | 4 + .../RealizedGainOrLoss/RealizedGainOrLoss.js | 67 ++++++++++ .../RealizedGainOrLossActionsBar.js | 122 ++++++++++++++++++ .../RealizedGainOrLossGeneralPanel.js | 17 +++ .../RealizedGainOrLossHeader.js | 108 ++++++++++++++++ .../RealizedGainOrLossProvider.js | 22 ++++ .../RealizedGainOrLossTable.js | 21 +++ .../RealizedGainOrLoss/components.js | 18 +++ .../withRealizedGainOrLoss.js | 12 ++ .../withRealizedGainOrLossActions.js | 9 ++ src/hooks/query/types.js | 5 +- src/routes/dashboard.js | 14 ++ .../financialStatements.actions.js | 15 ++- .../financialStatements.reducer.js | 5 + .../financialStatements.selectors.js | 14 ++ .../financialStatements.types.js | 1 + 16 files changed, 451 insertions(+), 3 deletions(-) create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossGeneralPanel.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossHeader.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossProvider.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossTable.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/components.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLoss.js create mode 100644 src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLossActions.js diff --git a/src/config/sidebarMenu.js b/src/config/sidebarMenu.js index 84fece5ab..bf82e5fe2 100644 --- a/src/config/sidebarMenu.js +++ b/src/config/sidebarMenu.js @@ -641,6 +641,10 @@ export default [ ability: ReportsAction.READ_AP_AGING_SUMMARY, }, }, + { + text: , + href: '/financial-reports/realized-gain-loss', + }, { text: , label: true, diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss.js b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss.js new file mode 100644 index 000000000..529f2a376 --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss.js @@ -0,0 +1,67 @@ +import React from 'react'; + +import { FinancialStatement } from 'components'; + +import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; + +import RealizedGainOrLossHeader from './RealizedGainOrLossHeader'; +import RealizedGainOrLossTable from './RealizedGainOrLossTable'; +import RealizedGainOrLossActionsBar from './RealizedGainOrLossActionsBar'; + +import withCurrentOrganization from '../../Organization/withCurrentOrganization'; +import withRealizedGainOrLossActions from './withRealizedGainOrLossActions'; +import { RealizedGainOrLossProvider } from './RealizedGainOrLossProvider'; +import { RealizedGainOrLossLoadingBar } from './components'; + +import { compose } from 'utils'; + +/** + * Realized Gain or Loss. + */ +function RealizedGainOrLoss({ + // #withPreferences + organizationName, + + //#withRealizedGainOrLossActions + toggleRealizedGainOrLossFilterDrawer, +}) { + // Handle refetch realized Gain or Loss after filter change. + const handleFilterSubmit = (filter) => {}; + + // Handle format number submit. + const handleNumberFormatSubmit = (values) => {}; + + React.useEffect( + () => () => { + toggleRealizedGainOrLossFilterDrawer(false); + }, + [toggleRealizedGainOrLossFilterDrawer], + ); + + return ( + + + + + + + + +
+ +
+ + + + ); +} + +export default compose( + withCurrentOrganization(({ organization }) => ({ + organizationName: organization.name, + })), + withRealizedGainOrLossActions, +)(RealizedGainOrLoss); diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.js b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.js new file mode 100644 index 000000000..4b9ca3c9e --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossActionsBar.js @@ -0,0 +1,122 @@ +import React from 'react'; +import { + NavbarGroup, + NavbarDivider, + Button, + Classes, + Popover, + PopoverInteractionKind, + Position, +} from '@blueprintjs/core'; +import { FormattedMessage as T, Icon } from 'components'; +import classNames from 'classnames'; + +import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; +import NumberFormatDropdown from 'components/NumberFormatDropdown'; + +import { useRealizedGainOrLossContext } from './RealizedGainOrLossProvider'; +import withRealizedGainOrLoss from './withRealizedGainOrLoss'; +import withRealizedGainOrLossActions from './withRealizedGainOrLossActions'; + +import { compose, saveInvoke } from 'utils'; + +/** + * Realized Gain or Loss actions bar. + */ +function RealizedGainOrLossActionsBar({ + //#withRealizedGainOrLoss + isFilterDrawerOpen, + + //#withRealizedGainOrLossActions + toggleRealizedGainOrLossFilterDrawer, + + //#ownProps + numberFormat, + onNumberFormatSubmit, +}) { + // Handle filter toggle click. + const handleFilterToggleClick = () => { + toggleRealizedGainOrLossFilterDrawer(); + }; + + // Handle recalculate report button. + const handleRecalculateReport = () => {}; + + // handle number format form submit. + const handleNumberFormatSubmit = (values) => + saveInvoke(onNumberFormatSubmit, values); + + return ( + + + + + + + + + ); +} + +export default compose( + withRealizedGainOrLoss(({ realizedGainOrLossDrawerFilter }) => ({ + isFilterDrawerOpen: realizedGainOrLossDrawerFilter, + })), + withRealizedGainOrLossActions, +)(RealizedGainOrLossHeader); diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossProvider.js b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossProvider.js new file mode 100644 index 000000000..0c8fb18fc --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossProvider.js @@ -0,0 +1,22 @@ +import React from 'react'; +import FinancialReportPage from '../FinancialReportPage'; + +const RealizedGainOrLossContext = React.createContext(); + +/** + * Realized Gain or Loss provider. + */ +function RealizedGainOrLossProvider({ filter, ...props }) { + const provider = {}; + + return ( + + + + ); +} + +const useRealizedGainOrLossContext = () => + React.useContext(RealizedGainOrLossContext); + +export { RealizedGainOrLossProvider, useRealizedGainOrLossContext }; diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossTable.js b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossTable.js new file mode 100644 index 000000000..426a0997a --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLossTable.js @@ -0,0 +1,21 @@ +import React from 'react'; +import intl from 'react-intl-universal'; + +import { DataTable } from 'components'; +import FinancialSheet from 'components/FinancialSheet'; + +/** + * Realized Gain or Loss table. + */ +export default function RealizedGainOrLossTable({ + // #ownProps + companyName, +}) { + return ( + + ); +} diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/components.js b/src/containers/FinancialStatements/RealizedGainOrLoss/components.js new file mode 100644 index 000000000..217b440de --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/components.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { Button } from '@blueprintjs/core'; +import { Icon, If } from 'components'; +import { FormattedMessage as T } from 'components'; + +import { useRealizedGainOrLossContext } from './RealizedGainOrLossProvider'; +import FinancialLoadingBar from '../FinancialLoadingBar'; + +/** + * Realized Gain or Loss loading bar. + */ +export function RealizedGainOrLossLoadingBar() { + return ( + + + + ); +} diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLoss.js b/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLoss.js new file mode 100644 index 000000000..5f923884a --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLoss.js @@ -0,0 +1,12 @@ +import { connect } from 'react-redux'; +import { getRealizedGainOrLossFilterDrawer } from '../../../store/financialStatement/financialStatements.selectors'; + +export default (mapState) => { + const mapStateToProps = (state, props) => { + const mapped = { + realizedGainOrLossDrawerFilter: getRealizedGainOrLossFilterDrawer(state), + }; + return mapState ? mapState(mapped, state, props) : mapped; + }; + return connect(mapStateToProps); +}; diff --git a/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLossActions.js b/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLossActions.js new file mode 100644 index 000000000..95feefac5 --- /dev/null +++ b/src/containers/FinancialStatements/RealizedGainOrLoss/withRealizedGainOrLossActions.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { toggleRealizedGainOrLossFilterDrawer } from '../../../store/financialStatement/financialStatements.actions'; + +const mapDispatchToProps = (dispatch) => ({ + toggleRealizedGainOrLossFilterDrawer: (toggle) => + dispatch(toggleRealizedGainOrLossFilterDrawer(toggle)), +}); + +export default connect(null, mapDispatchToProps); diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js index 663ea5679..2950f27c7 100644 --- a/src/hooks/query/types.js +++ b/src/hooks/query/types.js @@ -24,6 +24,7 @@ const FINANCIAL_REPORTS = { CASH_FLOW_STATEMENT: 'CASH_FLOW_STATEMENT', INVENTORY_ITEM_DETAILS: 'INVENTORY_ITEM_DETAILS', TRANSACTIONS_BY_REFERENCE: 'TRANSACTIONS_BY_REFERENCE', + REALIZED_GAIN_OR_LOSS: 'REALIZED_GAIN_OR_LOSS', }; const BILLS = { @@ -195,11 +196,11 @@ const TARNSACTIONS_LOCKING = { const WAREHOUSES = { WAREHOUSE: 'WAREHOUSE', WAREHOUSES: 'WAREHOUSES', -} +}; const WAREHOUSE_TRANSFERS = { WAREHOUSE_TRANSFER: 'WAREHOUSE_TRANSFER', WAREHOUSE_TRANSFERS: 'WAREHOUSE_TRANSFERS', -} +}; const BRANCHES = { BRANCHES: 'BRANCHES', BRANCH: 'BRANCH', diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js index 8877b2396..866c6d30a 100644 --- a/src/routes/dashboard.js +++ b/src/routes/dashboard.js @@ -376,6 +376,20 @@ export const getDashboardRoutes = () => [ sidebarExpand: false, subscriptionActive: [SUBSCRIPTION_TYPE.MAIN], }, + { + path: `/financial-reports/realized-gain-loss`, + component: lazy(() => + import( + '../containers/FinancialStatements/RealizedGainOrLoss/RealizedGainOrLoss' + ), + ), + + breadcrumb: intl.get('realized_gain_or_loss.label'), + pageTitle: intl.get('realized_gain_or_loss.label'), + backLink: true, + sidebarExpand: false, + subscriptionActive: [SUBSCRIPTION_TYPE.MAIN], + }, { path: '/financial-reports', component: lazy(() => diff --git a/src/store/financialStatement/financialStatements.actions.js b/src/store/financialStatement/financialStatements.actions.js index 0ef8f9a41..b1229fd9e 100644 --- a/src/store/financialStatement/financialStatements.actions.js +++ b/src/store/financialStatement/financialStatements.actions.js @@ -196,7 +196,7 @@ export function toggleCashFlowStatementFilterDrawer(toggle) { * Toggles display of the inventory item details filter drawer. * @param {boolean} toggle */ - export function toggleInventoryItemDetailsFilterDrawer(toggle) { +export function toggleInventoryItemDetailsFilterDrawer(toggle) { return { type: `${t.INVENTORY_ITEM_DETAILS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, payload: { @@ -204,3 +204,16 @@ export function toggleCashFlowStatementFilterDrawer(toggle) { }, }; } + +/** + * Toggle display of the Realized Gain or Loss filter drawer. + * @param {boolean} toggle + */ +export function toggleRealizedGainOrLossCilterDrawer(toggle) { + return { + type: `${t.REALIZED_GAIN_OR_LOSS}/${t.DISPLAY_FILTER_DRAWER_TOGGLE}`, + payload: { + toggle, + }, + }; +} diff --git a/src/store/financialStatement/financialStatements.reducer.js b/src/store/financialStatement/financialStatements.reducer.js index 63fea46b2..9c6e0a1ff 100644 --- a/src/store/financialStatement/financialStatements.reducer.js +++ b/src/store/financialStatement/financialStatements.reducer.js @@ -51,6 +51,9 @@ const initialState = { inventoryItemDetails: { displayFilterDrawer: false, }, + realizedGainOrLoss: { + displayFilterDrawer: false, + }, }; /** @@ -102,4 +105,6 @@ export default createReducer(initialState, { t.INVENTORY_ITEM_DETAILS, 'inventoryItemDetails', ), + ...financialStatementFilterToggle(t.REALIZED_GAIN_OR_LOSS, 'realizedGainOrLoss'), + }); diff --git a/src/store/financialStatement/financialStatements.selectors.js b/src/store/financialStatement/financialStatements.selectors.js index f19337fa2..83de44342 100644 --- a/src/store/financialStatement/financialStatements.selectors.js +++ b/src/store/financialStatement/financialStatements.selectors.js @@ -73,6 +73,10 @@ export const inventoryItemDetailsDrawerFilter = (state) => { return filterDrawerByTypeSelector('inventoryItemDetails')(state); }; +export const realizedGainOrLossFilterDrawerSelector = (state) => { + return filterDrawerByTypeSelector('realizedGainOrLoss')(state); +}; + /** * Retrieve balance sheet filter drawer. */ @@ -239,3 +243,13 @@ export const getInventoryItemDetailsFilterDrawer = createSelector( return isOpen; }, ); + +/** + * Retrieve Realized Gain or Loss filter drawer. + */ +export const getRealizedGainOrLossFilterDrawer = createSelector( + realizedGainOrLossFilterDrawerSelector, + (isOpen) => { + return isOpen; + }, +); diff --git a/src/store/financialStatement/financialStatements.types.js b/src/store/financialStatement/financialStatements.types.js index ef82d5b92..cdda1f369 100644 --- a/src/store/financialStatement/financialStatements.types.js +++ b/src/store/financialStatement/financialStatements.types.js @@ -16,4 +16,5 @@ export default { VENDORS_TRANSACTIONS: 'VENDORS TRANSACTIONS', CASH_FLOW_STATEMENT: 'CASH FLOW STATEMENT', INVENTORY_ITEM_DETAILS: 'INVENTORY ITEM DETAILS', + REALIZED_GAIN_OR_LOSS: 'REALIZED GAIN OR LOSS', };