feat: optimize accounts performance.

feat: optimize alerts architecture.
feat: optimize datatable architecture.
feat: optimize datatable style.

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

@@ -22,7 +22,7 @@ import { transformApiErrors, transformAccountToForm } from './utils';
 import 'style/pages/Accounts/AccountFormDialog.scss';
 
 const defaultInitialValues = {
-  account_type_id: '',
+  account_type: '',
   parent_account_id: '',
   name: '',
   code: '',
@@ -51,7 +51,7 @@ function AccountFormDialogContent({
   accountId,
   action,
   parentAccountId,
-  accountTypeId,
+  accountType,
 }) {
   const { formatMessage } = useIntl();
   const isNewMode = !accountId;
@@ -72,7 +72,10 @@ function AccountFormDialogContent({
     const handleSuccess = () => {
       closeDialog(dialogName);
       queryCache.invalidateQueries('accounts-table');
-      queryCache.invalidateQueries('accounts-list');
+
+      setTimeout(() => {        
+        queryCache.invalidateQueries('accounts-list');
+      }, 1000);
 
       AppToaster.show({
         message: formatMessage(
@@ -116,7 +119,7 @@ function AccountFormDialogContent({
       transformAccountToForm(account, {
         action,
         parentAccountId,
-        accountTypeId,
+        accountType,
       }),
       defaultInitialValues,
     ),
@@ -158,7 +161,7 @@ function AccountFormDialogContent({
       >
         <AccountFormDialogFields
           dialogName={dialogName}
-          isNewMode={isNewMode}
+          action={action}
           onClose={handleClose}
         />
       </Formik>

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

@@ -30,7 +30,7 @@ import { useAutofocus } from 'hooks';
 function AccountFormDialogFields({
   // #ownPropscl
   onClose,
-  isNewMode,
+  action,
 
   // #withAccounts
   accounts,
@@ -42,7 +42,7 @@ function AccountFormDialogFields({
   return (
     <Form>
       <div className={Classes.DIALOG_BODY}>
-        <FastField name={'account_type'}>
+        <Field name={'account_type'}>
           {({ form, field: { value }, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'account_type'} />}
@@ -59,13 +59,13 @@ function AccountFormDialogFields({
                 onTypeSelected={(accountType) => {
                   form.setFieldValue('account_type', accountType.key);
                 }}
-                disabled={!isNewMode}
+                disabled={action === 'edit' || action === 'new_child'}
                 popoverProps={{ minimal: true }}
                 popoverFill={true}
               />
             </FormGroup>
           )}
-        </FastField>
+        </Field>
 
         <FastField name={'name'}>
           {({ field, meta: { error, touched } }) => (
@@ -126,7 +126,11 @@ function AccountFormDialogFields({
 
         <If condition={values.subaccount}>
           <FastField name={'parent_account_id'}>
-            {({ form, field: { value }, meta: { error, touched } }) => (
+            {({
+              form: { values, setFieldValue },
+              field: { value },
+              meta: { error, touched },
+            }) => (
               <FormGroup
                 label={<T id={'parent_account'} />}
                 className={classNames(
@@ -139,11 +143,12 @@ function AccountFormDialogFields({
                 <AccountsSelectList
                   accounts={accounts}
                   onAccountSelected={(account) => {
-                    form.setFieldValue('parent_account_id', account.id);
+                    setFieldValue('parent_account_id', account.id);
                   }}
                   defaultSelectText={<T id={'select_parent_account'} />}
                   selectedAccountId={value}
                   popoverFill={true}
+                  filterByTypes={values.account_type}
                 />
               </FormGroup>
             )}
@@ -177,7 +182,7 @@ function AccountFormDialogFields({
             style={{ minWidth: '75px' }}
             type="submit"
           >
-            {!isNewMode ? <T id={'edit'} /> : <T id={'submit'} />}
+            {action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
           </Button>
         </div>
       </div>

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

@@ -33,7 +33,7 @@ function AccountFormDialog({
           accountId={payload.id}
           action={payload.action}
           parentAccountId={payload.parentAccountId}
-          accountTypeId={payload.accountTypeId}
+          accountType={payload.accountType}
         />
       </DialogSuspense>
     </Dialog>

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

@@ -14,11 +14,11 @@ export const transformApiErrors = (errors) => {
 export const transformAccountToForm = (account, {
   action,
   parentAccountId,
-  accountTypeId
+  accountType
 }) => {
   return {
     parent_account_id: action === 'new_child' ? parentAccountId : '',
-    account_type_id: action === 'new_child'? accountTypeId : '',
+    account_type: action === 'new_child'? accountType : '',
     subaccount: action === 'new_child' ? true : false,
     ...account,
   }