From 8f267b98e46ea5a532dde5e06c2c307ee1d22fda Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 12 Jan 2022 20:15:00 +0200 Subject: [PATCH] fix(ContactBalanceSummary): `BIG-288` percentage of column. --- ...tomersBalanceSummaryGeneralPanelContent.js | 2 +- .../CustomersBalanceSummaryTable.js | 9 +- .../CustomersBalanceSummary/components.js | 71 +++++++++++----- ...ndorsBalanceSummaryHeaderGeneralContent.js | 4 +- .../VendorsBalanceSummaryTable.js | 6 +- .../VendorsBalanceSummary/components.js | 85 +++++++++++++------ src/hooks/query/financialReports.js | 10 +-- src/lang/en/index.json | 2 +- 8 files changed, 122 insertions(+), 67 deletions(-) diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js index e5f770587..488b548a9 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.js @@ -52,7 +52,7 @@ export default function CustomersBalanceSummaryGeneralPanelContent() { - + {({ field }) => ( }> diff --git a/src/containers/FinancialStatements/CustomersBalanceSummary/components.js b/src/containers/FinancialStatements/CustomersBalanceSummary/components.js index e8ab66769..0ee163664 100644 --- a/src/containers/FinancialStatements/CustomersBalanceSummary/components.js +++ b/src/containers/FinancialStatements/CustomersBalanceSummary/components.js @@ -1,5 +1,6 @@ import React from 'react'; import intl from 'react-intl-universal'; +import * as R from 'ramda'; import { If } from 'components'; import FinancialLoadingBar from '../FinancialLoadingBar'; @@ -9,29 +10,53 @@ import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProv * Retrieve customers balance summary columns. */ export const useCustomersSummaryColumns = () => { - return React.useMemo( - () => [ - { - Header: intl.get('customer_name'), - accessor: 'cells[0].value', - className: 'customer_name', - width: 240, - }, - { - Header: intl.get('total'), - accessor: 'cells[1].value', - className: 'total', - width: 140, - }, - { - Header: intl.get('percentage_of_column'), - accessor: 'cells[2].value', - className: 'total', - width: 140, - }, - ], - [], - ); + const { + CustomerBalanceSummary: { table }, + } = useCustomersBalanceSummaryContext(); + + return React.useMemo(() => { + return dynamicColumns(table.columns || []); + }, [table.columns]); +}; + +/** + * Account name column accessor. + */ +const accountNameColumnAccessor = () => ({ + Header: intl.get('customer_name'), + accessor: 'cells[0].value', + className: 'customer_name', + width: 240, +}); + +/** + * Total column accessor. + */ +const totalColumnAccessor = () => ({ + Header: intl.get('total'), + accessor: 'cells[1].value', + className: 'total', + width: 140, +}); + +/** + * Percentage column accessor. + */ +const percentageColumnAccessor = () => ({ + Header: intl.get('percentage_of_column'), + accessor: 'cells[2].value', + className: 'total', + width: 140, +}); + +const dynamicColumns = (columns) => { + return R.map( + R.compose( + R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor), + R.when(R.pathEq(['key'], 'total'), totalColumnAccessor), + R.when(R.pathEq(['key'], 'percentage_of_column'), percentageColumnAccessor), + ), + )(columns); }; /** diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js index a8d033fd5..e63a70141 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneralContent.js @@ -58,14 +58,14 @@ export default function VendorsBalanceSummaryHeaderGeneralContent() { - + {({ field }) => ( }> } - name={'percentage'} + name={'percentage_column'} {...field} /> diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js index 55d57644a..84401992a 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js @@ -14,10 +14,8 @@ export default function VendorsBalanceSummaryTable({ //#ownProps organizationName, }) { - - const { - VendorBalanceSummary, + VendorBalanceSummary: { table }, isVendorsBalanceLoading, } = useVendorsBalanceSummaryContext(); @@ -39,7 +37,7 @@ export default function VendorsBalanceSummaryTable({ diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/components.js b/src/containers/FinancialStatements/VendorsBalanceSummary/components.js index 3ee5dc231..6075ada08 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/components.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/components.js @@ -1,8 +1,8 @@ -import React, { useMemo } from 'react'; +import React from 'react'; import intl from 'react-intl-universal'; +import * as R from 'ramda'; import { If } from 'components'; -import { getColumnWidth } from 'utils'; import FinancialLoadingBar from '../FinancialLoadingBar'; import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider'; @@ -10,28 +10,65 @@ import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider * Retrieve vendors balance summary columns. */ export const useVendorsBalanceColumns = () => { - return useMemo(() => [ - { - Header: intl.get('vendor_name'), - accessor: 'cells[0].value', - className: 'customer_name', - width: 240, - sticky: 'left', - textOverview: true, - }, - { - Header: intl.get('total'), - accessor: 'cells[1].value', - className: 'total', - width: 140, - }, - { - Header: intl.get('percentage_of_column'), - accessor: 'cells[2].value', - // className: 'total', - width: 140, - }, - ]); + const { + VendorBalanceSummary: { table }, + } = useVendorsBalanceSummaryContext(); + + return React.useMemo(() => { + return dynamicColumns(table.columns || []); + }, [table.columns]); +}; + +/** + * Vendor name accessor. + */ +const vendorColumnAccessor = () => ({ + Header: intl.get('vendor_name'), + accessor: 'cells[0].value', + className: 'vendor_name', + width: 240, + align: 'left', + textOverview: true, +}); + +/** + * Percentage column accessor. + */ +const percentageColumnAccessor = () => ({ + Header: intl.get('percentage_of_column'), + accessor: 'cells[2].value', + className: 'total', + width: 140, + align: 'right', + textOverview: true, +}); + +/** + * Total column accessor. + */ +const totalColumnAccessor = () => ({ + Header: intl.get('total'), + accessor: 'cells[1].value', + className: 'total', + width: 140, + align: 'right', + textOverview: true, +}); + +/** + * Composes the response columns to table component columns. + */ +const dynamicColumns = (columns) => { + return R.map( + R.compose( + R.when(R.pathEq(['key'], 'name'), vendorColumnAccessor), + R.when(R.pathEq(['key'], 'total'), totalColumnAccessor), + R.when( + R.pathEq(['key'], 'percentage_of_column'), + percentageColumnAccessor, + ), + ), + )(columns); }; /** diff --git a/src/hooks/query/financialReports.js b/src/hooks/query/financialReports.js index 57023381a..7579595ad 100644 --- a/src/hooks/query/financialReports.js +++ b/src/hooks/query/financialReports.js @@ -304,12 +304,11 @@ export function useCustomerBalanceSummaryReport(query, props) { }, { select: (res) => ({ - columns: res.data.columns, query: res.data.query, - tableRows: res.data.table.rows, + table: res.data.table, }), defaultData: { - tableRows: [], + table: {}, query: {}, }, ...props, @@ -334,12 +333,11 @@ export function useVendorsBalanceSummaryReport(query, props) { { select: (res) => ({ - columns: res.data.columns, query: res.data.query, - tableRows: res.data.table.data, + table: res.data.table, }), defaultData: { - tableRows: [], + table: {}, query: {}, }, ...props, diff --git a/src/lang/en/index.json b/src/lang/en/index.json index d5678c528..4147975a2 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -866,7 +866,7 @@ "published_at": "Published at", "customers_balance_summary": "Customers Balance Summary", "vendors_balance_summary": "Vendors Balance Summary", - "percentage_of_column": "Percentage", + "percentage_of_column": "% of column", "customers_transactions": "Customers Transactions", "vendors_transactions": "Vendors Transactions", "reference_type": "Reference type",