feat: Style tweaks users list.

This commit is contained in:
Ahmed Bouhuolia
2020-05-27 08:54:25 +02:00
parent 944564ac9c
commit 2e8ffa2aa9
2 changed files with 26 additions and 17 deletions

View File

@@ -1,5 +1,5 @@
import React, { useState, useMemo, useCallback } from 'react'; import React, { useState, useMemo, useCallback } from 'react';
import { queryCache,useQuery } from 'react-query'; import { queryCache, useQuery } from 'react-query';
import DataTable from 'components/DataTable'; import DataTable from 'components/DataTable';
import { import {
Alert, Alert,
@@ -98,29 +98,31 @@ function UsersListPreferences({
// Handle confirm User delete // Handle confirm User delete
const handleConfirmUserDelete =useCallback(()=>{ const handleConfirmUserDelete = useCallback(() => {
if (!deleteUserState) { if (!deleteUserState) {
return; return;
} }
requestDeleteUser(deleteUserState.id).then((response) => { requestDeleteUser(deleteUserState.id)
setDeleteUserState(false); .then((response) => {
AppToaster.show({ setDeleteUserState(false);
message: formatMessage({ AppToaster.show({
id: 'the_user_has_been_successfully_deleted', message: formatMessage({
}), id: 'the_user_has_been_successfully_deleted',
intent:Intent.SUCCESS, }),
intent: Intent.SUCCESS,
});
queryCache.refetchQueries('users-table', { force: true });
})
.catch((errors) => {
setDeleteUserState(false);
}); });
queryCache.refetchQueries('users-table',{force:true}) }, [deleteUserState, requestDeleteUser, formatMessage]);
}).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={'inactivate_user'} />} text={<T id={'inactivate_user'} />}
onClick={() => onInactiveUser(user)} onClick={() => onInactiveUser(user)}
@@ -155,7 +157,7 @@ function UsersListPreferences({
width: 120, width: 120,
}, },
{ {
id: 'active', id: 'status',
Header: 'Status', Header: 'Status',
accessor: (user) => accessor: (user) =>
user.active ? ( user.active ? (
@@ -167,7 +169,7 @@ function UsersListPreferences({
<T id={'inactivate'} /> <T id={'inactivate'} />
</Tag> </Tag>
), ),
width: 50, width: 80,
className: 'status', className: 'status',
}, },
{ {
@@ -183,6 +185,7 @@ function UsersListPreferences({
), ),
className: 'actions', className: 'actions',
width: 50, width: 50,
disableResizing: true,
}, },
], ],
[actionMenuList, formatMessage], [actionMenuList, formatMessage],

View File

@@ -121,7 +121,13 @@
// Users/Roles List. // Users/Roles List.
// --------------------------------- // ---------------------------------
.preferences__inside-content--users-roles{ .preferences__inside-content--users-roles{
.bigcapital-datatable{ .bigcapital-datatable{
.table .th,
.table .td{
padding: 0.8rem 0.5rem;
}
.td.status{ .td.status{
text-transform: uppercase; text-transform: uppercase;
} }