feat: auto-complete warehouse transfer row.

src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormEntriesTable.js

@@ -1,16 +1,14 @@
 import React from 'react';
 
-import { useWarehouseTransferTableColumns } from '../utils';
 import { DataTableEditable } from 'components';
-import {
-  saveInvoke,
-  compose,
-  updateTableCell,
-  updateMinEntriesLines,
-  updateAutoAddNewLine,
-  updateRemoveLineByIndex,
-  orderingLinesIndexes,
-} from 'utils';
+
+import { useWarehouseTransferTableColumns } from '../utils';
+import { useFetchItemWarehouseQuantity } from './hooks';
+import { useDeepCompareEffect } from 'hooks/utils';
+
+import { saveInvoke } from 'utils';
+import { mutateTableCell, mutateTableRow, deleteTableRow } from './utils';
+
 /**
  * Warehouse transfer form entries table.
  */
@@ -21,34 +19,63 @@ export default function WarehouseTransferFormEntriesTable({
   defaultEntry,
   onUpdateData,
   errors,
+
+  destinationWarehouseId,
+  sourceWarehouseId,
 }) {
+  // Fetch the table row.
+  const { newRowMeta, setTableRow, resetTableRow, cellsLoading } =
+    useFetchItemWarehouseQuantity();
+
   // Retrieve the warehouse transfer table columns.
   const columns = useWarehouseTransferTableColumns();
 
+  // Observes the new row meta to call `onUpdateData` callback.
+  useDeepCompareEffect(() => {
+    if (newRowMeta) {
+      const newRow = {
+        item_id: newRowMeta.itemId,
+        warehouses: newRowMeta.warehouses,
+        description: '',
+        quantity: 0,
+      };
+      const newRows = mutateTableRow(newRowMeta.rowIndex, newRow, entries);
+
+      saveInvoke(onUpdateData, newRows);
+      resetTableRow();
+    }
+  }, [newRowMeta]);
+
   // Handle update data.
   const handleUpdateData = React.useCallback(
-    (rowIndex, columnId, value) => {
-      const newRows = compose(
-        // Update auto-adding new line.
-        updateAutoAddNewLine(defaultEntry, ['item_id']),
-        // Update the row value of the given row index and column id.
-        updateTableCell(rowIndex, columnId, value),
-      )(entries);
+    (rowIndex, columnId, itemId) => {
+      if (columnId === 'item_id') {
+        setTableRow({
+          rowIndex,
+          columnId,
+          itemId,
+          sourceWarehouseId,
+          destinationWarehouseId,
+        });
+      }
+      const editCell = mutateTableCell(rowIndex, columnId, defaultEntry);
+      const newRows = editCell(itemId, entries);
 
       saveInvoke(onUpdateData, newRows);
     },
-    [entries, defaultEntry, onUpdateData],
+    [
+      entries,
+      defaultEntry,
+      onUpdateData,
+      destinationWarehouseId,
+      sourceWarehouseId,
+      setTableRow,
+    ],
   );
   // Handles click remove datatable row.
   const handleRemoveRow = React.useCallback(
     (rowIndex) => {
-      const newRows = compose(
-        // Ensure minimum lines count.
-        updateMinEntriesLines(4, defaultEntry),
-        // Remove the line by the given index.
-        updateRemoveLineByIndex(rowIndex),
-      )(entries);
-
+      const newRows = deleteTableRow(rowIndex, defaultEntry, entries);
       saveInvoke(onUpdateData, newRows);
     },
     [entries, defaultEntry, onUpdateData],
@@ -58,12 +85,17 @@ export default function WarehouseTransferFormEntriesTable({
     <DataTableEditable
       columns={columns}
       data={entries}
+      cellsLoading={!!cellsLoading}
+      cellsLoadingCoords={cellsLoading}
       payload={{
         items,
         errors: errors || [],
         updateData: handleUpdateData,
         removeRow: handleRemoveRow,
         autoFocus: ['item_id', 0],
+
+        sourceWarehouseId,
+        destinationWarehouseId,
       }}
     />
   );