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

Merge remote-tracking branch 'origin/feature/Detail'

Browse Source
This commit is contained in:
a.bouhuolia
2021-08-25 16:10:13 +02:00
parent 8a3ab96c53 aa6769c011
commit 1f56c04c73
61 changed files with 1668 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js
View File

@@ -1,36 +1,36 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { Tab } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import clsx from 'classnames';
import { DrawerMainTabs } from 'components';
import JournalEntriesTable from '../../JournalEntriesTable/JournalEntriesTable';
import InvoiceDetailTab from './InvoiceDetailTab';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice view detail.
*/
export default function InvoiceDetail() {
const { transactions, invoiceId } = useInvoiceDetailDrawerContext();
const { transactions } = useInvoiceDetailDrawerContext();
return (
<div className="view-detail-drawer">
<Tabs
animate={true}
large={true}
defaultSelectedTabId="journal_entries"
renderActiveTabPanelOnly={false}
>
<div className={clsx(InvoiceDrawerCls.invoice_details)}>
<DrawerMainTabs defaultSelectedTabId="details">
<Tab
title={intl.get('details')}
id={'details'}
panel={<InvoiceDetailTab invoiceId={invoiceId} />}
panel={<InvoiceDetailTab />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTable transactions={transactions} />}
/>
</Tabs>
</DrawerMainTabs>
</div>
);
}

90
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailActionsBar.js Normal file
View File

@@ -0,0 +1,90 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import {
Button,
NavbarGroup,
Classes,
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { compose } from 'utils';
/**
* Invoice details action bar.
*/
function InvoiceDetailActionsBar({
// #withDialogActions
openDialog,
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
// Invoice detail drawer context.
const { invoiceId } = useInvoiceDetailDrawerContext();
// Handle edit sale invoice.
const handleEditInvoice = () => {
history.push(`/invoices/${invoiceId}/edit`);
closeDrawer('invoice-detail-drawer');
};
// Handle delete sale invoice.
const handleDeleteInvoice = () => {
openAlert('invoice-delete', { invoiceId });
closeDrawer('invoice-detail-drawer');
};
// Handle print invoices.
const handlePrintInvoice = () => {
openDialog('invoice-pdf-preview', { invoiceId });
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_invoice'} />}
onClick={handleEditInvoice}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
text={<T id={'print'} />}
onClick={handlePrintInvoice}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handleDeleteInvoice}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
export default compose(
withDialogActions,
withDrawerActions,
withAlertsActions,
)(InvoiceDetailActionsBar);

4
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerContent.js
View File

@@ -10,10 +10,10 @@ import { InvoiceDetailDrawerProvider } from './InvoiceDetailDrawerProvider';
*/
export default function InvoiceDetailDrawerContent({
// #ownProp
invoice,
invoiceId,
}) {
return (
<InvoiceDetailDrawerProvider invoiceId={invoice}>
<InvoiceDetailDrawerProvider invoiceId={invoiceId}>
<InvoiceDetail />
</InvoiceDetailDrawerProvider>
);

10
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import intl from 'react-intl-universal';
import { DrawerHeaderContent, DashboardInsider } from 'components';
import { useTransactionsByReference } from 'hooks/query';
import { useTransactionsByReference, useInvoice } from 'hooks/query';
const InvoiceDetailDrawerContext = React.createContext();
/**
@@ -20,13 +20,19 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
{ enabled: !!invoiceId },
);
// Fetch sale invoice details.
const { data: invoice, isLoading: isInvoiceLoading } = useInvoice(invoiceId, {
enabled: !!invoiceId,
});
//provider.
const provider = {
transactions,
invoiceId,
invoice,
};
return (
<DashboardInsider loading={isTransactionLoading}>
<DashboardInsider loading={isTransactionLoading || isInvoiceLoading}>
<DrawerHeaderContent
name="invoice-detail-drawer"
title={intl.get('invoice_details')}

40
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailFooter.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import clsx from 'classnames';
import { TotalLines, TotalLine } from 'components';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
/**
*
*/
export function InvoiceDetailFooter() {
const { invoice } = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_footer)}>
<TotalLines>
<TotalLine
title={'Subtotal'}
value={invoice.balance}
className={InvoiceDrawerCls.total_line_subtotal}
/>
<TotalLine
title={'TOTAL'}
value={invoice.balance}
className={InvoiceDrawerCls.total_line_total}
/>
<TotalLine
title={'Payment made'}
value={invoice.payment_amount}
className={InvoiceDrawerCls.total_line_payment}
/>
<TotalLine
title={'Due amount'}
value={'1000'}
className={InvoiceDrawerCls.total_line_dueAmount}
/>
</TotalLines>
</div>
);
}

55
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import intl from 'react-intl-universal';
import { defaultTo } from 'lodash';
import clsx from 'classnames';
import { DetailsMenu, DetailItem } from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice detail header.
*/
export default function InvoiceDetailHeader() {
const { invoice } = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_header)}>
<DetailsMenu>
<DetailItem label={intl.get('amount')}>
<h3 class="big-number">{invoice.formatted_amount}</h3>
</DetailItem>
<DetailItem
label={intl.get('invoice_no')}
children={invoice.invoice_no}
/>
<DetailItem
label={intl.get('customer_name')}
children={invoice.customer?.display_name}
/>
<DetailItem
label={intl.get('invoice_date')}
children={invoice.formatted_invoice_date}
/>
<DetailItem
label={intl.get('due_date')}
children={invoice.formatted_due_date}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'}>
<DetailItem
label={intl.get('due_amount')}
children={invoice.formatted_due_amount}
/>
<DetailItem
label={intl.get('reference')}
children={defaultTo(invoice.reference_no, '--')}
/>
<DetailItem label={'Created at'} children={'2020 Ang 21'} />
</DetailsMenu>
</div>
);
}

