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

Merge remote-tracking branch 'origin/feature/react-query' into feature/react-query

Browse Source
This commit is contained in:
a.bouhuolia
2021-02-09 10:24:10 +02:00
parent 083bf36c6b f7ce5b0a7d
commit bb2b88e14e
7 changed files with 345 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/common/currencies.js
View File

@@ -1,5 +1,5 @@
export default [ export default [
{ label: 'US Dollar', code: 'USD' }, { name: 'US Dollar', code: 'USD' },
{ label: 'Euro', code: 'EUR' }, { name: 'Euro', code: 'EUR' },
{ label: 'Libyan Dinar ', code: 'LYD' }, { name: 'Libyan Dinar ', code: 'LYD' },
] ]

2
client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js
View File

@@ -9,7 +9,7 @@ import { transformToForm } from 'utils';
import { import {
CreateItemCategoryFormSchema, CreateItemCategoryFormSchema,
EditItemCategoryFormSchema, EditItemCategoryFormSchema,
} from './ItemCategoryForm.schema'; } from './itemCategoryForm.schema';
import withDialogActions from 'containers/Dialog/withDialogActions'; import withDialogActions from 'containers/Dialog/withDialogActions';
import ItemCategoryFormContent from './ItemCategoryFormContent' import ItemCategoryFormContent from './ItemCategoryFormContent'

97
client/src/containers/Preferences/General/General.js
View File

@@ -1,98 +1,15 @@
import React, { useEffect } from 'react'; import React from 'react';
import { Formik } from 'formik';
import { mapKeys, snakeCase } from 'lodash';
import { Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { useQuery, queryCache } from 'react-query';
import { useIntl } from 'react-intl';
import { CLASSES } from 'common/classes';
import { compose, optionsMapToArray } from 'utils'; import GeneralFormPage from './GeneralFormPage';
import { GeneralFormProvider } from './GeneralFormProvider';
import { AppToaster, LoadingIndicator } from 'components';
import GeneralForm from './GeneralForm';
import { PreferencesGeneralSchema } from './General.schema';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import 'style/pages/Preferences/GeneralForm.scss';
/** /**
* Preferences - General form. * Preferences - General form.
*/ */
function GeneralPreferences({ export default function GeneralPreferences() {
// #withSettings
organizationSettings,
//# withDashboardActions
changePreferencesPageTitle,
// #withSettingsActions
requestSubmitOptions,
requestFetchOptions,
}) {
const { formatMessage } = useIntl();
const fetchSettings = useQuery(['settings'], () => requestFetchOptions());
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'general' }));
}, [changePreferencesPageTitle, formatMessage]);
function transformGeneralSettings(data) {
return mapKeys(data, (value, key) => snakeCase(key));
}
const initialValues = {
...transformGeneralSettings(organizationSettings),
};
const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' };
});
requestSubmitOptions({ options })
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_options_has_been_created_successfully',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
queryCache.invalidateQueries('settings');
})
.catch((error) => {
setSubmitting(false);
});
};
return ( return (
<div <GeneralFormProvider>
className={classNames( <GeneralFormPage />
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT, </GeneralFormProvider>
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
)}
>
<div className={classNames(CLASSES.CARD)}>
<LoadingIndicator loading={fetchSettings.isFetching} spinnerSize={28}>
<Formik
initialValues={initialValues}
validationSchema={PreferencesGeneralSchema}
onSubmit={handleFormSubmit}
component={GeneralForm}
/>
</LoadingIndicator>
</div>
</div>
); );
} }
export default compose(
withSettings(({ organizationSettings }) => ({ organizationSettings })),
withSettingsActions,
withDashboardActions,
)(GeneralPreferences);

423
client/src/containers/Preferences/General/GeneralForm.js
View File

