mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 13:50:31 +00:00
Fix : Preferences
This commit is contained in:
elforjani3
@@ -7,40 +7,41 @@ import {
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import * as Yup from 'yup';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import { useQuery, queryCache } from 'react-query';
|
||||
import { connect } from 'react-redux';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import Dialog from 'components/Dialog';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
import classNames from 'classnames';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import {
|
||||
If,
|
||||
ErrorMessage,
|
||||
AppToaster,
|
||||
FieldRequiredHint,
|
||||
DialogContent,
|
||||
} from 'components';
|
||||
|
||||
import withCurrency from 'containers/Currencies/withCurrency';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
|
||||
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
function CurrencyDialog({
|
||||
dialogName,
|
||||
payload,
|
||||
isOpen,
|
||||
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #withCurrency
|
||||
currencyCode,
|
||||
function CurencyFormDialogContent({
|
||||
// #withCurrencyDetail
|
||||
currency,
|
||||
|
||||
// #wihtCurrenciesActions
|
||||
requestFetchCurrencies,
|
||||
requestSubmitCurrencies,
|
||||
requestEditCurrency,
|
||||
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #ownProp
|
||||
action,
|
||||
currencyId,
|
||||
dialogName,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
const fetchCurrencies = useQuery('currencies', () =>
|
||||
@@ -63,7 +64,6 @@ function CurrencyDialog({
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
const {
|
||||
values,
|
||||
errors,
|
||||
@@ -75,12 +75,11 @@ function CurrencyDialog({
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues: {
|
||||
...(payload.action === 'edit' &&
|
||||
pick(currency, Object.keys(initialValues))),
|
||||
...(action === 'edit' && pick(currency, Object.keys(initialValues))),
|
||||
},
|
||||
validationSchema: validationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
if (payload.action === 'edit') {
|
||||
if (action === 'edit') {
|
||||
requestEditCurrency(currency.id, values)
|
||||
.then((response) => {
|
||||
closeDialog(dialogName);
|
||||
@@ -115,7 +114,6 @@ function CurrencyDialog({
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(dialogName);
|
||||
}, [dialogName, closeDialog]);
|
||||
@@ -129,35 +127,13 @@ function CurrencyDialog({
|
||||
closeDialog(dialogName);
|
||||
}, [closeDialog, dialogName, resetForm]);
|
||||
|
||||
const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={
|
||||
payload.action === 'edit' ? (
|
||||
<T id={'edit_currency'} />
|
||||
) : (
|
||||
<T id={'new_currency'} />
|
||||
)
|
||||
}
|
||||
className={classNames(
|
||||
{
|
||||
'dialog--loading': fetchCurrencies.isFetching,
|
||||
},
|
||||
'dialog--currency-form',
|
||||
)}
|
||||
isOpen={isOpen}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
isLoading={fetchCurrencies.isFetching}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<DialogContent isLoading={fetchCurrencies.isFetching}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<FormGroup
|
||||
label={<T id={'currency_name'} />}
|
||||
labelInfo={requiredSpan}
|
||||
labelInfo={FieldRequiredHint}
|
||||
className={'form-group--currency-name'}
|
||||
intent={
|
||||
errors.currency_name && touched.currency_name && Intent.DANGER
|
||||
@@ -178,7 +154,7 @@ function CurrencyDialog({
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'currency_code'} />}
|
||||
labelInfo={requiredSpan}
|
||||
labelInfo={FieldRequiredHint}
|
||||
className={'form-group--currency-code'}
|
||||
intent={
|
||||
errors.currency_code && touched.currency_code && Intent.DANGER
|
||||
@@ -208,29 +184,17 @@ function CurrencyDialog({
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{payload.action === 'edit' ? (
|
||||
<T id={'edit'} />
|
||||
) : (
|
||||
<T id={'submit'} />
|
||||
)}
|
||||
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
currency: 'currency-form',
|
||||
});
|
||||
|
||||
const withCurrencyFormDialog = connect(mapStateToProps);
|
||||
|
||||
export default compose(
|
||||
withCurrencyFormDialog,
|
||||
withDialogRedux(null, 'currency-form'),
|
||||
withCurrency,
|
||||
withCurrencyDetail,
|
||||
withDialogActions,
|
||||
withCurrenciesActions,
|
||||
)(CurrencyDialog);
|
||||
)(CurencyFormDialogContent);
|
||||
41
client/src/containers/Dialogs/CurrencyFormDialog.js
Normal file
41
client/src/containers/Dialogs/CurrencyFormDialog.js
Normal file
@@ -0,0 +1,41 @@
|
||||
import React, { lazy } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { Dialog, DialogSuspense } from 'components';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const CurrencyFormDialogContent = lazy(() =>
|
||||
import('./CurencyFormDialogContent'),
|
||||
);
|
||||
function CurrencyFormDialog({
|
||||
dialogName,
|
||||
payload = { action: '', id: null },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={
|
||||
payload.action === 'edit' ? (
|
||||
<T id={'edit_currency'} />
|
||||
) : (
|
||||
<T id={'new_currency'} />
|
||||
)
|
||||
}
|
||||
className={'dialog--currency-form'}
|
||||
isOpen={isOpen}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<CurrencyFormDialogContent
|
||||
dialogName={dialogName}
|
||||
currencyId={payload.currencyCode}
|
||||
action={payload.action}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(CurrencyFormDialog);
|
||||
@@ -7,7 +7,7 @@ export const mapStateToProps = (state, props) => {
|
||||
const dialogPayload = getDialogPayload(state, 'user-form');
|
||||
|
||||
return {
|
||||
name: 'user-form',
|
||||
dialogName: 'user-form',
|
||||
payload: { action: 'new', id: null },
|
||||
userDetails:
|
||||
dialogPayload.action === 'edit'
|
||||
|
||||
@@ -1,110 +1,19 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import React, { lazy } from 'react';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Dialog,
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
import { objectKeysTransform } from 'utils';
|
||||
import { pick, snakeCase } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import { queryCache, useQuery } from 'react-query';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
import DialogReduxConnect from 'components/DialogReduxConnect';
|
||||
import ErrorMessage from 'components/ErrorMessage';
|
||||
|
||||
import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
|
||||
import withUsersActions from 'containers/Users/withUsersActions';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { Dialog, DialogSuspense } from 'components';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'utils';
|
||||
|
||||
const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
|
||||
|
||||
function UserFormDialog({
|
||||
requestFetchUser,
|
||||
requestSubmitInvite,
|
||||
name,
|
||||
payload,
|
||||
dialogName,
|
||||
payload = { action: '', id: null },
|
||||
isOpen,
|
||||
closeDialog,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const fetchHook = useQuery(
|
||||
payload.action === 'edit' && ['user', payload.user.id],
|
||||
(key, id) => requestFetchUser(id),
|
||||
{ manual: true },
|
||||
);
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'email' })),
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
status: 1,
|
||||
...(payload.action === 'edit' &&
|
||||
pick(
|
||||
objectKeysTransform(payload.user, snakeCase),
|
||||
Object.keys(validationSchema.fields),
|
||||
)),
|
||||
};
|
||||
|
||||
const {
|
||||
errors,
|
||||
touched,
|
||||
resetForm,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues,
|
||||
validationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const form = { ...values };
|
||||
|
||||
requestSubmitInvite(form)
|
||||
.then((response) => {
|
||||
closeDialog(name);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'teammate_invited_to_organization_account',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
queryCache.invalidateQueries('users-table');
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Handle the dialog opening.
|
||||
const onDialogOpening = useCallback(() => {
|
||||
fetchHook.refetch();
|
||||
}, [fetchHook]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
resetForm();
|
||||
}, [resetForm]);
|
||||
|
||||
// Handles dialog close.
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(name);
|
||||
}, [closeDialog, name]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
name={name}
|
||||
name={dialogName}
|
||||
title={
|
||||
payload.action === 'edit' ? (
|
||||
<T id={'edit_invite'} />
|
||||
@@ -112,66 +21,23 @@ function UserFormDialog({
|
||||
<T id={'invite_user'} />
|
||||
)
|
||||
}
|
||||
className={classNames({
|
||||
'dialog--loading': fetchHook.pending,
|
||||
'dialog--invite-form': true,
|
||||
})}
|
||||
//
|
||||
className={'dialog--invite-form'}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
isLoading={fetchHook.pending}
|
||||
onClosed={onDialogClosed}
|
||||
onOpening={onDialogOpening}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<p class="mb2">
|
||||
<T id={'your_access_to_your_team'} />
|
||||
</p>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'email'} />}
|
||||
className={classNames('form-group--email', Classes.FILL)}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{payload.action === 'edit' ? (
|
||||
<T id={'edit'} />
|
||||
) : (
|
||||
<T id={'invite'} />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<DialogSuspense>
|
||||
<UserFormDialogContent
|
||||
dialogName={dialogName}
|
||||
userId={payload.id}
|
||||
action={payload.action}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
UserFormDialogConnect,
|
||||
withUsersActions,
|
||||
withDialogActions,
|
||||
DialogReduxConnect,
|
||||
// UserFormDialogConnect,
|
||||
withDialogRedux(),
|
||||
)(UserFormDialog);
|
||||
|
||||
162
client/src/containers/Dialogs/UserFormDialogContent.js
Normal file
162
client/src/containers/Dialogs/UserFormDialogContent.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import {
|
||||
Button,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Classes,
|
||||
} from '@blueprintjs/core';
|
||||
import { pick, snakeCase } from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import { queryCache, useQuery } from 'react-query';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import {
|
||||
If,
|
||||
ErrorMessage,
|
||||
AppToaster,
|
||||
FieldRequiredHint,
|
||||
DialogContent,
|
||||
} from 'components';
|
||||
|
||||
import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
|
||||
import withUsersActions from 'containers/Users/withUsersActions';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { compose, objectKeysTransform } from 'utils';
|
||||
|
||||
function UserFormDialogContent({
|
||||
// #wihtCurrenciesActions
|
||||
requestFetchUser,
|
||||
requestSubmitInvite,
|
||||
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #ownProp
|
||||
action,
|
||||
userId,
|
||||
dialogName,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const fetchHook = useQuery(
|
||||
// action === 'edit' && ['user', action.user.id],
|
||||
action === 'edit' && ['user', userId],
|
||||
(key, id) => requestFetchUser(id),
|
||||
{ enabled: userId },
|
||||
);
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email()
|
||||
.required()
|
||||
.label(formatMessage({ id: 'email' })),
|
||||
});
|
||||
|
||||
const initialValues = {
|
||||
status: 1,
|
||||
...(action === 'edit' &&
|
||||
pick(
|
||||
objectKeysTransform(userId, snakeCase),
|
||||
Object.keys(validationSchema.fields),
|
||||
)),
|
||||
};
|
||||
|
||||
const {
|
||||
errors,
|
||||
touched,
|
||||
resetForm,
|
||||
getFieldProps,
|
||||
handleSubmit,
|
||||
isSubmitting,
|
||||
} = useFormik({
|
||||
enableReinitialize: true,
|
||||
initialValues,
|
||||
validationSchema,
|
||||
onSubmit: (values, { setSubmitting }) => {
|
||||
const form = { ...values };
|
||||
|
||||
requestSubmitInvite(form)
|
||||
.then((response) => {
|
||||
closeDialog(dialogName);
|
||||
AppToaster.show({
|
||||
message: formatMessage({
|
||||
id: 'teammate_invited_to_organization_account',
|
||||
}),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
setSubmitting(false);
|
||||
queryCache.invalidateQueries('users-table');
|
||||
})
|
||||
.catch((errors) => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Handles dialog close.
|
||||
const handleClose = useCallback(() => {
|
||||
closeDialog(dialogName);
|
||||
}, [closeDialog, dialogName]);
|
||||
|
||||
// Handle the dialog opening.
|
||||
const onDialogOpening = useCallback(() => {
|
||||
fetchHook.refetch();
|
||||
}, [fetchHook]);
|
||||
|
||||
const onDialogClosed = useCallback(() => {
|
||||
resetForm();
|
||||
closeDialog(dialogName);
|
||||
}, [resetForm]);
|
||||
|
||||
console.log(action, 'action');
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={fetchHook.isFetching}>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<p className="mb2">
|
||||
<T id={'your_access_to_your_team'} />
|
||||
</p>
|
||||
|
||||
<FormGroup
|
||||
label={<T id={'email'} />}
|
||||
className={classNames('form-group--email', Classes.FILL)}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
|
||||
inline={true}
|
||||
>
|
||||
<InputGroup
|
||||
medium={true}
|
||||
intent={errors.email && touched.email && Intent.DANGER}
|
||||
{...getFieldProps('email')}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button onClick={handleClose}>
|
||||
<T id={'cancel'} />
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
// UserFormDialogConnect,
|
||||
withDialogActions,
|
||||
withUsersActions,
|
||||
)(UserFormDialogContent);
|
||||
Reference in New Issue
Block a user