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

feat: optimize table of item associated transactions.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-21 17:11:41 +02:00
parent 7987f68aa3
commit 13310b1aac
11 changed files with 57 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/components.js
View File

@@ -64,6 +64,7 @@ export const useBillTransactionsColumns = () => {
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
align: 'right',
width: 100,
},
{

10
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactions/index.js
View File

@@ -2,10 +2,12 @@ import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { TableStyle } from 'common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedBillTransactions } from 'hooks/query';
import { useBillTransactionsColumns, ActionsMenu } from './components';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -60,6 +62,8 @@ function BillPaymentTransactions({
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
styleName={TableStyle.Constrant}
TableLoadingRenderer={TableSkeletonRows}
/>
);
}
@@ -67,3 +71,7 @@ export default compose(
withAlertsActions,
withDrawerActions,
)(BillPaymentTransactions);

1
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.js
View File

@@ -66,6 +66,7 @@ export const useEstimateTransactionsColumns = () => {
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
align: 'right',
width: 100,
},
{

5
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/index.js
View File

@@ -2,6 +2,9 @@ import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import { TableStyle } from 'common';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedEstimateTransactions } from 'hooks/query';
import { useEstimateTransactionsColumns, ActionsMenu } from './components';
@@ -61,6 +64,8 @@ function EstimatePaymentTransactions({
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
styleName={TableStyle.Constrant}
TableLoadingRenderer={TableSkeletonRows}
/>
);
}

1
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/components.js
View File

@@ -67,6 +67,7 @@ export const useInvoicePaymentTransactionsColumns = () => {
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
align: 'right',
width: 100,
},
{

6
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactions/index.js
View File

@@ -1,12 +1,16 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
import { useItemAssociatedInvoiceTransactions } from 'hooks/query';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import {
useInvoicePaymentTransactionsColumns,
ActionsMenu,
} from './components';
import { TableStyle } from 'common';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
@@ -62,6 +66,8 @@ function InvoicePaymentTransactions({
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
styleName={TableStyle.Constrant}
TableLoadingRenderer={TableSkeletonRows}
/>
);
}

1
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js
View File

@@ -8,6 +8,7 @@ export default function ItemPaymentTransactionsContent({ tansactionType }) {
const handleType = () => {
switch (tansactionType) {
case 'invoices':
default:
return <InvoicePaymentTransactions />;
case 'estimates':
return <EstimatePaymentTransactions />;

1
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/components.js
View File

@@ -67,6 +67,7 @@ export const useReceiptTransactionsColumns = () => {
id: 'qunatity',
Header: intl.get('item.drawer_quantity_sold'),
accessor: 'quantity',
align: 'right',
width: 100,
},
{

5
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactions/index.js
View File

@@ -2,6 +2,9 @@ import React from 'react';
import { useHistory } from 'react-router-dom';
import { DataTable } from '../../../../../components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'
import { TableStyle } from 'common';
import { useItemDetailDrawerContext } from '../../ItemDetailDrawerProvider';
import { useItemAssociatedReceiptTransactions } from 'hooks/query';
import { useReceiptTransactionsColumns, ActionsMenu } from './components';
@@ -61,6 +64,8 @@ function ReceiptPaymentTransactions({
onEdit: handleEditPaymentTransactions,
onDelete: handleDeletePaymentTransactons,
}}
styleName={TableStyle.Constrant}
TableLoadingRenderer={TableSkeletonRows}
/>
);
}

34
src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js
View File

@@ -1,11 +1,29 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
import { ItemManuTransaction } from './utils';
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
import ItemPaymentTransactionContent from './ItemPaymentTransactionContent';
export const ItemPaymentTransactions = () => {
const { value, setValue } = useItemDetailDrawerContext();
import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider';
export function ItemPaymentTransactions() {
const { value } = useItemDetailDrawerContext();
return (
<Card>
<ItemTransactionsHeader />
<ItemPaymentTransactionContent tansactionType={value} />
</Card>
);
}
/**
* Item transactions header.
* @returns {React.JSX}
*/
export function ItemTransactionsHeader() {
const { setValue } = useItemDetailDrawerContext();
// handle item change.
const handleItemChange = (item) => {
@@ -13,10 +31,12 @@ export const ItemPaymentTransactions = () => {
};
return (
<Card>
<ItemTransactionsHeaderRoot>
<ItemManuTransaction onChange={handleItemChange} />
<ItemPaymentTransactionContent tansactionType={value} />
</Card>
</ItemTransactionsHeaderRoot>
);
};
}
export const ItemTransactionsHeaderRoot = styled.div`
margin-bottom: 10px;
`;

21
src/style/components/Drawers/ItemDrawer.scss
View File

@@ -38,25 +38,4 @@
}
}
}
.table {
margin-top: 8px;
.tbody,
.thead {
.tr .th {
padding: 8px 8px;
background-color: #fff;
font-size: 14px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
}
.tbody {
.tr .td {
border-bottom: 0;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
}
}
}