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

WIP Feature / General & Users & Sidebar

Browse Source
This commit is contained in:
elforjani3
2020-04-20 16:52:25 +02:00
parent ff0a26a790
commit aaa370b9c3
21 changed files with 658 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
client/src/containers/Dashboard/Dialogs/UserFormDialog.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { useIntl } from "react-intl"
import {useFormik} from 'formik';
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
Dialog,
@@ -18,8 +18,12 @@ import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import AppToaster from 'components/AppToaster';
import useAsync from 'hooks/async';
import {objectKeysTransform} from 'utils';
import {pick, snakeCase} from 'lodash';
import { objectKeysTransform } from 'utils';
import { pick, snakeCase } from 'lodash';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import Icon from 'components/Icon';
import { compose } from 'utils';
function UserFormDialog({
fetchUser,
@@ -34,27 +38,21 @@ function UserFormDialog({
const intl = useIntl();
const fetchHook = useAsync(async () => {
await Promise.all([
...(payload.action === 'edit') ? [
fetchUser(payload.user.id),
] : [],
...(payload.action === 'edit' ? [fetchUser(payload.user.id)] : []),
]);
}, false);
const validationSchema = Yup.object().shape({
first_name: Yup.string().required(),
last_name: Yup.string().required(),
email: Yup.string().email().required(),
phone_number: Yup.string().required(),
password: Yup.string().min(5).required(),
});
const initialValues = {
status: 1,
...payload.action === 'edit' &&
...(payload.action === 'edit' &&
pick(
objectKeysTransform(payload.user, snakeCase),
Object.keys(validationSchema.fields)
),
)),
password: '',
};
@@ -84,113 +82,76 @@ function UserFormDialog({
}
},
});
const { values, errors, touched } = useMemo(() => formik, [formik]);
const statusOptions = [
{value: 1, label: 'Active'},
{value: 2, label: 'Inactive'},
{ value: 1, label: 'Active' },
{ value: 2, label: 'Inactive' },
];
const onDialogOpening = () => { fetchHook.execute(); };
const onDialogOpening = () => {
fetchHook.execute();
};
const onDialogClosed = () => {
formik.resetForm();
};
const handleClose = () => { closeDialog(name); };
const handleClose = () => {
closeDialog(name);
};
return (
<Dialog
isOpen={isOpen}
name={name}
title={payload.action === 'edit' ? 'Edit User' : 'New User'}
title={payload.action === 'edit' ? 'Edit invite' : 'New invite'}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--invite-form': true,
})}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
isLoading={fetchHook.pending}
onClosed={onDialogClosed}
onOpening={onDialogOpening}>
onOpening={onDialogOpening}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'First Name'}
className={'form-group--first-name'}
intent={formik.errors.first_name && Intent.DANGER}
helperText={formik.errors.first_name && formik.errors.first_name}
inline={true}>
label={'Email'}
className={'form-group--email'}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...formik} />}
inline={true}
>
<InputGroup
intent={formik.errors.first_name && Intent.DANGER}
{...formik.getFieldProps('first_name')} />
medium={true}
intent={errors.email && touched.email && Intent.DANGER}
{...formik.getFieldProps('email')}
/>
</FormGroup>
<FormGroup
label={'Last Name'}
className={'form-group--last-name'}
intent={formik.errors.last_name && Intent.DANGER}
helperText={formik.errors.last_name && formik.errors.last_name}
inline={true}>
<InputGroup
intent={formik.errors.last_name && Intent.DANGER}
{...formik.getFieldProps('last_name')} />
</FormGroup>
<FormGroup
label={'Email'}
className={'form-group--email'}
intent={formik.errors.email && Intent.DANGER}
helperText={formik.errors.email && formik.errors.email}
inline={true}>
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...formik} />}
inline={true}
>
<InputGroup
intent={formik.errors.email && Intent.DANGER}
{...formik.getFieldProps('email')} />
medium={true}
intent={errors.email && touched.email && Intent.DANGER}
{...formik.getFieldProps('email')}
/>
</FormGroup>
</div>
<FormGroup
label={'Phone Number'}
className={'form-group--phone-number'}
intent={formik.errors.phone_number && Intent.DANGER}
helperText={formik.errors.phone_number && formik.errors.phone_number}
inline={true}>
<InputGroup
intent={formik.errors.phone_number && Intent.DANGER}
{...formik.getFieldProps('phone_number')} />
</FormGroup>
<FormGroup
label={'Password'}
className={'form-group--password'}
intent={formik.errors.password && Intent.DANGER}
helperText={formik.errors.password && formik.errors.password}
inline={true}>
<InputGroup
intent={formik.errors.password && Intent.DANGER}
className={Classes.FILL}
{...formik.getFieldProps('password')} />
</FormGroup>
<FormGroup
label={'Status'}
className={'form-group--status'}
intent={formik.errors.status && Intent.DANGER}
helperText={formik.errors.status && formik.errors.status}
inline={true}>
<HTMLSelect
options={statusOptions}
className={Classes.FILL}
{...formik.getFieldProps(`status`)} />
</FormGroup>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ payload.action === 'edit' ? 'Edit' : 'Submit' }
</Button>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'invite'}
</Button>
</div>
</div>
</form>
@@ -198,4 +159,7 @@ function UserFormDialog({
);
}
export default UserFormDialogConnect(DialogReduxConnect(UserFormDialog));
export default compose(
UserFormDialogConnect,
DialogReduxConnect
)(UserFormDialog);