feature : Puschases & Sales / fix : tasks

client/src/components/AccountsSelectList.js

@@ -9,6 +9,7 @@ export default function AccountsSelectList({
   selectedAccountId,
   defaultSelectText = 'Select account',
   onAccountSelected,
+  disabled = false,
 }) {
   // Find initial account object to set it as default account in initial render.
   const initialAccount = useMemo(
@@ -77,6 +78,7 @@ export default function AccountsSelectList({
       onItemSelect={onAccountSelect}
     >
       <Button
+        disabled={disabled}
         text={selectedAccount ? selectedAccount.name : defaultSelectText}
       />
     </Select>

client/src/components/DataTableCells/DivFieldCell.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-export default function DivFieldCell({ cell: { value: initialValue } }) {
+export const DivFieldCell = ({ cell: { value: initialValue } }) => {
   const [value, setValue] = useState(initialValue);
 
   useEffect(() => {
@@ -8,4 +8,13 @@ export default function DivFieldCell({ cell: { value: initialValue } }) {
   }, [initialValue]);
 
   return <div>${value}</div>;
-}
+};
+export const EmptyDiv = ({ cell: { value: initialValue } }) => {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return <div>{value}</div>;
+};

client/src/components/DataTableCells/index.js

@@ -4,7 +4,7 @@ import InputGroupCell from './InputGroupCell';
 import ContactsListFieldCell from './ContactsListFieldCell';
 import EstimatesListFieldCell from './EstimatesListFieldCell';
 import PercentFieldCell from './PercentFieldCell';
-import DivFieldCell from './DivFieldCell';
+import { DivFieldCell,EmptyDiv } from './DivFieldCell';
 export {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -13,4 +13,5 @@ export {
   EstimatesListFieldCell,
   PercentFieldCell,
   DivFieldCell,
+  EmptyDiv,
 };

client/src/components/MoneyInputGroup.js

@@ -1,5 +1,5 @@
-import React, {useState, useMemo, useEffect, useCallback} from 'react';
-import {InputGroup} from '@blueprintjs/core';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { InputGroup } from '@blueprintjs/core';
 
 const joinIntegerAndDecimal = (integer, decimal, separator) => {
   let output = `${integer}`;
@@ -16,13 +16,13 @@ const hasSeparator = (input, separator) => {
 };
 
 const addThousandSeparator = (integer, separator) => {
-  return integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${separator}`)
+  return integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${separator}`);
 };
 
 const toString = (number) => `${number}`;
 
 const onlyNumbers = (input) => {
-  return toString(input).replace(/\D+/g, '') || '0'
+  return toString(input).replace(/\D+/g, '') || '0';
 };
 
 const formatter = (value, options) => {
@@ -31,11 +31,19 @@ const formatter = (value, options) => {
   const parts = toString(input).split(options.decimal);
   const integer = parseInt(onlyNumbers(parts[0]), 10);
   const decimal = parts[1] ? onlyNumbers(parts[1]) : null;
-  const integerThousand = addThousandSeparator(toString(integer), options.thousands);
+  const integerThousand = addThousandSeparator(
+    toString(integer),
+    options.thousands,
+  );
   const separator = hasSeparator(input, options.decimal)
-    ? options.decimal : false;
+    ? options.decimal
+    : false;
 
-  return `${navigate}${options.prefix}${joinIntegerAndDecimal(integerThousand, decimal, separator)}${options.suffix}`;
+  return `${navigate}${options.prefix}${joinIntegerAndDecimal(
+    integerThousand,
+    decimal,
+    separator,
+  )}${options.suffix}`;
 };
 
 const unformatter = (input, options) => {
@@ -44,12 +52,12 @@ const unformatter = (input, options) => {
   const integer = parseInt(onlyNumbers(parts[0]), 10);
   const decimal = parts[1] ? onlyNumbers(parts[1]) : null;
   const separator = hasSeparator(input, options.decimal)
-    ? options.decimal : false;
+    ? options.decimal
+    : false;
 
   return `${navigate}${joinIntegerAndDecimal(integer, decimal, separator)}`;
 };
 
-
 export default function MoneyFieldGroup({
   value,
   prefix = '',
@@ -59,32 +67,43 @@ export default function MoneyFieldGroup({
   precision = 2,
   inputGroupProps,
   onChange,
+  disabled = false,
 }) {
   const [state, setState] = useState(value);
 
-  const options = useMemo(() => ({
-    prefix, suffix, thousands, decimal, precision,
-  }), [
-    prefix, suffix, thousands, decimal, precision,
-  ]);
+  const options = useMemo(
+    () => ({
+      prefix,
+      suffix,
+      thousands,
+      decimal,
+      precision,
+    }),
+    [prefix, suffix, thousands, decimal, precision],
+  );
 
-  const handleChange = useCallback((event) => {
-    const formatted = formatter(event.target.value, options);
-    const value = unformatter(event.target.value, options);
+  const handleChange = useCallback(
+    (event) => {
+      const formatted = formatter(event.target.value, options);
+      const value = unformatter(event.target.value, options);
 
-    setState(formatted);
-    onChange && onChange(event, value);
-  }, [onChange, options]);
+      setState(formatted);
+      onChange && onChange(event, value);
+    },
+    [onChange, options],
+  );
 
   useEffect(() => {
     const formatted = formatter(value, options);
-    setState(formatted)
+    setState(formatted);
   }, [value, options, setState]);
 
   return (
-   <InputGroup
+    <InputGroup
       value={state}
       onChange={handleChange}
-      {...inputGroupProps} />
+      {...inputGroupProps}
+      disabled={disabled}
+    />
   );
-}
+}