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

feat: add style of payment made.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 16:47:48 +02:00
parent 961082c50b
commit 0d924464ea
7 changed files with 149 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailContent.js
View File

@@ -1,8 +1,6 @@
import React from 'react'; import React from 'react';
import { DrawerBody } from 'components'; import { DrawerBody } from 'components';
import 'style/components/Drawers/ViewDetail/ViewDetail.scss';
import PaymentMadeDetails from './PaymentMadeDetails'; import PaymentMadeDetails from './PaymentMadeDetails';
import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider'; import { PaymentMadeDetailProvider } from './PaymentMadeDetailProvider';

94
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
View File

@@ -1,13 +1,19 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import { DetailsMenu, DetailItem, FormatDate } from 'components'; import {
Row,
Col,
FormatDate,
DetailsMenu,
DetailItem,
CommercialDocHeader,
CommercialDocTopHeader,
ButtonLink,
} from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider'; import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/** /**
* Payment made - detail panel - header. * Payment made - detail panel - header.
*/ */
@@ -15,39 +21,53 @@ export default function PaymentMadeDetailHeader() {
const { paymentMade } = usePaymentMadeDetailContext(); const { paymentMade } = usePaymentMadeDetailContext();
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel_header)}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem label={intl.get('amount')}> <DetailsMenu>
<h3 class="big-number" children={paymentMade.formatted_amount} /> <DetailItem label={intl.get('amount')}>
</DetailItem> <h3 class="big-number">{paymentMade.formatted_amount}</h3>
<DetailItem </DetailItem>
label={intl.get('payment_made.details.payment_number')} </DetailsMenu>
children={defaultTo(paymentMade.payment_number, '-')} </CommercialDocTopHeader>
/>
<DetailItem
label={intl.get('customer_name')}
children={paymentMade.vendor?.display_name}
/>
<DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'160px'}> <Row>
<DetailItem <Col xs={6}>
label={intl.get('description')} <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
children={defaultTo(paymentMade.statement, '-')} <DetailItem
/> label={intl.get('payment_made.details.payment_number')}
<DetailItem children={defaultTo(paymentMade.payment_number, '-')}
label={intl.get('created_at')} />
children={<FormatDate value={paymentMade.created_at} />} <DetailItem label={intl.get('vendor_name')}>
/> <ButtonLink>{paymentMade.vendor?.display_name}</ButtonLink>
</DetailsMenu> </DetailItem>
</div> <DetailItem
label={intl.get('payment_account')}
children={paymentMade.payment_account?.name}
/>
<DetailItem
label={intl.get('payment_date')}
children={<FormatDate value={paymentMade.payment_date} />}
/>
</DetailsMenu>
</Col>
<Col xs={6}>
<DetailsMenu
textAlign={'right'}
direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('description')}
children={defaultTo(paymentMade.statement, '-')}
/>
<DetailItem
label={intl.get('created_at')}
children={<FormatDate value={paymentMade.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
); );
} }

14
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailProvider.js
View File

@@ -20,26 +20,14 @@ function PaymentMadeDetailProvider({ paymentMadeId, ...props }) {
enabled: !!paymentMadeId, enabled: !!paymentMadeId,
}, },
); );
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: paymentMadeId,
reference_type: 'BillPayment',
},
{ enabled: !!paymentMadeId },
);
//provider. //provider.
const provider = { const provider = {
transactions,
paymentMadeId, paymentMadeId,
paymentMade, paymentMade,
}; };
const loading = isTransactionLoading || isPaymentMadeLoading; const loading = isPaymentMadeLoading;
return ( return (
<DrawerLoading loading={loading}> <DrawerLoading loading={loading}>

21
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTab.js
View File

@@ -1,28 +1,21 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { Card } from 'components'; import { CommercialDocBox } from 'components';
import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailHeader from './PaymentMadeDetailHeader'; import PaymentMadeDetailHeader from './PaymentMadeDetailHeader';
import PaymentMadeDetailTable from './PaymentMadeDetailTable'; import PaymentMadeDetailTable from './PaymentMadeDetailTable';
import PaymentMadeDetailFooter from './PaymentMadeDetailFooter'; import PaymentMadeDetailFooter from './PaymentMadeDetailFooter';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
/** /**
* Payment made detail tab. * Payment made detail tab.
* @returns {React.JSX}
*/ */
export default function PaymentMadeDetailTab() { export default function PaymentMadeDetailTab() {
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel)}> <CommercialDocBox>
<PaymentMadeDetailActionsBar /> <PaymentMadeDetailHeader />
<PaymentMadeDetailTable />
<Card> <PaymentMadeDetailFooter />
<PaymentMadeDetailHeader /> </CommercialDocBox>
<PaymentMadeDetailTable />
<PaymentMadeDetailFooter />
</Card>
</div>
); );
} }

