refactoring: WIP payment receive and made form.

client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTableEditor.js

@@ -0,0 +1,172 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Button } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import moment from 'moment';
+import { sumBy } from 'lodash';
+import classNames from 'classnames';
+
+import { CLASSES } from 'common/classes';
+import { DataTableEditable, Money } from 'components';
+import { transformUpdatedRows } from 'utils';
+import {
+  MoneyFieldCell,
+  DivFieldCell,
+  EmptyDiv,
+} from 'components/DataTableCells';
+
+/**
+ * Cell renderer guard.
+ */
+const CellRenderer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return content(props);
+};
+
+const TotalCellRederer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return <Money amount={props.cell.row.original[type]} currency={'USD'} />;
+  }
+  return content(props);
+};
+
+export default function PaymentReceiveItemsTableEditor({
+  onClickClearAllLines,
+  onUpdateData,
+  data,
+  errors,
+  noResultsMessage,
+}) {
+  const transformedData = useMemo(() => {
+    const rows = [...data];
+    const totalRow = {
+      due_amount: sumBy(data, 'due_amount'),
+      payment_amount: sumBy(data, 'payment_amount'),
+    };
+    if (rows.length > 0) {
+      rows.push(totalRow);
+    }
+    return rows;
+  }, [data]);
+
+  const [localData, setLocalData] = useState(transformedData);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    if (localData !== transformedData) {
+      setLocalData(transformedData);
+    }
+  }, [setLocalData, localData, transformedData]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'Date' }),
+        id: 'invoice_date',
+        accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
+        Cell: CellRenderer(EmptyDiv, 'invoice_date'),
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+
+      {
+        Header: formatMessage({ id: 'invocie_number' }),
+        accessor: (row) => {
+          const invNumber = row?.invoice_no || row?.id;
+          return `#INV-${invNumber || ''}`;
+        },
+        Cell: CellRenderer(EmptyDiv, 'invoice_no'),
+        disableSortBy: true,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'invoice_amount' }),
+        accessor: 'balance',
+        Cell: CellRenderer(DivFieldCell, 'balance'),
+        disableSortBy: true,
+        width: 100,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'amount_due' }),
+        accessor: 'due_amount',
+        Cell: TotalCellRederer(DivFieldCell, 'due_amount'),
+        disableSortBy: true,
+        width: 150,
+        className: '',
+      },
+      {
+        Header: formatMessage({ id: 'payment_amount' }),
+        accessor: 'payment_amount',
+        Cell: TotalCellRederer(MoneyFieldCell, 'payment_amount'),
+        disableSortBy: true,
+        width: 150,
+        className: '',
+      },
+    ],
+    [formatMessage],
+  );
+
+  // Handle click clear all lines button.
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+
+  const rowClassNames = useCallback(
+    (row) => ({ 'row--total': localData.length === row.index + 1 }),
+    [localData],
+  );
+
+  // Handle update data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = transformUpdatedRows(
+        localData,
+        rowIndex,
+        columnId,
+        value,
+      );
+      if (newRows.length > 0) {
+        newRows.splice(-1, 1);
+      }
+      setLocalData(newRows);
+      onUpdateData && onUpdateData(newRows);
+    },
+    [localData, setLocalData, onUpdateData],
+  );
+
+  return (
+    <DataTableEditable
+      className={classNames(CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES)}
+      columns={columns}
+      data={localData}
+      rowClassNames={rowClassNames}
+      spinnerProps={false}
+      payload={{
+        errors,
+        updateData: handleUpdateData,
+      }}
+      noResults={noResultsMessage}
+      actions={
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines'}
+          onClick={handleClickClearAllLines}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      }
+      totalRow={true}
+    />
+  );
+}