BIG-71: localize moment date formats.

2026-02-18 22:00:31 +00:00 · 2021-09-15 11:30:03 +02:00
parent cc13383466
commit d5c1ec58c7
24 changed files with 144 additions and 133 deletions
--- a/client/src/containers/Accounting/JournalsLanding/components.js
+++ b/client/src/containers/Accounting/JournalsLanding/components.js
@@ -11,12 +11,11 @@ import {
  MenuDivider,
  Popover,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
-import moment from 'moment';
-import { Choose, Money, If, Icon } from 'components';
-import { safeCallback } from 'utils';
 import intl from 'react-intl-universal';

+import { FormattedMessage as T, Choose, Money, If, Icon } from 'components';
+import { safeCallback } from 'utils';
+
 /**
 * Amount accessor.
 */
@@ -105,13 +104,6 @@ export const StatusAccessor = (row) => {
  );
 };

-/**
- * Date accessor.
- */
-export const DateAccessor = (row) => {
-  return moment(row.date).format('YYYY MMM DD');
-};
-
 /**
 * Note column accessor.
 */
--- a/client/src/containers/Accounting/JournalsLanding/utils.js
+++ b/client/src/containers/Accounting/JournalsLanding/utils.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
-import { NoteAccessor, StatusAccessor, DateAccessor } from './components';
+import clsx from 'classnames';
+
+import { CLASSES } from '../../../common/classes';
+import { FormatDateCell } from '../../../components';
+import { NoteAccessor, StatusAccessor } from './components';

 /**
 * Retrieve the manual journals columns.
@@ -12,7 +15,8 @@ export const useManualJournalsColumns = () => {
      {
        id: 'date',
        Header: intl.get('date'),
-        accessor: DateAccessor,
+        accessor: 'date',
+        Cell: FormatDateCell,
        width: 115,
        className: 'date',
        clickable: true,
@@ -21,10 +25,10 @@ export const useManualJournalsColumns = () => {
        id: 'amount',
        Header: intl.get('amount'),
        accessor: 'formatted_amount',
-        className: 'amount',
        width: 115,
        clickable: true,
        align: 'right',
+        className: clsx(CLASSES.FONT_BOLD),
      },
      {
        id: 'journal_number',
@@ -39,7 +43,6 @@ export const useManualJournalsColumns = () => {
        Header: intl.get('journal_type'),
        accessor: 'journal_type',
        width: 110,
-        className: 'journal_type',
        clickable: true,
      },
      {
@@ -47,7 +50,6 @@ export const useManualJournalsColumns = () => {
        Header: intl.get('publish'),
        accessor: (row) => StatusAccessor(row),
        width: 95,
-        className: 'status',
        clickable: true,
      },
      {
@@ -56,15 +58,14 @@ export const useManualJournalsColumns = () => {
        accessor: NoteAccessor,
        disableSortBy: true,
        width: 85,
-        className: 'note',
        clickable: true,
      },
      {
        id: 'created_at',
        Header: intl.get('created_at'),
-        accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
+        accessor: 'created_at',
+        Cell: FormatDateCell,
        width: 125,
-        className: 'created_at',
        clickable: true,
      },
    ],
--- a/client/src/containers/Drawers/AccountDrawer/utils.js
+++ b/client/src/containers/Drawers/AccountDrawer/utils.js
@@ -1,27 +1,21 @@
 import intl from 'react-intl-universal';
 import React from 'react';
-import moment from 'moment';

+import { FormatDateCell } from '../../../components';
 import { isBlank } from 'utils';

 /**
 * Debit/credit table cell.
 */
 function DebitCreditTableCell({ value, payload: { account } }) {
-  return !isBlank(value) && value !== 0
-    ? // <Money amount={value} currency={account.currency_code} />
-      account.formatted_amount
-    : null;
+  return !isBlank(value) && value !== 0 ? account.formatted_amount : null;
 }

 /**
 * Running balance table cell.
 */
 function RunningBalanceTableCell({ value, payload: { account } }) {
-  return (
-    // <Money amount={value} currency={account.currency_code} />
-    account.formatted_amount
-  );
+  return account.formatted_amount;
 }

 /**
@@ -32,7 +26,8 @@ export const useAccountReadEntriesColumns = () =>
    () => [
      {
        Header: intl.get('transaction_date'),
-        accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
+        accessor: 'date',
+        Cell: FormatDateCell,
        width: 110,
        textOverview: true,
      },
--- a/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
+++ b/client/src/containers/Drawers/BillDrawer/BillDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';

-import { DetailsMenu, DetailItem } from 'components';
+import { FormatDate, DetailsMenu, DetailItem } from 'components';

 import { useBillDrawerContext } from './BillDrawerProvider';
 import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
@@ -27,7 +27,7 @@ export default function BillDetailHeader() {
        />
        <DetailItem
          label={intl.get('bill_date')}
-          children={bill.formatted_bill_date}
+          children={<FormatDate value={bill.bill_date} />}
        />
        <DetailItem
          label={intl.get('vendor_name')}
@@ -35,7 +35,7 @@ export default function BillDetailHeader() {
        />
        <DetailItem
          label={intl.get('due_date')}
-          children={bill.formatted_due_date}
+          children={<FormatDate value={bill.due_date} />}
        />
      </DetailsMenu>

@@ -50,7 +50,7 @@ export default function BillDetailHeader() {
        />
        <DetailItem
          label={intl.get('bill.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={bill.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
+++ b/client/src/containers/Drawers/EstimateDetailDrawer/EstimateDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';

-import { T, DetailsMenu, DetailItem } from 'components';
+import { FormatDate, T, DetailsMenu, DetailItem } from 'components';
 import { useEstimateDetailDrawerContext } from './EstimateDetailDrawerProvider';

 import EstimateDetailsCls from 'style/components/Drawers/EstimateDetails.module.scss';
@@ -45,7 +45,7 @@ export default function EstimateDetailHeader() {
        />
        <DetailItem
          label={<T id={'estimate.details.created_at'} />}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={estimate.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
+++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';

-import { DetailsMenu, DetailItem } from 'components';
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
 import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider';

 import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss';
@@ -30,11 +30,11 @@ export default function InvoiceDetailHeader() {
        />
        <DetailItem
          label={intl.get('invoice_date')}
-          children={invoice.formatted_invoice_date}
+          children={<FormatDate value={invoice.invoice_date} />}
        />
        <DetailItem
          label={intl.get('due_date')}
-          children={invoice.formatted_due_date}
+          children={<FormatDate value={invoice.due_date} />}
        />
      </DetailsMenu>

@@ -49,7 +49,7 @@ export default function InvoiceDetailHeader() {
        />
        <DetailItem
          label={intl.get('invoice.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={invoice.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
+++ b/client/src/containers/Drawers/PaymentMadeDetailDrawer/PaymentMadeDetailHeader.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
 import clsx from 'classnames';
 import { defaultTo } from 'lodash';

-import { DetailsMenu, DetailItem } from 'components';
-
+import { DetailsMenu, DetailItem, FormatDate } from 'components';
 import { usePaymentMadeDetailContext } from './PaymentMadeDetailProvider';

 import PaymentDrawerCls from './PaymentMadeDrawer.module.scss';
@@ -36,7 +34,7 @@ export default function PaymentMadeDetailHeader() {
        />
        <DetailItem
          label={intl.get('payment_date')}
-          children={paymentMade.formatted_payment_date}
+          children={<FormatDate value={paymentMade.payment_date} />}
        />
      </DetailsMenu>

@@ -47,7 +45,7 @@ export default function PaymentMadeDetailHeader() {
        />
        <DetailItem
          label={intl.get('created_at')}
-          children={moment(paymentMade.created_at).format('YYYY MMM DD')}
+          children={<FormatDate value={paymentMade.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
+++ b/client/src/containers/Drawers/PaymentReceiveDetailDrawer/PaymentReceiveDetailHeader.js
@@ -1,12 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import moment from 'moment';
 import clsx from 'classnames';
-
 import { defaultTo } from 'lodash';

-import { DetailsMenu, DetailItem } from 'components';
-
+import { FormatDate, DetailsMenu, DetailItem } from 'components';
 import { usePaymentReceiveDetailContext } from './PaymentReceiveDetailProvider';

 import PaymentDrawerCls from './PaymentReceiveDrawer.module.scss';
@@ -40,7 +37,7 @@ export default function PaymentReceiveDetailHeader() {
        />
        <DetailItem
          label={intl.get('payment_date')}
-          children={paymentReceive.formatted_payment_date}
+          children={<FormatDate value={paymentReceive.payment_date} />}
        />
      </DetailsMenu>

@@ -51,7 +48,7 @@ export default function PaymentReceiveDetailHeader() {
        />
        <DetailItem
          label={intl.get('created_at')}
-          children={moment(paymentReceive.created_at).format('YYYY MMM DD')}
+          children={<FormatDate value={paymentReceive.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
+++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js
@@ -3,7 +3,7 @@ import intl from 'react-intl-universal';
 import { defaultTo } from 'lodash';
 import clsx from 'classnames';

-import { DetailsMenu, DetailItem } from 'components';
+import { FormatDate, DetailsMenu, DetailItem } from 'components';

 import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider';

@@ -31,11 +31,11 @@ export default function ReceiptDetailHeader() {
        />
        <DetailItem
          label={intl.get('receipt_date')}
-          children={receipt.formatted_receipt_date}
+          children={<FormatDate value={receipt.receipt_date} />}
        />
        <DetailItem
          label={intl.get('closed_date')}
-          children={defaultTo(receipt.formatted_closed_at_date, '-')}
+          children={<FormatDate value={receipt.closed_at_date} />}
        />
      </DetailsMenu>

@@ -50,7 +50,7 @@ export default function ReceiptDetailHeader() {
        />
        <DetailItem
          label={intl.get('receipt.details.created_at')}
-          children={'2020 Ang 21'}
+          children={<FormatDate value={receipt.created_at} />}
        />
      </DetailsMenu>
    </div>
--- a/client/src/containers/Expenses/ExpensesLanding/components.js
+++ b/client/src/containers/Expenses/ExpensesLanding/components.js
@@ -11,10 +11,15 @@ import {
  Menu,
  MenuDivider,
 } from '@blueprintjs/core';
-import moment from 'moment';
 import intl from 'react-intl-universal';

-import { FormattedMessage as T, Money, Icon, If } from 'components';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Money,
+  Icon,
+  If,
+} from 'components';
 import { safeCallback } from 'utils';

 /**
@@ -128,7 +133,8 @@ export function useExpensesTableColumns() {
      {
        id: 'payment_date',
        Header: intl.get('payment_date'),
-        accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
+        accessor: 'payment_date',
+        Cell: FormatDateCell,
        width: 140,
        className: 'payment_date',
        clickable: true,
--- a/client/src/containers/Purchases/Bills/BillsLanding/components.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js
@@ -4,16 +4,19 @@ import {
  Menu,
  MenuItem,
  MenuDivider,
-  Popover,
-  Button,
-  Position,
  Tag,
  ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';

-import { FormattedMessage as T, Icon, If, Choose, Money } from 'components';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Icon,
+  If,
+  Choose,
+  Money,
+} from 'components';
 import { formattedAmount, safeCallback, isBlank, calculateStatus } from 'utils';

 /**
@@ -136,17 +139,6 @@ export function StatusAccessor(bill) {
  );
 }

-export function ActionsCell(props) {
-  return (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 /**
 * Retrieve bills table columns.
 */
