QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: payment receive paper.

Browse Source
This commit is contained in:
elforjani3
2021-02-06 21:02:57 +02:00
parent 855134312e
commit 8d185f834e
7 changed files with 154 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/DrawersContainer.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer'; import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer';
import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer'; import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer';
import ReceiptDrawer from 'containers/Sales/Receipt/ReceiptDrawer'; import ReceiptDrawer from 'containers/Sales/Receipt/ReceiptDrawer';
import PaymentReceive from 'containers/Sales/PaymentReceive/PaymentReceiveDrawer';
export default function DrawersContainer() { export default function DrawersContainer() {
return ( return (
@@ -9,6 +10,7 @@ export default function DrawersContainer() {
<EstimateDrawer name={'estimate-drawer'} /> <EstimateDrawer name={'estimate-drawer'} />
<InvoiceDrawer name={'invoice-drawer'} /> <InvoiceDrawer name={'invoice-drawer'} />
<ReceiptDrawer name={'receipt-drawer'} /> <ReceiptDrawer name={'receipt-drawer'} />
<PaymentReceive name={'payment-receive-drawer'} />
</div> </div>
); );
} }

102
client/src/containers/Drawers/PaymentPaperTemplate.js Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react';
import { Icon } from 'components';
import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaymentPaperTemplate({ labels: propLabels }) {
const labels = {
title: 'Payment receive',
billedTo: 'Billed to',
paymentDate: 'Payment date',
paymentNo: 'Payment No.',
billedFrom: 'Billed from',
referenceNo: 'Reference No',
amountReceived: 'Amount received',
...propLabels,
};
return (
<div id={'page-size'}>
<div className={'template'}>
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{labels.title}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
<div className="template__content">
<div className="template__content__info">
<span> {labels.billedTo} </span>
<p className={'info-paragraph'}>Step Currency</p>
</div>
<div className="template__content__info">
<span> {labels.paymentDate} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {labels.paymentNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {labels.amountReceived} </span>
<p className={'info-paragraph-amount'}>60,000 USD</p>
</div>
<div className="template__content__info">
<span> {labels.billedFrom} </span>
<p className={'info-paragraph'}> Klay Thompson</p>
</div>
<div className="template__content__info">
<span> {labels.referenceNo} </span>
<p className={'info-paragraph'}></p>
</div>
</div>
<div className="template__table">
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive ">
Invoice number
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice date
</span>
<span className="template__table__rows--cell-payment-receive ">
Invoice amount
</span>
<span className="template__table__rows--cell-payment-receive ">
Payment amount
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-1
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell-payment-receive">
INV-2{' '}
</span>
<span className="template__table__rows--cell-payment-receive">
12 Jan 2021
</span>
<span className="template__table__rows--cell-payment-receive">
50,000 USD
</span>
<span className="template__table__rows--cell-payment-receive">
1000 USD
</span>
</div>
</div>
</div>
</div>
);
}

29
client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate';
import withDrawers from 'containers/Drawer/withDrawers';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
function PaymentReceiveDrawer({
name,
//#withDrawer
isOpen,
payload,
closeDrawer,
}) {
// handle close Drawer
const handleDrawerClose = () => {
closeDrawer(name);
};
return (
<DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
<PaymentPaperTemplate />
</DrawerTemplate>
);
}
export default compose(withDrawers(), withDrawerActions)(PaymentReceiveDrawer);

5
client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js
View File

@@ -47,6 +47,7 @@ function PaymentReceivesDataTable({
// #OwnProps // #OwnProps
onEditPaymentReceive, onEditPaymentReceive,
onDeletePaymentReceive, onDeletePaymentReceive,
onDrawerPaymentReceive,
onSelectedRowsChange, onSelectedRowsChange,
}) { }) {
const isLoaded = useIsValuePassed(paymentReceivesLoading, false); const isLoaded = useIsValuePassed(paymentReceivesLoading, false);
@@ -105,6 +106,10 @@ function PaymentReceivesDataTable({
text={formatMessage({ id: 'edit_payment_receive' })} text={formatMessage({ id: 'edit_payment_receive' })}
onClick={handleEditPaymentReceive(paymentReceive)} onClick={handleEditPaymentReceive(paymentReceive)}
/> />
<MenuItem
text={formatMessage({ id: 'payment_receive_paper' })}
onClick={() => onDrawerPaymentReceive()}
/>
<MenuItem <MenuItem
text={formatMessage({ id: 'delete_payment_receive' })} text={formatMessage({ id: 'delete_payment_receive' })}
intent={Intent.DANGER} intent={Intent.DANGER}

10
client/src/containers/Sales/PaymentReceive/PaymentReceivesList.js
View File

@@ -15,6 +15,7 @@ import withResourceActions from 'containers/Resources/withResourcesActions';
import withPaymentReceives from './withPaymentReceives'; import withPaymentReceives from './withPaymentReceives';
import withPaymentReceivesActions from './withPaymentReceivesActions'; import withPaymentReceivesActions from './withPaymentReceivesActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -28,6 +29,9 @@ function PaymentReceiveList({
// #withAlertsActions. // #withAlertsActions.
openAlert, openAlert,
// #withDrawerActions
openDrawer,
//#withPaymentReceivesActions //#withPaymentReceivesActions
requestFetchPaymentReceiveTable, requestFetchPaymentReceiveTable,
}) { }) {
@@ -56,6 +60,10 @@ function PaymentReceiveList({
history.push(`/payment-receives/${payment.id}/edit`); history.push(`/payment-receives/${payment.id}/edit`);
}); });
const handlePaymentReceiveDrawer = useCallback(() => {
openDrawer('payment-receive-drawer', {});
}, [openDrawer]);
// Handle filter change to re-fetch data-table. // Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]); const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]);
@@ -86,6 +94,7 @@ function PaymentReceiveList({
<PaymentReceivesDataTable <PaymentReceivesDataTable
onDeletePaymentReceive={handleDeletePaymentReceive} onDeletePaymentReceive={handleDeletePaymentReceive}
onEditPaymentReceive={handleEditPaymentReceive} onEditPaymentReceive={handleEditPaymentReceive}
onDrawerPaymentReceive={handlePaymentReceiveDrawer}
onSelectedRowsChange={handleSelectedRowsChange} onSelectedRowsChange={handleSelectedRowsChange}
/> />
</Route> </Route>
@@ -104,4 +113,5 @@ export default compose(
paymentReceivesTableQuery, paymentReceivesTableQuery,
})), })),
withAlertsActions, withAlertsActions,
withDrawerActions,
)(PaymentReceiveList); )(PaymentReceiveList);

