WIP / fix_accounts

client/src/containers/Accounts/AccountsChart.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { Alert, Intent } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -136,16 +136,22 @@ function AccountsChart({
   }, []);
 
   // Handle confirm account activation.
+
   const handleConfirmAccountActive = useCallback(() => {
-    requestInactiveAccount(inactiveAccount.id).then(() => {
-      setInactiveAccount(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_inactivated',
-        }),
-        intent: Intent.SUCCESS,
+    requestInactiveAccount(inactiveAccount.id)
+      .then(() => {
+        setInactiveAccount(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_account_has_been_successfully_inactivated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.refetchQueries('accounts-table', { force: true });
+      })
+      .catch((error) => {
+        setInactiveAccount(false);
       });
-    });
   }, [inactiveAccount, requestInactiveAccount, formatMessage]);
 
   // Handle activate account click.
@@ -160,16 +166,21 @@ function AccountsChart({
 
   // Handle activate account confirm.
   const handleConfirmAccountActivate = useCallback(() => {
-    requestActivateAccount(activateAccount.id).then(() => {
-      setActivateAccount(false);
-      AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_activated',
-        }),
-        intent: Intent.SUCCESS,
+    requestActivateAccount(activateAccount.id)
+      .then(() => {
+        setActivateAccount(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_account_has_been_successfully_activated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.refetchQueries('accounts-table', { force: true });
+      })
+      .catch((error) => {
+        setActivateAccount(false);
       });
-    });
-  });
+  }, [activateAccount, requestActivateAccount, formatMessage]);
 
   const handleRestoreAccount = (account) => {};
 
