refactoring: sales tables.

refacoring: purchases tables.

client/src/containers/Purchases/Bills/BillsLanding/components.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  Intent,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Popover,
+  Button,
+  Position,
+  Tag,
+} from '@blueprintjs/core';
+import { useIntl, FormattedMessage as T } from 'react-intl';
+import { Icon, If, Choose, Money } from 'components';
+import { safeCallback, isBlank } from 'utils';
+import moment from 'moment';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  payload: { onEdit, onOpen, onDelete },
+  row: { original },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_bill' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+
+      <If condition={!original.is_open}>
+        <MenuItem
+          text={formatMessage({ id: 'mark_as_opened' })}
+          onClick={safeCallback(onOpen, original)}
+        />
+      </If>
+
+      <MenuItem
+        text={formatMessage({ id: 'delete_bill' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+        icon={<Icon icon="trash-16" iconSize={16} />}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Amount accessor.
+ */
+export function AmountAccessor(bill) {
+  return !isBlank(bill.amount) ? (
+    <Money amount={bill.amount} currency={'USD'} />
+  ) : (
+    ''
+  );
+}
+
+/**
+ * Status accessor.
+ */
+export function StatusAccessor(bill) {
+  return (
+    <Choose>
+      <Choose.When condition={bill.is_open}>
+        <Tag minimal={true} intent={Intent.SUCCESS}>
+          <T id={'opened'} />
+        </Tag>
+      </Choose.When>
+
+      <Choose.Otherwise>
+        <Tag minimal={true}>
+          <T id={'draft'} />
+        </Tag>
+      </Choose.Otherwise>
+    </Choose>
+  );
+}
+
+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.
+ */
+export function useBillsTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return React.useMemo(
+    () => [
+      {
+        id: 'bill_date',
+        Header: formatMessage({ id: 'bill_date' }),
+        accessor: (r) => moment(r.bill_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'bill_date',
+      },
+      {
+        id: 'vendor_id',
+        Header: formatMessage({ id: 'vendor_name' }),
+        accessor: 'vendor.display_name',
+        width: 140,
+        className: 'vendor_id',
+      },
+      {
+        id: 'bill_number',
+        Header: formatMessage({ id: 'bill_number' }),
+        accessor: (row) => (row.bill_number ? `#${row.bill_number}` : null),
+        width: 140,
+        className: 'bill_number',
+      },
+      {
+        id: 'due_date',
+        Header: formatMessage({ id: 'due_date' }),
+        accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
+        width: 140,
+        className: 'due_date',
+      },
+      {
+        id: 'amount',
+        Header: formatMessage({ id: 'amount' }),
+        accessor: AmountAccessor,
+        width: 140,
+        className: 'amount',
+      },
+      {
+        id: 'status',
+        Header: formatMessage({ id: 'status' }),
+        accessor: StatusAccessor,
+        width: 140,
+        className: 'status',
+      },
+      {
+        id: 'reference_no',
+        Header: formatMessage({ id: 'reference_no' }),
+        accessor: 'reference_no',
+        width: 140,
+        className: 'reference_no',
+      },
+      {
+        id: 'actions',
+        Header: '',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 50,
+        disableResizing: true,
+      },
+    ],
+    [formatMessage],
+  );
+}