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

refactoring(paperTemplate): connect data.

Browse Source
This commit is contained in:
elforjani3
2021-03-06 20:20:59 +02:00
parent c245f4249d
commit be0c53d18a
9 changed files with 221 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import React from 'react';
import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer'; import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer';
import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer'; import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer';
import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer'; import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer';
import PaymentDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentDrawer'; import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer';
export default function DrawersContainer() { export default function DrawersContainer() {
return ( return (
@@ -10,7 +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'} />
<PaymentDrawer name={'payment-receive-drawer'} /> <PaymentReceiveDrawer name={'payment-receive-drawer'} />
</div> </div>
); );
} }

26
client/src/containers/Drawers/PaperTemplate/PaperTemplate.js
View File

@@ -2,9 +2,11 @@ import React from 'react';
import PaperTemplateHeader from './PaperTemplateHeader'; import PaperTemplateHeader from './PaperTemplateHeader';
import PaperTemplateTable from './PaperTemplateTable'; import PaperTemplateTable from './PaperTemplateTable';
import PaperTemplateFooter from './PaperTemplateFooter'; import PaperTemplateFooter from './PaperTemplateFooter';
import { updateItemsEntriesTotal } from 'containers/Entries/utils';
import 'style/components/Drawer/DrawerTemplate.scss'; import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaperTemplate({ labels: propLabels }) { function PaperTemplate({ labels: propLabels, paperData, entries }) {
const labels = { const labels = {
name: 'Estimate', name: 'Estimate',
billedTo: 'Billed to', billedTo: 'Billed to',
@@ -15,13 +17,29 @@ export default function PaperTemplate({ labels: propLabels }) {
dueDate: 'Due date', dueDate: 'Due date',
...propLabels, ...propLabels,
}; };
const defaultValues = {
billedTo: paperData.customer.display_name,
date: paperData.estimate_date,
amount: '',
billedFrom: '',
dueDate: paperData.expiration_date,
referenceNo: paperData.estimate_number,
...paperData,
};
return ( return (
<div id={'page-size'}> <div id={'page-size'}>
<div className={'template'}> <div className={'template'}>
<PaperTemplateHeader defaultLabels={labels} /> <PaperTemplateHeader
<PaperTemplateTable /> defaultLabels={labels}
<PaperTemplateFooter /> headerData={defaultValues}
/>
<PaperTemplateTable tableData={updateItemsEntriesTotal(entries)} />
<PaperTemplateFooter footerData={defaultValues} />
</div> </div>
</div> </div>
); );
} }
export default PaperTemplate;

14
client/src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js
View File

@@ -1,16 +1,22 @@
import React from 'react'; import React from 'react';
import { If } from 'components';
export default function PaperTemplateFooter() { export default function PaperTemplateFooter({
footerData: { terms_conditions },
}) {
return ( return (
<div className="template__terms"> <div className="template__terms">
<If condition={terms_conditions}>
<div className="template__terms__title"> <div className="template__terms__title">
<h4>Conditions and terms</h4> <h4>Conditions and terms</h4>
</div> </div>
<ul> <ul>
<li>Est excepteur laboris do sit dolore sit exercitation non.</li> {[terms_conditions].map((terms) => (
<li>Lorem duis aliqua minim elit cillum.</li> <li>{terms}</li>
<li>Dolor ad quis Lorem ut mollit consectetur.</li> ))}
</ul> </ul>
</If>
</div> </div>
); );
} }

52
client/src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js
View File

@@ -1,44 +1,22 @@
import React from 'react'; import React from 'react';
import { Icon } from 'components'; import { TemplateHeader, TemplateContent } from '../components';
export default function PaperTemplateHeader({ defaultLabels }) { export default function PaperTemplateHeader({
defaultLabels,
headerData: { referenceNo, amount, dueDate, date, billedTo },
}) {
return ( return (
<> <>
<div className={'template__header'}> <TemplateHeader defaultLabels={defaultLabels} />
<div className={'template__header--title'}> <TemplateContent
<h1>{defaultLabels.name}</h1> defaultLabels={defaultLabels}
<p>info@bigcapital.ly </p> billedTo={billedTo}
</div> date={date}
<Icon icon="bigcapital" height={30} width={200} /> referenceNo={referenceNo}
</div> amount={amount}
billedFrom={''}
<div className="template__content"> dueDate={dueDate}
<div className="template__content__info"> />
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Joe Biden</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.date} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.refNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amount} </span>
<p className={'info-paragraph-amount'}>6,000 LYD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}>Donald Trump</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.dueDate} </span>
<p className={'info-paragraph'}>25/03/2022</p>
</div>
</div>
</> </>
); );
} }