19
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailTable.js
View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { CommercialDocEntriesTable } from 'components';
import { usePaymentMadeEntriesColumns } from './utils'; import { usePaymentMadeEntriesColumns } from './utils';
import { DataTable } from 'components';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider'; import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss'; import { TableStyle } from 'common';
/** /**
* Payment made read-only details table. * Payment made read-only details table.
@@ -19,12 +18,10 @@ export default function PaymentMadeDetailTable() {
const { paymentMade } = usePaymentMadeDetailContext(); const { paymentMade } = usePaymentMadeDetailContext();
return ( return (
<div className={clsx(PaymentDrawerCls.detail_panel_table)}> <CommercialDocEntriesTable
<DataTable columns={columns}
columns={columns} data={paymentMade.entries}
data={paymentMade.entries} styleName={TableStyle.Constrant}
className={'table-constrant'} />
/>
</div>
); );
} }

54
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetails.js
View File

@@ -1,35 +1,47 @@
import React from 'react'; import React from 'react';
import { Tab } from '@blueprintjs/core'; import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import clsx from 'classnames'; import styled from 'styled-components';
import { DrawerMainTabs } from 'components'; import { DrawerMainTabs } from 'components';
import PaymentMadeDetailTab from './PaymentMadeDetailTab';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
import PaymentDrawerCls from './PaymentMadeDrawer.module.scss'; import PaymentMadeDetailActionsBar from './PaymentMadeDetailActionsBar';
import PaymentMadeDetailTab from './PaymentMadeDetailTab';
import PaymentMadeGLEntriesPanel from './PaymentMadeGLEntriesPanel';
/** /**
* Payment made - view detail. * Payment made - view detail.
* @returns {React.JSX}
*/ */
export default function PaymentMadeDetails() {
const { transactions } = usePaymentMadeDetailContext();
function PaymentMadeDetailsTabs() {
return ( return (
<div className={clsx(PaymentDrawerCls.root)}> <DrawerMainTabs defaultSelectedTabId="details">
<DrawerMainTabs defaultSelectedTabId="details"> <Tab
<Tab id={'details'}
id={'details'} title={intl.get('details')}
title={intl.get('details')} panel={<PaymentMadeDetailTab />}
panel={<PaymentMadeDetailTab />} />
/> <Tab
<Tab id={'journal_entries'}
id={'journal_entries'} title={intl.get('journal_entries')}
title={intl.get('journal_entries')} panel={<PaymentMadeGLEntriesPanel />}
panel={<JournalEntriesTable transactions={transactions} />} />
/> </DrawerMainTabs>
</DrawerMainTabs>
</div>
); );
} }
/**
* Payment made view detail.
* @returns {React.JSX}
*/
export default function PaymentMadeDetail() {
return (
<PaymentMadeDetailsRoot>
<PaymentMadeDetailActionsBar />
<PaymentMadeDetailsTabs />
</PaymentMadeDetailsRoot>
);
}
const PaymentMadeDetailsRoot = styled.div``;

42
src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeGLEntriesPanel.js Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import styled from 'styled-components';
import { Card } from 'components';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../JournalEntriesTable/JournalEntriesTable';
import { useTransactionsByReference } from 'hooks/query';
import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';
/**
* Payment made GL entries table panel.
* @returns {React.JSX}
*/
export default function PaymentMadeGLEntriesPanel() {
const { paymentMadeId } = usePaymentMadeDetailContext();
// Handle fetch transaction by reference.
const {
data: { transactions },
isLoading: isTransactionLoading,
} = useTransactionsByReference(
{
reference_id: paymentMadeId,
reference_type: 'BillPayment',
},
{ enabled: !!paymentMadeId },
);
return (
<PaymentMadeGLEntriesRoot>
<AmountDisplayedBaseCurrencyMessage />
<JournalEntriesTable
loading={isTransactionLoading}
transactions={transactions}
/>
</PaymentMadeGLEntriesRoot>
);
}
const PaymentMadeGLEntriesRoot = styled(Card)``;