@@ -156,7 +148,8 @@ export function useBillsTableColumns() {
      {
        id: 'bill_date',
        Header: intl.get('bill_date'),
-        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+        accessor: 'bill_date',
+        Cell: FormatDateCell,
        width: 110,
        className: 'bill_date',
        clickable: true,
@@ -197,7 +190,8 @@ export function useBillsTableColumns() {
      {
        id: 'due_date',
        Header: intl.get('due_date'),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
        width: 110,
        className: 'due_date',
        clickable: true,
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/components.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import moment from 'moment';
 import {
  Intent,
  Button,
@@ -11,13 +10,9 @@ import {
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';

-import { Icon, Money } from 'components';
+import { Icon, Money, FormatDateCell } from 'components';
 import { safeCallback } from 'utils';

-export function DateCell({ value }) {
-  return moment(value).format('YYYY MMM DD');
-}
-
 export function AmountAccessor(row) {
  return <Money amount={row.amount} currency={row.currency_code} />;
 }
@@ -75,7 +70,7 @@ export function usePaymentMadesTableColumns() {
      {
        id: 'payment_date',
        Header: intl.get('payment_date'),
-        Cell: DateCell,
+        Cell: FormatDateCell,
        accessor: 'payment_date',
        width: 140,
        className: 'payment_date',
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -1,18 +1,17 @@
 import React from 'react';
-import {
-  Intent,
-  Tag,
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-} from '@blueprintjs/core';
+import { Intent, Tag, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';

-import { FormattedMessage as T, Money, Choose, Icon, If } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  Money,
+  Choose,
+  Icon,
+  If,
+} from 'components';
 import { safeCallback } from 'utils';

 /**
@@ -130,25 +129,10 @@ export function ActionsMenu({
  );
 }

-function DateCell({ value }) {
-  return moment(value).format('YYYY MMM DD');
-}
-
 function AmountAccessor({ amount, currency_code }) {
  return <Money amount={amount} currency={currency_code} />;
 }

-function ActionsCell(props) {
-  return (
-    <Popover
-      content={<ActionsMenu {...props} />}
-      position={Position.RIGHT_BOTTOM}
-    >
-      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-    </Popover>
-  );
-}
-
 export function useEstiamtesTableColumns() {
  return React.useMemo(
    () => [
@@ -156,7 +140,7 @@ export function useEstiamtesTableColumns() {
        id: 'estimate_date',
        Header: intl.get('estimate_date'),
        accessor: 'estimate_date',
-        Cell: DateCell,
+        Cell: FormatDateCell,
        width: 140,
        className: 'estimate_date',
        clickable: true,
@@ -175,7 +159,7 @@ export function useEstiamtesTableColumns() {
        id: 'expiration_date',
        Header: intl.get('expiration_date'),
        accessor: 'expiration_date',
-        Cell: DateCell,
+        Cell: FormatDateCell,
        width: 140,
        className: 'expiration_date',
        clickable: true,
@@ -198,6 +182,7 @@ export function useEstiamtesTableColumns() {
        width: 140,
        align: 'right',
        clickable: true,
+        className: clsx(CLASSES.FONT_BOLD),
      },
      {
        id: 'status',
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
@@ -8,9 +8,17 @@ import {
  ProgressBar,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';

-import { FormattedMessage as T, AppToaster, Choose, If, Icon } from 'components';
+import { CLASSES } from '../../../../common/classes';
+import {
+  FormatDateCell,
+  FormattedMessage as T,
+  AppToaster,
+  Choose,
+  If,
+  Icon,
+} from 'components';
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';

 export const statusAccessor = (row) => {
@@ -150,7 +158,8 @@ export function useInvoicesTableColumns() {
      {
        id: 'invoice_date',
        Header: intl.get('invoice_date'),
-        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        accessor: 'invoice_date',
+        Cell: FormatDateCell,
        width: 110,
        className: 'invoice_date',
        clickable: true,
@@ -183,6 +192,7 @@ export function useInvoicesTableColumns() {
        align: 'right',
        clickable: true,
        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
      },
      {
        id: 'status',
@@ -195,7 +205,8 @@ export function useInvoicesTableColumns() {
      {
        id: 'due_date',
        Header: intl.get('due_date'),
-        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        accessor: 'due_date',
+        Cell: FormatDateCell,
        width: 110,
        className: 'due_date',
        clickable: true,
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -9,10 +9,11 @@ import {
  Position,
 } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import moment from 'moment';
+import clsx from 'classnames';

-import { Money, Icon } from 'components';
+import { FormatDateCell, Money, Icon } from 'components';
 import { safeCallback } from 'utils';
+import { CLASSES } from '../../../../common/classes';

 /**
 * Table actions menu.
@@ -56,13 +57,6 @@ export function AmountAccessor(row) {
  return <Money amount={row.amount} currency={row.currency_code} />;
 }

-/**
- * Payment date accessor.
- */
-export function PaymentDateAccessor(row) {
-  return moment(row.payment_date).format('YYYY MMM DD');
-}
-
 /**
 * Actions cell.
 */
@@ -86,7 +80,8 @@ export function usePaymentReceivesColumns() {
      {
        id: 'payment_date',
        Header: intl.get('payment_date'),
-        accessor: PaymentDateAccessor,
+        accessor: 'payment_date',
+        Cell: FormatDateCell,
        width: 140,
        className: 'payment_date',
        clickable: true,
@@ -109,6 +104,7 @@ export function usePaymentReceivesColumns() {
        align: 'right',
        clickable: true,
        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
      },
      {
        id: 'payment_receive_no',
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
@@ -11,10 +11,11 @@ import {
  Tag,
  Button,
 } from '@blueprintjs/core';
-import moment from 'moment';
+import clsx from 'classnames';

+import { CLASSES } from '../../../../common/classes';
 import { safeCallback } from 'utils';
-import { Choose, Money, Icon, If } from 'components';
+import { FormatDateCell, Choose, Money, Icon, If } from 'components';

 export function ActionsMenu({
  payload: { onEdit, onDelete, onClose, onDrawer, onViewDetails, onPrint },
@@ -99,7 +100,8 @@ export function useReceiptsTableColumns() {
      {
        id: 'receipt_date',
        Header: intl.get('receipt_date'),
-        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
+        accessor: 'receipt_date',
+        Cell: FormatDateCell,
        width: 140,
        className: 'receipt_date',
        clickable: true,
@@ -140,6 +142,7 @@ export function useReceiptsTableColumns() {
        align: 'right',
        clickable: true,
        textOverview: true,
+        className: clsx(CLASSES.FONT_BOLD),
      },
      {
        id: 'status',