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

fix issues in users list.

Browse Source
This commit is contained in:
elforjani3
2020-05-26 21:49:09 +02:00
parent 2321c3be99
commit 733ee5caf1
6 changed files with 162 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@@ -28,6 +28,7 @@
"basscss": "^8.0.2", "basscss": "^8.0.2",
"camelcase": "^5.3.1", "camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"cross-env": "^7.0.2",
"css-loader": "3.4.2", "css-loader": "3.4.2",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"dotenv-expand": "5.1.0", "dotenv-expand": "5.1.0",
@@ -101,6 +102,7 @@
}, },
"scripts": { "scripts": {
"start": "PORT=8000 node scripts/start.js", "start": "PORT=8000 node scripts/start.js",
"start-win": "cross-env PORT=8000 node scripts/start.js",
"build": "node scripts/build.js", "build": "node scripts/build.js",
"test": "node scripts/test.js", "test": "node scripts/test.js",
"flow": "flow" "flow": "flow"

14
client/src/containers/Dialogs/InviteUserDialog.js
View File

@@ -12,6 +12,7 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { objectKeysTransform } from 'utils'; import { objectKeysTransform } from 'utils';
import { pick, snakeCase } from 'lodash'; import { pick, snakeCase } from 'lodash';
import { queryCache } from 'react-query';
import AppToaster from 'components/AppToaster'; import AppToaster from 'components/AppToaster';
@@ -80,6 +81,7 @@ function InviteUserDialog({
message: formatMessage({id:'the_user_details_has_been_updated'}), message: formatMessage({id:'the_user_details_has_been_updated'}),
}); });
setSubmitting(false); setSubmitting(false);
queryCache.refetchQueries('users-table',{force:true})
}) })
.catch((error) => { .catch((error) => {
setSubmitting(false); setSubmitting(false);
@@ -97,14 +99,15 @@ function InviteUserDialog({
formik.resetForm(); formik.resetForm();
}, [formik.resetForm]); }, [formik.resetForm]);
const handleClose = () => { // Handles dialog close.
closeDialog(name); const handleClose = useCallback(() => {
}; closeDialog(name);
}, [closeDialog, name]);
return ( return (
<Dialog <Dialog
name={name} name={name}
title={payload.action === 'edit' ? <T id={'edit_invite'} /> : ''} title={payload.action === 'edit' ? <T id={'edit_user'} /> : ''}
className={classNames({ className={classNames({
'dialog--loading': fetchHook.pending, 'dialog--loading': fetchHook.pending,
'dialog--invite-user': true, 'dialog--invite-user': true,
@@ -115,6 +118,7 @@ function InviteUserDialog({
isLoading={fetchHook.pending} isLoading={fetchHook.pending}
onClosed={onDialogClosed} onClosed={onDialogClosed}
onOpening={onDialogOpening} onOpening={onDialogOpening}
onClose={handleClose}
> >
<form onSubmit={formik.handleSubmit}> <form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
@@ -179,7 +183,7 @@ function InviteUserDialog({
<div className={Classes.DIALOG_FOOTER}> <div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}> <div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}><T id={'close'}/></Button> <Button onClick={handleClose}><T id={'close'}/></Button>
<Button intent={Intent.PRIMARY} type='submit'> <Button intent={Intent.PRIMARY} type='submit' disabled={formik.isSubmitting} >
{payload.action === 'edit' ? <T id={'edit'}/> : ''} {payload.action === 'edit' ? <T id={'edit'}/> : ''}
</Button> </Button>
</div> </div>

37
client/src/containers/Dialogs/UserFormDialog.js
View File

@@ -1,4 +1,4 @@
import React, {useCallback } from 'react'; import React, { useCallback } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl'; import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik'; import { useFormik } from 'formik';
import * as Yup from 'yup'; import * as Yup from 'yup';
@@ -37,7 +37,10 @@ function UserFormDialog({
}, false); }, false);
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
email: Yup.string().email().required().label(formatMessage({id:'email'})), email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
}); });
const initialValues = { const initialValues = {
@@ -45,7 +48,7 @@ function UserFormDialog({
...(payload.action === 'edit' && ...(payload.action === 'edit' &&
pick( pick(
objectKeysTransform(payload.user, snakeCase), objectKeysTransform(payload.user, snakeCase),
Object.keys(validationSchema.fields) Object.keys(validationSchema.fields),
)), )),
}; };
@@ -82,7 +85,10 @@ function UserFormDialog({
resetForm(); resetForm();
}, [resetForm]); }, [resetForm]);
const handleClose = () => { closeDialog(name); }; // Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
return ( return (
<Dialog <Dialog
@@ -104,10 +110,11 @@ function UserFormDialog({
isLoading={fetchHook.pending} isLoading={fetchHook.pending}
onClosed={onDialogClosed} onClosed={onDialogClosed}
onOpening={onDialogOpening} onOpening={onDialogOpening}
onClose={handleClose}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
<p class='mb2'> <p class="mb2">
<T id={'your_access_to_your_team'} /> <T id={'your_access_to_your_team'} />
</p> </p>
@@ -115,7 +122,7 @@ function UserFormDialog({
label={<T id={'email'} />} label={<T id={'email'} />}
className={classNames('form-group--email', Classes.FILL)} className={classNames('form-group--email', Classes.FILL)}
intent={errors.email && touched.email && Intent.DANGER} intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...{ errors, touched }} />} helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
inline={true} inline={true}
> >
<InputGroup <InputGroup
@@ -128,9 +135,19 @@ function UserFormDialog({
<div className={Classes.DIALOG_FOOTER}> <div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}> <div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}><T id={'cancel'} /></Button> <Button onClick={handleClose}>
<Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}> <T id={'cancel'} />
{payload.action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />} </Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'invite'} />
)}
</Button> </Button>
</div> </div>
</div> </div>
@@ -141,5 +158,5 @@ function UserFormDialog({
export default compose( export default compose(
UserFormDialogConnect, UserFormDialogConnect,
DialogReduxConnect DialogReduxConnect,
)(UserFormDialog); )(UserFormDialog);

189
client/src/containers/Preferences/Users/UsersList.js
View File

@@ -1,5 +1,5 @@
import React, { useState, useMemo, useCallback } from 'react'; import React, { useState, useMemo, useCallback } from 'react';
import { useQuery } from 'react-query'; import { queryCache,useQuery } from 'react-query';
import DataTable from 'components/DataTable'; import DataTable from 'components/DataTable';
import { import {
Alert, Alert,
@@ -10,10 +10,14 @@ import {
MenuDivider, MenuDivider,
Position, Position,
Intent, Intent,
Tag Tag,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { snakeCase } from 'lodash'; import { snakeCase } from 'lodash';
import { FormattedMessage as T, useIntl } from 'react-intl'; import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import Icon from 'components/Icon'; import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator'; import LoadingIndicator from 'components/LoadingIndicator';
@@ -27,13 +31,12 @@ import withUsersActions from 'containers/Users/withUsersActions';
import { compose } from 'utils'; import { compose } from 'utils';
function UsersListPreferences({ function UsersListPreferences({
// #withDialog // #withDialog
openDialog, openDialog,
closeDialog, closeDialog,
// #withUsers // #withUsers
usersList, usersList,
// #withUsersActions // #withUsersActions
@@ -46,9 +49,8 @@ function UsersListPreferences({
}) { }) {
const [deleteUserState, setDeleteUserState] = useState(false); const [deleteUserState, setDeleteUserState] = useState(false);
const [inactiveUserState, setInactiveUserState] = useState(false); const [inactiveUserState, setInactiveUserState] = useState(false);
const { formatMessage } = useIntl() const { formatMessage } = useIntl();
const fetchUsers = useQuery('users-table', const fetchUsers = useQuery('users-table', () => requestFetchUsers());
() => requestFetchUsers());
const onInactiveUser = (user) => { const onInactiveUser = (user) => {
setInactiveUserState(user); setInactiveUserState(user);
@@ -63,9 +65,18 @@ function UsersListPreferences({
const handleConfirmUserActive = useCallback(() => { const handleConfirmUserActive = useCallback(() => {
requestInactiveUser(inactiveUserState.id).then(() => { requestInactiveUser(inactiveUserState.id).then(() => {
setInactiveUserState(false); setInactiveUserState(false);
AppToaster.show({ message: formatMessage({id:'the_user_has_been_successfully_inactivated'}) }); AppToaster.show({
message: formatMessage({
id: 'the_user_has_been_successfully_inactivated',
}),
});
}); });
}, [inactiveUserState, requestInactiveUser, requestFetchUsers,formatMessage]); }, [
inactiveUserState,
requestInactiveUser,
requestFetchUsers,
formatMessage,
]);
const onDeleteUser = (user) => { const onDeleteUser = (user) => {
setDeleteUserState(user); setDeleteUserState(user);
@@ -75,16 +86,6 @@ function UsersListPreferences({
setDeleteUserState(false); setDeleteUserState(false);
}; };
const onEditInviteUser = (user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
openDialog('user-form', { action: 'edit', user: form });
};
const onEditUser = (user) => () => { const onEditUser = (user) => () => {
const form = Object.keys(user).reduce((obj, key) => { const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key); const camelKey = snakeCase(key);
@@ -95,72 +96,97 @@ function UsersListPreferences({
openDialog('userList-form', { action: 'edit', user: form }); openDialog('userList-form', { action: 'edit', user: form });
}; };
const handleConfirmUserDelete = () => { // Handle confirm User delete
if (!deleteUserState) { return; }
const handleConfirmUserDelete =useCallback(()=>{
if (!deleteUserState) {
return;
}
requestDeleteUser(deleteUserState.id).then((response) => { requestDeleteUser(deleteUserState.id).then((response) => {
setDeleteUserState(false); setDeleteUserState(false);
AppToaster.show({ AppToaster.show({
message: formatMessage({id:'the_user_has_been_successfully_deleted'}), message: formatMessage({
id: 'the_user_has_been_successfully_deleted',
}),
intent:Intent.SUCCESS,
}); });
}); queryCache.refetchQueries('users-table',{force:true})
}; }).catch((errors)=>{
setDeleteUserState(false)
})
},[deleteUserState,requestDeleteUser,formatMessage])
const actionMenuList = useCallback( const actionMenuList = useCallback(
(user) => ( (user) => (
<Menu> <Menu>
<MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} /> <MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
<MenuDivider /> <MenuItem
<MenuItem text={<T id={'edit_invite'} />} onClick={onEditInviteUser(user)} /> text={<T id={'inactivate_user'} />}
<MenuItem text={<T id={'inactivate_user'} />} onClick={() => onInactiveUser(user)} /> onClick={() => onInactiveUser(user)}
<MenuItem text={<T id={'delete_user'} />} onClick={() => onDeleteUser(user)} /> />
<MenuItem
text={<T id={'delete_user'} />}
onClick={() => onDeleteUser(user)}
/>
</Menu> </Menu>
), ),
[] [],
); );
const columns = useMemo(() => [ const columns = useMemo(
{ () => [
id: 'full_name', {
Header:formatMessage({id:'full_name'}), id: 'full_name',
Header: formatMessage({ id: 'full_name' }),
accessor: 'full_name', accessor: 'full_name',
width: 170, width: 150,
}, },
{ {
id: 'email', id: 'email',
Header: formatMessage({id:'email'}), Header: formatMessage({ id: 'email' }),
accessor: 'email', accessor: 'email',
width: 150, width: 150,
}, },
{ {
id: 'phone_number', id: 'phone_number',
Header: formatMessage({id:'phone_number'}), Header: formatMessage({ id: 'phone_number' }),
accessor: 'phone_number', accessor: 'phone_number',
width: 150, width: 120,
}, },
{ {
id: 'active', id: 'active',
Header: 'Status', Header: 'Status',
accessor: (user) => user.active ? accessor: (user) =>
<Tag intent={Intent.SUCCESS} minimal={true}><T id={'activate'} /></Tag> : user.active ? (
<Tag intent={Intent.WARNING} minimal={true}><T id={'inactivate'} /></Tag>, <Tag intent={Intent.SUCCESS} minimal={true}>
width: 50, <T id={'activate'} />
className: 'status', </Tag>
}, ) : (
{ <Tag intent={Intent.WARNING} minimal={true}>
id: 'actions', <T id={'inactivate'} />
Header: '', </Tag>
Cell: ({ cell }) => ( ),
<Popover width: 50,
content={actionMenuList(cell.row.original)} className: 'status',
position={Position.RIGHT_TOP} },
> {
<Button icon={<Icon icon='ellipsis-h' />} /> id: 'actions',
</Popover> Header: '',
), Cell: ({ cell }) => (
className: 'actions', <Popover
width: 50, content={actionMenuList(cell.row.original)}
}, position={Position.RIGHT_TOP}
], [actionMenuList,formatMessage]); >
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
},
],
[actionMenuList, formatMessage],
);
const handelDataTableFetchData = useCallback(() => { const handelDataTableFetchData = useCallback(() => {
onFetchData && onFetchData(); onFetchData && onFetchData();
@@ -178,32 +204,31 @@ function UsersListPreferences({
/> />
<Alert <Alert
cancelButtonText={<T id={'cancel'}/>} cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'move_to_trash'}/>} confirmButtonText={<T id={'delete'} />}
icon='trash' icon="trash"
intent={Intent.DANGER} intent={Intent.DANGER}
isOpen={deleteUserState} isOpen={deleteUserState}
onCancel={handleCancelUserDelete} onCancel={handleCancelUserDelete}
onConfirm={handleConfirmUserDelete} onConfirm={handleConfirmUserDelete}
> >
<p> <p>
Are you sure you want to move <b>filename</b> to Trash? You will be <FormattedHTMLMessage
able to restore it later, but it will become private to you. id={'once_delete_this_account_you_will_able_to_restore_it'}
/>
</p> </p>
</Alert> </Alert>
<Alert <Alert
cancelButtonText={<T id={'cancel'}/>} cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'inactivate'}/>} confirmButtonText={<T id={'inactivate'} />}
icon='trash'
intent={Intent.WARNING} intent={Intent.WARNING}
isOpen={inactiveUserState} isOpen={inactiveUserState}
onCancel={handleCancelInactiveUser} onCancel={handleCancelInactiveUser}
onConfirm={handleConfirmUserActive} onConfirm={handleConfirmUserActive}
> >
<p> <p>
Are you sure you want to move <b>filename</b> to Trash? You will be <T id={'are_sure_to_inactive_this_account'} />
able to restore it later, but it will become private to you.
</p> </p>
</Alert> </Alert>
</LoadingIndicator> </LoadingIndicator>

5
client/src/lang/en/index.js
View File

@@ -77,17 +77,16 @@ export default {
new_exchange_rate: 'New Exchange Rate', new_exchange_rate: 'New Exchange Rate',
delete_exchange_rate: 'Delete Exchange Rate', delete_exchange_rate: 'Delete Exchange Rate',
exchange_rate: 'Exchange Rate', exchange_rate: 'Exchange Rate',
edit_invite: 'Edit invite',
edit_category: 'Edit Category', edit_category: 'Edit Category',
delete_category: 'Delete Category', delete_category: 'Delete Category',
new_category: 'New Category', new_category: 'New Category',
category_name: 'Category Name', category_name: 'Category Name',
parent_category: 'Parent Category', parent_category: 'Parent Category',
new: 'New', new: 'New',
invite_user: 'invite User', invite_user: 'Invite User',
your_access_to_your_team: your_access_to_your_team:
'Your teammate will get an email that gives them access to your team.', 'Your teammate will get an email that gives them access to your team.',
invite: 'invite', invite: 'Invite',
count: 'Count', count: 'Count',
item_type: 'Item Type', item_type: 'Item Type',
item_name: 'Item Name', item_name: 'Item Name',

28
client/src/style/pages/invite-form.scss
View File

@@ -1,18 +1,20 @@
.dialog--invite-form { .dialog--invite-form {
&.bp3-dialog { width: 450px;
width: 450px;
}
&:not(.dialog--loading) .bp3-dialog-body {
margin-bottom: 25px;
}
.bp3-dialog-body { .bp3-dialog-body {
.bp3-form-group.bp3-inline {
.bp3-dialog-footer-actions { .bp3-label {
margin-right: 30px; min-width: 70px;
display: flex; }
justify-content: flex-end; .bp3-form-content {
width: 250px;
.bp3-dialog-footer-actions {
margin-right: 20px;
display: flex;
justify-content: flex-end;
}
}
} }
} }
} }