@@ -341,7 +352,6 @@ function AccountsChart({
               onEditAccount={handleEditAccount}
               onFetchData={handleFetchData}
               onSelectedRowsChange={handleSelectedRowsChange}
-        
             />
           </Route>
         </Switch>

client/src/containers/Accounts/AccountsDataTable.js

@@ -69,7 +69,12 @@ function AccountsDataTable({
 
   const handleNewParentAccount = useCallback(
     (account) => {
-      openDialog('account-form', { action: 'new_child', id: account.id });
+      openDialog('account-form', {
+        action: 'new_child',
+        parentAccountId: account.id,
+        accountTypeId: account.account_type_id,
+        subaccount: true,
+      });
     },
     [openDialog],
   );

client/src/containers/Accounts/withAccountsActions.js

@@ -10,7 +10,7 @@ import {
   deleteBulkAccounts,
   bulkActivateAccounts,
   bulkInactiveAccounts,
-  editAccount
+  editAccount,
 } from 'store/accounts/accounts.actions';
 
 const mapActionsToProps = (dispatch) => ({
@@ -22,9 +22,9 @@ const mapActionsToProps = (dispatch) => ({
   requestActivateAccount: (id) => dispatch(activateAccount({ id })),
   requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
   requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
-  requestBulkActivateAccounts:(ids)=>dispatch(bulkActivateAccounts({ids})),
-  requestBulkInactiveAccounts:(ids)=>dispatch(bulkInactiveAccounts({ids})),
-  requestEditAccount:({id,form}) => dispatch(editAccount({id,form}))
+  requestBulkActivateAccounts: (ids) => dispatch(bulkActivateAccounts({ ids })),
+  requestBulkInactiveAccounts: (ids) => dispatch(bulkInactiveAccounts({ ids })),
+  requestEditAccount: (id, form) => dispatch(editAccount(id, form)),
 });
 
-export default connect(null, mapActionsToProps);
+export default connect(null, mapActionsToProps);

client/src/containers/Dialogs/AccountFormDialog.container.js

@@ -9,7 +9,6 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 export const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'account-form');
-
   return {
     name: 'account-form',
     payload: { action: 'new', id: null, ...dialogPayload },

client/src/containers/Dialogs/AccountFormDialog.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Button,
   Classes,
@@ -13,7 +13,7 @@ import {
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
+import { If } from 'components';
 import { omit, pick } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
 
@@ -59,14 +59,16 @@ function AccountFormDialog({
       .nullable()
       .required()
       .label(formatMessage({ id: 'account_type_id' })),
-    description: Yup.string().trim(),
+    description: Yup.string().nullable().trim(),
+    // parent_account_id: Yup.string().nullable(),
   });
-
   const initialValues = useMemo(
     () => ({
       account_type_id: null,
       name: '',
       description: '',
+      code: '',
+      type: '',
     }),
     [],
   );
@@ -92,7 +94,11 @@ function AccountFormDialog({
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      ...(payload.action === 'edit' && account ? account : initialValues),
+      // ...initialValues,
+      // ...(payload.action === 'edit' && account ? account : initialValues),
+
+      ...(payload.action === 'edit' &&
+        pick(account, Object.keys(initialValues))),
     },
     validationSchema: accountFormValidationSchema,
     onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -102,22 +108,12 @@ function AccountFormDialog({
         : values.name;
 
       if (payload.action === 'edit') {
-        requestEditAccount({
-          payload: payload.id,
-          // form: { ...omit(values, [...exclude, 'account_type_id']) },
-          form: {
-            ...pick(values, [
-              ...exclude,
-              'account_type_id',
-              'name',
-              'description',
-            ]),
-          },
-        })
+        requestEditAccount(payload.id, values)
           .then((response) => {
-            closeDialog(name);
             queryCache.refetchQueries('accounts-table', { force: true });
 
+            closeDialog(name);
+
             AppToaster.show({
               message: formatMessage(
                 { id: 'service_has_been_successful_edited' },
@@ -135,7 +131,10 @@ function AccountFormDialog({
             setSubmitting(false);
           });
       } else {
-        requestSubmitAccount({ form: { ...omit(values, exclude) } })
+        requestSubmitAccount({
+          payload: payload.parent_account_id,
+          form: { ...omit(values, exclude) },
+        })
           .then((response) => {
             closeDialog(name);
             queryCache.refetchQueries('accounts-table', { force: true });
@@ -161,6 +160,9 @@ function AccountFormDialog({
     },
   });
 
+  const handlechange = useCallback((newChecked) => {
+    setChecked(newChecked);
+  }, []);
   // Filtered accounts based on the given account type.
   const filteredAccounts = useMemo(
     () =>
@@ -190,7 +192,12 @@ function AccountFormDialog({
   // Account item of select accounts field.
   const accountItem = (item, { handleClick, modifiers, query }) => {
     return (
-      <MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
+      <MenuItem
+        text={item.name}
+        label={item.code}
+        key={item.id}
+        onClick={handleClick}
+      />
     );
   };
 
@@ -211,6 +218,8 @@ function AccountFormDialog({
     [],
   );
 
+  console.log(values, 'Values');
+
   // Handles dialog close.
   const handleClose = useCallback(() => {
     closeDialog(name);
@@ -234,7 +243,15 @@ function AccountFormDialog({
 
   // Fetch the given account id on edit mode.
   const fetchAccount = useQuery(
-    payload.action === 'edit' && ['account', payload.id],
+    (payload.action === 'edit' && ['account', payload.id]) ||
+      (payload.action === 'new_child' && ['account', payload.parentAccountId]),
+    // payload.action === 'new_child' ||
+    //   (payload.action === 'edit' && [
+    //     'account',
+
+    //     payload.id,
+    //     payload.parentAccountId,
+    //   ]),
     (key, id) => requestFetchAccount(id),
     { manual: true },
   );
@@ -249,6 +266,13 @@ function AccountFormDialog({
     fetchAccountsList.refetch();
     fetchAccountsTypes.refetch();
     fetchAccount.refetch();
+
+    if (payload.action === 'new_child') {
+      // sub account checkbox should be equal true.
+      setFieldValue('subaccount', payload.subaccount);
+      setFieldValue('parent_account_id', payload.parentAccountId);
+      setFieldValue('account_type_id', payload.accountTypeId);
+    }
   }, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
 
   const onChangeAccountType = useCallback(
@@ -376,10 +400,11 @@ function AccountFormDialog({
               inline={true}
               label={subAccountLabel}
               {...getFieldProps('subaccount')}
+              checked={values.subaccount}
             />
           </FormGroup>
-
-          {values.subaccount && (
+          <If condition={values.subaccount}>
+            {/* {values.subaccount && ( */}
             <FormGroup
               label={<T id={'parent_account'} />}
               className={classNames(
@@ -402,8 +427,8 @@ function AccountFormDialog({
                 labelProp={'name'}
               />
             </FormGroup>
-          )}
-
+            {/* )} */}
+          </If>
           <FormGroup
             label={<T id={'description'} />}
             className={'form-group--description'}

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -67,8 +67,10 @@ function ExchangeRateDialog({
     [],
   );
 
-  const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog', () =>
-    requestFetchExchangeRates(),
+  const fetchExchangeRatesDialog = useQuery(
+    'exchange-rates-dialog',
+    () => requestFetchExchangeRates(),
+    { manual: true },
   );
 
   const {

client/src/containers/Views/ViewForm.js

@@ -78,8 +78,8 @@ function ViewForm({
 
   const validationSchema = Yup.object().shape({
     resource_name: Yup.string().required(),
-    name: Yup.string().required(),
-    logic_expression: Yup.string().required(),
+    name: Yup.string().required().label(intl.formatMessage({id:'name_'})),
+    logic_expression: Yup.string().required().label(intl.formatMessage({id:'logic_expression'})),
     roles: Yup.array().of(
       Yup.object().shape({
         comparator: Yup.string().required(),