feat: optimize sale estimate form performance.

feat: optimize sale receipt form performance.
feat: optimize sale invoice form performance.
feat: optimize bill form performance.

client/src/containers/Entries/ItemsEntriesTable.js

@@ -0,0 +1,267 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { omit } from 'lodash';
+import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+import { Hint, Icon } from 'components';
+import DataTable from 'components/DataTable';
+import {
+  InputGroupCell,
+  MoneyFieldCell,
+  ItemsListCell,
+  PercentFieldCell,
+  DivFieldCell,
+} from 'components/DataTableCells';
+
+import withItems from 'containers/Items/withItems';
+import {
+  compose,
+  formattedAmount,
+  orderingLinesIndexes,
+  saveInvoke,
+} from 'utils';
+
+// Actions cell renderer component.
+const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value },
+  data,
+  payload,
+}) => {
+  if (data.length <= index + 1) {
+    return '';
+  }
+  const onRemoveRole = () => {
+    payload.removeRow(index);
+  };
+  return (
+    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+      <Button
+        icon={<Icon icon={'times-circle'} iconSize={14} />}
+        iconSize={14}
+        className="m12"
+        intent={Intent.DANGER}
+        onClick={onRemoveRole}
+      />
+    </Tooltip>
+  );
+};
+
+// Total cell renderer.
+const TotalCellRenderer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    const total = props.data.reduce((total, entry) => {
+      const amount = parseInt(entry[type], 10);
+      const computed = amount ? total + amount : total;
+
+      return computed;
+    }, 0);
+    return <span>{formattedAmount(total, 'USD')}</span>;
+  }
+  return content(props);
+};
+
+const calculateDiscount = (discount, quantity, rate) =>
+  quantity * rate - (quantity * rate * discount) / 100;
+
+const CellRenderer = (content, type) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return content(props);
+};
+
+const ItemHeaderCell = () => (
+  <>
+    <T id={'product_and_service'} />
+    <Hint />
+  </>
+);
+
+function ItemsEntriesTable({
+  //#withitems
+  itemsCurrentPage,
+
+  //#ownProps
+  entries,
+  errors,
+  onUpdateData,
+  onClickRemoveRow,
+  onClickAddNewRow,
+  onClickClearAllLines,
+}) {
+  const [rows, setRows] = useState([]);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setRows([...entries.map((e) => ({ ...e }))]);
+  }, [entries]);
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+        className: 'index',
+      },
+      {
+        Header: ItemHeaderCell,
+        id: 'item_id',
+        accessor: 'item_id',
+        Cell: ItemsListCell,
+        disableSortBy: true,
+        width: 180,
+      },
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
+        Cell: InputGroupCell,
+        disableSortBy: true,
+        className: 'description',
+        width: 100,
+      },
+
+      {
+        Header: formatMessage({ id: 'quantity' }),
+        accessor: 'quantity',
+        Cell: CellRenderer(InputGroupCell, 'quantity'),
+        disableSortBy: true,
+        width: 80,
+        className: 'quantity',
+      },
+      {
+        Header: formatMessage({ id: 'rate' }),
+        accessor: 'rate',
+        Cell: TotalCellRenderer(MoneyFieldCell, 'rate'),
+        disableSortBy: true,
+        width: 80,
+        className: 'rate',
+      },
+      {
+        Header: formatMessage({ id: 'discount' }),
+        accessor: 'discount',
+        Cell: CellRenderer(PercentFieldCell, InputGroupCell),
+        disableSortBy: true,
+        width: 80,
+        className: 'discount',
+      },
+      {
+        Header: formatMessage({ id: 'total' }),
+        accessor: (row) =>
+          calculateDiscount(row.discount, row.quantity, row.rate),
+        Cell: TotalCellRenderer(DivFieldCell, 'total'),
+        disableSortBy: true,
+        width: 120,
+        className: 'total',
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        className: 'actions',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+      },
+    ],
+    [formatMessage],
+  );
+
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = rows.map((row, index) => {
+        if (index === rowIndex) {
+          const newRow = { ...rows[rowIndex], [columnId]: value };
+          return {
+            ...newRow,
+            total: calculateDiscount(
+              newRow.discount,
+              newRow.quantity,
+              newRow.rate,
+            ),
+          };
+        }
+        return row;
+      });
+      saveInvoke(onUpdateData, newRows);
+    },
+    [rows, onUpdateData],
+  );
+
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      if (rows.length <= 1) {
+        return;
+      }
+      const removeIndex = parseInt(rowIndex, 10); 
+      saveInvoke(onClickRemoveRow, removeIndex);
+    },
+    [rows, onClickRemoveRow],
+  );
+
+  const onClickNewRow = (event) => {
+    saveInvoke(onClickAddNewRow, event);
+  };
+
+  const handleClickClearAllLines = (event) => {
+    saveInvoke(onClickClearAllLines, event);
+  };
+
+  const rowClassNames = useCallback(
+    (row) => ({
+      'row--total': rows.length === row.index + 1,
+    }),
+    [rows],
+  );
+
+  return (
+    <div
+      className={classNames(
+        CLASSES.DATATABLE_EDITOR,
+        CLASSES.DATATABLE_EDITOR_ITEMS_ENTRIES,
+      )}
+    >
+      <DataTable
+        columns={columns}
+        data={rows}
+        rowClassNames={rowClassNames}
+        sticky={true}
+        payload={{
+          items: itemsCurrentPage,
+          errors: errors || [],
+          updateData: handleUpdateData,
+          removeRow: handleRemoveRow,
+        }}
+      />
+      <div className={classNames(CLASSES.DATATABLE_EDITOR_ACTIONS, 'mt1')}>
+        <Button
+          small={true}
+          className={'button--secondary button--new-line'}
+          onClick={onClickNewRow}
+        >
+          <T id={'new_lines'} />
+        </Button>
+
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines ml1'}
+          onClick={handleClickClearAllLines}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withItems(({ itemsCurrentPage }) => ({
+    itemsCurrentPage,
+  })),
+)(ItemsEntriesTable);