QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 13:50:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(CustomerTransaction).

Browse Source
This commit is contained in:
a.bouhuolia
2022-02-12 20:31:14 +02:00
parent b249335a73
commit 1b0ffb5574
6 changed files with 114 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

@@ -28,7 +28,7 @@ export default function BalanceSheetTable({
// Retrieve default expanded rows of balance sheet.
const expandedRows = React.useMemo(
() => defaultExpanderReducer(table?.rows || [], 3),
() => defaultExpanderReducer(table.rows, 3),
[table],
);

67
src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
View File

@@ -1,12 +1,14 @@
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { DataTable, FinancialSheet } from 'components';
import { useCustomersTransactionsColumns } from './components';
import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
import { defaultExpanderReducer } from 'utils';
import { defaultExpanderReducer, tableRowTypesToClassnames } from 'utils';
import { TableStyle } from 'common';
/**
* Customers transactions table.
@@ -18,7 +20,6 @@ export default function CustomersTransactionsTable({
// Customers transactions context.
const {
customersTransactions: { tableRows },
isCustomersTransactionsLoading,
query,
} = useCustomersTransactionsContext();
@@ -30,30 +31,74 @@ export default function CustomersTransactionsTable({
[tableRows],
);
const rowClassNames = (row) => {
return [`row-type--${row.original.row_types}`];
};
return (
<FinancialSheet
name="customer-transactions"
companyName={companyName}
sheetType={intl.get('customers_transactions')}
loading={isCustomersTransactionsLoading}
fromDate={query.from_date}
toDate={query.to_date}
fullWidth={true}
>
<DataTable
className="bigcapital-datatable--financial-report"
<CustomersTransactionsDataTable
columns={columns}
data={tableRows}
rowClassNames={rowClassNames}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
expandable={true}
expanded={expandedRows}
expandToggleColumn={1}
expandColumnSpace={0.8}
styleName={TableStyle.Constrant}
/>
</FinancialSheet>
);
}
const CustomersTransactionsDataTable = styled(DataTable)`
.table {
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.tr:not(.no-results) .td {
border-left: 1px solid #ececec;
}
.tr:last-child .td {
border-bottom: 1px solid #e0e0e0;
}
.tr.row_type {
&--CUSTOMER {
.td {
&.customer_name {
font-weight: 500;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--OPENING_BALANCE,
&--CLOSING_BALANCE {
font-weight: 500;
}
&--CUSTOMER {
&.is-expanded {
.td.running_balance .cell-inner {
display: none;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--CUSTOMER:last-child {
.td {
border-bottom: 1px solid #ddd;
}
}
}
}
}
`;

6
src/containers/FinancialStatements/CustomersTransactions/components.js
View File

@@ -5,6 +5,8 @@ import { useCustomersTransactionsContext } from './CustomersTransactionsProvider
import FinancialLoadingBar from '../FinancialLoadingBar';
import { getForceWidth, getColumnWidth } from 'utils';
import { Align } from 'common';
/**
* Retrieve customers transactions columns.
*/
@@ -29,7 +31,6 @@ export const useCustomersTransactionsColumns = () => {
);
},
className: 'customer_name',
// textOverview: true,
},
{
Header: intl.get('account_name'),
@@ -59,6 +60,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 100,
magicSpacing: 10,
}),
align: Align.Right,
},
{
Header: intl.get('debit'),
@@ -69,6 +71,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 100,
magicSpacing: 10,
}),
align: Align.Right,
},
{
Header: intl.get('running_balance'),
@@ -79,6 +82,7 @@ export const useCustomersTransactionsColumns = () => {
minWidth: 120,
magicSpacing: 10,
}),
align: Align.Right,
},
],
[tableRows],

53
src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
View File

@@ -1,5 +1,6 @@
import React, { useMemo } from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { DataTable, FinancialSheet } from 'components';
@@ -40,8 +41,9 @@ export default function VendorsTransactionsTable({
loading={isVendorsTransactionsLoading}
fromDate={query.from_date}
toDate={query.to_date}
fullWidth={true}
>
<DataTable
<VendorsTransactionsDataTable
columns={columns}
data={tableRows}
rowClassNames={tableRowTypesToClassnames}
@@ -55,3 +57,52 @@ export default function VendorsTransactionsTable({
</FinancialSheet>
);
}
const VendorsTransactionsDataTable = styled(DataTable)`
.table {
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.tr:not(.no-results) .td {
border-left: 1px solid #ececec;
}
.tr:last-child .td {
border-bottom: 1px solid #e0e0e0;
}
.tr.row_type {
&--VENDOR {
.td {
&.vendor_name {
font-weight: 500;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--OPENING_BALANCE,
&--CLOSING_BALANCE {
font-weight: 500;
}
&--VENDOR {
&.is-expanded {
.td.running_balance .cell-inner {
display: none;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--VENDOR:last-child {
.td {
border-bottom: 1px solid #ddd;
}
}
}
}
}
`;

30
src/style/pages/FinancialStatements/ARAgingSummary.scss
View File

@@ -1,30 +0,0 @@
.financial-sheet{
&--receivable-aging-summary{
.financial-sheet__table{
.bigcapital-datatable{
.tbody,
.thead{
.tr .td.customer_name ~ .td,
.tr .th.customer_name ~ .th{
text-align: right;
}
}
.tbody{
}
}
}
}
}
.financial-statement--AR-aging-summary{
.financial-header-drawer{
.bp3-drawer{
max-height: 550px;
}
}
}

108
src/style/pages/FinancialStatements/ContactsTransactions.scss
View File

@@ -1,108 +0,0 @@
.financial-sheet {
&--customer-transactions,
&--vendor-transactions {
width: 100%;
.financial-sheet__table {
.tbody,
.thead {
.tr .td,
.tr .th {
&.credit,
&.debit,
&.running_balance {
text-align: right;
}
}
}
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
border-top-color: transparent;
border-bottom-color: transparent;
&.customer_name,
&.vendor_name {
>div {
display: flex;
}
span.force-width {
position: relative;
}
}
}
.tr:not(.no-results) .td {
border-left: 1px solid #ececec;
}
.tr:last-child .td {
border-bottom: 1px solid #e0e0e0;
}
.tr.row-type {
&--CUSTOMER,
&--VENDOR {
.td {
&.customer_name,
&.vendor_name {
font-weight: 500;
}
&.name {
// border-left-color: transparent;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--OPENING_BALANCE,
// &--TRANSACTION,
&--CLOSING_BALANCE {
font-weight: 500;
}
&--CUSTOMER,
&--VENDOR {
&.is-expanded {
.td.running_balance .cell-inner {
display: none;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--CUSTOMER:last-child,
&--VENDOR:last-child {
.td {
border-bottom: 1px solid #ddd;
}
}
}
}
}
}
}
.financial-statement--transactions {
.financial-header-drawer {
.bp3-drawer {
max-height: 450px;
}
}
}