56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import type { User } from '../../../../../../types/group-management/user'
|
|
import { useGroupMembersContext } from '../../context/group-members-context'
|
|
import { useCallback } from 'react'
|
|
import OLFormCheckbox from '@/features/ui/components/ol/ol-form-checkbox'
|
|
|
|
type ManagedUsersSelectUserCheckboxProps = {
|
|
user: User
|
|
}
|
|
|
|
export default function SelectUserCheckbox({
|
|
user,
|
|
}: ManagedUsersSelectUserCheckboxProps) {
|
|
const { t } = useTranslation()
|
|
const { users, selectedUsers, selectUser, unselectUser } =
|
|
useGroupMembersContext()
|
|
|
|
const handleSelectUser = useCallback(
|
|
(event, user) => {
|
|
if (event.target.checked) {
|
|
selectUser(user)
|
|
} else {
|
|
unselectUser(user)
|
|
}
|
|
},
|
|
[selectUser, unselectUser]
|
|
)
|
|
|
|
// Pending: user.enrollment will be `undefined`
|
|
// Non managed: user.enrollment will be an empty object
|
|
const nonManagedUsers = users.filter(user => !user.enrollment?.managedBy)
|
|
|
|
// Hide the entire `td` (entire column) if no more users available to be click
|
|
// because all users are currently managed
|
|
if (nonManagedUsers.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const selected = selectedUsers.includes(user)
|
|
|
|
return (
|
|
<td className="cell-checkbox">
|
|
{/* the next check will hide the `checkbox` but still show the `th` */}
|
|
{user.enrollment?.managedBy ? null : (
|
|
<OLFormCheckbox
|
|
autoComplete="off"
|
|
checked={selected}
|
|
onChange={e => handleSelectUser(e, user)}
|
|
aria-label={t('select_user')}
|
|
data-testid="select-single-checkbox"
|
|
/>
|
|
)}
|
|
</td>
|
|
)
|
|
}
|