84
client/src/containers/Drawers/PaperTemplate/PaperTemplateTable.js
View File

@@ -1,55 +1,41 @@
import React from 'react'; import React, { useMemo } from 'react';
import { formatMessage } from 'services/intl';
import { DataTable, Money } from 'components';
export default function DrawerTemplateTable() { export default function DrawerTemplateTable({ tableData }) {
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'description' }),
accessor: 'description',
disableSortBy: true,
width: 150,
},
{
Header: formatMessage({ id: 'rate' }),
accessor: 'rate',
accessor: ({ rate }) => <Money amount={rate} currency={'USD'} />,
disableSortBy: true,
width: 50,
},
{
Header: formatMessage({ id: 'Qty' }),
accessor: 'quantity',
disableSortBy: true,
width: 50,
},
{
Header: formatMessage({ id: 'Total' }),
accessor: ({ total }) => <Money amount={total} currency={'USD'} />,
disableSortBy: true,
width: 50,
},
],
[],
);
return ( return (
<div className="template__table"> <div className="template__table">
<div className="template__table__rows"> <DataTable columns={columns} data={tableData} />
<span className="template__table__rows--cell ">Description</span>
<span className="template__table__rows--cell">Rate</span>
<span className="template__table__rows--cell">Qty</span>
<span className="template__table__rows--cell">Total</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla commodo magnanon dolor excepteur nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
<div className="template__table__rows">
<span className="template__table__rows--cell">
Nulla comm non dolor excepteur elit dolore eiusmod nisi aute laborum.
</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">1</span>
<span className="template__table__rows--cell">100 LYD</span>
</div>
</div> </div>
); );
} }

32
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js
View File

@@ -1,26 +1,44 @@
import React from 'react'; import React from 'react';
import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader'; import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
import PaymentPaperTemplateTable from './PaymentPaperTemplateTable'; import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
import 'style/components/Drawer/DrawerTemplate.scss'; import 'style/components/Drawer/DrawerTemplate.scss';
export default function PaymentPaperTemplate({ labels: propLabels }) { export default function PaymentPaperTemplate({
labels: propLabels,
paperData,
}) {
const labels = { const labels = {
title: 'Payment receive', name: 'Payment receive',
billedTo: 'Billed to', billedTo: 'Billed to',
paymentDate: 'Payment date', date: 'Payment date',
paymentNo: 'Payment No.', refNo: 'Payment No.',
billedFrom: 'Billed from', billedFrom: 'Billed from',
referenceNo: 'Reference No', referenceNo: 'Reference No',
amountReceived: 'Amount received', amount: 'Amount received',
dueDate: 'Due date',
...propLabels, ...propLabels,
}; };
const defaultValues = {
billedTo: paperData.customer.display_name,
date: paperData.payment_date,
amount: '',
billedFrom: '',
referenceNo: paperData.payment_receive_no,
...paperData,
};
return ( return (
<div id={'page-size'}> <div id={'page-size'}>
{[defaultValues].map(({ entries, ...defaultValues }) => (
<div className={'template'}> <div className={'template'}>
<PaymentPaperTemplateHeader defaultLabels={labels} /> <PaymentPaperTemplateHeader
<PaymentPaperTemplateTable /> defaultLabels={labels}
headerData={defaultValues}
/>
<PaymentPaperTemplateTable tableData={entries} />
</div> </div>
))}
</div> </div>
); );
} }

