From 1e5b39457583ab3021569f50db75fb991cc9358b Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Tue, 21 Dec 2021 20:09:32 +0200 Subject: [PATCH] feat: optimize style of reconcile customer/vendor credit table. --- .../ReconcileCreditNoteEntriesTable.js | 68 ++++----- .../ReconcileCreditNoteFormFields.js | 131 +++++++++++------- .../ReconcileCreditNoteDialog/utils.js | 51 ++++++- .../ReconcileVendorCreditEntriesTable.js | 68 ++++----- .../ReconcileVendorCreditFormFields.js | 118 ++++++++++------ .../ReconcileVendorCreditDialog/utils.js | 53 ++++++- .../ReconcileCreditNoteForm.scss | 46 +----- .../ReconcileVendorCreditForm.scss | 49 +------ 8 files changed, 321 insertions(+), 263 deletions(-) diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js index c268c7e00..22d86f362 100644 --- a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js +++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteEntriesTable.js @@ -1,7 +1,9 @@ import React from 'react'; -import intl from 'react-intl-universal'; -import { MoneyFieldCell, DataTableEditable, FormatDateCell } from 'components'; +import styled from 'styled-components'; + +import { DataTableEditable } from 'components'; import { compose, updateTableCell } from 'utils'; +import { useReconcileCreditNoteTableColumns } from './utils'; /** * Reconcile credit note entries table. @@ -11,45 +13,8 @@ export default function ReconcileCreditNoteEntriesTable({ entries, errors, }) { - const columns = React.useMemo( - () => [ - { - Header: intl.get('invoice_date'), - accessor: 'formatted_invoice_date', - Cell: FormatDateCell, - disableSortBy: true, - width: '120', - }, - { - Header: intl.get('invoice_no'), - accessor: 'invoice_no', - disableSortBy: true, - width: '100', - }, - { - Header: intl.get('amount'), - accessor: 'formatted_amount', - disableSortBy: true, - align: 'right', - width: '100', - }, - { - Header: intl.get('reconcile_credit_note.column.remaining_amount'), - accessor: 'formatted_due_amount', - disableSortBy: true, - align: 'right', - width: '150', - }, - { - Header: intl.get('reconcile_credit_note.column.amount_to_credit'), - accessor: 'amount', - Cell: MoneyFieldCell, - disableSortBy: true, - width: '150', - }, - ], - [], - ); + // Retrieve the reconcile credit note table columns. + const columns = useReconcileCreditNoteTableColumns(); // Handle update data. const handleUpdateData = React.useCallback( @@ -63,7 +28,7 @@ export default function ReconcileCreditNoteEntriesTable({ ); return ( - ); } + +export const ReconcileCreditNoteEditableTable = styled(DataTableEditable)` + .table { + max-height: 400px; + overflow: auto; + + .thead .tr .th { + padding-top: 8px; + padding-bottom: 8px; + } + + .tbody { + .tr .td { + padding: 2px 4px; + min-height: 38px; + } + } + } +`; diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js index fa2239b1e..df1b34c51 100644 --- a/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js +++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/ReconcileCreditNoteFormFields.js @@ -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 ( +
+ + + + + {formatted_credits_remaining} + + + + {/*------------ Reconcile credit entries table -----------*/} + + {({ form: { setFieldValue }, field: { value }, meta: { error } }) => ( + { + setFieldValue('entries', newEntries); + }} + /> + )} + + + +
+ ); +} + +/** + * 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 ( -
-
-
- -
-
- {formatted_credits_remaining} -
-
- - {/*------------ Reconcile credit entries table -----------*/} - - {({ - form: { setFieldValue, values }, - field: { value }, - meta: { error, touched }, - }) => ( - { - setFieldValue('entries', newEntries); - }} - /> - )} - -
- - - } - value={formattedAmount(totalAmount, currency_code)} - /> - } - value={formattedAmount(creditsRemaining, currency_code)} - /> - -
-
+ + + + } + value={formattedAmount(totalAmount, currency_code)} + borderStyle={TotalLineBorderStyle.SingleDark} + /> + } + value={formattedAmount(creditsRemaining, currency_code)} + borderStyle={TotalLineBorderStyle.SingleDark} + textStyle={TotalLineTextStyle.Bold} + /> + + ); } + +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; +`; diff --git a/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js b/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js index 4f9b6a8f1..9b9837412 100644 --- a/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js +++ b/src/containers/Dialogs/ReconcileCreditNoteDialog/utils.js @@ -1,8 +1,10 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Callout, Intent, Classes } from '@blueprintjs/core'; +import clsx from 'classnames'; -import { AppToaster, T } from 'components'; +import { CLASSES } from 'common/classes'; +import { MoneyFieldCell, FormatDateCell, AppToaster, T } from 'components'; export const transformErrors = (errors, { setErrors }) => { if (errors.some((e) => e.type === 'INVOICES_HAS_NO_REMAINING_AMOUNT')) { @@ -33,3 +35,50 @@ export function EmptyStatuCallout() { ); } + +/** + * Retrieves reconcile credit note table columns. + * @returns + */ +export const useReconcileCreditNoteTableColumns = () => { + return React.useMemo( + () => [ + { + Header: intl.get('invoice_date'), + accessor: 'formatted_invoice_date', + Cell: FormatDateCell, + disableSortBy: true, + width: '120', + }, + { + Header: intl.get('invoice_no'), + accessor: 'invoice_no', + disableSortBy: true, + width: '100', + }, + { + Header: intl.get('amount'), + accessor: 'formatted_amount', + disableSortBy: true, + align: 'right', + width: '100', + }, + { + Header: intl.get('reconcile_credit_note.column.remaining_amount'), + accessor: 'formatted_due_amount', + disableSortBy: true, + align: 'right', + width: '150', + className: clsx(CLASSES.FONT_BOLD), + }, + { + Header: intl.get('reconcile_credit_note.column.amount_to_credit'), + accessor: 'amount', + Cell: MoneyFieldCell, + disableSortBy: true, + width: '150', + }, + ], + [], + ) +} \ No newline at end of file diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js index ee6e23eb7..07965a5aa 100644 --- a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js +++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditEntriesTable.js @@ -1,52 +1,17 @@ import React from 'react'; -import intl from 'react-intl-universal'; -import { MoneyFieldCell, DataTableEditable, FormatDateCell } from 'components'; +import styled from 'styled-components'; + +import { DataTableEditable } from 'components'; import { compose, updateTableCell } from 'utils'; +import { useReconcileVendorCreditTableColumns } from './utils'; export default function ReconcileVendorCreditEntriesTable({ onUpdateData, entries, errors, }) { - const columns = React.useMemo( - () => [ - { - Header: intl.get('bill_date'), - accessor: 'formatted_bill_date', - Cell: FormatDateCell, - disableSortBy: true, - width: '120', - }, - { - Header: intl.get('reconcile_vendor_credit.column.bill_number'), - accessor: 'bill_number', - disableSortBy: true, - width: '100', - }, - { - Header: intl.get('amount'), - accessor: 'formatted_amount', - disableSortBy: true, - align: 'right', - width: '100', - }, - { - Header: intl.get('reconcile_vendor_credit.column.remaining_amount'), - accessor: 'formatted_due_amount', - disableSortBy: true, - align: 'right', - width: '150', - }, - { - Header: intl.get('reconcile_vendor_credit.column.amount_to_credit'), - accessor: 'amount', - Cell: MoneyFieldCell, - disableSortBy: true, - width: '150', - }, - ], - [], - ); + // Reconcile vendor credit table columns. + const columns = useReconcileVendorCreditTableColumns(); // Handle update data. const handleUpdateData = React.useCallback( @@ -60,7 +25,7 @@ export default function ReconcileVendorCreditEntriesTable({ ); return ( - ); } + +export const ReconcileVendorCreditEditableTable = styled(DataTableEditable)` + .table { + max-height: 400px; + overflow: auto; + + .thead .tr .th { + padding-top: 8px; + padding-bottom: 8px; + } + + .tbody { + .tr .td { + padding: 2px 4px; + min-height: 38px; + } + } + } +`; diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js index 2a3c1d315..16c5d48f8 100644 --- a/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js +++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/ReconcileVendorCreditFormFields.js @@ -2,42 +2,34 @@ import React from 'react'; import { FastField, useFormikContext } from 'formik'; import { Classes } from '@blueprintjs/core'; import { subtract } from 'lodash'; +import styled from 'styled-components'; + import { getEntriesTotal } from 'containers/Entries/utils'; -import { T, TotalLines, TotalLine } from 'components'; +import { + T, + TotalLines, + TotalLine, + TotalLineBorderStyle, + TotalLineTextStyle, +} from 'components'; import ReconcileVendorCreditEntriesTable from './ReconcileVendorCreditEntriesTable'; import { useReconcileVendorCreditContext } from './ReconcileVendorCreditFormProvider'; import { formattedAmount } from 'utils'; export default function ReconcileVendorCreditFormFields() { const { - vendorCredit: { - currency_code, - credits_remaining, - formatted_credits_remaining, - }, + vendorCredit: { formatted_credits_remaining }, } = useReconcileVendorCreditContext(); - const { values } = useFormikContext(); - - // Calculate the total amount of credit entries. - const totalAmount = React.useMemo( - () => getEntriesTotal(values.entries), - [values.entries], - ); - - // Calculate the total amount of credit remaining. - const creditsRemaining = subtract(credits_remaining, totalAmount); - return (
-
-
- -
-
+ + + + {formatted_credits_remaining} -
-
+ + {({ @@ -54,22 +46,68 @@ export default function ReconcileVendorCreditFormFields() { /> )} -
- - - } - value={formattedAmount(totalAmount, currency_code)} - /> - - } - value={formattedAmount(creditsRemaining, currency_code)} - /> - -
+ +
); } + +/** + * Reconcile vendor credit total lines. + * @returns {React.JSX} + */ +function ReconcileVendorCreditTotalLines() { + const { + vendorCredit: { currency_code, credits_remaining }, + } = useReconcileVendorCreditContext(); + + const { values } = useFormikContext(); + + // Calculate the total amount of credit entries. + const totalAmount = React.useMemo( + () => getEntriesTotal(values.entries), + [values.entries], + ); + + // Calculate the total amount of credit remaining. + const creditsRemaining = subtract(credits_remaining, totalAmount); + + return ( + + + + } + value={formattedAmount(totalAmount, currency_code)} + borderStyle={TotalLineBorderStyle.SingleDark} + /> + } + value={formattedAmount(creditsRemaining, currency_code)} + borderStyle={TotalLineBorderStyle.SingleDark} + textStyle={TotalLineTextStyle.Bold} + /> + + + ); +} + +const CreditRemainingRoot = styled.div` + display: flex; + justify-content: flex-end; + padding-bottom: 15px; +`; + +const CreditRemainingBalance = styled.span` + font-weight: 600; + color: #343463; + margin-left: 5px; +`; + +export const ReconcileVendorCreditTotalLinesRoot = styled.div` + margin-top: 15px; +`; +export const ReconcileTotalLines = styled(TotalLines)` + margin-left: auto; +`; diff --git a/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js b/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js index 8439dd634..4b8aeb056 100644 --- a/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js +++ b/src/containers/Dialogs/ReconcileVendorCreditDialog/utils.js @@ -1,6 +1,11 @@ import React from 'react'; import { Callout, Intent, Classes } from '@blueprintjs/core'; -import { AppToaster, T } from 'components'; +import intl from 'react-intl-universal'; +import clsx from 'classnames'; + +import { CLASSES } from 'common/classes'; +import { T } from 'components'; +import { MoneyFieldCell, FormatDateCell } from 'components'; export const transformErrors = (errors, { setErrors }) => {}; @@ -15,3 +20,49 @@ export function EmptyStatuCallout() { ); } + +/** + * Reconcile vendor credit table columns. + */ +export const useReconcileVendorCreditTableColumns = () => { + return React.useMemo( + () => [ + { + Header: intl.get('bill_date'), + accessor: 'formatted_bill_date', + Cell: FormatDateCell, + disableSortBy: true, + width: '120', + }, + { + Header: intl.get('reconcile_vendor_credit.column.bill_number'), + accessor: 'bill_number', + disableSortBy: true, + width: '100', + }, + { + Header: intl.get('amount'), + accessor: 'formatted_amount', + disableSortBy: true, + align: 'right', + width: '100', + }, + { + Header: intl.get('reconcile_vendor_credit.column.remaining_amount'), + accessor: 'formatted_due_amount', + disableSortBy: true, + align: 'right', + width: '150', + className: clsx(CLASSES.FONT_BOLD), + }, + { + Header: intl.get('reconcile_vendor_credit.column.amount_to_credit'), + accessor: 'amount', + Cell: MoneyFieldCell, + disableSortBy: true, + width: '150', + }, + ], + [], + ); +}; diff --git a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss index ad61859e8..0d793aaca 100644 --- a/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss +++ b/src/style/pages/ReconcileCreditNote/ReconcileCreditNoteForm.scss @@ -1,55 +1,13 @@ .dialog--reconcile-credit-form { width: 850px; - .bp3-dialog-body { - .footer { - display: flex; - margin-top: 20px; - - .total_lines { - margin-left: auto; - - &_line { - border-bottom: none; - .title { - font-weight: 600; - } - .amount, - .title { - padding: 8px 0px; - width: 150px; - } - .amount { - text-align: right; - } - } - } - } - } - .bigcapital-datatable { - - } - - .credit-remaining { - display: flex; - justify-content: flex-end; - padding-top: 5px; - padding-bottom: 15px; - &__label { - } - &__balance { - font-weight: 500; - color: #343463; - margin-left: 5px; - } - } - .bp3-callout { font-size: 14px; } + .bp3-dialog-footer { display: flex; justify-content: flex-start; padding-top: 10px; } -} +} \ No newline at end of file diff --git a/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss index 7461bf445..8d8e7239f 100644 --- a/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss +++ b/src/style/pages/ReconcileVendorCredit/ReconcileVendorCreditForm.scss @@ -1,32 +1,6 @@ .dialog--reconcile-vendor-credit-form { width: 850px; - .bp3-dialog-body { - .footer { - display: flex; - margin-top: 40px; - - .total_lines { - margin-left: auto; - - &_line { - border-bottom: none; - .title { - font-weight: 600; - } - .amount, - .title { - padding: 8px 0px; - width: 165px; - } - .amount { - text-align: right; - } - } - } - } - } - .bigcapital-datatable { .table { border: 1px solid #d1dee2; @@ -36,17 +10,13 @@ .tbody-inner { height: auto; scrollbar-width: none; + &::-webkit-scrollbar { display: none; } } - .tbody { - .tr .td { - padding: 0.4rem; - margin-left: -1px; - border-left: 1px solid #ececec; - } + .tbody { .bp3-form-group { margin-bottom: 0; @@ -67,22 +37,9 @@ font-size: 14px; } - .credit-remaining { - display: flex; - justify-content: flex-end; - padding-top: 5px; - padding-bottom: 15px; - &__label { - } - &__balance { - font-weight: 500; - color: #343463; - margin-left: 5px; - } - } .bp3-dialog-footer { display: flex; justify-content: flex-start; padding-top: 10px; } -} +} \ No newline at end of file