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: optimize style of reconcile customer/vendor credit table.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-21 20:09:32 +02:00
parent dd7b44eb29
commit 1e5b394575
8 changed files with 321 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js
View File

@@ -1,7 +1,15 @@
import React from 'react';
import { FastField, useFormikContext } from 'formik';
import { Classes } from '@blueprintjs/core';
import { T, TotalLines, TotalLine } from 'components';
import styled from 'styled-components';
import {
T,
TotalLines,
TotalLine,
TotalLineBorderStyle,
TotalLineTextStyle,
} from 'components';
import { subtract } from 'lodash';
import { getEntriesTotal } from 'containers/Entries/utils';
import ReconcileCreditNoteEntriesTable from './ReconcileCreditNoteEntriesTable';
@@ -13,11 +21,44 @@ import { formattedAmount } from 'utils';
*/
export default function ReconcileCreditNoteFormFields() {
const {
creditNote: {
formatted_credits_remaining,
credits_remaining,
currency_code,
},
creditNote: { formatted_credits_remaining },
} = useReconcileCreditNoteContext();
return (
<div className={Classes.DIALOG_BODY}>
<CreditRemainingRoot>
<T id={'reconcile_credit_note.dialog.credits_balance'} />
<CreditRemainingBalance>
{formatted_credits_remaining}
</CreditRemainingBalance>
</CreditRemainingRoot>
{/*------------ Reconcile credit entries table -----------*/}
<FastField name={'entries'}>
{({ form: { setFieldValue }, field: { value }, meta: { error } }) => (
<ReconcileCreditNoteEntriesTable
entries={value}
errors={error}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
<ReconcileCreditNoteTotalLines />
</div>
);
}
/**
* Reconcile credit note total lines.
* @returns {React.JSX}
*/
function ReconcileCreditNoteTotalLines() {
const {
creditNote: { credits_remaining, currency_code },
} = useReconcileCreditNoteContext();
const { values } = useFormikContext();
@@ -32,46 +73,42 @@ export default function ReconcileCreditNoteFormFields() {
const creditsRemaining = subtract(credits_remaining, totalAmount);
return (
<div className={Classes.DIALOG_BODY}>
<div className="credit-remaining">
<div className="credit-remaining__label">
<T id={'reconcile_credit_note.dialog.credits_balance'} />
</div>
<div className="credit-remaining__balance">
{formatted_credits_remaining}
</div>
</div>
{/*------------ Reconcile credit entries table -----------*/}
<FastField name={'entries'}>
{({
form: { setFieldValue, values },
field: { value },
meta: { error, touched },
}) => (
<ReconcileCreditNoteEntriesTable
entries={value}
errors={error}
onUpdateData={(newEntries) => {
setFieldValue('entries', newEntries);
}}
/>
)}
</FastField>
<div className="footer">
<TotalLines className="total_lines">
<TotalLine
title={
<T id={'reconcile_credit_note.dialog.total_amount_to_credit'} />
}
value={formattedAmount(totalAmount, currency_code)}
/>
<TotalLine
title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
value={formattedAmount(creditsRemaining, currency_code)}
/>
</TotalLines>
</div>
</div>
<ReconcileCreditNoteTotalLinesRoot>
<ReconcileTotalLines labelColWidth={'180px'} amountColWidth={'180px'}>
<TotalLine
title={
<T id={'reconcile_credit_note.dialog.total_amount_to_credit'} />
}
value={formattedAmount(totalAmount, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
/>
<TotalLine
title={<T id={'reconcile_credit_note.dialog.remaining_credits'} />}
value={formattedAmount(creditsRemaining, currency_code)}
borderStyle={TotalLineBorderStyle.SingleDark}
textStyle={TotalLineTextStyle.Bold}
/>
</ReconcileTotalLines>
</ReconcileCreditNoteTotalLinesRoot>
);
}
export const CreditRemainingRoot = styled.div`
display: flex;
justify-content: flex-end;
padding-bottom: 15px;
`;
export const CreditRemainingBalance = styled.span`
font-weight: 600;
color: #343463;
margin-left: 5px;
`;
export const ReconcileCreditNoteTotalLinesRoot = styled.div`
margin-top: 15px;
`;
export const ReconcileTotalLines = styled(TotalLines)`
margin-left: auto;
`;