- feat: Update react-query package to V 2.1.1.

- feat: Favicon setup. - feat: Fix accounts inactivate/activate 1 account. - feat: Seed accounts, expenses and manual journals resource fields. - feat: Validate make journal receivable/payable without contact. - feat: Validate make journal contact without receivable or payable. - feat: More components abstractions. - feat: Use reselect.js to memorize components properties. - fix: Journal type of manual journal. - fix: Sidebar style optimization. - fix: Data-table check-box style optimization. - fix: Data-table spinner style dimensions. - fix: Submit journal with contact_id and contact_type.
2026-02-16 21:00:31 +00:00 · 2020-07-01 12:51:12 +02:00
parent 111aa83908
commit 4718f63c94
94 changed files with 1706 additions and 1001 deletions
--- a/client/src/containers/Dialogs/AccountFormDialog.container.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.container.js
@@ -1,32 +1,24 @@
 import { connect } from 'react-redux';
 import { compose } from 'utils';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import DialogReduxConnect from 'components/DialogReduxConnect';
-import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
+import withDialogRedux from 'components/DialogReduxConnect';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAccountDetail from 'containers/Accounts/withAccountDetail';
 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 },
-
-    accountId: dialogPayload?.id || null,
-  };
-};
+export const mapStateToProps = (state, props) => ({
+  dialogName: 'account-form',
+});
 const AccountFormDialogConnect = connect(mapStateToProps);

 export default compose(
  AccountFormDialogConnect,
+  withDialogRedux(null, 'account-form'),
  withAccountsActions,
  withAccountDetail,
  withAccounts(({ accountsTypes, accounts }) => ({
    accountsTypes,
    accounts,
  })),
-  DialogReduxConnect,
  withDialogActions,
 );
--- a/client/src/containers/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dialogs/AccountFormDialog.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
  Button,
  Classes,
