From 91a38b34ccafe4592a37f5863931b25d6b0122a8 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Fri, 15 Apr 2022 06:24:24 +0200 Subject: [PATCH] feat: add readonly entriese details as oneline with tooltip for more details. --- src/components/CommercialDoc/index.js | 2 +- .../DataTableCells/TextOverviewTooltipCell.js | 27 +++++ src/components/DataTableCells/index.js | 2 + src/components/index.js | 3 +- src/config/interfaces.tsx | 45 ++++++++ src/containers/Drawers/BillDrawer/utils.js | 34 +++++- .../Drawers/CreditNoteDetailDrawer/utils.js | 35 +++++- .../Drawers/EstimateDetailDrawer/utils.js | 109 +++++++++++------- src/containers/Drawers/ExpenseDrawer/utils.js | 26 ++++- .../InventoryAdjustmentDetailDrawer/utils.js | 35 +++++- .../Drawers/InvoiceDetailDrawer/utils.js | 38 ++++-- .../ManualJournalDrawerTable.js | 3 + .../Drawers/ManualJournalDrawer/utils.js | 69 +++++------ .../Drawers/PaymentMadeDetailDrawer/utils.js | 100 +++++++++------- .../PaymentReceiveDetailDrawer/utils.js | 28 ++++- .../Drawers/ReceiptDetailDrawer/utils.js | 107 ++++++++++------- .../Drawers/VendorCreditDetailDrawer/utils.js | 33 +++++- .../WarehouseTransferDetailDrawer/utils.js | 27 ++++- .../VendorsBalanceSummaryProvider.js | 1 - src/style/App.scss | 5 + 20 files changed, 527 insertions(+), 202 deletions(-) create mode 100644 src/components/DataTableCells/TextOverviewTooltipCell.js create mode 100644 src/config/interfaces.tsx diff --git a/src/components/CommercialDoc/index.js b/src/components/CommercialDoc/index.js index d1480c3f5..5a6e9b13f 100644 --- a/src/components/CommercialDoc/index.js +++ b/src/components/CommercialDoc/index.js @@ -11,7 +11,7 @@ export const CommercialDocHeader = styled.div` `; export const CommercialDocTopHeader = styled.div` - margin-bottom: 25px; + margin-bottom: 30px; `; export const CommercialDocEntriesTable = styled(DataTable)` diff --git a/src/components/DataTableCells/TextOverviewTooltipCell.js b/src/components/DataTableCells/TextOverviewTooltipCell.js new file mode 100644 index 000000000..e2028d797 --- /dev/null +++ b/src/components/DataTableCells/TextOverviewTooltipCell.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Tooltip, Position } from '@blueprintjs/core'; + +/** + * Text overview tooltip cell. + * @returns {JSX.Element} + */ +export function TextOverviewTooltipCell({ cell: { value } }) { + const SUBMENU_POPOVER_MODIFIERS = { + flip: { boundariesElement: 'viewport', padding: 20 }, + offset: { offset: '0, 10' }, + preventOverflow: { boundariesElement: 'viewport', padding: 40 }, + }; + + return ( + + {value} + + ); +} diff --git a/src/components/DataTableCells/index.js b/src/components/DataTableCells/index.js index 98d4aec24..84ef9d344 100644 --- a/src/components/DataTableCells/index.js +++ b/src/components/DataTableCells/index.js @@ -10,6 +10,7 @@ import CheckBoxFieldCell from './CheckBoxFieldCell'; import SwitchFieldCell from './SwitchFieldCell'; import TextAreaCell from './TextAreaCell'; import BranchesListFieldCell from './BranchesListFieldCell'; +import { TextOverviewTooltipCell } from './TextOverviewTooltipCell'; export { AccountsListFieldCell, @@ -25,4 +26,5 @@ export { SwitchFieldCell, TextAreaCell, BranchesListFieldCell, + TextOverviewTooltipCell, }; diff --git a/src/components/index.js b/src/components/index.js index c91a4f1a1..78a22851d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -49,7 +49,6 @@ import DrawerHeaderContent from './Drawer/DrawerHeaderContent'; import Postbox from './Postbox'; import AccountsSuggestField from './AccountsSuggestField'; import MaterialProgressBar from './MaterialProgressBar'; -import { MoneyFieldCell } from './DataTableCells'; import AvaterCell from './AvaterCell'; import { ItemsMultiSelect } from './Items'; @@ -105,6 +104,7 @@ export * from './Currencies'; export * from './FormTopbar' export * from './Paper'; export * from './Accounts' +export * from './DataTableCells'; const Hint = FieldHint; @@ -167,7 +167,6 @@ export { Postbox, AccountsSuggestField, MaterialProgressBar, - MoneyFieldCell, ItemsMultiSelect, AvaterCell, MoreMenuItems, diff --git a/src/config/interfaces.tsx b/src/config/interfaces.tsx new file mode 100644 index 000000000..db265d6f4 --- /dev/null +++ b/src/config/interfaces.tsx @@ -0,0 +1,45 @@ +export enum ISidebarMenuItemType { + Label = 'label', + Link = 'link', + Group = 'group', + Overlay = 'overlay' +} + +export interface ISidebarMenuItemOverlay extends ISidebarMenuItemCommon { + type: ISidebarMenuItemType.Overlay; +} + +export interface ISidebarMenuItemLink extends ISidebarMenuItemCommon { + text: string | JSX.Element; + href: string; + type: ISidebarMenuItemType.Link; + matchExact?: boolean; +} + +export interface ISidebarMenuItemLabel extends ISidebarMenuItemCommon { + text?: string; + type: ISidebarMenuItemType.Label; +} + +export interface ISidebarMenuItemGroup extends ISidebarMenuItemCommon { + type: ISidebarMenuItemType.Group; +} + +export interface ISidebarMenuItemPermission { + subject: string; + ability: string; +} + +export interface ISidebarMenuItemCommon { + ability?: ISidebarMenuItemPermission | ISidebarMenuItemPermission[]; + feature?: string; + disabled?: boolean; + children?: ISidebarMenuItem[]; + onlySubscriptionExpired?: boolean; +} + +export type ISidebarMenuItem = + | ISidebarMenuItemLink + | ISidebarMenuItemLabel + | ISidebarMenuItemGroup + | ISidebarMenuItemOverlay; diff --git a/src/containers/Drawers/BillDrawer/utils.js b/src/containers/Drawers/BillDrawer/utils.js index 2b5871332..641b82e34 100644 --- a/src/containers/Drawers/BillDrawer/utils.js +++ b/src/containers/Drawers/BillDrawer/utils.js @@ -13,57 +13,81 @@ import { } from '@blueprintjs/core'; import { FormatNumberCell, + TextOverviewTooltipCell, FormattedMessage as T, Choose, Icon, } from '../../../components'; +import { getColumnWidth } from 'utils'; +import { useBillDrawerContext } from './BillDrawerProvider'; /** * Retrieve bill readonly details entries table columns. */ -export const useBillReadonlyEntriesTableColumns = () => - React.useMemo( +export const useBillReadonlyEntriesTableColumns = () => { + const { + bill: { entries }, + } = useBillDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('product_and_service'), accessor: 'item.name', + Cell: TextOverviewTooltipCell, width: 150, className: 'item', disableSortBy: true, + textOverview: true, }, { Header: intl.get('description'), accessor: 'description', + Cell: TextOverviewTooltipCell, className: 'description', disableSortBy: true, + textOverview: true, }, { Header: intl.get('quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('rate'), accessor: 'rate', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, ], [], ); +}; /** * Bill details status. diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js index 9b35a08d8..18bcf9005 100644 --- a/src/containers/Drawers/CreditNoteDetailDrawer/utils.js +++ b/src/containers/Drawers/CreditNoteDetailDrawer/utils.js @@ -10,56 +10,81 @@ import { Tag, Intent, } from '@blueprintjs/core'; +import { getColumnWidth } from 'utils'; import { Icon, FormattedMessage as T, + TextOverviewTooltipCell, FormatNumberCell, Choose, } from '../../../components'; +import { useCreditNoteDetailDrawerContext } from './CreditNoteDetailDrawerProvider'; -export const useCreditNoteReadOnlyEntriesColumns = () => - React.useMemo( +export const useCreditNoteReadOnlyEntriesColumns = () => { + // credit note details drawer context. + const { + creditNote: { entries }, + } = useCreditNoteDetailDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('product_and_service'), accessor: 'item.name', + Cell: TextOverviewTooltipCell, width: 150, className: 'name', disableSortBy: true, + textOverview: true, }, { Header: intl.get('description'), accessor: 'description', + Cell: TextOverviewTooltipCell, className: 'description', disableSortBy: true, + textOverview: true, }, { Header: intl.get('quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('rate'), accessor: 'rate', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, ], [], ); +}; /** * Credit note more actions mneu. diff --git a/src/containers/Drawers/EstimateDetailDrawer/utils.js b/src/containers/Drawers/EstimateDetailDrawer/utils.js index 830c256d6..95ed29fe3 100644 --- a/src/containers/Drawers/EstimateDetailDrawer/utils.js +++ b/src/containers/Drawers/EstimateDetailDrawer/utils.js @@ -1,47 +1,74 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { FormatNumberCell } from '../../../components'; +import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components'; +import { getColumnWidth } from 'utils'; +import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider'; /** * Retrieve table columns of estimate readonly entries details. */ -export const useEstimateReadonlyEntriesColumns = () => - 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', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true, - }, - { - Header: intl.get('rate'), - accessor: 'rate', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true, - }, - { - Header: intl.get('amount'), - accessor: 'amount', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true, - }, - ], []); +export const useEstimateReadonlyEntriesColumns = () => { + // estimate details drawer context. + const { + estimate: { entries }, + } = useEstimateDetailDrawerContext(); + + return React.useMemo( + () => [ + { + Header: intl.get('product_and_service'), + accessor: 'item.name', + Cell: TextOverviewTooltipCell, + width: 150, + className: 'name', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('description'), + accessor: 'description', + Cell: TextOverviewTooltipCell, + className: 'description', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('quantity'), + accessor: 'quantity', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('rate'), + accessor: 'rate', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('amount'), + accessor: 'amount', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/ExpenseDrawer/utils.js b/src/containers/Drawers/ExpenseDrawer/utils.js index b1c96c295..97ab017ad 100644 --- a/src/containers/Drawers/ExpenseDrawer/utils.js +++ b/src/containers/Drawers/ExpenseDrawer/utils.js @@ -1,33 +1,46 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { FormatNumberCell } from '../../../components'; +import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components'; +import { useExpenseDrawerContext } from './ExpenseDrawerProvider'; +import { getColumnWidth } from 'utils'; /** * Retrieve expense readonly details entries table columns. */ -export const useExpenseReadEntriesColumns = () => - React.useMemo( +export const useExpenseReadEntriesColumns = () => { + // Expense drawer context. + const { + expense: { categories }, + } = useExpenseDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('expense_account'), accessor: 'expense_account.name', + Cell: TextOverviewTooltipCell, width: 110, disableSortBy: true, + textOverview: true, className: 'account', }, { Header: intl.get('description'), accessor: 'description', - width: 110, - disableSortBy: true, + Cell: TextOverviewTooltipCell, className: 'description', + disableSortBy: true, + textOverview: true, }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(categories, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), disableSortBy: true, className: 'amount', align: 'right', @@ -35,3 +48,4 @@ export const useExpenseReadEntriesColumns = () => ], [], ); +}; diff --git a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js index 56bd7501a..0d7a7fde6 100644 --- a/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js +++ b/src/containers/Drawers/InventoryAdjustmentDetailDrawer/utils.js @@ -1,37 +1,60 @@ import React from 'react'; import intl from 'react-intl-universal'; +import { getColumnWidth } from 'utils'; +import { TextOverviewTooltipCell } from 'components'; +import { useInventoryAdjustmentDrawerContext } from './InventoryAdjustmentDrawerProvider'; -export const useInventoryAdjustmentEntriesColumns = () => - React.useMemo( +export const useInventoryAdjustmentEntriesColumns = () => { + // Inventory adjustment details drawer context. + const { + inventoryAdjustment: { entries }, + } = useInventoryAdjustmentDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('inventory_adjustment.column.product'), accessor: 'item.name', - width: 150, + Cell: TextOverviewTooltipCell, + width: 100, className: 'name', disableSortBy: true, + textOverview: true, }, { Header: intl.get('quantity'), accessor: 'quantity', - width: 100, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('cost'), accessor: 'cost', - width: 100, + width: getColumnWidth(entries, 'cost', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('value'), accessor: 'value', - width: 100, + width: getColumnWidth(entries, 'value', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, ], [], ); +}; diff --git a/src/containers/Drawers/InvoiceDetailDrawer/utils.js b/src/containers/Drawers/InvoiceDetailDrawer/utils.js index fcb35f3a2..6c7bcf65d 100644 --- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js +++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js @@ -11,12 +11,14 @@ import { Intent, Tag, } from '@blueprintjs/core'; +import { getColumnWidth } from 'utils'; import { FormatNumberCell, Icon, FormattedMessage as T, Choose, Can, + TextOverviewTooltipCell, } from 'components'; import { SaleInvoiceAction, @@ -27,49 +29,69 @@ import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider'; /** * Retrieve invoice readonly details table columns. */ -export const useInvoiceReadonlyEntriesColumns = () => - React.useMemo( +export const useInvoiceReadonlyEntriesColumns = () => { + // Invoice details drawer context. + const { + invoice: { entries }, + } = useInvoiceDetailDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('product_and_service'), accessor: 'item.name', - width: 150, - className: 'name', + Cell: TextOverviewTooltipCell, disableSortBy: true, + textOverview: true, + width: 150, }, { Header: intl.get('description'), accessor: 'description', - className: 'description', + Cell: TextOverviewTooltipCell, disableSortBy: true, + textOverview: true, }, { Header: intl.get('quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), }, { Header: intl.get('rate'), accessor: 'rate', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, align: 'right', disableSortBy: true, + textOverview: true, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), }, ], [], ); +}; /** * Invoice details more actions menu. diff --git a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js index 19bada867..924a4ce81 100644 --- a/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js +++ b/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js @@ -10,7 +10,10 @@ import { TableStyle } from '../../../common'; * Manual journal drawer table. */ export default function ManualJournalDrawerTable() { + // Retrieves the readonly manual journal entries columns. const columns = useManualJournalEntriesColumns(); + + // Manual journal drawer context. const { manualJournal } = useManualJournalDrawerContext(); return ( diff --git a/src/containers/Drawers/ManualJournalDrawer/utils.js b/src/containers/Drawers/ManualJournalDrawer/utils.js index 31e38ccf0..9a5b1e338 100644 --- a/src/containers/Drawers/ManualJournalDrawer/utils.js +++ b/src/containers/Drawers/ManualJournalDrawer/utils.js @@ -1,28 +1,17 @@ import intl from 'react-intl-universal'; import React from 'react'; -import { Tag, Intent, Classes, Tooltip, Position } from '@blueprintjs/core'; +import { Tag, Intent } from '@blueprintjs/core'; -import { T, Choose, FormatNumberCell, If, Icon } from '../../../components'; +import { + T, + Choose, + FormatNumberCell, + TextOverviewTooltipCell, +} from '../../../components'; import { Features } from 'common'; +import { getColumnWidth } from 'utils'; import { useFeatureCan } from 'hooks/state'; - -/** - * Note column accessor. - */ -export function NoteAccessor(row) { - return ( - - - - - - ); -} +import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider'; /** * Publish column accessor. @@ -50,37 +39,45 @@ export function ManualJournalDetailsStatus({ manualJournal }) { */ export const useManualJournalEntriesColumns = () => { const { featureCan } = useFeatureCan(); + + // manual journal details drawer context. + const { + manualJournal: { entries }, + } = useManualJournalDrawerContext(); + return React.useMemo( () => [ { Header: intl.get('account_name'), + Cell: TextOverviewTooltipCell, accessor: 'account.name', width: 130, disableSortBy: true, - className: 'account', + textOverview: true, }, { Header: intl.get('contact'), accessor: 'contact.display_name', - width: 130, + Cell: TextOverviewTooltipCell, + width: 100, disableSortBy: true, - className: 'contact', + textOverview: true, }, { Header: intl.get('note'), - accessor: NoteAccessor, - width: 80, + accessor: 'note', + Cell: TextOverviewTooltipCell, disableSortBy: true, - className: 'note', + textOverview: true, + width: 100, }, ...(featureCan(Features.Branches) ? [ { Header: intl.get('branch'), - width: 130, + width: 100, accessor: 'branch.name', disableSortBy: true, - className: 'branch', }, ] : []), @@ -88,25 +85,31 @@ export const useManualJournalEntriesColumns = () => { Header: intl.get('credit'), accessor: 'credit', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'credit', { + minWidth: 60, + magicSpacing: 5, + }), disableResizable: true, disableSortBy: true, + textOverview: true, formatNumber: { noZero: true }, - className: 'credit', align: 'right', }, { Header: intl.get('debit'), accessor: 'debit', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'debit', { + minWidth: 60, + magicSpacing: 5, + }), disableResizable: true, + textOverview: true, disableSortBy: true, formatNumber: { noZero: true }, - className: 'debit', align: 'right', }, ], - [featureCan], + [], ); }; diff --git a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js b/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js index 4698f1ead..5fab85060 100644 --- a/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js +++ b/src/containers/Drawers/PaymentMadeDetailDrawer/utils.js @@ -3,43 +3,65 @@ import intl from 'react-intl-universal'; import moment from 'moment'; import { FormatNumberCell } from '../../../components'; +import { getColumnWidth } from 'utils'; +import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider'; -export const usePaymentMadeEntriesColumns = () => - React.useMemo(() => [ - { - Header: intl.get('date'), - accessor: (row) => moment(row.date).format('YYYY MMM DD'), - width: 100, - disableSortBy: true, - className: 'date', - }, - { - Header: intl.get('bill_number'), - accessor: 'bill_no', - width: 150, - disableSortBy: true, - className: 'bill_number', - }, - { - Header: intl.get('bill_amount'), - accessor: 'bill.amount', - Cell: FormatNumberCell, - align: 'right', - }, - { - Header: intl.get('due_amount'), - accessor: 'bill.due_amount', - Cell: FormatNumberCell, - width: 100, - disableSortBy: true, - align: 'right', - }, - { - Header: intl.get('payment_amount'), - accessor: 'payment_amount', - Cell: FormatNumberCell, - width: 100, - disableSortBy: true, - align: 'right', - }, - ], []); +export const usePaymentMadeEntriesColumns = () => { + // Payment made details context. + const { + paymentMade: { entries }, + } = usePaymentMadeDetailContext(); + + return React.useMemo( + () => [ + { + Header: intl.get('date'), + accessor: (row) => moment(row.date).format('YYYY MMM DD'), + width: 100, + disableSortBy: true, + className: 'date', + }, + { + Header: intl.get('bill_number'), + accessor: 'bill_no', + width: 150, + disableSortBy: true, + className: 'bill_number', + }, + { + Header: intl.get('bill_amount'), + accessor: 'bill.amount', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'bill.amount', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + }, + { + Header: intl.get('due_amount'), + accessor: 'bill.due_amount', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'bill.due_amount', { + minWidth: 60, + magicSpacing: 5, + }), + disableSortBy: true, + align: 'right', + }, + { + Header: intl.get('payment_amount'), + accessor: 'payment_amount', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'payment_amount', { + minWidth: 60, + magicSpacing: 5, + }), + disableSortBy: true, + textOverview: true, + align: 'right', + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js b/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js index 5bbc999f3..91ca16138 100644 --- a/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js +++ b/src/containers/Drawers/PaymentReceiveDetailDrawer/utils.js @@ -2,12 +2,18 @@ import React from 'react'; import intl from 'react-intl-universal'; import moment from 'moment'; import { FormatNumberCell } from '../../../components'; +import { getColumnWidth } from 'utils'; +import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider'; /** * Retrieve payment entries table columns. */ -export const usePaymentReceiveEntriesColumns = () => - React.useMemo( +export const usePaymentReceiveEntriesColumns = () => { + const { + paymentReceive: { entries }, + } = usePaymentReceiveDetailContext(); + + return React.useMemo( () => [ { Header: intl.get('date'), @@ -27,24 +33,38 @@ export const usePaymentReceiveEntriesColumns = () => Header: intl.get('invoice_amount'), accessor: 'invoice.balance', Cell: FormatNumberCell, + width: getColumnWidth(entries, 'invoice.balance', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', + textOverview: true, }, { Header: intl.get('amount_due'), accessor: 'invoice.due_amount', Cell: FormatNumberCell, align: 'right', - width: 100, + width: getColumnWidth(entries, 'invoice.due_amount', { + minWidth: 60, + magicSpacing: 5, + }), disableSortBy: true, + textOverview: true, }, { Header: intl.get('payment_amount'), accessor: 'invoice.payment_amount', Cell: FormatNumberCell, align: 'right', - width: 100, + width: getColumnWidth(entries, 'invoice.payment_amount', { + minWidth: 60, + magicSpacing: 5, + }), disableSortBy: true, + textOverview: true, }, ], [], ); +}; diff --git a/src/containers/Drawers/ReceiptDetailDrawer/utils.js b/src/containers/Drawers/ReceiptDetailDrawer/utils.js index 5cd48259c..c1e6ec4d6 100644 --- a/src/containers/Drawers/ReceiptDetailDrawer/utils.js +++ b/src/containers/Drawers/ReceiptDetailDrawer/utils.js @@ -1,44 +1,69 @@ import React from 'react'; import intl from 'react-intl-universal'; -import { FormatNumberCell } from '../../../components'; +import { getColumnWidth } from 'utils'; +import { FormatNumberCell, TextOverviewTooltipCell } from '../../../components'; +import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider.js'; -export const useReceiptReadonlyEntriesTableColumns = () => 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', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true - }, - { - Header: intl.get('rate'), - accessor: 'rate', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true - }, - { - Header: intl.get('amount'), - accessor: 'amount', - Cell: FormatNumberCell, - width: 100, - align: 'right', - disableSortBy: true - }, - ], []); - \ No newline at end of file +export const useReceiptReadonlyEntriesTableColumns = () => { + // Receipt details drawer context. + const { + receipt: { entries }, + } = useReceiptDetailDrawerContext(); + return React.useMemo( + () => [ + { + Header: intl.get('product_and_service'), + accessor: 'item.name', + Cell: TextOverviewTooltipCell, + width: 150, + className: 'name', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('description'), + accessor: 'description', + Cell: TextOverviewTooltipCell, + className: 'description', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('quantity'), + accessor: 'quantity', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + }, + { + Header: intl.get('rate'), + accessor: 'rate', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + textOverview: true, + }, + { + Header: intl.get('amount'), + accessor: 'amount', + Cell: FormatNumberCell, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), + align: 'right', + disableSortBy: true, + textOverview: true, + }, + ], + [], + ); +}; diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js index 5784fe8c7..f922b9001 100644 --- a/src/containers/Drawers/VendorCreditDetailDrawer/utils.js +++ b/src/containers/Drawers/VendorCreditDetailDrawer/utils.js @@ -10,59 +10,82 @@ import { Tag, Intent, } from '@blueprintjs/core'; +import { getColumnWidth } from 'utils'; import { Icon, FormattedMessage as T, + TextOverviewTooltipCell, FormatNumberCell, Choose, } from '../../../components'; +import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider'; /** * Retrieve vendor credit readonly details entries table columns. */ -export const useVendorCreditReadonlyEntriesTableColumns = () => - React.useMemo( +export const useVendorCreditReadonlyEntriesTableColumns = () => { + const { + vendorCredit: { entries }, + } = useVendorCreditDetailDrawerContext(); + return React.useMemo( () => [ { Header: intl.get('product_and_service'), accessor: 'item.name', + Cell: TextOverviewTooltipCell, width: 150, className: 'item', disableSortBy: true, + textOverview: true, }, { Header: intl.get('description'), accessor: 'description', + Cell: TextOverviewTooltipCell, className: 'description', disableSortBy: true, + textOverview: true, }, { Header: intl.get('quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('rate'), accessor: 'rate', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'rate', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, { Header: intl.get('amount'), accessor: 'amount', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'amount', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, + textOverview: true, }, ], [], ); +}; /** * Vendor note more actions menu. diff --git a/src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js b/src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js index 06057eabc..018726ef2 100644 --- a/src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js +++ b/src/containers/Drawers/WarehouseTransferDetailDrawer/utils.js @@ -1,41 +1,58 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Intent, Tag } from '@blueprintjs/core'; +import { getColumnWidth } from 'utils'; +import { useWarehouseDetailDrawerContext } from './WarehouseTransferDetailDrawerProvider'; import { FormattedMessage as T, FormatNumberCell, + TextOverviewTooltipCell, Choose, } from '../../../components'; -export const useWarehouseTransferReadOnlyEntriesColumns = () => - React.useMemo( +/** + * Retrieves the readonly warehouse transfer entries columns. + */ +export const useWarehouseTransferReadOnlyEntriesColumns = () => { + const { + warehouseTransfer: { entries }, + } = useWarehouseDetailDrawerContext(); + + return React.useMemo( () => [ { Header: intl.get('warehouse_transfer.column.item_name'), accessor: 'item.name', - width: 150, + Cell: TextOverviewTooltipCell, + width: 100, className: 'name', disableSortBy: true, + textOverview: true, }, { Header: intl.get('warehouse_transfer.column.description'), accessor: 'description', + Cell: TextOverviewTooltipCell, className: 'description', disableSortBy: true, + textOverview: true, }, { Header: intl.get('warehouse_transfer.column.transfer_quantity'), accessor: 'quantity', Cell: FormatNumberCell, - width: 100, + width: getColumnWidth(entries, 'quantity', { + minWidth: 60, + magicSpacing: 5, + }), align: 'right', disableSortBy: true, }, ], [], ); - +}; /** * Warehouses transfer details status. * @returns {React.JSX} diff --git a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js index 79ff52a59..665d31ca2 100644 --- a/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js +++ b/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryProvider.js @@ -12,7 +12,6 @@ function VendorsBalanceSummaryProvider({ filter, ...props }) { const query = React.useMemo(() => transformFilterFormToQuery(filter), [ filter, ]); - // Fetching vendors balance summary report based on the given query. const { data: VendorBalanceSummary, diff --git a/src/style/App.scss b/src/style/App.scss index 11a3f35cf..76c182828 100644 --- a/src/style/App.scss +++ b/src/style/App.scss @@ -290,3 +290,8 @@ html[lang^='ar'] { .font-bold { font-weight: 600; } + + +span.table-tooltip-overview-target{ + display: inline; +} \ No newline at end of file