Todos los componentes (244)

Vistas guardadas

Gestión · SavedViewsManager

Qué es y cuándo usarlo

Las vistas guardadas de una pantalla: elegir una, guardar lo que se ve como vista nueva o encima de la activa, renombrar, marcar la de por defecto y borrar con confirmación.

Cuándo usarlo

Un listado con filtros que la gente repite: «Pendientes de cobro», «Este mes», «Mis incidencias».
Lo que guarda cada vista (value) es de la aplicación: filtros, orden, columnas. La biblioteca no lo mira; lo devuelve al elegir (onSelect).
activeId dice cuál se está viendo y modified si lo que se ve ya no es lo que guarda: entonces se ofrece guardar los cambios en ella (onUpdate).
Cada acción sale solo si se pasa su función: onSave, onRename, onMakeDefault, onDelete.

Cuándo no

Un único filtro de un clic: un filtro rápido de SmartFilterBar.
Compartir vistas entre usuarios o con permisos: eso lo decide el servidor que las guarda.

Teclado: el botón abre el panel con el foco dentro; cada vista y cada acción son botones, y el nombre se guarda con Intro.

Accesibilidad: la vista activa lleva aria-current, la de por defecto lo dice con texto, borrar pide confirmación y no se admiten dos vistas con el mismo nombre (sin distinguir mayúsculas ni acentos). Guardar y borrar se anuncian.

Aspecto fino: la activa lleva el fondo suave del acento; las acciones van en texto pequeño bajo cada vista.

Cómo se ve

Vista activa: Todos los pedidos.

<SavedViewsManager
  label="Vistas de pedidos"
  views={vistas}
  activeId={activa}
  onSelect={(vista) => aplicar(vista.value)}
  onSave={guardarVistaNueva}
  onRename={renombrar}
  onMakeDefault={marcarPorDefecto}
  onDelete={borrar}
/>

Props

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

Prop	Tipo	Para qué sirve
`activeId`obligatoria	`string \| null`	La vista que se esta viendo, o `null` si ninguna.
`label`obligatoria	`string`	Que vistas son («Vistas de facturas»). Obligatorio.
`onSelect`obligatoria	`(view: SavedView<T>) => void`	—
`views`obligatoria	`readonly SavedView<T>[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`modified`	`boolean`	Lo que se ve ahora ya no es lo que guarda la vista activa: se ofrece guardar los cambios en ella.
`onDelete`	`(id: string) => void \| Promise<void>`	—
`onMakeDefault`	`(id: string) => void \| Promise<void>`	—
`onRename`	`(id: string, name: string) => void \| Promise<void>`	—
`onSave`	`(name: string) => void \| Promise<void>`	Guardar lo que se ve ahora como vista nueva. Sin esto, no se pueden crear vistas.
`onUpdate`	`(id: string) => void \| Promise<void>`	Guardar lo que se ve ahora en la vista activa.

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: