mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
Fix : Preferences
This commit is contained in:
elforjani3
185
client/src/containers/Preferences/Users/UsersDataTable.js
Normal file
185
client/src/containers/Preferences/Users/UsersDataTable.js
Normal file
@@ -0,0 +1,185 @@
|
||||
import React, { useCallback, useState, useMemo } from 'react';
|
||||
import {
|
||||
Intent,
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuDivider,
|
||||
Tag,
|
||||
MenuItem,
|
||||
Position,
|
||||
} from '@blueprintjs/core';
|
||||
import { withRouter } from 'react-router';
|
||||
import { snakeCase } from 'lodash';
|
||||
|
||||
import {
|
||||
FormattedMessage as T,
|
||||
FormattedHTMLMessage,
|
||||
useIntl,
|
||||
} from 'react-intl';
|
||||
import { compose } from 'utils';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { DataTable, Icon, If, AppToaster } from 'components';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withUsers from 'containers/Users/withUsers';
|
||||
|
||||
function UsersDataTable({
|
||||
// #withDialogActions
|
||||
openDialog,
|
||||
|
||||
// #withUsers
|
||||
usersList,
|
||||
usersLoading,
|
||||
|
||||
// #ownProps
|
||||
loading,
|
||||
onFetchData,
|
||||
onInactiveUser,
|
||||
onDeleteUser,
|
||||
onSelectedRowsChange,
|
||||
}) {
|
||||
const [initialMount, setInitialMount] = useState(false);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const onEditUser = useCallback(
|
||||
(user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
openDialog('userList-form', { action: 'edit', user: form });
|
||||
},
|
||||
[openDialog],
|
||||
);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(user) => (
|
||||
<Menu>
|
||||
<If condition={user.invite_accepted_at}>
|
||||
<MenuItem
|
||||
icon={<Icon icon="pen-18" />}
|
||||
text={formatMessage({ id: 'edit_user' })}
|
||||
onClick={onEditUser(user)}
|
||||
/>
|
||||
<MenuDivider />
|
||||
|
||||
<MenuItem
|
||||
text={formatMessage({ id: 'inactivate_user' })}
|
||||
onClick={() => onInactiveUser(user)}
|
||||
/>
|
||||
</If>
|
||||
|
||||
<MenuItem
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
text={formatMessage({ id: 'delete_user' })}
|
||||
onClick={() => onDeleteUser(user)}
|
||||
intent={Intent.DANGER}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[onInactiveUser, onDeleteUser, onEditUser],
|
||||
);
|
||||
const onRowContextMenu = useCallback(
|
||||
(cell) => {
|
||||
return actionMenuList(cell.row.original);
|
||||
},
|
||||
[actionMenuList],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'full_name',
|
||||
Header: formatMessage({ id: 'full_name' }),
|
||||
accessor: 'full_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
Header: formatMessage({ id: 'email' }),
|
||||
accessor: 'email',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'phone_number',
|
||||
Header: formatMessage({ id: 'phone_number' }),
|
||||
accessor: 'phone_number',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: 'Status',
|
||||
accessor: (user) =>
|
||||
!user.invite_accepted_at ? (
|
||||
<Tag minimal={true}>
|
||||
<T id={'inviting'} />
|
||||
</Tag>
|
||||
) : user.active ? (
|
||||
<Tag intent={Intent.SUCCESS} minimal={true}>
|
||||
<T id={'activate'} />
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag intent={Intent.WARNING} minimal={true}>
|
||||
<T id={'inactivate'} />
|
||||
</Tag>
|
||||
),
|
||||
width: 80,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[actionMenuList, formatMessage],
|
||||
);
|
||||
|
||||
const handelDataTableFetchData = useCallback(
|
||||
(...args) => {
|
||||
onFetchData && onFetchData(...args);
|
||||
},
|
||||
[onFetchData],
|
||||
);
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(selectedRows) => {
|
||||
onSelectedRowsChange &&
|
||||
onSelectedRowsChange(selectedRows.map((s) => s.original));
|
||||
},
|
||||
[onSelectedRowsChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<LoadingIndicator loading={loading} mount={false}>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={usersList}
|
||||
onFetchData={handelDataTableFetchData}
|
||||
loading={usersLoading && !initialMount}
|
||||
manualSortBy={true}
|
||||
noInitialFetch={true}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
rowContextMenu={onRowContextMenu}
|
||||
/>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withRouter,
|
||||
withDialogActions,
|
||||
withUsers(({ usersList, usersLoading }) => ({ usersList, usersLoading })),
|
||||
)(UsersDataTable);
|
||||
@@ -1,41 +1,31 @@
|
||||
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import { queryCache, useQuery } from 'react-query';
|
||||
import DataTable from 'components/DataTable';
|
||||
import {
|
||||
Alert,
|
||||
Popover,
|
||||
Button,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Intent,
|
||||
Tag,
|
||||
} from '@blueprintjs/core';
|
||||
import { snakeCase } from 'lodash';
|
||||
import { Alert, Intent } from '@blueprintjs/core';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withUsers from 'containers/Users/withUsers';
|
||||
import UsersDataTable from './UsersDataTable';
|
||||
import withUsersActions from 'containers/Users/withUsersActions';
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
import {
|
||||
FormattedMessage as T,
|
||||
FormattedHTMLMessage,
|
||||
useIntl,
|
||||
} from 'react-intl';
|
||||
|
||||
import Icon from 'components/Icon';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
import { If } from 'components';
|
||||
import { snakeCase } from 'lodash';
|
||||
|
||||
import AppToaster from 'components/AppToaster';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
import withUsers from 'containers/Users/withUsers';
|
||||
import withUsersActions from 'containers/Users/withUsersActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
|
||||
function UsersListPreferences({
|
||||
// #withDialog
|
||||
openDialog,
|
||||
|
||||
// #withDashboardActions
|
||||
changePreferencesPageTitle,
|
||||
|
||||
// #withUsers
|
||||
@@ -51,15 +41,18 @@ function UsersListPreferences({
|
||||
}) {
|
||||
const [deleteUserState, setDeleteUserState] = useState(false);
|
||||
const [inactiveUserState, setInactiveUserState] = useState(false);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const fetchUsers = useQuery('users-table', () => requestFetchUsers());
|
||||
|
||||
useEffect(() => {
|
||||
changePreferencesPageTitle(formatMessage({ id: 'users' }));
|
||||
}, [changePreferencesPageTitle, formatMessage]);
|
||||
|
||||
|
||||
const onInactiveUser = useCallback((user) => {
|
||||
// Handle cancel/confirm user inactive.
|
||||
const handleInactiveUser = useCallback((user) => {
|
||||
setInactiveUserState(user);
|
||||
}, []);
|
||||
|
||||
@@ -86,26 +79,20 @@ function UsersListPreferences({
|
||||
});
|
||||
}, [inactiveUserState, requestInactiveUser, formatMessage]);
|
||||
|
||||
const onDeleteUser = useCallback((user) => {
|
||||
// Handle click and cancel/confirm user delete
|
||||
const handleDeleteUser = useCallback((user) => {
|
||||
setDeleteUserState(user);
|
||||
}, []);
|
||||
|
||||
// handle cancel delete user alert.
|
||||
const handleCancelUserDelete = () => {
|
||||
setDeleteUserState(false);
|
||||
};
|
||||
|
||||
const onEditUser = useCallback(
|
||||
(user) => () => {
|
||||
const form = Object.keys(user).reduce((obj, key) => {
|
||||
const camelKey = snakeCase(key);
|
||||
obj[camelKey] = user[key];
|
||||
return obj;
|
||||
}, {});
|
||||
const handleEditUser = useCallback(() => {}, []);
|
||||
|
||||
|
||||
|
||||
openDialog('userList-form', { action: 'edit', user: form });
|
||||
},
|
||||
[openDialog],
|
||||
);
|
||||
|
||||
// Handle confirm User delete
|
||||
const handleConfirmUserDelete = useCallback(() => {
|
||||
@@ -128,138 +115,63 @@ function UsersListPreferences({
|
||||
});
|
||||
}, [deleteUserState, requestDeleteUser, formatMessage]);
|
||||
|
||||
const actionMenuList = useCallback(
|
||||
(user) => (
|
||||
<Menu>
|
||||
<If condition={user.invite_accepted_at}>
|
||||
<MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
|
||||
<MenuDivider />
|
||||
// const handelDataTableFetchData = useCallback(() => {
|
||||
// onFetchData && onFetchData();
|
||||
// }, [onFetchData]);
|
||||
|
||||
<MenuItem
|
||||
text={<T id={'inactivate_user'} />}
|
||||
onClick={() => onInactiveUser(user)}
|
||||
/>
|
||||
</If>
|
||||
|
||||
<MenuItem
|
||||
text={<T id={'delete_user'} />}
|
||||
onClick={() => onDeleteUser(user)}
|
||||
intent={Intent.DANGER}
|
||||
/>
|
||||
</Menu>
|
||||
),
|
||||
[onInactiveUser, onDeleteUser, onEditUser],
|
||||
// Handle selected rows change.
|
||||
const handleSelectedRowsChange = useCallback(
|
||||
(accounts) => {
|
||||
setSelectedRows(accounts);
|
||||
},
|
||||
[setSelectedRows],
|
||||
);
|
||||
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'full_name',
|
||||
Header: formatMessage({ id: 'full_name' }),
|
||||
accessor: 'full_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'email',
|
||||
Header: formatMessage({ id: 'email' }),
|
||||
accessor: 'email',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'phone_number',
|
||||
Header: formatMessage({ id: 'phone_number' }),
|
||||
accessor: 'phone_number',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
Header: 'Status',
|
||||
accessor: (user) =>
|
||||
!user.invite_accepted_at ? (
|
||||
<Tag minimal={true}>
|
||||
<T id={'inviting'} />
|
||||
</Tag>
|
||||
) : user.active ? (
|
||||
<Tag intent={Intent.SUCCESS} minimal={true}>
|
||||
<T id={'activate'} />
|
||||
</Tag>
|
||||
) : (
|
||||
<Tag intent={Intent.WARNING} minimal={true}>
|
||||
<T id={'inactivate'} />
|
||||
</Tag>
|
||||
),
|
||||
width: 80,
|
||||
className: 'status',
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Header: '',
|
||||
Cell: ({ cell }) => (
|
||||
<Popover
|
||||
content={actionMenuList(cell.row.original)}
|
||||
position={Position.RIGHT_TOP}
|
||||
>
|
||||
<Button icon={<Icon icon="ellipsis-h" />} />
|
||||
</Popover>
|
||||
),
|
||||
className: 'actions',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
},
|
||||
],
|
||||
[actionMenuList, formatMessage],
|
||||
);
|
||||
|
||||
const handelDataTableFetchData = useCallback(() => {
|
||||
onFetchData && onFetchData();
|
||||
}, [onFetchData]);
|
||||
|
||||
return (
|
||||
<LoadingIndicator>
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={usersList}
|
||||
onFetchData={handelDataTableFetchData()}
|
||||
loading={fetchUsers.isFetching}
|
||||
manualSortBy={true}
|
||||
expandable={false}
|
||||
/>
|
||||
<DashboardInsider loading={fetchUsers.isFetching}>
|
||||
<DashboardPageContent>
|
||||
<UsersDataTable
|
||||
onDeleteUser={handleDeleteUser}
|
||||
onInactiveUser={handleInactiveUser}
|
||||
onEditUser={handleEditUser}
|
||||
// onFetchData={handleFetchData}
|
||||
onSelectedRowsChange={handleSelectedRowsChange}
|
||||
/>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteUserState}
|
||||
onCancel={handleCancelUserDelete}
|
||||
onConfirm={handleConfirmUserDelete}
|
||||
>
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id={'once_delete_this_account_you_will_able_to_restore_it'}
|
||||
/>
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'inactivate'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={inactiveUserState}
|
||||
onCancel={handleCancelInactiveUser}
|
||||
onConfirm={handleConfirmUserActive}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_inactive_this_account'} />
|
||||
</p>
|
||||
</Alert>
|
||||
</LoadingIndicator>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'delete'} />}
|
||||
icon="trash"
|
||||
intent={Intent.DANGER}
|
||||
isOpen={deleteUserState}
|
||||
onCancel={handleCancelUserDelete}
|
||||
onConfirm={handleConfirmUserDelete}
|
||||
>
|
||||
<p>
|
||||
<FormattedHTMLMessage
|
||||
id={'once_delete_this_account_you_will_able_to_restore_it'}
|
||||
/>
|
||||
</p>
|
||||
</Alert>
|
||||
<Alert
|
||||
cancelButtonText={<T id={'cancel'} />}
|
||||
confirmButtonText={<T id={'inactivate'} />}
|
||||
intent={Intent.WARNING}
|
||||
isOpen={inactiveUserState}
|
||||
onCancel={handleCancelInactiveUser}
|
||||
onConfirm={handleConfirmUserActive}
|
||||
>
|
||||
<p>
|
||||
<T id={'are_sure_to_inactive_this_account'} />
|
||||
</p>
|
||||
</Alert>
|
||||
</DashboardPageContent>
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDialogActions,
|
||||
withDashboardActions,
|
||||
withUsers,
|
||||
withUsersActions,
|
||||
)(UsersListPreferences);
|
||||
|
||||
Reference in New Issue
Block a user