@@ -36,215 +36,220 @@ export default function PreferencesGeneralForm({}) {
return ( return (
<Form> <Form>
<FastField name={'name'}> <FastField name={'name'}>
{({ field, meta: { error, touched } }) => ( {({ field, meta: { error, touched } }) => (
<FormGroup <FormGroup
label={<T id={'organization_name'} />} label={<T id={'organization_name'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
inline={true} inline={true}
intent={inputIntent({ error, touched })} intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="name" />} helperText={<ErrorMessage name="name" />}
className={'form-group--org-name'} className={'form-group--org-name'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
<FastField name={'financial_date_start'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'financial_starting_date'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="financial_date_start" />}
className={classNames('form-group--select-list', CLASSES.FILL)}
>
<DateInput
{...momentFormatter('MMMM Do YYYY')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('financial_date_start', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'industry'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'organization_industry'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="industry" />}
className={'form-group--org-industry'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
<FastField name={'location'}>
{({ field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'business_location'} />}
className={classNames(
'form-group--business-location',
CLASSES.FILL,
)}
inline={true}
helperText={<ErrorMessage name="location" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={countriesOptions}
onItemSelect={(item) => {}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'base_currency'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--base-currency', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="base_currency" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={currencies}
onItemSelect={(currency) => {
form.setFieldValue('base_currency', currency.code);
}}
selectedItem={value}
selectedItemProp={'code'}
defaultText={<T id={'select_base_currency'} />}
textProp={'label'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'fiscal_year'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'fiscal_year'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--fiscal-year', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="fiscal_year" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={fiscalYearOptions}
selectedItemProp={'value'}
textProp={'name'}
defaultText={<T id={'select_fiscal_year'} />}
selectedItem={value}
onItemSelect={(item) => {}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'language'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'language'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--language', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="language" />}
>
<ListSelect
items={languages}
selectedItemProp={'value'}
textProp={'name'}
defaultText={<T id={'select_language'} />}
selectedItem={value}
onItemSelect={(item) => {}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'time_zone'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'time_zone'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--time-zone',
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="time_zone" />}
>
<TimezonePicker
value={value}
onChange={(timezone) => {
form.setFieldValue('time_zone', timezone);
}}
valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />}
/>
</FormGroup>
)}
</FastField>
<FastField name={'date_format'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date_format'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--date-format', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date_format" />}
>
<ListSelect
items={dateFormatsOptions}
onItemSelect={(dateFormat) => {
form.setFieldValue('date_format', dateFormat);
}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_date_format'} />}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<div className={'card__footer'}>
<Button
intent={Intent.PRIMARY}
type="submit"
> >
<T id={'save'} /> <InputGroup medium={'true'} {...field} />
</Button> </FormGroup>
<Button onClick={handleCloseClick}> )}
<T id={'close'} /> </FastField>
</Button>
</div> <FastField name={'financial_date_start'}>
</Form> {({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'financial_starting_date'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="financial_date_start" />}
className={classNames('form-group--select-list', CLASSES.FILL)}
>
<DateInput
{...momentFormatter('MMMM Do YYYY')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('financial_date_start', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'industry'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'organization_industry'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="industry" />}
className={'form-group--org-industry'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
<FastField name={'location'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'business_location'} />}
className={classNames(
'form-group--business-location',
CLASSES.FILL,
)}
inline={true}
helperText={<ErrorMessage name="location" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={countriesOptions}
onItemSelect={({ value }) => {
form.setFieldValue('location', value);
}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'base_currency'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--base-currency', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="base_currency" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={currencies}
onItemSelect={(currency) => {
form.setFieldValue('base_currency', currency.code);
}}
selectedItem={value}
selectedItemProp={'code'}
defaultText={<T id={'select_base_currency'} />}
textProp={'name'}
labelProp={'code'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'fiscal_year'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'fiscal_year'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--fiscal-year', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="fiscal_year" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={fiscalYearOptions}
onItemSelect={({ value }) =>
form.setFieldValue('fiscal_year', value)
}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_fiscal_year'} />}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'language'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'language'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--language', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="language" />}
>
<ListSelect
items={languages}
selectedItemProp={'value'}
textProp={'name'}
defaultText={<T id={'select_language'} />}
selectedItem={value}
onItemSelect={(item) =>
form.setFieldValue('language', item.value)
}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'time_zone'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'time_zone'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--time-zone',
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="time_zone" />}
>
<TimezonePicker
value={value}
onChange={(timezone) => {
form.setFieldValue('time_zone', timezone);
}}
valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />}
/>
</FormGroup>
)}
</FastField>
<FastField name={'date_format'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date_format'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--date-format', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date_format" />}
>
<ListSelect
items={dateFormatsOptions}
onItemSelect={(dateFormat) => {
form.setFieldValue('date_format', dateFormat.value);
}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_date_format'} />}
textProp={'name'}
labelProp={'label'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<div className={'card__footer'}>
<Button intent={Intent.PRIMARY} type="submit">
<T id={'save'} />
</Button>
<Button onClick={handleCloseClick}>
<T id={'close'} />
</Button>
</div>
</Form>
); );
} }

87
client/src/containers/Preferences/General/GeneralFormPage.js Normal file
View File

@@ -0,0 +1,87 @@
import React, { useEffect } from 'react';
import { Formik } from 'formik';
import { mapKeys, snakeCase } from 'lodash';
import { Intent } from '@blueprintjs/core';
import classNames from 'classnames';
import { useIntl } from 'react-intl';
import { CLASSES } from 'common/classes';
import { AppToaster } from 'components';
import GeneralForm from './GeneralForm';
import { PreferencesGeneralSchema } from './General.schema';
import { useGeneralFormContext } from './GeneralFormProvider';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import { compose, optionsMapToArray } from 'utils';
import 'style/pages/Preferences/GeneralForm.scss';
/**
* Preferences - General form Page.
*/
function GeneralFormPage({
// #withSettings
organizationSettings,
//# withDashboardActions
changePreferencesPageTitle,
}) {
const { formatMessage } = useIntl();
const { saveSettingMutate } = useGeneralFormContext();
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'general' }));
}, [changePreferencesPageTitle, formatMessage]);
function transformGeneralSettings(data) {
return mapKeys(data, (value, key) => snakeCase(key));
}
const initialValues = {
...transformGeneralSettings(organizationSettings),
};
const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' };
});
const onSuccess = (response) => {
AppToaster.show({
message: formatMessage({
id: 'the_options_has_been_created_successfully',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
};
const onError = (errors) => {
setSubmitting(false);
};
saveSettingMutate({ options }).then(onSuccess).catch(onError);
};
return (
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
)}
>
<div className={classNames(CLASSES.CARD)}>
<Formik
initialValues={initialValues}
validationSchema={PreferencesGeneralSchema}
onSubmit={handleFormSubmit}
component={GeneralForm}
/>
</div>
</div>
);
}
export default compose(
withSettings(({ organizationSettings }) => ({ organizationSettings })),
withDashboardActions,
)(GeneralFormPage);

32
client/src/containers/Preferences/General/GeneralFormProvider.js Normal file
View File

@@ -0,0 +1,32 @@
import React, { createContext } from 'react';
import { LoadingIndicator } from 'components';
import { useSaveSettings, useSettings } from 'hooks/query';
const GeneralFormContext = createContext();
/**
* General form provider.
*/
function GeneralFormProvider({ ...props }) {
//Fetches Organization Settings.
const { isFetching: isSettingsLoading } = useSettings();
// Save Organization Settings.
const { mutateAsync: saveSettingMutate } = useSaveSettings();
// Provider state.
const provider = {
isSettingsLoading,
saveSettingMutate,
};
return (
<LoadingIndicator loading={isSettingsLoading} spinnerSize={28}>
<GeneralFormContext.Provider value={provider} {...props} />
</LoadingIndicator>
);
}
const useGeneralFormContext = () => React.useContext(GeneralFormContext);
export { GeneralFormProvider, useGeneralFormContext };

2
client/src/containers/Subscriptions/BillingPlansForm.js
View File

@@ -5,7 +5,7 @@ import 'style/pages/Subscription/BillingPlans.scss'
import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput'; import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput'; import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod'; import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
/** /**
* Billing plans form. * Billing plans form.