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: add style of vendor credit.

Browse Source
This commit is contained in:
elforjani13
2021-12-20 16:11:10 +02:00
parent dbe067a27c
commit 828c33bee1
8 changed files with 182 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/containers/Drawers/VendorCreditDetailDrawer/JournalEntriesTransactions/JournalEntriesTransactionsTable.js
View File

@@ -5,10 +5,14 @@ import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerP
import { useTransactionsByReference } from 'hooks/query'; import { useTransactionsByReference } from 'hooks/query';
import { useJournalEntriesTransactionsColumns } from './components'; import { useJournalEntriesTransactionsColumns } from './components';
import JournalEntriesTable, {
AmountDisplayedBaseCurrencyMessage,
} from '../../../JournalEntriesTable/JournalEntriesTable';
/** /**
* Journal entries vendor credit transactions table. * Journal entries vendor credit transactions table.
*/ */
export default function JournalEntriesTransactionsTable() { export function VendorCreditGLEntriesTable() {
const { vendorCreditId } = useVendorCreditDetailDrawerContext(); const { vendorCreditId } = useVendorCreditDetailDrawerContext();
const columns = useJournalEntriesTransactionsColumns(); const columns = useJournalEntriesTransactionsColumns();
@@ -27,11 +31,11 @@ export default function JournalEntriesTransactionsTable() {
return ( return (
<Card> <Card>
<DataTable <AmountDisplayedBaseCurrencyMessage />
<JournalEntriesTable
columns={columns} columns={columns}
data={transactions} data={transactions}
loading={isTransactionLoading} loading={isTransactionLoading}
className={'datatable--journal-entries'}
/> />
</Card> </Card>
); );

6
src/containers/Drawers/VendorCreditDetailDrawer/ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable.js
View File

@@ -1,9 +1,9 @@
import React from 'react'; import React from 'react';
import { DataTable, Card } from 'components'; import { DataTable, Card } from 'components';
import '../../../../style/pages/RefundCreditNote/List.scss'; import { TableStyle } from 'common';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider'; import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
import { import {
useReconcileVendorCreditTransactionsTableColumns, useReconcileVendorCreditTransactionsTableColumns,
@@ -33,10 +33,10 @@ function ReconcileVendorCreditTransactionsTable({
columns={columns} columns={columns}
data={reconcileVendorCredits} data={reconcileVendorCredits}
ContextMenu={ActionsMenu} ContextMenu={ActionsMenu}
styleName={TableStyle.Constrant}
payload={{ payload={{
onDelete: handleDeleteReconcileVendorCredit, onDelete: handleDeleteReconcileVendorCredit,
}} }}
className={'datatable--refund-transactions'}
/> />
</Card> </Card>
); );

4
src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { DataTable, Card } from 'components'; import { DataTable, Card } from 'components';
import 'style/pages/RefundVendorCredit/List.scss'; import { TableStyle } from 'common';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider'; import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
@@ -34,10 +34,10 @@ function RefundVendorCreditTransactionsTable({
columns={columns} columns={columns}
data={refundVendorCredit} data={refundVendorCredit}
ContextMenu={ActionsMenu} ContextMenu={ActionsMenu}
styleName={TableStyle.Constrant}
payload={{ payload={{
onDelete: handleDeleteRefundVendorCredit, onDelete: handleDeleteRefundVendorCredit,
}} }}
className={'datatable--refund-transactions'}
/> />
</Card> </Card>
); );

71
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
View File

@@ -1,44 +1,57 @@
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 { DrawerMainTabs } from 'components'; import styled from 'styled-components';
import { DrawerMainTabs } from 'components';
import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
import VendorCreditDetailPanel from './VendorCreditDetailPanel'; import VendorCreditDetailPanel from './VendorCreditDetailPanel';
import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable'; import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable'; import ReconcileVendorCreditTransactionsTable from './ReconcileVendorCreditTransactions/ReconcileVendorCreditTransactionsTable';
import JournalEntriesTransactionsTable from './JournalEntriesTransactions/JournalEntriesTransactionsTable'; import { VendorCreditGLEntriesTable } from './JournalEntriesTransactions/JournalEntriesTransactionsTable';
import clsx from 'classnames';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
/** /**
* Vendor credit view detail. * Vendor credit view detail.
*
*/ */
export default function VendorCreditDetail() { export default function VendorCreditDetail() {
return ( return (
<div className={clsx(VendorCreditDetailCls.root)}> <VendorCreditRoot>
<DrawerMainTabs renderActiveTabPanelOnly={true}> <VendorCreditDetailActionsBar />
<Tab <VendorCreditDetailsTabs />
title={intl.get('details')} </VendorCreditRoot>
id={'details'}
panel={<VendorCreditDetailPanel />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<JournalEntriesTransactionsTable />}
/>
<Tab
title={intl.get('vendor_credit.drawer.label_refund_transactions')}
id={'refund_transactions'}
panel={<RefundVendorCreditTransactionsTable />}
/>
<Tab
title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
id={'reconcile_transactions'}
panel={<ReconcileVendorCreditTransactionsTable />}
/>
</DrawerMainTabs>
</div>
); );
} }
/**
* Vendor Credit details tabs.
* @returns {React.JSX}
*/
function VendorCreditDetailsTabs() {
return (
<DrawerMainTabs renderActiveTabPanelOnly={true}>
<Tab
title={intl.get('details')}
id={'details'}
panel={<VendorCreditDetailPanel />}
/>
<Tab
title={intl.get('journal_entries')}
id={'journal_entries'}
panel={<VendorCreditGLEntriesTable />}
/>
<Tab
title={intl.get('vendor_credit.drawer.label_refund_transactions')}
id={'refund_transactions'}
panel={<RefundVendorCreditTransactionsTable />}
/>
<Tab
title={intl.get('vendor_credit.drawer.label_bills_reconciled')}
id={'reconcile_transactions'}
panel={<ReconcileVendorCreditTransactionsTable />}
/>
</DrawerMainTabs>
);
}
const VendorCreditRoot = styled.div``;

122
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js
View File

@@ -1,12 +1,21 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { defaultTo } from 'lodash'; import { defaultTo } from 'lodash';
import clsx from 'classnames'; import styled from 'styled-components';
import { FormatDate, T, DetailsMenu, DetailItem } from 'components'; import {
FormatDate,
T,
Row,
Col,
DetailsMenu,
DetailItem,
ButtonLink,
CommercialDocHeader,
CommercialDocTopHeader,
} from 'components';
import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider'; import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
import { VendorCreditDetailsStatus } from './utils';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
/** /**
* Vendor credit detail drawer header. * Vendor credit detail drawer header.
@@ -14,47 +23,72 @@ import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCredi
export default function VendorCreditDetailHeader() { export default function VendorCreditDetailHeader() {
const { vendorCredit } = useVendorCreditDetailDrawerContext(); const { vendorCredit } = useVendorCreditDetailDrawerContext();
return ( return (
<div className={clsx(VendorCreditDetailCls.detail_panel_header)}> <CommercialDocHeader>
<DetailsMenu> <CommercialDocTopHeader>
<DetailItem label={intl.get('amount')}> <DetailsMenu>
<span class="big-number">{vendorCredit.formatted_amount}</span> <AmountItem label={intl.get('amount')}>
</DetailItem> <span class="big-number">{vendorCredit.formatted_amount}</span>
<DetailItem </AmountItem>
label={intl.get('vendor_credit.drawer.label_vendor_credit_no')} <StatusItem>
children={defaultTo(vendorCredit.vendor_credit_number, '-')} <VendorCreditDetailsStatus vendorCredit={vendorCredit} />
/> </StatusItem>
<DetailItem </DetailsMenu>
label={intl.get('vendor_name')} </CommercialDocTopHeader>
children={vendorCredit.vendor?.display_name} <Row>
/> <Col xs={6}>
<DetailItem <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
label={intl.get('vendor_credit.drawer.label_vendor_credit_date')} <DetailItem
children={ label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
<FormatDate value={vendorCredit.formatted_vendor_credit_date} /> >
} {defaultTo(vendorCredit.vendor_credit_number, '-')}
/> </DetailItem>
<DetailItem
label={intl.get('vendor_credit.drawer.label_credits_remaining')}
children={vendorCredit.formatted_credits_remaining}
/>
</DetailsMenu>
<DetailsMenu direction={'horizantal'} minLabelSize={'140px'}> <DetailItem label={intl.get('vendor_name')}>
<DetailItem <ButtonLink>{vendorCredit.vendor?.display_name}</ButtonLink>
label={intl.get('reference')} </DetailItem>
children={vendorCredit.reference_no}
/>
<DetailItem <DetailItem
label={intl.get('note')} label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
children={defaultTo(vendorCredit.note, '-')} >
/> <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
</DetailItem>
<DetailItem </DetailsMenu>
label={<T id={'vendor_credit.drawer.label_created_at'} />} </Col>
children={<FormatDate value={vendorCredit.created_at} />} <Col xs={6}>
/> <DetailsMenu
</DetailsMenu> textAlign={'right'}
</div> direction={'horizantal'}
minLabelSize={'180px'}
>
<DetailItem
label={intl.get('vendor_credit.drawer.label_credits_remaining')}
>
<strong>{vendorCredit.formatted_credits_remaining}</strong>
</DetailItem>
<DetailItem
label={intl.get('reference')}
children={defaultTo(vendorCredit.reference_no, '-')}
/>
<DetailItem
label={intl.get('note')}
children={defaultTo(vendorCredit.note, '-')}
/>
<DetailItem
label={<T id={'vendor_credit.drawer.label_created_at'} />}
children={<FormatDate value={vendorCredit.created_at} />}
/>
</DetailsMenu>
</Col>
</Row>
</CommercialDocHeader>
); );
} }
const StatusItem = styled(DetailItem)`
width: 50%;
text-align: right;
`;
const AmountItem = styled(DetailItem)`
width: 50%;
`;

19
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js
View File

@@ -1,24 +1,17 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { Card } from 'components'; import { CommercialDocBox } from 'components';
import VendorCreditDetailActionsBar from './VendorCreditDetailActionsBar';
import VendorCreditDetailHeader from './VendorCreditDetailHeader'; import VendorCreditDetailHeader from './VendorCreditDetailHeader';
import VendorCreditDetailTable from './VendorCreditDetailTable'; import VendorCreditDetailTable from './VendorCreditDetailTable';
import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter'; import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
export default function VendorCreditDetailPanel() { export default function VendorCreditDetailPanel() {
return ( return (
<div className={clsx(VendorCreditDetailCls.detail_panel)}> <CommercialDocBox>
<VendorCreditDetailActionsBar /> <VendorCreditDetailHeader />
<Card> <VendorCreditDetailTable />
<VendorCreditDetailHeader /> {/* <VendorCreditDetailDrawerFooter /> */}
<VendorCreditDetailTable /> </CommercialDocBox>
<VendorCreditDetailDrawerFooter />
</Card>
</div>
); );
} }