@@ -13,23 +13,25 @@ import {
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import { omit, pick } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
-
-import Dialog from 'components/Dialog';
-import AppToaster from 'components/AppToaster';
-
+import classNames from 'classnames';
+import {
+  ListSelect,
+  ErrorMessage,
+  Dialog,
+  AppToaster,
+  FieldRequiredHint,
+  Hint,
+} from 'components';
 import AccountFormDialogContainer from 'containers/Dialogs/AccountFormDialog.container';

-import classNames from 'classnames';
-import Icon from 'components/Icon';
-import ErrorMessage from 'components/ErrorMessage';
-import { ListSelect } from 'components';
-
+/**
+ * Account form dialog.
+ */
 function AccountFormDialog({
-  name,
-  payload,
+  dialogName,
+  payload = { action: 'new', id: null },
  isOpen,

  // #withAccounts
@@ -115,7 +117,7 @@ function AccountFormDialog({
          },
        })
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            queryCache.refetchQueries('accounts-table', { force: true });

            AppToaster.show({
@@ -137,7 +139,7 @@ function AccountFormDialog({
      } else {
        requestSubmitAccount({ form: { ...omit(values, exclude) } })
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            queryCache.refetchQueries('accounts-table', { force: true });

            AppToaster.show({
@@ -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}
+      />
    );
  };

@@ -213,14 +220,14 @@ function AccountFormDialog({

  // Handles dialog close.
  const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [closeDialog, name]);
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName]);

  // Fetches accounts list.
  const fetchAccountsList = useQuery(
    'accounts-list',
    () => requestFetchAccounts(),
-    { manual: true },
+    { enabled: true },
  );

  // Fetches accounts types.
@@ -229,14 +236,14 @@ function AccountFormDialog({
    async () => {
      await requestFetchAccountTypes();
    },
-    { manual: true },
+    { enabled: true },
  );

  // Fetch the given account id on edit mode.
  const fetchAccount = useQuery(
-    payload.action === 'edit' && ['account', payload.id],
+    ['account', payload.id],
    (key, id) => requestFetchAccount(id),
-    { manual: true },
+    { enabled: false },
  );

  const isFetching =
@@ -248,8 +255,11 @@ function AccountFormDialog({
  const onDialogOpening = useCallback(() => {
    fetchAccountsList.refetch();
    fetchAccountsTypes.refetch();
-    fetchAccount.refetch();
-  }, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
+
+    if (payload.action === 'edit' && payload.id) {
+      fetchAccount.refetch();
+    }    
+  }, [payload, fetchAccount, fetchAccountsList, fetchAccountsTypes]);

  const onChangeAccountType = useCallback(
    (accountType) => {
@@ -270,12 +280,11 @@ function AccountFormDialog({
    resetForm();
  }, [resetForm]);

-  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
-
  const subAccountLabel = useMemo(() => {
    return (
      <span>
-        <T id={'sub_account'} /> <Icon icon="info-circle" iconSize={12} />
+        <T id={'sub_account'} />
+        <Hint />
      </span>
    );
  }, []);
@@ -284,7 +293,7 @@ function AccountFormDialog({

  return (
    <Dialog
-      name={name}
+      name={dialogName}
      title={
        payload.action === 'edit' ? (
          <T id={'edit_account'} />
@@ -308,7 +317,7 @@ function AccountFormDialog({
        <div className={Classes.DIALOG_BODY}>
          <FormGroup
            label={<T id={'account_type'} />}
-            labelInfo={requiredSpan}
+            labelInfo={<FieldRequiredHint />}
            className={classNames(
              'form-group--account-type',
              'form-group--select-list',
@@ -339,7 +348,7 @@ function AccountFormDialog({

          <FormGroup
            label={<T id={'account_name'} />}
-            labelInfo={requiredSpan}
+            labelInfo={<FieldRequiredHint />}
            className={'form-group--account-name'}
            intent={errors.name && touched.name && Intent.DANGER}
            helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
@@ -358,7 +367,7 @@ function AccountFormDialog({
            intent={errors.code && touched.code && Intent.DANGER}
            helperText={<ErrorMessage name="code" {...{ errors, touched }} />}
            inline={true}
-            labelInfo={infoIcon}
+            labelInfo={<Hint content={<T id='account_code_hint' />} />}
          >
            <InputGroup
              medium={true}
--- a/client/src/containers/Dialogs/CurrencyDialog.js
+++ b/client/src/containers/Dialogs/CurrencyDialog.js
@@ -15,7 +15,7 @@ import { pick } from 'lodash';

 import AppToaster from 'components/AppToaster';
 import Dialog from 'components/Dialog';
-import DialogReduxConnect from 'components/DialogReduxConnect';
+import withDialogRedux from 'components/DialogReduxConnect';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -221,22 +221,16 @@ function CurrencyDialog({
  );
 }

-const mapStateToProps = (state, props) => {
-  const dialogPayload = getDialogPayload(state, 'currency-form');
-
-  return {
-    name: 'currency-form',
-    payload: { action: 'new', currencyCode: null, ...dialogPayload },
-    currencyCode: dialogPayload?.currencyCode || null,
-  };
-};
+const mapStateToProps = (state, props) => ({
+  dialogName: 'currency-form',
+});

 const withCurrencyFormDialog = connect(mapStateToProps);

 export default compose(
  withCurrencyFormDialog,
-  withDialogActions,
-  DialogReduxConnect,
-  withCurrenciesActions,
+  withDialogRedux(null, 'currency-form'),
  withCurrency,
+  withDialogActions,
+  withCurrenciesActions,
 )(CurrencyDialog);
--- a/client/src/containers/Dialogs/ExchangeRateDialog.container.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.container.js
@@ -1,35 +1,29 @@
 import { connect } from 'react-redux';
 import { compose } from 'utils';
-import { getDialogPayload } from 'store/dashboard/dashboard.reducer';

 import withDialogActions from 'containers/Dialog/withDialogActions';
-import DialogReduxConnect from 'components/DialogReduxConnect';
+import withDialogRedux from 'components/DialogReduxConnect';

 import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
 import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';  
 import withCurrencies from 'containers/Currencies/withCurrencies';


-const mapStateToProps = (state, props) => {
-  const dialogPayload = getDialogPayload(state, 'exchangeRate-form');
-
-  return {
-    name: 'exchangeRate-form',
-    payload: { action: 'new', id: null, ...dialogPayload },
-  };
-};
+const mapStateToProps = (state, props) => ({
+  dialogName: 'exchangeRate-form',
+});

 const withExchangeRateDialog = connect(mapStateToProps);

 export default compose(
  withExchangeRateDialog,
+  withDialogRedux(null, 'exchangeRate-form'),
  withCurrencies(({ currenciesList }) => ({
    currenciesList,
  })),
-  withExchangeRatesActions,
  withExchangeRates(({ exchangeRatesList }) => ({
    exchangeRatesList,
  })),
-  DialogReduxConnect,
+  withExchangeRatesActions,
  withDialogActions,
 );
--- a/client/src/containers/Dialogs/ExchangeRateDialog.js
+++ b/client/src/containers/Dialogs/ExchangeRateDialog.js
@@ -16,18 +16,21 @@ import { useQuery, queryCache } from 'react-query';
 import moment from 'moment';
 import { DateInput } from '@blueprintjs/datetime';
 import { momentFormatter } from 'utils';
-
-import AppToaster from 'components/AppToaster';
-
-import Dialog from 'components/Dialog';
-import ErrorMessage from 'components/ErrorMessage';
+import { 
+  AppToaster,
+  Dialog,
+  ErrorMessage,
+  ListSelect,
+} from 'components';
 import classNames from 'classnames';
-import { ListSelect } from 'components';
 import withExchangeRatesDialog from './ExchangeRateDialog.container';

+/**
+ * Exchange rate dialog.
+ */
 function ExchangeRateDialog({
-  name,
-  payload,
+  dialogName,
+  payload = {},
  isOpen,

  // #withDialog
@@ -91,7 +94,7 @@ function ExchangeRateDialog({
      if (payload.action === 'edit') {
        requestEditExchangeRate(payload.id, values)
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            AppToaster.show({
              message: formatMessage({
                id: 'the_exchange_rate_has_been_successfully_edited',
@@ -107,7 +110,7 @@ function ExchangeRateDialog({
      } else {
        requestSubmitExchangeRate(values)
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            AppToaster.show({
              message: formatMessage({
                id: 'the_exchange_rate_has_been_successfully_created',
@@ -136,13 +139,13 @@ function ExchangeRateDialog({
  const requiredSpan = useMemo(() => <span class="required">*</span>, []);

  const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [name, closeDialog]);
+    closeDialog(dialogName);
+  }, [dialogName, closeDialog]);

  const onDialogClosed = useCallback(() => {
    resetForm();
-    closeDialog(name);
-  }, [closeDialog, name, resetForm]);
+    closeDialog(dialogName);
+  }, [closeDialog, dialogName, resetForm]);

  const onDialogOpening = useCallback(() => {
    fetchExchangeRatesDialog.refetch();
@@ -197,7 +200,7 @@ function ExchangeRateDialog({

  return (
    <Dialog
-      name={name}
+      name={dialogName}
      title={
        payload.action === 'edit' ? (
          <T id={'edit_exchange_rate'} />
--- a/client/src/containers/Dialogs/ItemCategoryDialog.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog.js
@@ -24,9 +24,8 @@ import { ListSelect } from 'components';

 import Dialog from 'components/Dialog';
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import DialogReduxConnect from 'components/DialogReduxConnect';
+import withDialogRedux from 'components/DialogReduxConnect';

-import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
 import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
 import withItemCategories from 'containers/Items/withItemCategories';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
@@ -34,7 +33,7 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 import Icon from 'components/Icon';

 function ItemCategoryDialog({
-  name,
+  dialogName,
  payload,
  isOpen,

@@ -99,7 +98,7 @@ function ItemCategoryDialog({
      if (payload.action === 'edit') {
        requestEditItemCategory(payload.id, values)
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            AppToaster.show({
              message: formatMessage({
                id: 'the_item_category_has_been_successfully_edited',
@@ -117,7 +116,7 @@ function ItemCategoryDialog({
      } else {
        requestSubmitItemCategory(values)
          .then((response) => {
-            closeDialog(name);
+            closeDialog(dialogName);
            AppToaster.show({
              message: formatMessage({
                id: 'the_item_category_has_been_successfully_created',
@@ -165,8 +164,8 @@ function ItemCategoryDialog({

  // Handle the dialog closing.
  const handleClose = useCallback(() => {
-    closeDialog(name);
-  }, [name, closeDialog]);
+    closeDialog(dialogName);
+  }, [dialogName, closeDialog]);

  // Handle the dialog opening.
  const onDialogOpening = useCallback(() => {
@@ -183,15 +182,15 @@ function ItemCategoryDialog({

  const onDialogClosed = useCallback(() => {
    resetForm();
-    closeDialog(name);
-  }, [resetForm, closeDialog, name]);
+    closeDialog(dialogName);
+  }, [resetForm, closeDialog, dialogName]);

  const requiredSpan = useMemo(() => <span class="required">*</span>, []);
  const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);

  return (
    <Dialog
-      name={name}
+      name={dialogName}
      title={
        payload.action === 'edit' ? (
          <T id={'edit_category'} />
@@ -303,23 +302,17 @@ function ItemCategoryDialog({
  );
 }

-const mapStateToProps = (state, props) => {
-  const dialogPayload = getDialogPayload(state, 'item-category-form');
-
-  return {
-    name: 'item-category-form',
-    payload: { action: 'new', id: null, ...dialogPayload },
-    itemCategoryId: dialogPayload?.id || null,
-  };
-};
+const mapStateToProps = (state, props) => ({
+  itemCategoryId: props?.dialogPayload?.id || null,
+});

 const withItemCategoryDialog = connect(mapStateToProps);

 export default compose(
+  withDialogRedux(null, 'item-category-form'),
  withItemCategoryDialog,
  withDialogActions,
-  DialogReduxConnect,
-  withItemCategoryDetail,
+  withItemCategoryDetail(),
  withItemCategories(({ categoriesList }) => ({
    categoriesList,
  })),