refactor(APAgingSummary)

refactor(ARAgingSummary)
This commit is contained in:
a.bouhuolia
2022-02-12 18:49:48 +02:00
parent 2e7061260e
commit 4cc0a8c41e
13 changed files with 78 additions and 115 deletions

View File

@@ -31,6 +31,7 @@ export function FinancialSheet({
minimal = false,
fullWidth = false,
currentDate = true,
className,
}) {
const format = 'DD MMMM YYYY';
const formattedFromDate = useMemo(
@@ -59,7 +60,11 @@ export function FinancialSheet({
);
return (
<FinancialSheetRoot minimal={minimal} fullWidth={fullWidth}>
<FinancialSheetRoot
minimal={minimal}
fullWidth={fullWidth}
className={className}
>
{companyName && <FinancialSheetTitle>{companyName}</FinancialSheetTitle>}
{sheetType && <FinancialSheetType>{sheetType}</FinancialSheetType>}

View File

@@ -6,7 +6,8 @@ import { FinancialStatement } from 'components';
import APAgingSummaryHeader from './APAgingSummaryHeader';
import APAgingSummaryActionsBar from './APAgingSummaryActionsBar';
import APAgingSummaryTable from './APAgingSummaryTable';
import { APAgingSummaryBody } from './APAgingSummaryBody';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { APAgingSummaryProvider } from './APAgingSummaryProvider';
import { APAgingSummarySheetLoadingBar } from './components';
@@ -67,7 +68,7 @@ function APAgingSummary({
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}
/>
<APAgingSummaryTable organizationName={organizationName} />
<APAgingSummaryBody organizationName={organizationName} />
</FinancialStatement>
</DashboardPageContent>
</APAgingSummaryProvider>

View File

@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
import { useAPAgingSummaryColumns } from './components';
import { tableRowTypesToClassnames } from 'utils';
/**
* AP aging summary table sheet.
*/
@@ -24,8 +26,6 @@ export default function APAgingSummaryTable({
// AP aging summary columns.
const columns = useAPAgingSummaryColumns();
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
return (
<FinancialSheet
companyName={organizationName}
@@ -37,7 +37,7 @@ export default function APAgingSummaryTable({
<APAgingSummaryDataTable
columns={columns}
data={tableRows}
rowClassNames={rowClassNames}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
sticky={true}
styleName={TableStyle.Constrant}

View File

@@ -58,7 +58,7 @@ function ReceivableAgingSummarySheet({
<ARAgingSummarySheetLoadingBar />
<DashboardPageContent>
<FinancialStatement name={'AR-aging-summary'}>
<FinancialStatement>
<ARAgingSummaryHeader
pageFilter={filter}
onSubmitFilter={handleFilterSubmit}

View File

@@ -2,10 +2,8 @@ import React from 'react';
import * as R from 'ramda';
import ARAgingSummaryTable from './ARAgingSummaryTable';
import {
FinancialReportBody,
FinancialSheetSkeleton,
} from '../../../components';
import { FinancialReportBody } from '../FinancialReportPage';
import { FinancialSheetSkeleton } from '../../../components';
import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';

View File

@@ -8,6 +8,8 @@ import { TableStyle } from 'common';
import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
import { useARAgingSummaryColumns } from './components';
import { tableRowTypesToClassnames } from 'utils';
/**
* AR aging summary table sheet.
*/
@@ -21,8 +23,6 @@ export default function ReceivableAgingSummaryTable({
// AR aging summary columns.
const columns = useARAgingSummaryColumns();
const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
return (
<FinancialSheet
companyName={organizationName}
@@ -34,7 +34,7 @@ export default function ReceivableAgingSummaryTable({
<ARAgingSummaryDataTable
columns={columns}
data={ARAgingSummary.tableRows}
rowClassNames={rowClassNames}
rowClassNames={tableRowTypesToClassnames}
noInitialFetch={true}
sticky={true}
styleName={TableStyle.Constrant}
@@ -51,6 +51,25 @@ const ARAgingSummaryDataTable = styled(DataTable)`
padding-top: 0.32rem;
padding-bottom: 0.32rem;
}
&:not(.no-results) {
.td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&:not(:first-child) .td {
border-top: 1px solid transparent;
}
&.row_type--total {
font-weight: 500;
.td {
border-top: 1px solid #bbb;
border-bottom: 3px double #333;
}
}
}
}
}
`;

View File

@@ -34,7 +34,6 @@ export default function BalanceSheetTable({
return (
<FinancialSheet
name="balance-sheet"
companyName={companyName}
sheetType={intl.get('balance_sheet')}
asDate={query.to_date}

View File

@@ -17,20 +17,17 @@ export default function PurchasesByItemsTable({ companyName }) {
// Purchases by items context.
const {
purchaseByItems: { tableRows, query },
isLoading,
} = usePurchaseByItemsContext();
// Purchases by items table columns.
const columns = usePurchasesByItemsTableColumns();
return (
<FinancialSheet
<PurchasesByItemsSheet
companyName={companyName}
sheetType={intl.get('purchases_by_items')}
fromDate={query.from_date}
toDate={query.to_date}
name="purchases-by-items"
loading={isLoading}
>
<PurchasesByItemsDataTable
columns={columns}
@@ -45,10 +42,14 @@ export default function PurchasesByItemsTable({ companyName }) {
)}
styleName={TableStyle.Constrant}
/>
</FinancialSheet>
</PurchasesByItemsSheet>
);
}
const PurchasesByItemsSheet = styled(FinancialSheet)`
min-width: 850px;
`;
const PurchasesByItemsDataTable = styled(DataTable)`
.table {
.tbody {

View File

@@ -1,5 +1,6 @@
import React from 'react';
import intl from 'react-intl-universal';
import styled from 'styled-components';
import { DataTable, FinancialSheet } from 'components';
@@ -23,15 +24,14 @@ export default function SalesByItemsTable({ companyName }) {
const columns = useSalesByItemsTableColumns();
return (
<FinancialSheet
<SalesByItemsSheet
companyName={companyName}
sheetType={intl.get('sales_by_items')}
fromDate={query.from_date}
toDate={query.to_date}
name="sales-by-items"
loading={isLoading}
>
<DataTable
<SalesByItemsDataTable
columns={columns}
data={tableRows}
expandable={true}
@@ -44,6 +44,27 @@ export default function SalesByItemsTable({ companyName }) {
)}
styleName={TableStyle.Constrant}
/>
</FinancialSheet>
</SalesByItemsSheet>
);
}
const SalesByItemsSheet = styled(FinancialSheet)`
min-width: 850px;
`;
const SalesByItemsDataTable = styled(DataTable)`
.table {
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--total .td {
border-top: 1px solid #bbb;
font-weight: 500;
border-bottom: 3px double #000;
}
}
}
`;

View File

@@ -115,7 +115,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
const agingRow = mapAging(customer.aging);
rows.push({
rowType: 'customer',
row_types: 'customer',
name: customer.customer_name,
...agingRow,
current: customer.current.formatted_amount,
@@ -129,7 +129,7 @@ export const ARAgingSummaryTableRowsMapper = (sheet, total) => {
...rows,
{
name: '',
rowType: 'total',
row_types: 'total',
current: sheet.total.current.formatted_amount,
...mapAging(sheet.total.aging),
total: sheet.total.total.formatted_amount,
@@ -150,7 +150,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
const agingRow = mapAging(vendor.aging);
rows.push({
rowType: 'vendor',
row_types: 'vendor',
name: vendor.vendor_name,
...agingRow,
current: vendor.current.formatted_amount,
@@ -164,7 +164,7 @@ export const APAgingSummaryTableRowsMapper = (sheet, total) => {
...rows,
{
name: '',
rowType: 'total',
row_types: 'total',
current: sheet.total.current.formatted_amount,
...mapAging(sheet.total.aging),
total: sheet.total.total.formatted_amount,
@@ -182,7 +182,7 @@ export const inventoryValuationReducer = (sheet) => {
}
if (sheet.total) {
results.push({
rowType: 'total',
row_types: 'total',
...sheet.total,
});
}
@@ -199,7 +199,7 @@ export const purchasesByItemsReducer = (sheet) => {
}
if (sheet.total) {
results.push({
rowType: 'total',
row_types: 'total',
...sheet.total,
});
}
@@ -215,7 +215,7 @@ export const salesByItemsReducer = (sheet) => {
}
if (sheet.total) {
results.push({
rowType: 'total',
row_types: 'total',
...sheet.total,
});
}

View File

@@ -13,25 +13,7 @@
}
}
.tbody{
.tr:not(.no-results) {
.td{
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
&:not(:first-child) .td{
border-top: 1px solid transparent;
}
&.row-type--total{
font-weight: 500;
.td{
border-top: 1px solid #BBB;
border-bottom: 3px double #333;
}
}
}
}
}
}

View File

@@ -14,59 +14,7 @@
}
.tbody {
.tr .td {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
border-top-color: transparent;
border-bottom-color: transparent;
&.date {
>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 #ddd;
}
.tr.row-type {
&--ITEM {
.td {
&.transaction_type {
border-left-color: transparent;
}
}
&:not(:first-child).is-expanded .td {
border-top: 1px solid #ddd;
}
}
&--ITEM,
&--OPENING_ENTRY,
&--CLOSING_ENTRY {
font-weight: 500;
}
&--ITEM {
&.is-expanded {
.td.value .cell-inner {
display: none;
}
}
}
}
}
}
}
}

View File

@@ -12,18 +12,7 @@
text-align: right;
}
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.tr.row_type--total .td {
border-top: 1px solid #bbb;
font-weight: 500;
border-bottom: 3px double #000;
}
}
}
}
}