diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index c99bbcfb589..6caa9ff1020 100644
--- a/client/admin/users/UsersTable.js
+++ b/client/admin/users/UsersTable.js
@@ -3,7 +3,8 @@ import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
import React, { useMemo, useCallback, useState, useEffect } from 'react';
import UserAvatar from '../../components/basic/avatar/UserAvatar';
-import { GenericTable, Th } from '../../components/GenericTable';
+import { GenericTable } from '../../components/GenericTable';
+import { capitalize } from '../../helpers/capitalize';
import { useTranslation } from '../../contexts/TranslationContext';
import { useRoute } from '../../contexts/RouterContext';
import { useEndpointData } from '../../hooks/useEndpointData';
@@ -25,8 +26,34 @@ const FilterByText = ({ setFilter, ...props }) => {
const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
+const UserRow = ({ emails, _id, username, name, roles, status, avatarETag, onClick, mediaQuery, active }) => {
+ const t = useTranslation();
+
+ const statusText = active ? t(capitalize(status)) : t('Disabled');
+ return
+
+
+
+
+
+ {name || username}
+ {!mediaQuery && name && {`@${ username }`} }
+
+
+
+
+ {mediaQuery &&
+ { username }
+ }
+ {emails && emails.length && emails[0].address}
+ {mediaQuery && {roles && roles.join(', ')}}
+ {statusText}
+ ;
+};
+
+
const useQuery = ({ text, itemsPerPage, current }, [column, direction]) => useMemo(() => ({
- fields: JSON.stringify({ name: 1, username: 1, emails: 1, roles: 1, status: 1, avatarETag: 1 }),
+ fields: JSON.stringify({ name: 1, username: 1, emails: 1, roles: 1, status: 1, avatarETag: 1, active: 1 }),
query: JSON.stringify({
$or: [
{ 'emails.address': { $regex: text || '', $options: 'i' } },
@@ -70,35 +97,32 @@ export function UsersTable() {
const mediaQuery = useMediaQuery('(min-width: 1024px)');
- const header = useMemo(() => [
- {t('Name')} | ,
- mediaQuery && {t('Username')} | ,
- {t('Email')} | ,
- mediaQuery && {t('Roles')} | ,
- {t('Status')} | ,
- ].filter(Boolean), [sort, onHeaderClick, t, mediaQuery]);
-
- const renderRow = useCallback(({ emails, _id, username, name, roles, status, avatarETag }) =>
-
-
-
-
-
- {name || username}
- {!mediaQuery && name && {`@${ username }`} }
-
-
-
-
- {mediaQuery &&
- { username }
- }
- {emails && emails.length && emails[0].address}
- {mediaQuery && {roles && roles.join(', ')}}
- {status}
- , [mediaQuery, onClick]);
-
- return ;
+ return
+
+ {t('Name')}
+
+ {mediaQuery &&
+ {t('Username')}
+ }
+
+ {t('Email')}
+
+ {mediaQuery &&
+ {t('Roles')}
+ }
+
+ {t('Status')}
+
+ >}
+ results={data.users}
+ total={data.total}
+ setParams={setParams}
+ params={params}
+ >
+ {(props) => }
+ ;
}
export default UsersTable;