mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 05:40:31 +00:00
re-structure to monorepo.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,32 @@
|
||||
// @ts-nocheck
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
name: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('organization_name_')),
|
||||
industry: Yup.string()
|
||||
.nullable()
|
||||
.label(intl.get('organization_industry_')),
|
||||
location: Yup.string()
|
||||
.nullable()
|
||||
.label(intl.get('location')),
|
||||
base_currency: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('base_currency_')),
|
||||
fiscal_year: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('fiscal_year_')),
|
||||
language: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('language')),
|
||||
timezone: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('time_zone_')),
|
||||
date_format: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('date_format_')),
|
||||
});
|
||||
|
||||
export const PreferencesGeneralSchema = Schema;
|
||||
@@ -0,0 +1,16 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
|
||||
import GeneralFormPage from './GeneralFormPage';
|
||||
import { GeneralFormProvider } from './GeneralFormProvider';
|
||||
|
||||
/**
|
||||
* Preferences - General form.
|
||||
*/
|
||||
export default function GeneralPreferences() {
|
||||
return (
|
||||
<GeneralFormProvider>
|
||||
<GeneralFormPage />
|
||||
</GeneralFormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import classNames from 'classnames';
|
||||
import { Form } from 'formik';
|
||||
import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
|
||||
import { TimezonePicker } from '@blueprintjs/timezone';
|
||||
import { ErrorMessage, FastField } from 'formik';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
ListSelect,
|
||||
FieldRequiredHint,
|
||||
FormattedMessage as T,
|
||||
} from '@/components';
|
||||
import { inputIntent } from '@/utils';
|
||||
import { CLASSES } from '@/constants/classes';
|
||||
import { getCountries } from '@/constants/countries';
|
||||
import { getAllCurrenciesOptions } from '@/constants/currencies';
|
||||
import { getFiscalYear } from '@/constants/fiscalYearOptions';
|
||||
import { getLanguages } from '@/constants/languagesOptions';
|
||||
import { useGeneralFormContext } from './GeneralFormProvider';
|
||||
|
||||
import { shouldBaseCurrencyUpdate } from './utils';
|
||||
|
||||
/**
|
||||
* Preferences general form.
|
||||
*/
|
||||
export default function PreferencesGeneralForm({ isSubmitting }) {
|
||||
const history = useHistory();
|
||||
|
||||
const FiscalYear = getFiscalYear();
|
||||
const Countries = getCountries();
|
||||
const Languages = getLanguages();
|
||||
const Currencies = getAllCurrenciesOptions();
|
||||
|
||||
const { dateFormats, baseCurrencyMutateAbility } = useGeneralFormContext();
|
||||
|
||||
const baseCurrencyDisabled = baseCurrencyMutateAbility.length > 0;
|
||||
|
||||
// Handle close click.
|
||||
const handleCloseClick = () => {
|
||||
history.go(-1);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
{/* ---------- Organization name ---------- */}
|
||||
<FastField name={'name'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'organization_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
inline={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
className={'form-group--org-name'}
|
||||
helperText={<T id={'shown_on_sales_forms_and_purchase_orders'} />}
|
||||
>
|
||||
<InputGroup medium={'true'} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ---------- Industry ---------- */}
|
||||
<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>
|
||||
|
||||
{/* ---------- Location ---------- */}
|
||||
<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={Countries}
|
||||
onItemSelect={({ value }) => {
|
||||
form.setFieldValue('location', value);
|
||||
}}
|
||||
selectedItem={value}
|
||||
selectedItemProp={'value'}
|
||||
defaultText={<T id={'select_business_location'} />}
|
||||
textProp={'name'}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ---------- Base currency ---------- */}
|
||||
<FastField
|
||||
name={'base_currency'}
|
||||
baseCurrencyDisabled={baseCurrencyDisabled}
|
||||
shouldUpdate={shouldBaseCurrencyUpdate}
|
||||
>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'base_currency'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--base-currency', CLASSES.FILL)}
|
||||
inline={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={
|
||||
<T
|
||||
id={
|
||||
'you_can_t_change_the_base_currency_as_there_are_transactions'
|
||||
}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<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 ----------- */}
|
||||
<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}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<T id={'for_reporting_you_can_specify_any_month'} />}
|
||||
>
|
||||
<ListSelect
|
||||
items={FiscalYear}
|
||||
onItemSelect={(option) => {
|
||||
form.setFieldValue('fiscal_year', option.key);
|
||||
}}
|
||||
selectedItem={value}
|
||||
selectedItemProp={'key'}
|
||||
defaultText={<T id={'select_fiscal_year'} />}
|
||||
textProp={'name'}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ---------- Language ---------- */}
|
||||
<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>
|
||||
|
||||
{/* ---------- Time zone ---------- */}
|
||||
<FastField name={'timezone'}>
|
||||
{({ 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="timezone" />}
|
||||
>
|
||||
<TimezonePicker
|
||||
value={value}
|
||||
onChange={(timezone) => {
|
||||
form.setFieldValue('timezone', timezone);
|
||||
}}
|
||||
valueDisplayFormat="composite"
|
||||
placeholder={<T id={'select_time_zone'} />}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* --------- Data format ----------- */}
|
||||
<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={dateFormats}
|
||||
onItemSelect={(dateFormat) => {
|
||||
form.setFieldValue('date_format', dateFormat.key);
|
||||
}}
|
||||
selectedItem={value}
|
||||
selectedItemProp={'key'}
|
||||
defaultText={<T id={'select_date_format'} />}
|
||||
textProp={'label'}
|
||||
popoverProps={{ minimal: true }}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
<CardFooterActions>
|
||||
<Button loading={isSubmitting} intent={Intent.PRIMARY} type="submit">
|
||||
<T id={'save'} />
|
||||
</Button>
|
||||
<Button onClick={handleCloseClick}>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
</CardFooterActions>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
const CardFooterActions = styled.div`
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e7ea;
|
||||
margin-top: 30px;
|
||||
|
||||
.bp3-button {
|
||||
min-width: 70px;
|
||||
|
||||
+ .bp3-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,79 @@
|
||||
// @ts-nocheck
|
||||
import React, { useEffect } from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { Formik } from 'formik';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
|
||||
import '@/style/pages/Preferences/GeneralForm.scss';
|
||||
|
||||
import { AppToaster } from '@/components';
|
||||
import GeneralForm from './GeneralForm';
|
||||
import { PreferencesGeneralSchema } from './General.schema';
|
||||
import { useGeneralFormContext } from './GeneralFormProvider';
|
||||
import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { compose, transformToForm } from '@/utils';
|
||||
|
||||
const defaultValues = {
|
||||
name: '',
|
||||
industry: '',
|
||||
location: '',
|
||||
base_currency: '',
|
||||
language: '',
|
||||
fiscal_year: '',
|
||||
date_format: '',
|
||||
timezone: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Preferences - General form Page.
|
||||
*/
|
||||
function GeneralFormPage({
|
||||
// #withDashboardActions
|
||||
changePreferencesPageTitle,
|
||||
}) {
|
||||
const { updateOrganization, organization } = useGeneralFormContext();
|
||||
|
||||
useEffect(() => {
|
||||
changePreferencesPageTitle(intl.get('general'));
|
||||
}, [changePreferencesPageTitle]);
|
||||
|
||||
// Initial values.
|
||||
const initialValues = {
|
||||
...transformToForm(organization.metadata, defaultValues),
|
||||
};
|
||||
// Handle the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
|
||||
// Handle request success.
|
||||
const onSuccess = (response) => {
|
||||
AppToaster.show({
|
||||
message: intl.get('preferences.general.success_message'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
|
||||
// Reboot the application if the application's language is mutated.
|
||||
if (organization.metadata?.language !== values.language) {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
// Handle request error.
|
||||
const onError = (errors) => {
|
||||
setSubmitting(false);
|
||||
};
|
||||
updateOrganization({ ...values })
|
||||
.then(onSuccess)
|
||||
.catch(onError);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={PreferencesGeneralSchema}
|
||||
onSubmit={handleFormSubmit}
|
||||
component={GeneralForm}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDashboardActions)(GeneralFormPage);
|
||||
@@ -0,0 +1,69 @@
|
||||
// @ts-nocheck
|
||||
import React, { createContext } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Card } from '@/components';
|
||||
import { CLASSES } from '@/constants/classes';
|
||||
import {
|
||||
useCurrentOrganization,
|
||||
useUpdateOrganization,
|
||||
useDateFormats,
|
||||
useOrgBaseCurrencyMutateAbilities,
|
||||
} from '@/hooks/query';
|
||||
import PreferencesPageLoader from '../PreferencesPageLoader';
|
||||
|
||||
const GeneralFormContext = createContext();
|
||||
|
||||
/**
|
||||
* General form provider.
|
||||
*/
|
||||
function GeneralFormProvider({ ...props }) {
|
||||
// Fetches current organization information.
|
||||
const { isLoading: isOrganizationLoading, data: organization } =
|
||||
useCurrentOrganization();
|
||||
|
||||
const { data: dateFormats, isLoading: isDateFormatsLoading } =
|
||||
useDateFormats();
|
||||
|
||||
const { data: baseCurrencyMutateAbility } =
|
||||
useOrgBaseCurrencyMutateAbilities();
|
||||
|
||||
// Mutate organization information.
|
||||
const { mutateAsync: updateOrganization } = useUpdateOrganization();
|
||||
|
||||
// Provider state.
|
||||
const provider = {
|
||||
isOrganizationLoading,
|
||||
isDateFormatsLoading,
|
||||
updateOrganization,
|
||||
baseCurrencyMutateAbility,
|
||||
organization,
|
||||
dateFormats,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
|
||||
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
|
||||
)}
|
||||
>
|
||||
<GeneralFormCard>
|
||||
{isOrganizationLoading || isDateFormatsLoading ? (
|
||||
<PreferencesPageLoader />
|
||||
) : (
|
||||
<GeneralFormContext.Provider value={provider} {...props} />
|
||||
)}
|
||||
</GeneralFormCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const useGeneralFormContext = () => React.useContext(GeneralFormContext);
|
||||
|
||||
export { GeneralFormProvider, useGeneralFormContext };
|
||||
|
||||
const GeneralFormCard = styled(Card)`
|
||||
padding: 25px;
|
||||
`;
|
||||
@@ -0,0 +1,9 @@
|
||||
// @ts-nocheck
|
||||
import { defaultFastFieldShouldUpdate } from '@/utils';
|
||||
|
||||
export const shouldBaseCurrencyUpdate = (newProps, oldProps) => {
|
||||
return (
|
||||
newProps.baseCurrencyDisabled !== oldProps.baseCurrencyDisabled ||
|
||||
defaultFastFieldShouldUpdate(newProps, oldProps)
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user