WIP: Feature JournalNumber dialog / Fix: ItemCategory & EditMakeJournal & Expenses

client/src/containers/Expenses/ExpenseForm.js

@@ -164,10 +164,10 @@ function ExpenseForm({
               ...expense.categories.map((category) => ({
                 ...pick(category, Object.keys(defaultCategory)),
               })),
-              ...repeatValue(
-                defaultCategory,
-                Math.max(MIN_LINES_NUMBER - expense.categories.length, 0),
-              ),
+              // ...repeatValue(
+              //   defaultCategory,
+              //   Math.max(MIN_LINES_NUMBER - expense.categories.length, 0),
+              // ),
             ],
           }
         : {
@@ -226,10 +226,12 @@ function ExpenseForm({
         });
         return;
       }
+
       const categories = values.categories.filter(
         (category) =>
           category.amount && category.index && category.expense_account_id,
       );
+
       const form = {
         ...values,
         publish: payload.publish,
@@ -329,10 +331,21 @@ function ExpenseForm({
   const handleClearAllLines = () => {
     formik.setFieldValue(
       'categories',
-      orderingCategoriesIndex([...repeatValue(defaultCategory, MIN_LINES_NUMBER)]),
+      orderingCategoriesIndex([
+        ...repeatValue(defaultCategory, MIN_LINES_NUMBER),
+      ]),
     );
   };
 
+  const categories = formik.values.categories.filter(
+    (category) =>
+      category.amount && category.index && category.expense_account_id,
+  );
+
+  console.log(categories, 'V');
+
+  console.log(formik.errors, 'Error');
+
   return (
     <div className={'expense-form'}>
       <form onSubmit={formik.handleSubmit}>

client/src/containers/Expenses/ExpenseFormHeader.js

@@ -22,12 +22,14 @@ import {
 } from 'components';
 import withCurrencies from 'containers/Currencies/withCurrencies';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withCustomers from 'containers/Customers/withCustomers';
 
 function ExpenseFormHeader({
   formik: { errors, touched, setFieldValue, getFieldProps, values },
   currenciesList,
   accountsList,
   accountsTypes,
+  customersItems,
 }) {
   const [selectedItems, setSelectedItems] = useState({});
 
@@ -84,10 +86,46 @@ function ExpenseFormHeader({
 
   // Filter payment accounts.
   const paymentAccounts = useMemo(
-    () => accountsList.filter(a => a?.type?.key === 'current_asset'),
+    () => accountsList.filter((a) => a?.type?.key === 'current_asset'),
     [accountsList],
   );
 
+  const CustomerRenderer = useCallback(
+    (cutomer, { handleClick }) => (
+      <MenuItem
+        key={cutomer.id}
+        text={cutomer.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  // Filter Customer
+  const filterCustomer = (query, customer, _index, exactMatch) => {
+    const normalizedTitle = customer.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${customer.display_name} ${normalizedTitle}`.indexOf(
+          normalizedQuery,
+        ) >= 0
+      );
+    }
+  };
+
+  // handle change customer
+  const onChangeCustomer = useCallback(
+    (filedName) => {
+      return (customer) => {
+        setFieldValue(filedName, customer.id);
+      };
+    },
+    [setFieldValue],
+  );
+
   return (
     <div className={'dashboard__insider--expense-form__header'}>
       <Row>
@@ -105,16 +143,16 @@ function ExpenseFormHeader({
             }
           >
             <ListSelect
-              items={[]}
+              items={customersItems}
               noResults={<MenuItem disabled={true} text="No results." />}
-              // itemRenderer={}
-              // itemPredicate={}
+              itemRenderer={CustomerRenderer}
+              itemPredicate={filterCustomer}
               popoverProps={{ minimal: true }}
-              // onItemSelect={}
-              selectedItem={values.beneficiary}
-              // selectedItemProp={'id'}
-              defaultText={<T id={'select_customer'} />}
-              labelProp={'beneficiary'}
+              onItemSelect={onChangeCustomer('customer_id')}
+              selectedItem={values.customer_id}
+              selectedItemProp={'id'}
+              defaultText={<T id={'select_customer_account'} />}
+              labelProp={'display_name'}
             />
           </FormGroup>
         </Col>
@@ -235,4 +273,7 @@ export default compose(
   withCurrencies(({ currenciesList }) => ({
     currenciesList,
   })),
+  withCustomers(({ customersItems }) => ({
+    customersItems,
+  })),
 )(ExpenseFormHeader);

client/src/containers/Expenses/Expenses.js

@@ -8,6 +8,7 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withExpensesActions from 'containers/Expenses/withExpensesActions';
 import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
+import withCustomersActions from 'containers/Customers/withCustomersActions';
 
 import { compose } from 'utils';
 
@@ -21,6 +22,9 @@ function Expenses({
 
   // #wihtCurrenciesActions
   requestFetchCurrencies,
+
+  // #withCustomersActions
+  requestFetchCustomers,
 }) {
   const history = useHistory();
   const { id } = useParams();
@@ -38,6 +42,12 @@ function Expenses({
   const fetchCurrencies = useQuery('currencies', () =>
     requestFetchCurrencies(),
   );
+
+  // Handle fetch customers data table or list
+  const fetchCustomers = useQuery('customers-table', () =>
+    requestFetchCustomers({}),
+  );
+
   const handleFormSubmit = useCallback(
     (payload) => {
       payload.redirect && history.push('/expenses-list');
@@ -54,7 +64,8 @@ function Expenses({
       loading={
         fetchExpense.isFetching ||
         fetchAccounts.isFetching ||
-        fetchCurrencies.isFetching
+        fetchCurrencies.isFetching ||
+        fetchCustomers.isFetching
       }
       name={'expense-form'}
     >
@@ -71,4 +82,5 @@ export default compose(
   withAccountsActions,
   withCurrenciesActions,
   withExpensesActions,
+  withCustomersActions,
 )(Expenses);