feat(sales/purchases): add tooltip cell to detail.

2026-02-16 04:40:32 +00:00 · 2022-04-09 02:04:31 +02:00
parent cc457e1e43
commit 80feba6005
7 changed files with 238 additions and 101 deletions
--- 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.
--- 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.
--- a/src/containers/Drawers/InvoiceDetailDrawer/utils.js
+++ b/src/containers/Drawers/InvoiceDetailDrawer/utils.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import {
  Button,
  Popover,
-  Tooltip,
  PopoverInteractionKind,
  Position,
  MenuItem,
@@ -52,7 +51,6 @@ export const useInvoiceReadonlyEntriesColumns = () => {
        Cell: TextOverviewTooltipCell,
        disableSortBy: true,
        textOverview: true,
-        width: 75,
      },
      {
        Header: intl.get('quantity'),
--- 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',
+      },
+    ],
+    [],
+  );
+};
--- 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,
      },
    ],
    [],
  );
+};
--- 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
-    },
-  ], []);
-  
+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,
+      },
+    ],
+    [],
+  );
+};
--- 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.