feat: Add sorting to role assigned users table (workspaces asc, users asc) (#5486)

fat: add sorting to role assigned users table (workspaces asc, users asc)
This commit is contained in:
Neha Prasad 2025-11-26 04:26:37 +05:30 committed by GitHub
parent 1f3f7a7194
commit 9dbb4bf623
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 58 additions and 5 deletions

View File

@ -21,7 +21,8 @@ import {
useTheme,
Typography,
Button,
Drawer
Drawer,
TableSortLabel
} from '@mui/material'
// project imports
@ -185,6 +186,8 @@ function ShowRoleRow(props) {
const [openViewPermissionsDrawer, setOpenViewPermissionsDrawer] = useState(false)
const [selectedRoleId, setSelectedRoleId] = useState('')
const [assignedUsers, setAssignedUsers] = useState([])
const [order, setOrder] = useState('asc')
const [orderBy, setOrderBy] = useState('workspace')
const theme = useTheme()
const customization = useSelector((state) => state.customization)
@ -196,6 +199,38 @@ function ShowRoleRow(props) {
setSelectedRoleId(roleId)
}
const handleRequestSort = (property) => {
const isAsc = orderBy === property && order === 'asc'
setOrder(isAsc ? 'desc' : 'asc')
setOrderBy(property)
}
const sortedAssignedUsers = [...assignedUsers].sort((a, b) => {
let comparison = 0
if (orderBy === 'workspace') {
const workspaceA = (a.workspace?.name || '').toLowerCase()
const workspaceB = (b.workspace?.name || '').toLowerCase()
comparison = workspaceA.localeCompare(workspaceB)
if (comparison === 0) {
const userA = (a.user?.name || a.user?.email || '').toLowerCase()
const userB = (b.user?.name || b.user?.email || '').toLowerCase()
comparison = userA.localeCompare(userB)
}
} else if (orderBy === 'user') {
const userA = (a.user?.name || a.user?.email || '').toLowerCase()
const userB = (b.user?.name || b.user?.email || '').toLowerCase()
comparison = userA.localeCompare(userB)
if (comparison === 0) {
const workspaceA = (a.workspace?.name || '').toLowerCase()
const workspaceB = (b.workspace?.name || '').toLowerCase()
comparison = workspaceA.localeCompare(workspaceB)
}
}
return order === 'asc' ? comparison : -comparison
})
useEffect(() => {
if (getAllUsersByRoleIdApi.data) {
setAssignedUsers(getAllUsersByRoleIdApi.data)
@ -203,12 +238,14 @@ function ShowRoleRow(props) {
}, [getAllUsersByRoleIdApi.data])
useEffect(() => {
if (open && selectedRoleId) {
if (openAssignedUsersDrawer && selectedRoleId) {
getAllUsersByRoleIdApi.request(selectedRoleId)
} else {
setOpenAssignedUsersDrawer(false)
setSelectedRoleId('')
setAssignedUsers([])
setOrder('asc')
setOrderBy('workspace')
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [openAssignedUsersDrawer])
@ -301,12 +338,28 @@ function ShowRoleRow(props) {
}}
>
<TableRow>
<StyledTableCell sx={{ width: '50%' }}>User</StyledTableCell>
<StyledTableCell sx={{ width: '50%' }}>Workspace</StyledTableCell>
<StyledTableCell sx={{ width: '50%' }}>
<TableSortLabel
active={orderBy === 'user'}
direction={orderBy === 'user' ? order : 'asc'}
onClick={() => handleRequestSort('user')}
>
User
</TableSortLabel>
</StyledTableCell>
<StyledTableCell sx={{ width: '50%' }}>
<TableSortLabel
active={orderBy === 'workspace'}
direction={orderBy === 'workspace' ? order : 'asc'}
onClick={() => handleRequestSort('workspace')}
>
Workspace
</TableSortLabel>
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{assignedUsers.map((item, index) => (
{sortedAssignedUsers.map((item, index) => (
<TableRow key={index}>
<StyledTableCell>{item.user.name || item.user.email}</StyledTableCell>
<StyledTableCell>{item.workspace.name}</StyledTableCell>