Pantalla: Filtros Avanzados
Identificador: SCR-CAT-004
Modulo: MTS-CAT-001 - Catalogo de Medicamentos
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
FASE: 2 - Value
| Atributo |
Valor |
| Nombre |
Filtros Avanzados |
| Proposito |
Refinamiento de busqueda con multiples criterios |
| Tipo |
Bottom Sheet |
| Acceso |
SCR-CAT-002 > "+ Filtros" |
| Prioridad |
Media |
2. Wireframe ASCII
2.1. Estado: Filtros Disponibles
+------------------------------------------+
| ───── |
| |
| FILTROS [Limpiar] |
| ───────────────────────────────────── |
| |
| FORMA FARMACEUTICA |
| ┌─────────────────────────────────────┐ |
| │ [○ Tableta] [○ Capsula] │ |
| │ [○ Jarabe] [○ Suspension] │ |
| │ [○ Inyectable] [○ Topico] │ |
| │ [○ Parche] [○ Otro] │ |
| └─────────────────────────────────────┘ |
| |
| VIA DE ADMINISTRACION |
| ┌─────────────────────────────────────┐ |
| │ [○ Oral] [○ Topica] │ |
| │ [○ Inyectable] [○ Inhalada] │ |
| │ [○ Oftalmica] [○ Otra] │ |
| └─────────────────────────────────────┘ |
| |
| TIPO DE MEDICAMENTO |
| ┌─────────────────────────────────────┐ |
| │ [○ Generico] [○ Marca] │ |
| │ [○ Ambos] │ |
| └─────────────────────────────────────┘ |
| |
| REQUIERE RECETA |
| ┌─────────────────────────────────────┐ |
| │ [○ Si] [○ No] [● Todos] │ |
| └─────────────────────────────────────┘ |
| |
| PAIS DE DISPONIBILIDAD |
| ┌─────────────────────────────────────┐ |
| │ ● Mexico (tu ubicacion) │ |
| │ ○ Estados Unidos │ |
| │ ○ Brasil │ |
| │ ○ Todos los paises │ |
| └─────────────────────────────────────┘ |
| |
| +─────────────────────────────────────+ |
| │ Aplicar filtros (24 resultados) │ |
| +─────────────────────────────────────+ |
| |
+------------------------------------------+
2.2. Estado: Filtros Seleccionados
+------------------------------------------+
| ───── |
| |
| FILTROS [Limpiar] |
| ───────────────────────────────────── |
| |
| FORMA FARMACEUTICA |
| ┌─────────────────────────────────────┐ |
| │ [● Tableta] [○ Capsula] │ |
| │ [○ Jarabe] [○ Suspension] │ |
| │ [○ Inyectable] [○ Topico] │ |
| │ [○ Parche] [○ Otro] │ |
| └─────────────────────────────────────┘ |
| |
| VIA DE ADMINISTRACION |
| ┌─────────────────────────────────────┐ |
| │ [● Oral] [○ Topica] │ |
| │ [○ Inyectable] [○ Inhalada] │ |
| │ [○ Oftalmica] [○ Otra] │ |
| └─────────────────────────────────────┘ |
| |
| TIPO DE MEDICAMENTO |
| ┌─────────────────────────────────────┐ |
| │ [● Generico] [○ Marca] │ |
| │ [○ Ambos] │ |
| └─────────────────────────────────────┘ |
| |
| [... resto igual ...] |
| |
| +─────────────────────────────────────+ |
| │ Aplicar filtros (8 resultados) │ |
| +─────────────────────────────────────+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Filter Section
| Propiedad |
Valor |
| Componente |
CMP-CAT-011 (FilterSection) NUEVO |
| Header |
Nombre de categoria |
| Content |
Chips o radio buttons |
| Collapsible |
Opcional |
3.2. Filter Chip
| Propiedad |
Valor |
| Componente |
CMP-CAT-012 (FilterChip) NUEVO |
| Estado |
selected / unselected |
| Multiple |
Si (por seccion) |
| Touch target |
44dp height |
3.3. Radio Group
| Propiedad |
Valor |
| Componente |
CMP-INP-012 (RadioGroup) |
| Layout |
Vertical |
| Single select |
Si |
3.4. Clear Link
| Propiedad |
Valor |
| Componente |
Text link |
| Posicion |
Header derecha |
| Texto |
"Limpiar" |
| Color |
primary.500 |
| Propiedad |
Valor |
| Componente |
CMP-BTN-001 (Primary Button) |
| Texto |
"Aplicar filtros ({N} resultados)" |
| Sticky |
Si (bottom) |
| Contador |
Dinamico segun preview |
4. Comportamientos
4.1. Preview de Resultados
flowchart TD
A[Usuario selecciona filtro] --> B[Debounce 200ms]
B --> C[Consultar preview]
C --> D[Actualizar contador]
D --> E["Aplicar filtros ({N} resultados)"]
4.2. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Filter chip |
Toggle seleccion |
| Tap |
Radio option |
Seleccionar unico |
| Tap |
"Limpiar" |
Reset todos |
| Tap |
"Aplicar" |
Cerrar + aplicar |
| Swipe down |
Sheet |
Cerrar sin aplicar |
4.3. Persistencia
| Comportamiento |
Descripcion |
| Al aplicar |
Guardar en session |
| Al limpiar |
Reset a defaults |
| Al cerrar sin aplicar |
Descartar cambios |
| Entre busquedas |
Mantener filtros |
5. Datos Requeridos
interface FiltersData {
// Filtros actuales
currentFilters: FilterState;
// Opciones disponibles
availableFilters: {
forms: FilterOption[];
routes: FilterOption[];
types: FilterOption[];
prescription: FilterOption[];
countries: FilterOption[];
};
// Preview
previewCount: number;
}
interface FilterState {
forms: string[];
routes: string[];
type: 'generic' | 'brand' | 'all';
prescription: 'yes' | 'no' | 'all';
country: string;
}
interface FilterOption {
id: string;
label: string;
count: number;
disabled: boolean;
}
5.2. Output Events
| Evento |
Payload |
Destino |
| onFilterChange |
filter_state |
Preview API |
| onApply |
filter_state |
SCR-CAT-002 |
| onClear |
- |
Reset |
| onDismiss |
- |
Cerrar |
6. Accesibilidad
6.1. Labels
| Elemento |
accessibilityLabel |
| Section |
"Filtrar por {nombre}" |
| Chip |
"{opcion}, {seleccionado/no seleccionado}" |
| Clear |
"Limpiar todos los filtros" |
| Apply |
"Aplicar filtros, {N} resultados" |
6.2. Screen Reader
| Evento |
Anuncio |
| Filtro cambiado |
"{opcion} {seleccionado/deseleccionado}" |
| Preview actualizado |
"{N} resultados con filtros actuales" |
7. Metricas
7.1. Analytics Events
| Evento |
Parametros |
| filter_sheet_open |
source |
| filter_select |
filter_type, filter_value |
| filter_deselect |
filter_type, filter_value |
| filter_clear |
filters_count |
| filter_apply |
filters_applied, results_count |
8. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)