QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-21 15:20:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webapp): general, accoutant and items preferences

Browse Source
This commit is contained in:
a.bouhuolia
2023-05-11 01:47:09 +02:00
parent 883c5dcb41
commit 2344d3d34d
15 changed files with 269 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/webapp/package-lock.json generated
View File

@@ -1205,9 +1205,9 @@
} }
}, },
"@blueprintjs-formik/core": { "@blueprintjs-formik/core": {
"version": "0.2.1", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.2.1.tgz", "resolved": "https://registry.npmjs.org/@blueprintjs-formik/core/-/core-0.3.3.tgz",
"integrity": "sha512-YGJe+QorDGbkWDSUg6x69LYGN62Kgvb92Iz/voqmszVRKj4KcoPvd/7coF8Jmu+ZQE6LcwM/9ccB2i63L99ITA==", "integrity": "sha512-ko7g54YSEcSq2K/GEpmiTG0foGLqe7DwgXGhkGxYEiHhLAUv8WvQmrFsm8e/KOW7n8mLGq0uaZVe2l8m3JTGGQ==",
"requires": { "requires": {
"lodash.get": "^4.4.2", "lodash.get": "^4.4.2",
"lodash.keyby": "^4.6.0", "lodash.keyby": "^4.6.0",
@@ -7298,6 +7298,11 @@
"locate-path": "^3.0.0" "locate-path": "^3.0.0"
} }
}, },
"flat": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
"integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ=="
},
"flat-cache": { "flat-cache": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",

3
packages/webapp/package.json
View File

@@ -3,7 +3,7 @@
"version": "1.7.1", "version": "1.7.1",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@blueprintjs-formik/core": "^0.2.1", "@blueprintjs-formik/core": "^0.3.3",
"@blueprintjs-formik/datetime": "^0.3.4", "@blueprintjs-formik/datetime": "^0.3.4",
"@blueprintjs-formik/select": "^0.2.3", "@blueprintjs-formik/select": "^0.2.3",
"@blueprintjs/core": "^3.50.2", "@blueprintjs/core": "^3.50.2",
@@ -45,6 +45,7 @@
"deepdash": "^5.3.9", "deepdash": "^5.3.9",
"dependency-graph": "^0.11.0", "dependency-graph": "^0.11.0",
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"flat": "^5.0.2",
"formik": "^2.2.5", "formik": "^2.2.5",
"http-proxy-middleware": "^1.0.0", "http-proxy-middleware": "^1.0.0",
"jest": "24.9.0", "jest": "24.9.0",

2
packages/webapp/src/components/Forms/Select.tsx
View File

@@ -46,7 +46,7 @@ const SelectButton = styled(Button)`
margin-right: 12px; margin-right: 12px;
border-radius: 1px; border-radius: 1px;
} }
&:not([class*='bp3-intent-']) { &:not([class*='bp3-intent-']):not(.bp3-disabled) {
&, &,
&:hover { &:hover {
background: #fff; background: #fff;

18
packages/webapp/src/containers/Preferences/Accountant/Accountant.schema.tsx
View File

@@ -2,12 +2,18 @@
import * as Yup from 'yup'; import * as Yup from 'yup';
const Schema = Yup.object().shape({ const Schema = Yup.object().shape({
accounting_basis: Yup.string().required(), organization: Yup.object({
account_code_required: Yup.boolean().nullable(), accountingBasis: Yup.string().required(),
account_code_unique: Yup.boolean().nullable(), }),
withdrawal_account: Yup.number().nullable(), accounts: Yup.object({
preferred_deposit_account: Yup.number().nullable(), accountCodeRequired: Yup.boolean().nullable(),
preferred_advance_deposit: Yup.number().nullable(), accountCodeUnique: Yup.boolean().nullable(),
}),
paymentReceives: Yup.object({
preferredDepositAccount: Yup.number().nullable(),
preferredAdvanceDeposit: Yup.number().nullable(),
withdrawalAccount: Yup.number().nullable(),
})
}); });
export const AccountantSchema = Schema; export const AccountantSchema = Schema;

137
packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
View File

@@ -1,16 +1,9 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { Form, FastField, useFormikContext } from 'formik'; import { Form, useFormikContext } from 'formik';
import styled from 'styled-components'; import styled from 'styled-components';
import { import { FormGroup, Radio, Button, Intent } from '@blueprintjs/core';
FormGroup,
RadioGroup,
Radio,
Checkbox,
Button,
Intent,
} from '@blueprintjs/core';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { import {
@@ -19,8 +12,9 @@ import {
FieldRequiredHint, FieldRequiredHint,
CardFooterActions, CardFooterActions,
FFormGroup, FFormGroup,
FCheckbox,
FRadioGroup,
} from '@/components'; } from '@/components';
import { handleStringChange, inputIntent } from '@/utils';
import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useAccountantFormContext } from './AccountantFormProvider'; import { useAccountantFormContext } from './AccountantFormProvider';
@@ -30,7 +24,6 @@ import { useAccountantFormContext } from './AccountantFormProvider';
export default function AccountantForm() { export default function AccountantForm() {
const history = useHistory(); const history = useHistory();
const { accounts } = useAccountantFormContext(); const { accounts } = useAccountantFormContext();
const { isSubmitting } = useFormikContext(); const { isSubmitting } = useFormikContext();
const handleCloseClick = () => { const handleCloseClick = () => {
@@ -48,78 +41,54 @@ export default function AccountantForm() {
} }
className={'accounts-checkbox'} className={'accounts-checkbox'}
> >
{/*------------ Account code (required) -----------*/} {/*------------ Account Code (required) -----------*/}
<FastField name={'account_code_required'} type={'checkbox'}> <FFormGroup inline={true} name={'accounts.accountCodeRequired'}>
{({ field }) => ( <FCheckbox
<FormGroup inline={true}> inline={true}
<Checkbox label={
inline={true} <T id={'make_account_code_required_when_create_a_new_accounts'} />
label={ }
<T name={'accounts.accountCodeRequired'}
id={'make_account_code_required_when_create_a_new_accounts'} />
/> </FFormGroup>
}
name={'account_code_required'}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ Account code (unique) -----------*/} {/*------------ Account Code (unique) -----------*/}
<FastField name={'account_code_unique'} type={'checkbox'}> <FFormGroup
{({ field }) => ( name={'accounts.accountCodeUnique'}
<FormGroup inline={true}> type={'checkbox'}
<Checkbox inline={true}
inline={true} >
label={ <FCheckbox
<T inline={true}
id={ label={
'should_account_code_be_unique_when_create_a_new_account' <T
} id={'should_account_code_be_unique_when_create_a_new_account'}
/>
}
name={'account_code_unique'}
{...field}
/> />
</FormGroup> }
)} name={'accounts.accountCodeUnique'}
</FastField> />
</FFormGroup>
</FormGroup> </FormGroup>
{/* ----------- Accounting basis ----------- */} {/* ----------- Accounting Basis ----------- */}
<FastField name={'accounting_basis'}> <FormGroup
{({ name={'organization.accountingBasis'}
form: { setFieldValue }, labelInfo={<FieldRequiredHint />}
field: { value }, label={
meta: { error, touched }, <strong>
}) => ( <T id={'accounting_basis_'} />
<FormGroup </strong>
labelInfo={<FieldRequiredHint />} }
intent={inputIntent({ error, touched })} >
label={ <FRadioGroup name={'organization.accountingBasis'} inline={true}>
<strong> <Radio label={intl.get('cash')} value="cash" />
<T id={'accounting_basis_'} /> <Radio label={intl.get('accrual')} value="accrual" />
</strong> </FRadioGroup>
} </FormGroup>
>
<RadioGroup
inline={true}
selectedValue={value}
onChange={handleStringChange((_value) => {
setFieldValue('accounting_basis', _value);
})}
>
<Radio label={intl.get('cash')} value="cash" />
<Radio label={intl.get('accrual')} value="accrual" />
</RadioGroup>
</FormGroup>
)}
</FastField>
{/* ----------- Deposit customer account ----------- */} {/* ----------- Deposit Customer Account ----------- */}
<AccountantFormGroup <AccountantFormGroup
name={'preferred_deposit_account'} name={'paymentReceives.preferredDepositAccount'}
label={ label={
<strong> <strong>
<T id={'deposit_customer_account'} /> <T id={'deposit_customer_account'} />
@@ -136,7 +105,7 @@ export default function AccountantForm() {
fastField={true} fastField={true}
> >
<AccountsSelect <AccountsSelect
name={'preferred_deposit_account'} name={'paymentReceives.preferredDepositAccount'}
items={accounts} items={accounts}
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByTypes={[ filterByTypes={[
@@ -148,9 +117,9 @@ export default function AccountantForm() {
/> />
</AccountantFormGroup> </AccountantFormGroup>
{/* ----------- Withdrawal vendor account ----------- */} {/* ----------- Withdrawal Vendor Account ----------- */}
<AccountantFormGroup <AccountantFormGroup
name={'withdrawal_account'} name={'billPayments.withdrawalAccount'}
label={ label={
<strong> <strong>
<T id={'withdrawal_vendor_account'} /> <T id={'withdrawal_vendor_account'} />
@@ -167,7 +136,7 @@ export default function AccountantForm() {
fastField={true} fastField={true}
> >
<AccountsSelect <AccountsSelect
name={'withdrawal_account'} name={'billPayments.withdrawalAccount'}
items={accounts} items={accounts}
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByTypes={[ filterByTypes={[
@@ -179,9 +148,9 @@ export default function AccountantForm() {
/> />
</AccountantFormGroup> </AccountantFormGroup>
{/* ----------- Withdrawal customer account ----------- */} {/* ----------- Withdrawal Customer Account ----------- */}
<AccountantFormGroup <AccountantFormGroup
name={'preferred_advance_deposit'} name={'paymentReceives.preferredAdvanceDeposit'}
label={ label={
<strong> <strong>
<T id={'customer_advance_deposit'} /> <T id={'customer_advance_deposit'} />
@@ -198,7 +167,7 @@ export default function AccountantForm() {
fastField={true} fastField={true}
> >
<AccountsSelect <AccountsSelect
name={'preferred_advance_deposit'} name={'paymentReceives.preferredAdvanceDeposit'}
items={accounts} items={accounts}
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]} filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}

72
packages/webapp/src/containers/Preferences/Accountant/AccountantFormPage.tsx
View File

@@ -1,55 +1,66 @@
// @ts-nocheck // @ts-nocheck
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import * as R from 'ramda';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { Formik } from 'formik'; import { Formik } from 'formik';
import { pick } from 'lodash';
import { Intent } from '@blueprintjs/core'; import { Intent } from '@blueprintjs/core';
import { flatten, unflatten } from 'flat';
import { AppToaster } from '@/components'; import { AppToaster } from '@/components';
import withDashboardActions from '@/containers/Dashboard/withDashboardActions'; import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
import withSettings from '@/containers/Settings/withSettings'; import withSettings from '@/containers/Settings/withSettings';
import AccountantForm from './AccountantForm'; import AccountantForm from './AccountantForm';
import { AccountantSchema } from './Accountant.schema'; import { AccountantSchema } from './Accountant.schema';
import { useAccountantFormContext } from './AccountantFormProvider'; import { useAccountantFormContext } from './AccountantFormProvider';
import { transformToOptions } from './utils'; import { transferObjectOptionsToArray } from './utils';
import { compose, transformGeneralSettings } from '@/utils'; import { compose, transformToForm, transfromToSnakeCase } from '@/utils';
import '@/style/pages/Preferences/Accounting.scss'; import '@/style/pages/Preferences/Accounting.scss';
const defaultFormValues = flatten({
organization: {
accountingBasis: '',
},
accounts: {
accountCodeRequired: false,
accountCodeUnique: false,
},
billPayments: {
withdrawalAccount: '',
},
paymentReceives: {
preferredDepositAccount: '',
preferredAdvanceDeposit: '',
},
});
// Accountant preferences. // Accountant preferences.
function AccountantFormPage({ function AccountantFormPage({
//# withDashboardActions //# withDashboardActions
changePreferencesPageTitle, changePreferencesPageTitle,
// #withSettings // #withSettings
organizationSettings, allSettings,
paymentReceiveSettings,
accountsSettings,
billPaymentSettings,
}) { }) {
const { saveSettingMutate } = useAccountantFormContext(); const { saveSettingMutate } = useAccountantFormContext();
const accountantSettings = {
...billPaymentSettings,
...accountsSettings,
...pick(organizationSettings, ['accountingBasis']),
...pick(paymentReceiveSettings, ['preferredDepositAccount', 'preferredAdvanceDeposit']),
};
const initialValues = {
...transformGeneralSettings(accountantSettings),
};
useEffect(() => { useEffect(() => {
changePreferencesPageTitle(intl.get('accountant')); changePreferencesPageTitle(intl.get('accountant'));
}, [changePreferencesPageTitle]); }, [changePreferencesPageTitle]);
const initialValues = unflatten({
...defaultFormValues,
...transformToForm(flatten(allSettings), defaultFormValues),
});
// Handle the form submitting.
const handleFormSubmit = (values, { setSubmitting }) => { const handleFormSubmit = (values, { setSubmitting }) => {
const options = transformToOptions(values); const options = R.compose(
transferObjectOptionsToArray,
transfromToSnakeCase,
)(values);
setSubmitting(true); setSubmitting(true);
const onSuccess = () => { const onSuccess = () => {
AppToaster.show({ AppToaster.show({
message: intl.get('the_accountant_preferences_has_been_saved'), message: intl.get('the_accountant_preferences_has_been_saved'),
@@ -57,8 +68,7 @@ function AccountantFormPage({
}); });
setSubmitting(false); setSubmitting(false);
}; };
const onError = () => {
const onError = (errors) => {
setSubmitting(false); setSubmitting(false);
}; };
saveSettingMutate({ options }).then(onSuccess).catch(onError); saveSettingMutate({ options }).then(onSuccess).catch(onError);
@@ -75,18 +85,8 @@ function AccountantFormPage({
} }
export default compose( export default compose(
withSettings( withSettings(({ allSettings }) => ({
({ allSettings,
organizationSettings, })),
paymentReceiveSettings,
accountsSettings,
billPaymentSettings,
}) => ({
organizationSettings,
paymentReceiveSettings,
accountsSettings,
billPaymentSettings,
}),
),
withDashboardActions, withDashboardActions,
)(AccountantFormPage); )(AccountantFormPage);

4
packages/webapp/src/containers/Preferences/Accountant/AccountantFormProvider.tsx
View File

@@ -17,7 +17,7 @@ function AccountantFormProvider({ ...props }) {
// Fetches the accounts list. // Fetches the accounts list.
const { isLoading: isAccountsLoading, data: accounts } = useAccounts(); const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
//Fetches Organization Settings. // Fetches Organization Settings.
const { isLoading: isSettingsLoading } = useSettings(); const { isLoading: isSettingsLoading } = useSettings();
// Save Organization Settings. // Save Organization Settings.
@@ -29,7 +29,7 @@ function AccountantFormProvider({ ...props }) {
isAccountsLoading, isAccountsLoading,
saveSettingMutate, saveSettingMutate,
}; };
// Detarmines whether if any query is loading.
const isLoading = isSettingsLoading || isAccountsLoading; const isLoading = isSettingsLoading || isAccountsLoading;
return ( return (

40
packages/webapp/src/containers/Preferences/Accountant/utils.tsx
View File

@@ -1,38 +1,6 @@
// @ts-nocheck // @ts-nocheck
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: 'preferred_deposit_account',
value: option.preferred_deposit_account,
group: 'payment_receives',
},
{
key: 'preferred_advance_deposit',
value: option.preferred_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',
},
];
};
export const transferObjectOptionsToArray = (input) =>
Object.entries(input).flatMap(([group, options]) =>
Object.entries(options).map(([key, value]) => ({ group, key, value })),
);

11
packages/webapp/src/containers/Preferences/Currencies/CurrenciesDataTable.tsx
View File

@@ -10,6 +10,7 @@ import { ActionMenuList, useCurrenciesTableColumns } from './components';
import withDialogActions from '@/containers/Dialog/withDialogActions'; import withDialogActions from '@/containers/Dialog/withDialogActions';
import withAlertActions from '@/containers/Alert/withAlertActions'; import withAlertActions from '@/containers/Alert/withAlertActions';
import styled from 'styled-components';
/** /**
* Currencies table. * Currencies table.
@@ -46,7 +47,7 @@ function CurrenciesDataTable({
}; };
return ( return (
<DataTable <CurrencieDataTable
columns={columns} columns={columns}
data={currencies} data={currencies}
loading={isCurrenciesLoading} loading={isCurrenciesLoading}
@@ -68,3 +69,11 @@ export default compose(
withDialogActions, withDialogActions,
withAlertActions, withAlertActions,
)(CurrenciesDataTable); )(CurrenciesDataTable);
const CurrencieDataTable = styled(DataTable)`
.table .th,
.table .td {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
`;

267
packages/webapp/src/containers/Preferences/General/GeneralForm.tsx
View File

@@ -9,9 +9,11 @@ import { ErrorMessage, FastField } from 'formik';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { import {
ListSelect,
FieldRequiredHint, FieldRequiredHint,
FormattedMessage as T, FormattedMessage as T,
FFormGroup,
FInputGroup,
FSelect,
} from '@/components'; } from '@/components';
import { inputIntent } from '@/utils'; import { inputIntent } from '@/utils';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
@@ -46,153 +48,108 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
return ( return (
<Form> <Form>
{/* ---------- Organization name ---------- */} {/* ---------- Organization name ---------- */}
<FastField name={'name'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'name'}
<FormGroup label={<T id={'organization_name'} />}
label={<T id={'organization_name'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
inline={true} helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
intent={inputIntent({ error, touched })} >
className={'form-group--org-name'} <FInputGroup medium={'true'} name={'name'} />
helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />} </FFormGroup>
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
{/* ---------- Industry ---------- */} {/* ---------- Industry ---------- */}
<FastField name={'industry'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'industry'}
<FormGroup label={<T id={'organization_industry'} />}
label={<T id={'organization_industry'} />} inline={true}
inline={true} >
intent={inputIntent({ error, touched })} <FInputGroup name={'industry'} medium={'true'} />
helperText={<ErrorMessage name="industry" />} </FFormGroup>
className={'form-group--org-industry'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
{/* ---------- Location ---------- */} {/* ---------- Location ---------- */}
<FastField name={'location'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'location'}
<FormGroup label={<T id={'business_location'} />}
label={<T id={'business_location'} />} inline={true}
className={classNames( >
'form-group--business-location', <FSelect
CLASSES.FILL, name={'location'}
)} items={Countries}
inline={true} valueAccessor={'countryCode'}
helperText={<ErrorMessage name="location" />} labelAccessor={'countryCode'}
intent={inputIntent({ error, touched })} textAccessor={'name'}
> placeholder={<T id={'select_business_location'} />}
<ListSelect popoverProps={{ minimal: true }}
items={Countries} />
onItemSelect={({ value }) => { </FFormGroup>
form.setFieldValue('location', value);
}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
{/* ---------- Base currency ---------- */} {/* ---------- Base currency ---------- */}
<FastField <FFormGroup
name={'base_currency'} name={'base_currency'}
baseCurrencyDisabled={baseCurrencyDisabled} baseCurrencyDisabled={baseCurrencyDisabled}
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
helperText={
<T
id={'you_can_t_change_the_base_currency_as_there_are_transactions'}
/>
}
fastField={true}
shouldUpdate={shouldBaseCurrencyUpdate} shouldUpdate={shouldBaseCurrencyUpdate}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <FSelect
<FormGroup name={'base_currency'}
label={<T id={'base_currency'} />} items={Currencies}
labelInfo={<FieldRequiredHint />} valueAccessor={'key'}
className={classNames('form-group--base-currency', CLASSES.FILL)} textAccessor={'name'}
inline={true} labelAccessor={'key'}
intent={inputIntent({ error, touched })} placeholder={<T id={'select_base_currency'} />}
helperText={ popoverProps={{ minimal: true }}
<T disabled={baseCurrencyDisabled}
id={ fastField={true}
'you_can_t_change_the_base_currency_as_there_are_transactions' />
} </FFormGroup>
/>
}
>
<ListSelect
items={Currencies}
onItemSelect={(currency) => {
form.setFieldValue('base_currency', currency.key);
}}
selectedItem={value}
selectedItemProp={'key'}
defaultText={<T id={'select_base_currency'} />}
textProp={'name'}
labelProp={'key'}
popoverProps={{ minimal: true }}
disabled={baseCurrencyDisabled}
/>
</FormGroup>
)}
</FastField>
{/* --------- Fiscal Year ----------- */} {/* --------- Fiscal Year ----------- */}
<FastField name={'fiscal_year'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'fiscal_year'}
<FormGroup label={<T id={'fiscal_year'} />}
label={<T id={'fiscal_year'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
className={classNames('form-group--fiscal-year', CLASSES.FILL)} helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
inline={true} fastField={true}
intent={inputIntent({ error, touched })} >
helperText={<T id={'for_reporting_you_can_specify_any_month'} />} <FSelect
> name={'fiscal_year'}
<ListSelect items={FiscalYear}
items={FiscalYear} valueAccessor={'key'}
onItemSelect={(option) => { textAccessor={'name'}
form.setFieldValue('fiscal_year', option.key); placeholder={<T id={'select_fiscal_year'} />}
}} popoverProps={{ minimal: true }}
selectedItem={value} fastField={true}
selectedItemProp={'key'} />
defaultText={<T id={'select_fiscal_year'} />} </FFormGroup>
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
{/* ---------- Language ---------- */} {/* ---------- Language ---------- */}
<FastField name={'language'}> <FormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'language'}
<FormGroup label={<T id={'language'} />}
label={<T id={'language'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
inline={true} fastField={true}
className={classNames('form-group--language', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FSelect
helperText={<ErrorMessage name="language" />} name={'language'}
> items={Languages}
<ListSelect valueAccessor={'value'}
items={Languages} textAccessor={'name'}
selectedItemProp={'value'} placeholder={<T id={'select_language'} />}
textProp={'name'} popoverProps={{ minimal: true }}
defaultText={<T id={'select_language'} />} fastField={true}
selectedItem={value} />
onItemSelect={(item) => </FormGroup>
form.setFieldValue('language', item.value)
}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
{/* ---------- Time zone ---------- */} {/* ---------- Time zone ---------- */}
<FastField name={'timezone'}> <FastField name={'timezone'}>
@@ -222,30 +179,24 @@ export default function PreferencesGeneralForm({ isSubmitting }) {
</FastField> </FastField>
{/* --------- Data format ----------- */} {/* --------- Data format ----------- */}
<FastField name={'date_format'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date_format'}
<FormGroup label={<T id={'date_format'} />}
label={<T id={'date_format'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
inline={true} helperText={<ErrorMessage name="date_format" />}
className={classNames('form-group--date-format', CLASSES.FILL)} fastField={true}
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="date_format" />} <FSelect
> name={'date_format'}
<ListSelect items={dateFormats}
items={dateFormats} valueAccessor={'key'}
onItemSelect={(dateFormat) => { textAccessor={'label'}
form.setFieldValue('date_format', dateFormat.key); placeholder={<T id={'select_date_format'} />}
}} popoverProps={{ minimal: true }}
selectedItem={value} fastField={true}
selectedItemProp={'key'} />
defaultText={<T id={'select_date_format'} />} </FFormGroup>
textProp={'label'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<CardFooterActions> <CardFooterActions>
<Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit"> <Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">

1
packages/webapp/src/containers/Preferences/General/GeneralFormPage.tsx
View File

@@ -40,6 +40,7 @@ function GeneralFormPage({
// Initial values. // Initial values.
const initialValues = { const initialValues = {
...defaultValues,
...transformToForm(organization.metadata, defaultValues), ...transformToForm(organization.metadata, defaultValues),
}; };
// Handle the form submit. // Handle the form submit.

1
packages/webapp/src/containers/Preferences/General/GeneralFormProvider.tsx
View File

@@ -23,6 +23,7 @@ function GeneralFormProvider({ ...props }) {
const { isLoading: isOrganizationLoading, data: organization } = const { isLoading: isOrganizationLoading, data: organization } =
useCurrentOrganization(); useCurrentOrganization();
// Fetch date format options.
const { data: dateFormats, isLoading: isDateFormatsLoading } = const { data: dateFormats, isLoading: isDateFormatsLoading } =
useDateFormats(); useDateFormats();

19
packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
View File

@@ -1,8 +1,9 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { Form, useFormikContext } from 'formik'; import { Form, useFormikContext } from 'formik';
import { FormGroup, Button, Intent } from '@blueprintjs/core'; import { Button, Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { import {
AccountsSelect, AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
@@ -30,7 +31,7 @@ export default function ItemForm() {
return ( return (
<Form> <Form>
{/* ----------- Preferred Sell Account ----------- */} {/* ----------- Preferred Sell Account ----------- */}
<FormGroup <ItemFormGroup
name={'preferred_sell_account'} name={'preferred_sell_account'}
label={ label={
<strong> <strong>
@@ -53,10 +54,10 @@ export default function ItemForm() {
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]} filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
/> />
</FormGroup> </ItemFormGroup>
{/* ----------- Preferred Cost Account ----------- */} {/* ----------- Preferred Cost Account ----------- */}
<FFormGroup <ItemFormGroup
name={'preferred_cost_account'} name={'preferred_cost_account'}
label={ label={
<strong> <strong>
@@ -79,10 +80,10 @@ export default function ItemForm() {
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]} filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
/> />
</FFormGroup> </ItemFormGroup>
{/* ----------- Preferred Inventory Account ----------- */} {/* ----------- Preferred Inventory Account ----------- */}
<FFormGroup <ItemFormGroup
name={'preferred_inventory_account'} name={'preferred_inventory_account'}
label={ label={
<strong> <strong>
@@ -105,7 +106,7 @@ export default function ItemForm() {
placeholder={<T id={'select_payment_account'} />} placeholder={<T id={'select_payment_account'} />}
filterByTypes={[ACCOUNT_TYPE.INVENTORY]} filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
/> />
</FFormGroup> </ItemFormGroup>
<CardFooterActions> <CardFooterActions>
<Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit"> <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">
@@ -118,3 +119,7 @@ export default function ItemForm() {
</Form> </Form>
); );
} }
const ItemFormGroup = styled(FFormGroup)`
max-width: 400px;
`;

26
packages/webapp/src/containers/Preferences/Item/ItemPreferencesFormPage.tsx
View File

@@ -11,10 +11,21 @@ import ItemPreferencesForm from './ItemPreferencesForm';
import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider'; import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
import withDashboardActions from '@/containers/Dashboard/withDashboardActions'; import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
import withSettings from '@/containers/Settings/withSettings'; import withSettings from '@/containers/Settings/withSettings';
import { compose, optionsMapToArray, transformGeneralSettings } from '@/utils'; import {
compose,
optionsMapToArray,
transformGeneralSettings,
transformToForm,
} from '@/utils';
import '@/style/pages/Preferences/Accounting.scss'; import '@/style/pages/Preferences/Accounting.scss';
const defaultFormValues = {
preferred_sell_account: '',
preferred_cost_account: '',
preferred_inventory_account: '',
};
// item form page preferences. // item form page preferences.
function ItemPreferencesFormPage({ function ItemPreferencesFormPage({
// #withSettings // #withSettings
@@ -25,16 +36,13 @@ function ItemPreferencesFormPage({
}) { }) {
const { saveSettingMutate } = useItemPreferencesFormContext(); const { saveSettingMutate } = useItemPreferencesFormContext();
const itemPerferencesSettings = {
...omit(itemsSettings, ['tableSize']),
};
// Initial values. // Initial values.
const initialValues = { const initialValues = {
preferred_sell_account: '', ...defaultFormValues,
preferred_cost_account: '', ...transformToForm(
preferred_inventory_account: '', transformGeneralSettings(itemsSettings),
...transformGeneralSettings(itemPerferencesSettings), defaultFormValues,
),
}; };
useEffect(() => { useEffect(() => {

1
packages/webapp/src/containers/Settings/withSettings.tsx
View File

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
export default (mapState) => { export default (mapState) => {
const mapStateToProps = (state, props) => { const mapStateToProps = (state, props) => {
const mapped = { const mapped = {
allSettings: state.settings.data,
organizationSettings: state.settings.data.organization, organizationSettings: state.settings.data.organization,
manualJournalsSettings: state.settings.data.manualJournals, manualJournalsSettings: state.settings.data.manualJournals,
billPaymentSettings: state.settings.data.billPayments, billPaymentSettings: state.settings.data.billPayments,