feat: allow quantity of entries accept decimal value (#753)

packages/webapp/src/components/DataTableCells/NumericInputCell.tsx

@@ -1,8 +1,6 @@
-// @ts-nocheck
 import React, { useState, useEffect } from 'react';
 import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
-
 import { CellType } from '@/constants';
 import { CLASSES } from '@/constants/classes';
 
@@ -12,37 +10,44 @@ import { CLASSES } from '@/constants/classes';
 export default function NumericInputCell({
   row: { index },
   column: { id },
-  cell: { value: initialValue },
+  cell: { value: controlledInputValue },
   payload,
-}) {
-  const [value, setValue] = useState(initialValue);
+}: any) {
+  const [valueAsNumber, setValueAsNumber] = useState<number | null>(
+    controlledInputValue || null,
+  );
+  const handleInputValueChange = (
+    valueAsNumber: number,
+    valueAsString: string,
+  ) => {
+    setValueAsNumber(valueAsNumber);
+  };
+  const handleInputBlur = () => {
+    payload.updateData(index, id, valueAsNumber);
+  };
 
-  const handleValueChange = (newValue) => {
-    setValue(newValue);
-  };
-  const onBlur = () => {
-    payload.updateData(index, id, value);
-  };
   useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
+    setValueAsNumber(controlledInputValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledInputValue]);
 
   const error = payload.errors?.[index]?.[id];
 
   return (
     <FormGroup
-      intent={error ? Intent.DANGER : null}
+      intent={error ? Intent.DANGER : undefined}
       className={classNames(CLASSES.FILL)}
     >
       <NumericInput
-        value={value}
-        onValueChange={handleValueChange}
-        onBlur={onBlur}
-        fill={true}
+        asyncControl
+        value={controlledInputValue}
+        onValueChange={handleInputValueChange}
+        onBlur={handleInputBlur}
         buttonPosition={'none'}
+        fill
       />
     </FormGroup>
   );
 }
 
-NumericInputCell.cellType = CellType.Field;
+NumericInputCell.cellType = CellType.Field;

packages/webapp/src/containers/Drawers/BillDrawer/utils.tsx

@@ -13,7 +13,6 @@ import {
   Tag,
 } from '@blueprintjs/core';
 import {
-  FormatNumberCell,
   TextOverviewTooltipCell,
   FormattedMessage as T,
   Choose,
@@ -51,9 +50,8 @@ export const useBillReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'quantity', {
+        accessor: 'quantity_formatted',
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/CreditNoteDetailDrawer/utils.tsx

@@ -48,9 +48,8 @@ export const useCreditNoteReadOnlyEntriesColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'quantity', {
+        accessor: 'quantity_formatted',
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/InvoiceDetailDrawer/utils.tsx

@@ -54,11 +54,10 @@ export const useInvoiceReadonlyEntriesColumns = () => {
       {
         Header: intl.get('quantity'),
         accessor: 'quantity',
-        Cell: FormatNumberCell,
         align: 'right',
         disableSortBy: true,
         textOverview: true,
-        width: getColumnWidth(entries, 'quantity', {
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),

packages/webapp/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactions/components.tsx

@@ -72,7 +72,7 @@ export const useEstimateTransactionsColumns = () => {
       {
         id: 'qunatity',
         Header: intl.get('item.drawer_quantity_sold'),
-        accessor: 'quantity',
+        accessor: 'quantity_formatted',
         align: 'right',
         width: 100,
       },

packages/webapp/src/containers/Drawers/ReceiptDetailDrawer/utils.tsx

@@ -31,9 +31,8 @@ export const useReceiptReadonlyEntriesTableColumns = () => {
       },
       {
         Header: intl.get('quantity'),
-        accessor: 'quantity',
-        Cell: FormatNumberCell,
-        width: getColumnWidth(entries, 'quantity', {
+        accessor: 'quantity_formatted',
+        width: getColumnWidth(entries, 'quantity_formatted', {
           minWidth: 60,
           magicSpacing: 5,
         }),