SlotDayPicker
Selector de fecha y horario de citas. Detras de la bandera booking_short_path ofrece cuatro salidas: la siguiente disponible, elegir otro dia, busqueda avanzada con filtros de servidor, y (para staff) walk-in. Con la bandera apagada conserva el comportamiento anterior.
Nota: Este componente requiere datos del servicio SchedulingService para funcionar. En esta vista se muestra la estructura visual y el comportamiento esperado sin datos reales.
Vista previa (con datos mock)
31 - 6 abr 2026
Manana
Tarde
Props y Eventos
Props:
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
| clinicId | String | requerido | ID de la clinica para consultar disponibilidad |
| serviceType | String | null | Tipo de servicio (legacy, usado cuando la bandera esta apagada) |
| clinicServiceId | String | null | ID del servicio de clinica (usado cuando la bandera esta encendida) |
| preselectedDate | String | null | Fecha preseleccionada (YYYY-MM-DD) |
| modelValue | Object | null | v-model con { date, slot } |
| staffContext | Boolean | false | Contexto de staff: muestra bloqueos de configuracion |
| mode | String | 'auto' | 'short' | 'advanced' | 'auto' |
| hasSession | Boolean | true | false en flujos publicos (guest booking) |
Eventos:
| Evento | Payload |
|---|---|
| update:modelValue | { date: 'YYYY-MM-DD', slot: { startsAt, endsAt, durationMinutes, veterinarianId, veterinarianName, price } } | null |
| date-change | 'YYYY-MM-DD' - cuando el usuario cambia de dia |
| status-change | DayStatus | null - estado del dia seleccionado (solo con bandera encendida) |
Comportamiento
- Al montar, carga 14 dias de disponibilidad via
SchedulingService.getAvailableSlotsRange() - Cada dia muestra un punto verde con cantidad de slots, o gris si no hay disponibilidad
- Dias pasados se muestran deshabilitados
- Al seleccionar un dia, carga los slots individuales via
SchedulingService.getClinicAvailability() - Los horarios se dividen automaticamente en Manana (antes de 12:00) y Tarde (12:00+)
- Cada slot puede mostrar el nombre del veterinario asignado
- Se puede navegar entre semanas con flechas, cargando datos bajo demanda
- Auto-selecciona: fecha preseleccionada > primer dia con slots > hoy