mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 21:00:31 +00:00
re-structure to monorepo.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,16 @@
|
||||
// @ts-nocheck
|
||||
import * as Yup from 'yup';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const Schema = Yup.object().shape({
|
||||
email: Yup.string().email().required().label(intl.get('email')),
|
||||
first_name: Yup.string().required().label(intl.get('first_name_')),
|
||||
last_name: Yup.string().required().label(intl.get('last_name_')),
|
||||
phone_number: Yup.string()
|
||||
.matches()
|
||||
.required()
|
||||
.label(intl.get('phone_number_')),
|
||||
role_id: Yup.string().required().label(intl.get('roles.label.role_name_')),
|
||||
});
|
||||
|
||||
export const UserFormSchema = Schema;
|
||||
@@ -0,0 +1,78 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { Formik } from 'formik';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { pick, snakeCase } from 'lodash';
|
||||
import { AppToaster } from '@/components';
|
||||
|
||||
import withDialogActions from '@/containers/Dialog/withDialogActions';
|
||||
|
||||
import { UserFormSchema } from './UserForm.schema';
|
||||
import UserFormContent from './UserFormContent';
|
||||
import { useUserFormContext } from './UserFormProvider';
|
||||
import { transformErrors } from './utils';
|
||||
|
||||
import { compose, objectKeysTransform } from '@/utils';
|
||||
|
||||
/**
|
||||
* User form.
|
||||
*/
|
||||
function UserForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const [calloutCode, setCalloutCode] = React.useState([]);
|
||||
|
||||
const { dialogName, user, userId, isEditMode, EditUserMutate } =
|
||||
useUserFormContext();
|
||||
|
||||
const initialValues = {
|
||||
...(isEditMode &&
|
||||
pick(
|
||||
objectKeysTransform(user, snakeCase),
|
||||
Object.keys(UserFormSchema.fields),
|
||||
)),
|
||||
};
|
||||
|
||||
const handleSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
const form = { ...values };
|
||||
|
||||
// Handle close the dialog after success response.
|
||||
const afterSubmit = () => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
const onSuccess = ({ response }) => {
|
||||
AppToaster.show({
|
||||
message: intl.get('teammate_invited_to_organization_account'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
afterSubmit(response);
|
||||
};
|
||||
|
||||
// Handle the response error.
|
||||
const onError = (error) => {
|
||||
const {
|
||||
response: {
|
||||
data: { errors },
|
||||
},
|
||||
} = error;
|
||||
transformErrors(errors, { setErrors, setCalloutCode });
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
EditUserMutate([userId, form]).then(onSuccess).catch(onError);
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={UserFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<UserFormContent calloutCode={calloutCode} />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
export default compose(withDialogActions)(UserForm);
|
||||
@@ -0,0 +1,138 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import {
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
Intent,
|
||||
Classes,
|
||||
Button,
|
||||
} from '@blueprintjs/core';
|
||||
import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
|
||||
import { FormattedMessage as T } from '@/components';
|
||||
import { CLASSES } from '@/constants/classes';
|
||||
import classNames from 'classnames';
|
||||
import { inputIntent } from '@/utils';
|
||||
import { ListSelect, FieldRequiredHint } from '@/components';
|
||||
import { useUserFormContext } from './UserFormProvider';
|
||||
import withDialogActions from '@/containers/Dialog/withDialogActions';
|
||||
import { compose } from '@/utils';
|
||||
import { UserFormCalloutAlerts } from './components';
|
||||
|
||||
/**
|
||||
* User form content.
|
||||
*/
|
||||
function UserFormContent({
|
||||
calloutCode,
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
const { isSubmitting } = useFormikContext();
|
||||
const { dialogName, roles, isAuth } = useUserFormContext();
|
||||
|
||||
const handleClose = () => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form>
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<UserFormCalloutAlerts calloutCodes={calloutCode} />
|
||||
|
||||
{/* ----------- Email ----------- */}
|
||||
<FastField name={'email'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'email'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
className={classNames('form-group--email', CLASSES.FILL)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="email" />}
|
||||
>
|
||||
<InputGroup medium={true} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- First name ----------- */}
|
||||
<FastField name={'first_name'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'first_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'first_name'} />}
|
||||
>
|
||||
<InputGroup intent={inputIntent({ error, touched })} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
{/* ----------- Last name ----------- */}
|
||||
<FastField name={'last_name'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'last_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'last_name'} />}
|
||||
>
|
||||
<InputGroup intent={inputIntent({ error, touched })} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/* ----------- Phone name ----------- */}
|
||||
<FastField name={'phone_number'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'phone_number'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'phone_number'} />}
|
||||
>
|
||||
<InputGroup intent={inputIntent({ error, touched })} {...field} />
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
{/* ----------- Role name ----------- */}
|
||||
<FastField name={'role_id'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'roles.label.role_name'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
helperText={<ErrorMessage name="role_id" />}
|
||||
className={classNames(CLASSES.FILL, 'form-group--role_name')}
|
||||
intent={inputIntent({ error, touched })}
|
||||
>
|
||||
<ListSelect
|
||||
items={roles}
|
||||
onItemSelect={({ id }) => {
|
||||
form.setFieldValue('role_id', id);
|
||||
}}
|
||||
selectedItem={value}
|
||||
selectedItemProp={'id'}
|
||||
textProp={'name'}
|
||||
// labelProp={'id '}
|
||||
popoverProps={{ minimal: true }}
|
||||
intent={inputIntent({ error, touched })}
|
||||
disabled={isAuth}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</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}>
|
||||
<T id={'edit'} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
export default compose(withDialogActions)(UserFormContent);
|
||||
@@ -0,0 +1,17 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
|
||||
import UserForm from './UserForm';
|
||||
import { UserFormProvider } from './UserFormProvider';
|
||||
import '@/style/pages/Users/UserFormDialog.scss';
|
||||
|
||||
/**
|
||||
* User form dialog content.
|
||||
*/
|
||||
export default function UserFormDialogContent({ userId, dialogName }) {
|
||||
return (
|
||||
<UserFormProvider userId={userId} dialogName={dialogName}>
|
||||
<UserForm />
|
||||
</UserFormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// @ts-nocheck
|
||||
import React, { createContext, useContext } from 'react';
|
||||
import {
|
||||
useEditUser,
|
||||
useUser,
|
||||
useRoles,
|
||||
useAuthenticatedAccount,
|
||||
} from '@/hooks/query';
|
||||
|
||||
import { DialogContent } from '@/components';
|
||||
|
||||
const UserFormContext = createContext();
|
||||
|
||||
/**
|
||||
* User Form provider.
|
||||
*/
|
||||
function UserFormProvider({ userId, dialogName, ...props }) {
|
||||
// edit user mutations.
|
||||
const { mutateAsync: EditUserMutate } = useEditUser();
|
||||
|
||||
// fetch user detail.
|
||||
const { data: user, isLoading: isUserLoading } = useUser(userId, {
|
||||
enabled: !!userId,
|
||||
});
|
||||
|
||||
// fetch roles list.
|
||||
const { data: roles, isLoading: isRolesLoading } = useRoles();
|
||||
|
||||
// Retrieve authenticated user information.
|
||||
const {
|
||||
data: { id },
|
||||
} = useAuthenticatedAccount();
|
||||
|
||||
const isEditMode = userId;
|
||||
|
||||
const isAuth = user.system_user_id == id
|
||||
|
||||
// Provider state.
|
||||
const provider = {
|
||||
isAuth,
|
||||
userId,
|
||||
dialogName,
|
||||
|
||||
user,
|
||||
EditUserMutate,
|
||||
|
||||
isEditMode,
|
||||
roles,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent
|
||||
isLoading={isUserLoading || isRolesLoading}
|
||||
name={'user-form'}
|
||||
>
|
||||
<UserFormContext.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useUserFormContext = () => useContext(UserFormContext);
|
||||
|
||||
export { UserFormProvider, useUserFormContext };
|
||||
@@ -0,0 +1,15 @@
|
||||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import intl from 'react-intl-universal';
|
||||
import { includes } from 'lodash';
|
||||
import { Callout, Intent } from '@blueprintjs/core';
|
||||
|
||||
export const UserFormCalloutAlerts = ({ calloutCodes }) => {
|
||||
return [
|
||||
includes(calloutCodes, 200) && (
|
||||
<Callout icon={null} intent={Intent.DANGER}>
|
||||
{intl.get('roles.error.you_cannot_change_your_own_role')}
|
||||
</Callout>
|
||||
),
|
||||
];
|
||||
};
|
||||
@@ -0,0 +1,34 @@
|
||||
// @ts-nocheck
|
||||
import React, { lazy } from 'react';
|
||||
import { Dialog, DialogSuspense, FormattedMessage as T } from '@/components';
|
||||
import withDialogRedux from '@/components/DialogReduxConnect';
|
||||
import { compose } from '@/utils';
|
||||
|
||||
const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
|
||||
|
||||
function UserFormDialog({
|
||||
dialogName,
|
||||
payload = { action: '', userId: null },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={<T id={'edit_user'} />}
|
||||
className={'dialog--user-form'}
|
||||
autoFocus={true}
|
||||
canEscapeKeyClose={true}
|
||||
isOpen={isOpen}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<UserFormDialogContent
|
||||
dialogName={dialogName}
|
||||
userId={payload.userId}
|
||||
action={payload.action}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogRedux())(UserFormDialog);
|
||||
@@ -0,0 +1,14 @@
|
||||
// @ts-nocheck
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
// handle delete errors.
|
||||
export const transformErrors = (errors, { setErrors, setCalloutCode }) => {
|
||||
if (
|
||||
errors.find((error) => error.type === 'CANNOT_AUTHORIZED_USER_MUTATE_ROLE')
|
||||
) {
|
||||
setCalloutCode([200]);
|
||||
setErrors({
|
||||
role_id: intl.get('roles.error.you_cannot_change_your_own_role'),
|
||||
});
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user