@arquimedes.co/eureka-forms 3.0.48-test → 3.0.49-new-steps

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState, useCallback, useRef, useMemo } from 'react';
+import { startOfWeek, endOfWeek, addWeeks, addDays, addMonths, startOfMonth, endOfMonth, isSameMonth, isSameDay, isToday, format, parse, startOfDay, } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { Popover } from '@mui/material';
+import ArrowLeftIcon from '../../../Icons/ArrowLeftIcon';
+import ArrowRightIcon from '../../../Icons/ArrowRightIcon';
+import ViewWeekIcon from '../../../Icons/ViewWeekIcon';
+import ViewDayIcon from '../../../Icons/ViewDayIcon';
+import CalendarIcon from '../../../Icons/CalendarIcon';
+import AddIcon from '../../../Icons/AddIcon';
+import CloseIcon from '../../../Icons/CloseIcon';
+import DeleteIcon from '../../../Icons/DeleteIcon';
+import { CalendarEventCategory, CalendarDefaultView, } from '../../../@Types/CalendarFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import styles from './MaterialCalendarStep.module.css';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const CELL_HEIGHT = 48; // px per hour
+const WEEK_START = 1; // Monday
+const CATEGORY_COLORS = {
+    [CalendarEventCategory.WORKING]: '#4CAF50',
+    [CalendarEventCategory.PHYSICAL]: '#2196F3',
+    [CalendarEventCategory.VIRTUAL]: '#9C27B0',
+    [CalendarEventCategory.SPECIFIC]: '#FF9800',
+    [CalendarEventCategory.MEETING]: '#E91E63',
+    [CalendarEventCategory.BUSY]: '#607D8B',
+    [CalendarEventCategory.CUSTOM]: '#795548',
+};
+const CATEGORY_LABELS = {
+    [CalendarEventCategory.WORKING]: 'Trabajo',
+    [CalendarEventCategory.PHYSICAL]: 'Presencial',
+    [CalendarEventCategory.VIRTUAL]: 'Virtual',
+    [CalendarEventCategory.SPECIFIC]: 'Específico',
+    [CalendarEventCategory.MEETING]: 'Reunión',
+    [CalendarEventCategory.BUSY]: 'Ocupado',
+    [CalendarEventCategory.CUSTOM]: 'Personalizado',
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function parseTime(hhmm) {
+    const [h, m] = hhmm.split(':').map(Number);
+    return { h: h ?? 0, m: m ?? 0 };
+}
+function toMinutes(hhmm) {
+    const { h, m } = parseTime(hhmm);
+    return h * 60 + m;
+}
+function minutesToHHMM(mins) {
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+function isoToHHMM(iso) {
+    // "2024-06-19T09:30:00" → "09:30"
+    return iso.slice(11, 16);
+}
+function dateAndTimeToISO(date, hhmm) {
+    const { h, m } = parseTime(hhmm);
+    const d = new Date(date);
+    d.setHours(h, m, 0, 0);
+    return d.toISOString().slice(0, 19);
+}
+function isoToDate(iso) {
+    // Treat as local time (no timezone shift)
+    return parse(iso.slice(0, 19), 'yyyy-MM-dd\'T\'HH:mm:ss', new Date());
+}
+function newEventId() {
+    return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+function EventBlock({ event, minHour, template, onDelete, readOnly }) {
+    const startMins = toMinutes(isoToHHMM(event.start));
+    const endMins = toMinutes(isoToHHMM(event.end));
+    const top = (startMins - minHour * 60) * (CELL_HEIGHT / 60);
+    const height = Math.max((endMins - startMins) * (CELL_HEIGHT / 60), 18);
+    const color = template?.color ?? CATEGORY_COLORS[event.category] ?? '#607D8B';
+    const label = event.title ?? template?.name ?? CATEGORY_LABELS[event.category];
+    return (_jsxs("div", { className: styles.eventBlock, style: { top, height, backgroundColor: color }, title: `${label}  ${isoToHHMM(event.start)}–${isoToHHMM(event.end)}`, children: [_jsx("span", { className: styles.eventLabel, children: label }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), "\u2013", isoToHHMM(event.end)] }), !readOnly && (_jsx("button", { type: "button", className: styles.eventDeleteBtn, onClick: (e) => { e.stopPropagation(); onDelete(event.id); }, "aria-label": "Eliminar", children: _jsx(DeleteIcon, { size: 13 }) }))] }));
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+function MaterialCalendarStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    // ------------------------------------------------------------------
+    // Resolve config
+    // ------------------------------------------------------------------
+    const minTimeStr = step.minTime ?? '00:00';
+    const maxTimeStr = step.maxTime ?? '23:00';
+    const minHour = parseTime(minTimeStr).h;
+    const maxHour = parseTime(maxTimeStr).h + 1;
+    const totalHours = maxHour - minHour;
+    const showWeekends = step.showWeekends ?? true;
+    const allowedCategories = (step.allowedCategories?.length ? step.allowedCategories : Object.values(CalendarEventCategory));
+    const defaultViewMode = (step.defaultView ?? CalendarDefaultView.WEEK);
+    // ------------------------------------------------------------------
+    // Form value
+    // ------------------------------------------------------------------
+    const { value, onChange } = useFormStep(step, {
+        defaultValue: null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const events = useMemo(() => value?.events ?? [], [value?.events]);
+    const setEvents = useCallback((updater) => {
+        onChange({
+            type: 'CALENDAR_VALUE',
+            events: updater(events),
+            timezone: value?.timezone,
+        });
+    }, [events, value?.timezone, onChange]);
+    const deleteEvent = useCallback((id) => setEvents((prev) => prev.filter((e) => e.id !== id)), [setEvents]);
+    // ------------------------------------------------------------------
+    // Navigation state
+    // ------------------------------------------------------------------
+    const [viewMode, setViewMode] = useState(defaultViewMode);
+    const [current, setCurrent] = useState(() => startOfDay(new Date()));
+    const [createState, setCreate] = useState(null);
+    // Create form
+    const [newCategory, setNewCategory] = useState(allowedCategories[0] ?? CalendarEventCategory.WORKING);
+    const [newTitle, setNewTitle] = useState('');
+    const [newStart, setNewStart] = useState('09:00');
+    const [newEnd, setNewEnd] = useState('10:00');
+    const gridRef = useRef(null);
+    // ------------------------------------------------------------------
+    // Derived view dates
+    // ------------------------------------------------------------------
+    const weekStart = startOfWeek(current, { weekStartsOn: WEEK_START });
+    const weekEnd = endOfWeek(current, { weekStartsOn: WEEK_START });
+    const visibleDays = (() => {
+        if (viewMode === 'day')
+            return [current];
+        const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
+        return showWeekends ? days : days.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
+    })();
+    // ------------------------------------------------------------------
+    // Navigate
+    // ------------------------------------------------------------------
+    const prev = () => {
+        if (viewMode === 'month')
+            setCurrent((d) => addMonths(d, -1));
+        else if (viewMode === 'week')
+            setCurrent((d) => addWeeks(d, -1));
+        else
+            setCurrent((d) => addDays(d, -1));
+    };
+    const next = () => {
+        if (viewMode === 'month')
+            setCurrent((d) => addMonths(d, 1));
+        else if (viewMode === 'week')
+            setCurrent((d) => addWeeks(d, 1));
+        else
+            setCurrent((d) => addDays(d, 1));
+    };
+    const navLabel = () => {
+        if (viewMode === 'month')
+            return format(current, 'MMMM yyyy', { locale: es });
+        if (viewMode === 'week') {
+            const s = format(weekStart, 'd MMM', { locale: es });
+            const e = format(weekEnd, 'd MMM yyyy', { locale: es });
+            return `${s} – ${e}`;
+        }
+        return format(current, 'EEEE d \'de\' MMMM yyyy', { locale: es });
+    };
+    // ------------------------------------------------------------------
+    // Events per day (for time-grid views)
+    // ------------------------------------------------------------------
+    const eventsForDay = (day) => events.filter((e) => isSameDay(isoToDate(e.start), day));
+    // ------------------------------------------------------------------
+    // Create flow
+    // ------------------------------------------------------------------
+    const handleGridClick = (e, day) => {
+        if (isReadOnly)
+            return;
+        const rect = (e.currentTarget).getBoundingClientRect();
+        const relY = e.clientY - rect.top;
+        const clickedMins = Math.round((relY / CELL_HEIGHT) * 60) * 30; // snap to 30min
+        const startMins = minHour * 60 + clickedMins;
+        const startHHMM = minutesToHHMM(Math.min(startMins, (maxHour - 1) * 60));
+        const endHHMM = minutesToHHMM(Math.min(startMins + 60, maxHour * 60));
+        setNewStart(startHHMM);
+        setNewEnd(endHHMM);
+        setNewCategory(allowedCategories[0] ?? CalendarEventCategory.WORKING);
+        setNewTitle('');
+        setCreate({ anchorEl: e.currentTarget, date: day, startMins });
+    };
+    const handleMonthDayClick = (day) => {
+        setCurrent(day);
+        setViewMode('day');
+    };
+    const handleCreate = () => {
+        if (!createState)
+            return;
+        const startISO = dateAndTimeToISO(createState.date, newStart);
+        const endISO = dateAndTimeToISO(createState.date, newEnd);
+        const template = step.eventTemplates?.find((t) => t.category === newCategory);
+        const evt = {
+            id: newEventId(),
+            category: newCategory,
+            start: startISO,
+            end: endISO,
+            title: newTitle || undefined,
+            eventTemplateId: template?.id,
+        };
+        setEvents((prev) => [...prev, evt]);
+        setCreate(null);
+    };
+    // ------------------------------------------------------------------
+    // Hour labels column
+    // ------------------------------------------------------------------
+    const hourLabels = Array.from({ length: totalHours }, (_, i) => minHour + i);
+    // ------------------------------------------------------------------
+    // Time-grid view (week / day)
+    // ------------------------------------------------------------------
+    const renderTimeGrid = () => (_jsxs("div", { className: styles.gridWrapper, children: [_jsxs("div", { className: styles.gridHeader, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.cornerCell }), visibleDays.map((day) => (_jsxs("div", { className: `${styles.dayHeader} ${isToday(day) ? styles.dayHeaderToday : ''}`, onClick: () => { setCurrent(day); setViewMode('day'); }, children: [_jsx("span", { className: styles.dayHeaderDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: `${styles.dayHeaderNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') })] }, day.toISOString())))] }), _jsx("div", { className: styles.gridBody, ref: gridRef, children: _jsxs("div", { className: styles.gridInner, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.hourLabels, children: hourLabels.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 && `${String(h).padStart(2, '0')}:00` }, h))) }), visibleDays.map((day) => (_jsxs("div", { className: styles.dayColumn, style: { height: totalHours * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hourLabels.map((h) => (_jsx("div", { className: styles.hourLine, style: { top: (h - minHour) * CELL_HEIGHT } }, h))), eventsForDay(day).map((evt) => (_jsx(EventBlock, { event: evt, minHour: minHour, template: step.eventTemplates?.find((t) => t.category === evt.category), onDelete: deleteEvent, readOnly: isReadOnly }, evt.id)))] }, day.toISOString())))] }) })] }));
+    // ------------------------------------------------------------------
+    // Month view
+    // ------------------------------------------------------------------
+    const renderMonth = () => {
+        const mStart = startOfMonth(current);
+        const mEnd = endOfMonth(current);
+        const gridStart = startOfWeek(mStart, { weekStartsOn: WEEK_START });
+        const gridEnd = endOfWeek(mEnd, { weekStartsOn: WEEK_START });
+        const days = [];
+        let d = gridStart;
+        while (d <= gridEnd) {
+            days.push(d);
+            d = addDays(d, 1);
+        }
+        const DOW_LABELS = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+        return (_jsxs("div", { className: styles.monthGrid, children: [DOW_LABELS.map((lbl) => (_jsx("div", { className: styles.monthDowHeader, children: lbl }, lbl))), days.map((day) => {
+                    const dayEvts = eventsForDay(day);
+                    const outside = !isSameMonth(day, current);
+                    return (_jsxs("div", { className: [
+                            styles.monthCell,
+                            outside ? styles.monthCellOutside : '',
+                            isToday(day) ? styles.monthCellToday : '',
+                        ].filter(Boolean).join(' '), onClick: () => handleMonthDayClick(day), children: [_jsx("span", { className: `${styles.monthCellNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') }), dayEvts.slice(0, 3).map((evt) => {
+                                const color = CATEGORY_COLORS[evt.category] ?? '#607D8B';
+                                return (_jsx("div", { className: styles.monthEventDot, style: { backgroundColor: color }, children: evt.title ?? CATEGORY_LABELS[evt.category] }, evt.id));
+                            }), dayEvts.length > 3 && (_jsxs("div", { className: styles.monthMoreLabel, children: ["+", dayEvts.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
+                })] }));
+    };
+    // ------------------------------------------------------------------
+    // Create popover
+    // ------------------------------------------------------------------
+    const needsTitle = newCategory === CalendarEventCategory.MEETING ||
+        newCategory === CalendarEventCategory.CUSTOM;
+    const renderCreatePopover = () => {
+        if (!createState)
+            return null;
+        return (_jsxs(Popover, { open: true, anchorEl: createState.anchorEl, onClose: () => setCreate(null), anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.popoverPaper } }, children: [_jsxs("div", { className: styles.popoverHeader, children: [_jsx("span", { className: styles.popoverTitle, children: "Nuevo evento" }), _jsx("button", { type: "button", className: styles.popoverClose, onClick: () => setCreate(null), children: _jsx(CloseIcon, { size: 16 }) })] }), _jsxs("div", { className: styles.popoverBody, children: [_jsx("div", { className: styles.popoverLabel, children: "Tipo" }), _jsx("div", { className: styles.categoryGrid, children: allowedCategories.map((cat) => (_jsxs("button", { type: "button", className: `${styles.categoryChip} ${newCategory === cat ? styles.categoryChipActive : ''}`, style: newCategory === cat ? { backgroundColor: CATEGORY_COLORS[cat], color: '#fff' } : {}, onClick: () => setNewCategory(cat), children: [_jsx("span", { className: styles.categoryDot, style: { backgroundColor: CATEGORY_COLORS[cat] } }), CATEGORY_LABELS[cat]] }, cat))) }), needsTitle && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverLabel, children: "Nombre" }), _jsx("input", { className: styles.popoverInput, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "Ej: Standup, Visita cliente\u2026", autoFocus: true })] })), _jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Inicio" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newStart, onChange: (e) => setNewStart(e.target.value) })] }), _jsx("span", { className: styles.timeDash, children: "\u2013" }), _jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Fin" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newEnd, onChange: (e) => setNewEnd(e.target.value) })] })] }), _jsxs("button", { type: "button", className: styles.createBtn, style: { backgroundColor: CATEGORY_COLORS[newCategory] }, onClick: handleCreate, children: [_jsx(AddIcon, { size: 16 }), "Agregar bloque"] })] })] }));
+    };
+    // ------------------------------------------------------------------
+    // Render
+    // ------------------------------------------------------------------
+    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.viewSwitcher, children: [_jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'day' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('day'), title: "D\u00EDa", children: _jsx(ViewDayIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'week' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('week'), title: "Semana", children: _jsx(ViewWeekIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'month' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('month'), title: "Mes", children: _jsx(CalendarIcon, { size: 18 }) })] }), _jsxs("div", { className: styles.navGroup, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: prev, children: _jsx(ArrowLeftIcon, { size: 20 }) }), _jsx("span", { className: styles.navLabel, children: navLabel() }), _jsx("button", { type: "button", className: styles.navBtn, onClick: next, children: _jsx(ArrowRightIcon, { size: 20 }) })] }), events.length > 0 && (_jsxs("span", { className: styles.eventBadge, children: [events.length, " evento", events.length !== 1 ? 's' : ''] })), !isReadOnly && viewMode !== 'month' && (_jsx("span", { className: styles.hintText, children: "Clic en el grid para agregar" }))] }), _jsx("div", { className: styles.calendarCard, children: viewMode === 'month' ? renderMonth() : renderTimeGrid() }), !isReadOnly && renderCreatePopover()] }));
+}
+export default MaterialCalendarStep;