50
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js
View File

@@ -1,43 +1,21 @@
import React from 'react'; import React from 'react';
import { Icon } from 'components'; import { TemplateHeader, TemplateContent } from '../components';
export default function PaymentPaperTemplateHeader({ defaultLabels }) { export default function PaymentPaperTemplateHeader({
defaultLabels,
headerData: { referenceNo, amount, date, billedTo },
}) {
return ( return (
<> <>
<div className={'template__header'}> <TemplateHeader defaultLabels={defaultLabels} />
<div className={'template__header--title'}> <TemplateContent
<h1>{defaultLabels.title}</h1> defaultLabels={defaultLabels}
<p>info@bigcapital.ly </p> billedTo={billedTo}
</div> date={date}
<Icon icon="bigcapital" height={30} width={200} /> referenceNo={referenceNo}
</div> amount={amount}
billedFrom={''}
<div className="template__content"> />
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>Step Currency</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentDate} </span>
<p className={'info-paragraph'}>1/1/2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.paymentNo} </span>
<p className={'info-paragraph'}>IN-2022</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amountReceived} </span>
<p className={'info-paragraph-amount'}>60,000 USD</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}> Klay Thompson</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.referenceNo} </span>
<p className={'info-paragraph'}></p>
</div>
</div>
</> </>
); );
} }

79
client/src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js
View File

@@ -1,51 +1,42 @@
import React from 'react'; import React from 'react';
import moment from 'moment';
import { formatMessage } from 'services/intl';
import { DataTable, Money } from 'components';
export default function PaymentPaperTemplateTable() { export default function PaymentPaperTemplateTable({ tableData }) {
const columns = React.useMemo(
() => [
{
Header: formatMessage({ id: 'invoice_number' }),
accessor: 'invoice.invoice_no',
disableSortBy: true,
},
{
Header: formatMessage({ id: 'invoice_date' }),
accessor: ({ invoice_date }) =>
moment(invoice_date).format('YYYY MMM DD'),
disableSortBy: true,
},
{
Header: formatMessage({ id: 'invoice_amount' }),
accessor: ({ invoice }) => (
<Money amount={invoice.balance} currency={'USD'} />
),
disableSortBy: true,
},
{
Header: formatMessage({ id: 'payment_amount' }),
accessor: ({ payment_amount }) => (
<Money amount={payment_amount} currency={'USD'} />
),
disableSortBy: true,
},
],
[],
);
return ( return (
<div className="template__table"> <div className="template__table">
<div className="template__table__rows"> <DataTable columns={columns} data={tableData} />
<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>
); );
} }

56
client/src/containers/Drawers/components.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import { Icon, If, Money } from 'components';
import moment from 'moment';
export const TemplateHeader = ({ defaultLabels }) => (
<div className={'template__header'}>
<div className={'template__header--title'}>
<h1>{defaultLabels.name}</h1>
<p>info@bigcapital.ly </p>
</div>
<Icon icon="bigcapital" height={30} width={200} />
</div>
);
export const TemplateContent = ({
defaultLabels,
billedTo,
date,
referenceNo,
amount,
billedFrom,
dueDate,
}) => (
<div className="template__content">
<div className="template__content__info">
<span> {defaultLabels.billedTo} </span>
<p className={'info-paragraph'}>{billedTo}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.date} </span>
<p className={'info-paragraph'}>{moment(date).format('YYYY MMM DD')}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.refNo} </span>
<p className={'info-paragraph'}>{referenceNo}</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.amount} </span>
<p className={'info-paragraph-amount'}>
{<Money amount={amount} currency={'USD'} />}
</p>
</div>
<div className="template__content__info">
<span> {defaultLabels.billedFrom} </span>
<p className={'info-paragraph'}>{billedFrom}</p>
</div>
<div className="template__content__info">
<If condition={dueDate}>
<span> {defaultLabels.dueDate} </span>
<p className={'info-paragraph'}>
{moment(dueDate).format('YYYY MMM DD')}
</p>
</If>
</div>
</div>
);