19
src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailTable.js
View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import clsx from 'classnames';
import { DataTable } from 'components'; import { CommercialDocEntriesTable } from 'components';
import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider'; import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
import { useVendorCreditReadonlyEntriesTableColumns } from './utils'; import { useVendorCreditReadonlyEntriesTableColumns } from './utils';
import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss'; import { TableStyle } from '../../../common';
/** /**
* Vendor Credit detail table. * Vendor Credit detail table.
@@ -20,12 +19,10 @@ export default function VendorCreditDetailTable() {
const columns = useVendorCreditReadonlyEntriesTableColumns(); const columns = useVendorCreditReadonlyEntriesTableColumns();
return ( return (
<div className={clsx(VendorCreditDetailCls.detail_panel_table)}> <CommercialDocEntriesTable
<DataTable columns={columns}
columns={columns} data={entries}
data={entries} styleName={TableStyle.Constrant}
className={'table-constrant'} />
/>
</div>
); );
} }

37
src/containers/Drawers/VendorCreditDetailDrawer/utils.js
View File

@@ -7,11 +7,14 @@ import {
Position, Position,
MenuItem, MenuItem,
Menu, Menu,
Tag,
Intent,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { import {
FormatNumberCell,
Icon, Icon,
FormattedMessage as T, FormattedMessage as T,
FormatNumberCell,
Choose,
} from '../../../components'; } from '../../../components';
/** /**
@@ -61,6 +64,10 @@ export const useVendorCreditReadonlyEntriesTableColumns = () =>
[], [],
); );
/**
* Vendor note more actions menu.
* @returns {React.JSX}
*/
export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => { export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
return ( return (
<Popover <Popover
@@ -83,3 +90,31 @@ export const VendorCreditMenuItem = ({ payload: { onReconcile } }) => {
</Popover> </Popover>
); );
}; };
/**
* Vendor Credit details status.
* @returns {React.JSX}
*/
export function VendorCreditDetailsStatus({ vendorCredit }) {
return (
<Choose>
<Choose.When condition={vendorCredit.is_open}>
<Tag intent={Intent.WARNING} round={true}>
<T id={'open'} />
</Tag>
</Choose.When>
<Choose.When condition={vendorCredit.is_closed}>
<Tag intent={Intent.SUCCESS} round={true}>
<T id={'closed'} />
</Tag>
</Choose.When>
<Choose.When condition={vendorCredit.is_draft}>
<Tag intent={Intent.NONE} round={true} minimal={true}>
<T id={'draft'} />
</Tag>
</Choose.When>
</Choose>
);
}