Saltar al contenido
EspañolEnglish
Todos los componentes (244)

Roles de las personas

Gestión · UserRoleEditor

Qué es y cuándo usarlo

Las personas con acceso a algo y el rol de cada una: cambiar el rol, buscar por nombre o correo y quitar el acceso con confirmación.

Cuándo usarlo

  • La pantalla de miembros de un proyecto, de una empresa o de un espacio compartido.
  • roles son los roles posibles, cada uno con una línea de lo que puede hacer (description), que sale en el desplegable.
  • onRoleChange cambia un rol; onRemove, si se pasa, quita el acceso tras confirmarlo. Una persona con locked (la propietaria, quien está editando) no se toca.
  • La búsqueda sale sola con más de ocho personas (searchable la fuerza).

Cuándo no

  • Editar qué puede hacer cada rol: PermissionMatrix.
  • Invitar a alguien nuevo: un formulario aparte; aquí solo se gestiona a quien ya tiene acceso.
  • No concede nada por sí solo: el servidor decide si el cambio vale.

Teclado: cada fila tiene su desplegable y su botón de quitar; quitar pide confirmación.

Accesibilidad: cada desplegable se llama con la persona («Rol de Pablo Sanz») y cada cambio se anuncia; un fallo se dice en una alerta.

Aspecto fino: una lista con borde; en pantalla estrecha el desplegable baja a su propia línea.

Cómo se ve

3 personas
  • Aitor Mena
    No se puede cambiar
    AdministradorLo ve y lo cambia todo
    GestorPedidos y clientes
    Solo lectura
  • Marta Ruiz
    AdministradorLo ve y lo cambia todo
    GestorPedidos y clientes
    Solo lectura
  • Lucía Ferrer
    AdministradorLo ve y lo cambia todo
    GestorPedidos y clientes
    Solo lectura

<UserRoleEditor
  label="Quién puede entrar"
  users={usuarios}
  roles={roles}
  searchable
  onRoleChange={cambiarRol}
  onRemove={quitarUsuario}
/>

Props

Se importa con import { UserRoleEditor } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
labelobligatoriastringQue acceso se edita («Personas del proyecto»). Obligatorio.
onRoleChangeobligatoria(userId: string, role: string) => void | Promise<void>Cambiar el rol de una persona. Si lanza o rechaza, se dice y el rol se queda como estaba. El servidor decide si se puede.
rolesobligatoriareadonly RoleOption[]—
usersobligatoriareadonly RoleUser[]—
classNamestringSe une a las clases de la biblioteca, no las sustituye.
onRemove(userId: string) => void | Promise<void>Quitar el acceso a una persona, con confirmacion. Sin esto, no se puede quitar a nadie.
searchablebooleanUn campo para buscar por nombre o correo. Por defecto, si hay mas de ocho personas.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: