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

scroll update for schedule list view

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-25 12:07:07 -04:00
parent 6af892c9a6
commit 0b03f15e4a
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/SchedulePage.jsx
View File

@@ -1428,6 +1428,7 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
const [createOpen, setCreateOpen] = useState(false); const [createOpen, setCreateOpen] = useState(false);
const [mobilePanel, setMobilePanel] = useState(null); // null | 'eventForm' | 'groupManager' const [mobilePanel, setMobilePanel] = useState(null); // null | 'eventForm' | 'groupManager'
const createRef = useRef(null); const createRef = useRef(null);
const contentRef = useRef(null);
const load = useCallback(() => { const load = useCallback(() => {
const ugPromise = isToolManager ? api.getUserGroups() : Promise.resolve({ groups: [] }); const ugPromise = isToolManager ? api.getUserGroups() : Promise.resolve({ groups: [] });
@@ -1438,6 +1439,9 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
useEffect(() => { load(); }, [load]); useEffect(() => { load(); }, [load]);
// Reset scroll to top whenever the selected date or view changes
useEffect(() => { if (contentRef.current) contentRef.current.scrollTop = 0; }, [selDate, view]);
useEffect(() => { useEffect(() => {
if (!createOpen) return; if (!createOpen) return;
const h = e => { if (createRef.current && !createRef.current.contains(e.target)) setCreateOpen(false); }; const h = e => { if (createRef.current && !createRef.current.contains(e.target)) setCreateOpen(false); };
@@ -1628,12 +1632,12 @@ export default function SchedulePage({ isToolManager, isMobile, onProfile, onHel
eventDates={eventDates} eventDates={eventDates}
onMonthChange={(dir, exactDate) => { onMonthChange={(dir, exactDate) => {
if(exactDate) { setSelDate(exactDate); } if(exactDate) { setSelDate(exactDate); }
else { const d=new Date(selDate); d.setMonth(d.getMonth()+dir); d.setDate(1); setSelDate(d); } else { const d=new Date(selDate); d.setDate(1); d.setMonth(d.getMonth()+dir); setFilterFromDate(null); setSelDate(d); }
}} /> }} />
)} )}
{/* Calendar or panel content */} {/* Calendar or panel content */}
<div style={{ flex:1, display:'flex', flexDirection:'column', overflow: view==='month' && panel==='calendar' ? 'hidden' : (panel==='eventForm'?'auto':'auto'), overflowX: panel==='eventForm'?'auto':'hidden' }}> <div ref={contentRef} style={{ flex:1, display:'flex', flexDirection:'column', overflow: view==='month' && panel==='calendar' ? 'hidden' : (panel==='eventForm'?'auto':'auto'), overflowX: panel==='eventForm'?'auto':'hidden' }}>
{panel === 'calendar' && view === 'schedule' && <div style={{paddingBottom: isMobile ? 80 : 0}}><ScheduleView events={events} selectedDate={selDate} onSelect={openDetail} filterKeyword={filterKeyword} filterTypeId={filterTypeId} filterAvailability={filterAvailability} filterFromDate={filterFromDate} isMobile={isMobile}/></div>} {panel === 'calendar' && view === 'schedule' && <div style={{paddingBottom: isMobile ? 80 : 0}}><ScheduleView events={events} selectedDate={selDate} onSelect={openDetail} filterKeyword={filterKeyword} filterTypeId={filterTypeId} filterAvailability={filterAvailability} filterFromDate={filterFromDate} isMobile={isMobile}/></div>}
{panel === 'calendar' && view === 'day' && <DayView events={events} selectedDate={selDate} onSelect={openDetail} onSwipe={isMobile ? dir => { const d=new Date(selDate); d.setDate(d.getDate()+dir); setSelDate(d); } : undefined}/>} {panel === 'calendar' && view === 'day' && <DayView events={events} selectedDate={selDate} onSelect={openDetail} onSwipe={isMobile ? dir => { const d=new Date(selDate); d.setDate(d.getDate()+dir); setSelDate(d); } : undefined}/>}
{panel === 'calendar' && view === 'week' && <WeekView events={events} selectedDate={selDate} onSelect={openDetail}/>} {panel === 'calendar' && view === 'week' && <WeekView events={events} selectedDate={selDate} onSelect={openDetail}/>}