1
client/src/lang/en/index.js
View File

@@ -973,4 +973,5 @@ export default {
invoice_paper: 'Invoice Paper', invoice_paper: 'Invoice Paper',
receipt_paper: 'Receipt Paper', receipt_paper: 'Receipt Paper',
payable_aging_summary: 'Payable Aging Summary', payable_aging_summary: 'Payable Aging Summary',
payment_receive_paper: 'Payment Receive Paper',
}; };

50
client/src/style/components/Drawer/DrawerTemplate.scss
View File

@@ -18,6 +18,7 @@
justify-content: space-between; justify-content: space-between;
margin: 0px 40px 16px 0px; margin: 0px 40px 16px 0px;
&--title h1 { &--title h1 {
font-weight: 600;
color: #1c4587; color: #1c4587;
margin: 0; margin: 0;
} }
@@ -54,52 +55,6 @@
color: #000; color: #000;
} }
} }
// &__content {
// display: flex;
// flex-wrap: wrap;
// border-bottom: 2px solid #1155cc;
// padding-bottom: 45px;
// &--info {
// flex: 0 1 25%;
// padding-left: 5px;
// margin-bottom: 10px;
// }
// &--info > span {
// color: #999999;
// font-size: 16px;
// }
// &--info > p:not(.-info--amount) {
// color: #000;
// font-size: 14px;
// }
// // span {
// // color: #999999;
// // font-size: 16px;
// // }
// // p {
// // color: #000;
// // }
// .info--amount {
// color: #123163;
// }
// p {
// // font-size: 16px;
// // font-weight: 500;
// // margin: 5px 0px;
// color: #000;
// }
// &--amount {
// color: #123163;
// color: red;
// // margin-top: 8px;
// // font-size: 25px;
// // font-weight: 700;
// }
} }
&__table { &__table {
@@ -117,6 +72,9 @@
&--cell { &--cell {
flex: 0 20%; flex: 0 20%;
} }
&--cell-payment-receive {
flex: 1;
}
&--cell:first-child { &--cell:first-child {
flex: 1 0 20%; flex: 1 0 20%;