feat: checkbox field cell.

client/src/components/DataTableCells/CheckBoxFieldCell.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
+
+const CheckboxEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      // intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Checkbox
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        minimal={true}
+        className="ml2"
+      />
+    </FormGroup>
+  );
+};
+
+export default CheckboxEditableCell;

client/src/components/DataTableCells/index.js

@@ -6,6 +6,7 @@ import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
 import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 import NumericInputCell from './NumericInputCell';
+import CheckBoxFieldCell from './CheckBoxFieldCell'
 
 export {
   AccountsListFieldCell,
@@ -16,5 +17,6 @@ export {
   PercentFieldCell,
   DivFieldCell,
   EmptyDiv,
-  NumericInputCell
+  NumericInputCell,
+  CheckBoxFieldCell
 };

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -79,7 +79,10 @@ function ExpenseForm({
     }
     const categories = values.categories.filter(
       (category) =>
-        category.amount && category.index && category.expense_account_id,
+        category.amount &&
+        category.index &&
+        category.expense_account_id &&
+        category.landed_cost,
     );
 
     const form = {

client/src/containers/Expenses/ExpenseForm/components.js

@@ -7,6 +7,7 @@ import {
   InputGroupCell,
   MoneyFieldCell,
   AccountsListFieldCell,
+  CheckBoxFieldCell,
 } from 'components/DataTableCells';
 import { formattedAmount, safeSumBy } from 'utils';
 
@@ -49,19 +50,6 @@ const ActionsCellRenderer = ({
   );
 };
 
-/**
- * Landed cost cell.
- */
-const LandedCostCell = ({
-  row: { index },
-  column: { id },
-  cell: { value: initialValue },
-  data,
-  payload,
-}) => {
-  return <Checkbox minimal={true} className="ml2" />;
-};
-
 /**
  * Landed cost header cell.
  */
@@ -142,7 +130,7 @@ export function useExpenseFormTableColumns() {
       {
         Header: LandedCostHeaderCell,
         accessor: 'landed_cost',
-        Cell: LandedCostCell,
+        Cell: CheckBoxFieldCell,
         disableSortBy: true,
         disableResizing: true,
         width: 70,

client/src/containers/Expenses/ExpenseForm/utils.js

@@ -27,7 +27,7 @@ export const defaultExpenseEntry = {
   amount: '',
   expense_account_id: '',
   description: '',
-  landed_cost: false,
+  landed_cost: 0,
 };
 
 export const defaultExpense = {