103
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js
View File

@@ -1,89 +1,28 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import clsx from 'classnames';
import {
Button,
NavbarGroup,
Classes,
NavbarDivider,
Intent,
} from '@blueprintjs/core';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { Card } from 'components';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDetailActionsBar from './InvoiceDetailActionsBar';
import InvoiceDetailHeader from './InvoiceDetailHeader';
import InvoiceDetailTable from './InvoiceDetailTable';
import { InvoiceDetailFooter } from './InvoiceDetailFooter';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { Icon, FormattedMessage as T } from 'components';
import { safeCallback, compose } from 'utils';
function InvoiceDetailTab({
invoiceId,
// #withDialogActions
openDialog,
// #withAlertsActions
openAlert,
// #withDrawerActions
closeDrawer,
}) {
const history = useHistory();
// Handle edit sale invoice.
const onEditInvoice = () => {
return invoiceId
? (history.push(`/invoices/${invoiceId}/edit`),
closeDrawer('invoice-detail-drawer'))
: null;
};
// Handle delete sale invoice.
const onDeleteInvoice = () => {
return invoiceId
? (openAlert('invoice-delete', { invoiceId }),
closeDrawer('invoice-detail-drawer'))
: null;
};
// Handle print invoices.
const onPrintInvoice = () => {
openDialog('invoice-pdf-preview', { invoiceId });
};
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice readonly details tab panel.
*/
export default function InvoiceDetailTab() {
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="pen-18" />}
text={<T id={'edit_invoice'} />}
onClick={safeCallback(onEditInvoice)}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={<Icon icon="print-16" />}
text={<T id={'print'} />}
onClick={safeCallback(onPrintInvoice)}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon={'trash-16'} iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={safeCallback(onDeleteInvoice)}
/>
</NavbarGroup>
</DashboardActionsBar>
);
}
<div className={clsx(InvoiceDrawerCls.detail_panel)}>
<InvoiceDetailActionsBar />
export default compose(
withDialogActions,
withDrawerActions,
withAlertsActions,
)(InvoiceDetailTab);
<Card>
<InvoiceDetailHeader />
<InvoiceDetailTable />
<InvoiceDetailFooter />
</Card>
</div>
);
}

30
client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTable.js Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components';
import { useInvoiceReadonlyEntriesColumns } from './utils';
import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';
import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
/**
* Invoice readonly details entries table columns.
*/
export default function InvoiceDetailTable() {
const columns = useInvoiceReadonlyEntriesColumns();
const {
invoice: { entries },
} = useInvoiceDetailDrawerContext();
return (
<div className={clsx(InvoiceDrawerCls.detail_panel_table)}>
<DataTable
columns={columns}
data={entries}
className={'table-constrant'}
/>
</div>
);
}

9
client/src/containers/Drawers/InvoiceDetailDrawer/index.js
View File

@@ -18,9 +18,14 @@ function InvoiceDetailDrawer({
payload: { invoiceId },
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'750px'}>
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '700px', maxWidth: '900px' }}
size={'65%'}
>
<DrawerSuspense>
<InvoiceDetailDrawerContent invoice={invoiceId} />
<InvoiceDetailDrawerContent invoiceId={invoiceId} />
</DrawerSuspense>
</Drawer>
);

43
client/src/containers/Drawers/InvoiceDetailDrawer/utils.js Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import intl from 'react-intl-universal';
export const useInvoiceReadonlyEntriesColumns = () =>
React.useMemo(
() => [
{
Header: intl.get('product_and_service'),
accessor: 'item.name',
width: 150,
className: 'name',
disableSortBy: true,
},
{
Header: intl.get('description'),
accessor: 'description',
className: 'description',
disableSortBy: true,
},
{
Header: intl.get('quantity'),
accessor: 'quantity',
width: 100,
className: 'quantity',
disableSortBy: true,
},
{
Header: intl.get('rate'),
accessor: 'rate',
width: 100,
className: 'rate',
disableSortBy: true,
},
{
Header: intl.get('amount'),
accessor: 'amount',
width: 100,
className: 'amount',
disableSortBy: true,
},
],
[],
);