feat(accoutant) : accountant preference.

2026-02-18 05:40:31 +00:00 · 2021-03-22 17:21:33 +02:00
parent b492224a83
commit 09c295f62c
6 changed files with 213 additions and 46 deletions
--- a/client/src/containers/Preferences/Accountant/Accountant.schema.js
+++ b/client/src/containers/Preferences/Accountant/Accountant.schema.js
@@ -3,8 +3,10 @@ import * as Yup from 'yup';
 const Schema = Yup.object().shape({
  accounting_basis: Yup.string().required(),
  account_code_required: Yup.boolean(),
-  customer_deposit_account: Yup.number().nullable(),
-  vendor_withdrawal_account: Yup.number().nullable(),
+  account_code_unique: Yup.boolean(),
+  deposit_account: Yup.number().nullable(),
+  withdrawal_account: Yup.number().nullable(),
+  advance_deposit: Yup.number().nullable(),
 });

 export const AccountantSchema = Schema;
--- a/client/src/containers/Preferences/Accountant/AccountantForm.js
+++ b/client/src/containers/Preferences/Accountant/AccountantForm.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, FastField, Field } from 'formik';
+import { Form, FastField, useFormikContext } from 'formik';
 import {
  FormGroup,
  RadioGroup,
@@ -9,20 +9,20 @@ import {
  Intent,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { AccountsSelectList } from 'components';
-import { FieldRequiredHint } from 'components';
+import { AccountsSelectList, FieldRequiredHint } from 'components';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-// import {  } from 'common/accountTypes';
-import { handleStringChange, saveInvoke } from 'utils';
+import { ACCOUNT_PARENT_TYPE } from 'common/accountTypes';
+import { handleStringChange, inputIntent } from 'utils';

 import { useAccountantFormContext } from './AccountantFormProvider';

-
-
 export default function AccountantForm() {
  const history = useHistory();
+
  const { formatMessage } = useIntl();

+  const { isSubmitting } = useFormikContext();
+
  const handleCloseClick = () => {
    history.go(-1);
  };
@@ -38,26 +38,60 @@ export default function AccountantForm() {
            <T id={'accounts'} />
          </strong>
        }
+        className={'accounts-checkbox'}
      >
-        <Checkbox
-          label={'Make account code required when create a new accounts.'}
-        />
-        <Checkbox
-          label={'Should account code be unique when create a new account.'}
-        />
+        {/*------------ account code required -----------*/}
+        <FastField name={'account_code_required'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Checkbox
+                inline={true}
+                label={'Make account code required when create a new accounts.'}
+                name={'account_code_required'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+        {/*------------ account code unique -----------*/}
+        <FastField name={'account_code_unique'} type={'checkbox'}>
+          {({ field }) => (
+            <FormGroup inline={true}>
+              <Checkbox
+                inline={true}
+                label={
+                  'Should account code be unique when create a new account.'
+                }
+                name={'account_code_unique'}
+                {...field}
+              />
+            </FormGroup>
+          )}
+        </FastField>
      </FormGroup>
      {/* ----------- Accounting basis ----------- */}
      <FastField name={'accounting_basis'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
+        {({
+          form: { setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
          <FormGroup
            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
            label={
              <strong>
                <T id={'accounting_basis_'} />
              </strong>
            }
          >
-            <RadioGroup inline={true}>
+            <RadioGroup
+              inline={true}
+              selectedValue={value}
+              onChange={handleStringChange((_value) => {
+                setFieldValue('accounting_basis', _value);
+              })}
+            >
              <Radio label={formatMessage({ id: 'Cash' })} value="cash" />
              <Radio label={formatMessage({ id: 'accrual' })} value="accrual" />
            </RadioGroup>
@@ -66,8 +100,12 @@ export default function AccountantForm() {
      </FastField>

      {/* ----------- Deposit customer account ----------- */}
-      <FastField name={'deposit_customer_account'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
+      <FastField name={'deposit_account'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
          <FormGroup
            label={
              <strong>
@@ -78,20 +116,28 @@ export default function AccountantForm() {
              'Select a preferred account to deposit into it after customer make payment.'
            }
            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
          >
            <AccountsSelectList
              accounts={accounts}
-              // onAccountSelected
+              onAccountSelected={({ id }) => {
+                setFieldValue('deposit_account', id);
+              }}
+              selectedAccountId={value}
              defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByTypes={['current_asset']}
+              // filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
            />
          </FormGroup>
        )}
      </FastField>

-      {/* ----------- Withdrawal customer account ----------- */}
-      <FastField name={'withdrawal_customer_account'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
+      {/* ----------- Withdrawal vendor account ----------- */}
+      <FastField name={'withdrawal_account'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
          <FormGroup
            label={
              <strong>
@@ -102,19 +148,27 @@ export default function AccountantForm() {
              'Select a preferred account to deposit into it after customer make payment.'
            }
            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
          >
            <AccountsSelectList
              accounts={accounts}
+              onAccountSelected={({ id }) => {
+                setFieldValue('withdrawal_account', id);
+              }}
+              selectedAccountId={value}
              defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByTypes={['current_asset']}
            />
          </FormGroup>
        )}
      </FastField>

      {/* ----------- Withdrawal customer account ----------- */}
-      <FastField name={'vendor_advance_deposit'}>
-        {({ form, field: { value }, meta: { error, touched } }) => (
+      <FastField name={'advance_deposit'}>
+        {({
+          form: { values, setFieldValue },
+          field: { value },
+          meta: { error, touched },
+        }) => (
          <FormGroup
            label={
              <strong>
@@ -125,17 +179,23 @@ export default function AccountantForm() {
              'Select a preferred account to deposit into it vendor advanced deposits.'
            }
            labelInfo={<FieldRequiredHint />}
+            intent={inputIntent({ error, touched })}
          >
            <AccountsSelectList
              accounts={accounts}
+              onAccountSelected={({ id }) => {
+                setFieldValue('advance_deposit', id);
+              }}
+              selectedAccountId={value}
              defaultSelectText={<T id={'select_payment_account'} />}
-              // filterByTypes={['current_asset', 'other_current_asset']}
+              // filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
            />
          </FormGroup>
        )}
      </FastField>
+
      <div className={'card__footer'}>
-        <Button intent={Intent.PRIMARY} type="submit">
+        <Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
          <T id={'save'} />
        </Button>
        <Button onClick={handleCloseClick}>
--- a/client/src/containers/Preferences/Accountant/AccountantFormPage.js
+++ b/client/src/containers/Preferences/Accountant/AccountantFormPage.js
@@ -1,28 +1,72 @@
 import React, { useEffect } from 'react';
 import classNames from 'classnames';
 import { Formik } from 'formik';
+import { pick } from 'lodash';
+import { Intent } from '@blueprintjs/core';
 import { CLASSES } from 'common/classes';
+import { AppToaster } from 'components';
+import { useIntl } from 'react-intl';
+
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import AccountantForm from './AccountantForm';
 import { AccountantSchema } from './Accountant.schema';
 import { useAccountantFormContext } from './AccountantFormProvider';
-
-import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-
-import { compose } from 'utils';
+import { transformToOptions } from './utils';
+import { compose, transformGeneralSettings } from 'utils';

 import 'style/pages/Preferences/Accounting.scss';

 // Accountant preferences.
-function AccountantFormPage({ changePreferencesPageTitle }) {
+function AccountantFormPage({
+  //# withDashboardActions
+  changePreferencesPageTitle,
+
+  // #withSettings
+  organizationSettings,
+  paymentReceiveSettings,
+  accountsSettings,
+  billPaymentSettings,
+}) {
+  const { formatMessage } = useIntl();

  const { saveSettingMutate } = useAccountantFormContext();

-  const initialValues = {};
+  const accountantSettings = {
+    ...billPaymentSettings,
+    ...accountsSettings,
+    ...pick(organizationSettings, ['accountingBasis']),
+    ...pick(paymentReceiveSettings, ['depositAccount', 'advanceDeposit']),
+  };
+
+  const initialValues = {
+    ...transformGeneralSettings(accountantSettings),
+  };

  useEffect(() => {
-    changePreferencesPageTitle('Accountant');
+    changePreferencesPageTitle(formatMessage({ id: 'accountant' }));
  }, [changePreferencesPageTitle]);

+  const handleFormSubmit = (values, { setSubmitting }) => {
+    const options = transformToOptions(values);
+    setSubmitting(true);
+    const onSuccess = () => {
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_accountant_preferences_has_been_saved',
+        }),
+        intent: Intent.SUCCESS,
+      });
+      setSubmitting(false);
+    };
+
+    const onError = (errors) => {
+      setSubmitting(false);
+    };
+    saveSettingMutate({ options }).then(onSuccess).catch(onError);
+  };
+
  return (
    <div
      className={classNames(
@@ -34,6 +78,7 @@ function AccountantFormPage({ changePreferencesPageTitle }) {
        <Formik
          initialValues={initialValues}
          validationSchema={AccountantSchema}
+          onSubmit={handleFormSubmit}
          component={AccountantForm}
        />
      </div>
@@ -41,4 +86,19 @@ function AccountantFormPage({ changePreferencesPageTitle }) {
  );
 }

-export default compose(withDashboardActions)(AccountantFormPage);
+export default compose(
+  withSettings(
+    ({
+      organizationSettings,
+      paymentReceiveSettings,
+      accountsSettings,
+      billPaymentSettings,
+    }) => ({
+      organizationSettings,
+      paymentReceiveSettings,
+      accountsSettings,
+      billPaymentSettings,
+    }),
+  ),
+  withDashboardActions,
+)(AccountantFormPage);
--- a/client/src/containers/Preferences/Accountant/utils.js
+++ b/client/src/containers/Preferences/Accountant/utils.js
@@ -0,0 +1,37 @@
+export const transformToOptions = (option) => {
+  return [
+    {
+      key: 'accounting_basis',
+      value: option.accounting_basis,
+      group: 'organization',
+    },
+    {
+      key: 'withdrawal_account',
+      value: option.withdrawal_account,
+      group: 'bill_payments',
+    },
+    {
+      key: 'deposit_account',
+      value: option.deposit_account,
+      group: 'payment_receives',
+    },
+    {
+      key: 'advance_deposit',
+      value: option.advance_deposit,
+      group: 'payment_receives',
+    },
+    {
+      key: 'account_code_required',
+      value: option.account_code_required,
+      group: 'accounts',
+    },
+    {
+      
+      key: 'account_code_unique',
+      value: option.account_code_unique,
+      group: 'accounts',
+    },
+  ];
+};
+
+
--- a/client/src/style/pages/Preferences/Accounting.scss
+++ b/client/src/style/pages/Preferences/Accounting.scss
@@ -1,4 +1,3 @@
-
 // Accountant.
 // ---------------------------------
 .preferences-page__inside-content--accountant {
@@ -13,22 +12,20 @@
      .bp3-button {
        min-width: 60px;

-        + .bp3-button{
+        + .bp3-button {
          margin-left: 10px;
        }
      }
    }
  }

-  .form-group--select-list{
-
-    button{
+  .form-group--select-list {
+    button {
      min-width: 250px;
    }
  }
  .bp3-form-group {
-    
-    .bp3-form-helper-text{
+    .bp3-form-helper-text {
      margin-top: 7px;
    }

@@ -36,4 +33,12 @@
      margin-bottom: 7px;
    }
  }
-}
+  .bp3-form-group.accounts-checkbox {
+    .bp3-form-group.bp3-inline {
+      margin-bottom: 7px;
+    }
+    .bp3-control.bp3-inline {
+      margin-bottom: 0;
+    }
+  }
+}
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -616,4 +616,7 @@ export const updateTableRow = (rowIndex, columnId, value) => (old) => {
    }
    return row;
  });
-};
+};
+export const transformGeneralSettings = (data) => {
+  return _.mapKeys(data, (value, key) => _.snakeCase(key));
+};