rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.11.5 event form bug fixes

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-21 10:08:10 -04:00
parent f60730d0a5
commit 60df2cf97e
6 changed files with 116 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/ScheduleManagerModal.jsx
View File

@@ -156,7 +156,9 @@ function EventTypePopup({ userGroups, onSave, onClose, editing = null }) {
function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCancel, onDelete, isToolManager }) {
const toast = useToast();
const today = new Date();
const defaultDate = selectedDate ? selectedDate.toISOString().slice(0,10) : today.toISOString().slice(0,10);
const _defD = selectedDate || today;
const _p = n => String(n).padStart(2,'0');
const defaultDate = `${_defD.getFullYear()}-${_p(_defD.getMonth()+1)}-${_p(_defD.getDate())}`;
const [title, setTitle] = useState(event?.title || '');
const [eventTypeId, setEventTypeId] = useState(event?.event_type_id || '');
const [startDate, setStartDate] = useState(event ? toLocalDateInput(event.start_at) : defaultDate);
@@ -173,23 +175,40 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
const [showTypeForm, setShowTypeForm] = useState(false);
const [localEventTypes, setLocalEventTypes] = useState(eventTypes);
const typeRef = useRef(null);
const savedDurMins = event
? (new Date(event.end_at) - new Date(event.start_at)) / 60000
: null;
const prevTypeIdRef = useRef(event?.event_type_id ? String(event.event_type_id) : '');
// Auto-update end time when event type selected with default duration
// Auto-update end time when event type or start time changes
useEffect(() => {
if (!eventTypeId || event) return;
if (!startDate || !startTime) return;
const et = localEventTypes.find(t => t.id === Number(eventTypeId));
if (!et || !startDate || !startTime) return;
const start = buildISO(startDate, startTime);
setEndDate(toLocalDateInput(addHours(start, et.default_duration_hrs)));
setEndTime(toLocalTimeInput(addHours(start, et.default_duration_hrs)));
if (et.default_user_group_id && !event) setSelectedGroups(prev => new Set([...prev, et.default_user_group_id]));
}, [eventTypeId]);
if (!start) return;
const typeChanged = String(eventTypeId) !== prevTypeIdRef.current;
prevTypeIdRef.current = String(eventTypeId);
if (!event || typeChanged) {
// New event or type change: apply eventType duration
const dur = et?.default_duration_hrs || 1;
setEndDate(toLocalDateInput(addHours(start, dur)));
setEndTime(toLocalTimeInput(addHours(start, dur)));
} else {
// Editing with same type: preserve saved duration
const durMins = savedDurMins || 60;
setEndDate(toLocalDateInput(addHours(start, durMins/60)));
setEndTime(toLocalTimeInput(addHours(start, durMins/60)));
}
if (et?.default_user_group_id && !event) setSelectedGroups(prev => new Set([...prev, et.default_user_group_id]));
}, [eventTypeId, startDate, startTime]);
const toggleGroup = (id) => setSelectedGroups(prev => { const n=new Set(prev); n.has(id)?n.delete(id):n.add(id); return n; });
const handleSave = async () => {
if (!title.trim()) return toast('Title required', 'error');
if (!allDay && (!startDate||!startTime||!endDate||!endTime)) return toast('Start and end required', 'error');
if (endDate < startDate) return toast('End date cannot be before start date', 'error');
if (!allDay && endDate === startDate && buildISO(endDate, endTime) <= buildISO(startDate, startTime)) return toast('End time must be after start time, or use a later end date', 'error');
setSaving(true);
try {
const body = {
@@ -223,7 +242,14 @@ function EventForm({ event, userGroups, eventTypes, selectedDate, onSave, onCanc
<input type="date" className="input" value={startDate} onChange={e => setStartDate(e.target.value)} style={{ width:150 }} />
{!allDay && <input type="time" className="input" value={startTime} onChange={e => setStartTime(e.target.value)} style={{ width:120 }} />}
<span style={{ color:'var(--text-tertiary)', fontSize:13 }}>to</span>
{!allDay && <input type="time" className="input" value={endTime} onChange={e => setEndTime(e.target.value)} style={{ width:120 }} />}
{!allDay && <input type="time" className="input" value={endTime} onChange={e => {
const newEt = e.target.value; setEndTime(newEt);
if(startDate === endDate && newEt <= startTime) {
const d = new Date(buildISO(startDate, startTime)); d.setDate(d.getDate()+1);
const p = n => String(n).padStart(2,'0');
setEndDate(`${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}`);
}
}} style={{ width:120 }} />}
<input type="date" className="input" value={endDate} onChange={e => setEndDate(e.target.value)} style={{ width:150 }} />
</div>
<label style={{ display:'flex', alignItems:'center', gap:8, marginTop:8, fontSize:13, cursor:'pointer' }}>