Todos los componentes (244)

Edición masiva

Gestión · BulkEditPanel

Qué es y cuándo usarlo

Cambiar a la vez uno o varios campos de todos los registros elegidos: para cada campo, no cambiarlo, ponerle un valor o vaciarlo.

Cuándo usarlo

Después de elegir varias filas de una tabla: cambiar el estado de 30 facturas, asignar un responsable a 12 incidencias.
fields son los campos que se pueden cambiar, con su tipo (text, number, date, boolean, select con options). clearable: false quita la opción de vaciar a un campo obligatorio.
count es cuántos registros hay elegidos; la cuenta la lleva SelectionBar.
onApply recibe solo lo que cambia ([{ field, value }]; vaciar es value: null). Antes de aplicar dice cuántos campos cambiarán en cuántos registros, y no deja aplicar con un valor a medias.

Cuándo no

Editar un solo registro: su formulario.
No toca ningún registro: llama a onApply, y el servidor comprueba que se puede cambiar cada uno.

Teclado: son desplegables, campos y botones normales.

Accesibilidad: cada campo tiene su etiqueta y el valor nuevo se nombra con el campo («Nuevo valor de Responsable»). El resumen y el resultado se anuncian; un fallo se dice en una alerta.

Aspecto fino: los campos van en una rejilla que se adapta al ancho; los botones, al final y a la derecha.

Cómo se ve

12 registros elegidos

Estado
No cambiar
Poner
Vaciar
Precio
No cambiar
Poner
Vaciar
Destacado
No cambiar
Poner
Vaciar
Etiqueta
No cambiar
Poner
Vaciar

Elige qué cambiar en cada campo.

Sin cambios aplicados.

<BulkEditPanel
  label="Editar 12 productos"
  fields={campos}
  count={12}
  onApply={(cambios) => aplicarA(seleccionados, cambios)}
  onCancel={cerrar}
/>

Props

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

Prop	Tipo	Para qué sirve
`count`obligatoria	`number`	Cuantos registros estan elegidos.
`fields`obligatoria	`readonly BulkField[]`	Los campos que se pueden cambiar a la vez en todos los elegidos.
`label`obligatoria	`string`	Que se edita («Editar facturas elegidas»). Obligatorio.
`onApply`obligatoria	`(changes: readonly BulkChange[]) => void \| Promise<void>`	Aplicar los cambios a todos los elegidos. Recibe solo los campos que cambian; vaciar es `value: null`. Si lanza o rechaza, se dice y el panel se queda como estaba. El servidor tiene que comprobar que se puede cambiar cada registro.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`onCancel`	`() => void`	Cerrar sin aplicar. Si se pasa, sale el boton de cancelar.

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: