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;