jason/fabdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #31 from jasonMPM/resizer

Browse Source 
Add files via upload
This commit is contained in:
jasonMPM
2026-03-05 18:11:12 -06:00
committed by GitHub
parent f3fa30a643 b9a6cf9228
commit 5aec276198
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/components/Calendar/MainCalendar.jsx
View File

@@ -15,6 +15,7 @@ import WorkloadHeatmap from './WorkloadHeatmap'
export default function MainCalendar({ onCalendarReady }) {
const calRef = useRef(null)
const wrapperRef = useRef(null)
const { projects, updateDeliverable: storeUpdate, removeDeliverable } = useProjectStore()
const openFocus = useFocusStore(s => s.openFocus)
const { showHeatmap, toggleHeatmap } = useUIStore()
@@ -31,6 +32,18 @@ export default function MainCalendar({ onCalendarReady }) {
}
}, [])
// ResizeObserver: call updateSize() on every frame the container changes width
// during the sidebar CSS transition so FullCalendar reflows smoothly
useEffect(() => {
const el = wrapperRef.current
if (!el) return
const ro = new ResizeObserver(() => {
calRef.current?.getApi().updateSize()
})
ro.observe(el)
return () => ro.disconnect()
}, [])
const events = projects.flatMap(p =>
(p.deliverables || []).map(d => ({
id: String(d.id),
@@ -69,12 +82,12 @@ export default function MainCalendar({ onCalendarReady }) {
})
}, [storeUpdate, addToast])
// Click empty date — open add modal
// Click empty date - open add modal
const handleDateClick = useCallback(({ dateStr }) => {
setModal({ open: true, deliverable: null, defaultDate: dateStr.substring(0, 10) })
}, [])
// Date range drag-select — pre-fill modal with start date
// Date range drag-select - pre-fill modal with start date
const handleSelect = useCallback(({ startStr }) => {
setModal({ open: true, deliverable: null, defaultDate: startStr.substring(0, 10) })
}, [])
@@ -107,11 +120,11 @@ export default function MainCalendar({ onCalendarReady }) {
setContextMenu({
x: e.clientX, y: e.clientY,
items: [
{ icon: '✎', label: 'Edit Deliverable', action: () => setModal({ open: true, deliverable, defaultDate: '' }) },
{ icon: '◎', label: 'Open Focus View', action: () => openFocus(projectId, deliverableId) },
...(project?.drive_url ? [{ icon: '⬡', label: 'Open Drive Folder', action: () => window.open(project.drive_url, '_blank') }] : []),
{ icon: '\u2714\ufe0e', label: 'Edit Deliverable', action: () => setModal({ open: true, deliverable, defaultDate: '' }) },
{ icon: '\u2756', label: 'Open Focus View', action: () => openFocus(projectId, deliverableId) },
...(project?.drive_url ? [{ icon: '\u2b21', label: 'Open Drive Folder', action: () => window.open(project.drive_url, '_blank') }] : []),
{ separator: true },
{ icon: '✕', label: 'Delete Deliverable', danger: true,
{ icon: '\u2715', label: 'Delete Deliverable', danger: true,
action: async () => {
if (window.confirm(`Delete "${deliverable.title}"?`)) {
await deleteDeliverable(deliverableId); removeDeliverable(deliverableId)
@@ -133,7 +146,7 @@ export default function MainCalendar({ onCalendarReady }) {
? 'bg-gold text-surface border-gold'
: 'bg-surface-elevated border-surface-border text-text-muted hover:border-gold/40 hover:text-gold'
}`}>
{showHeatmap ? '← Calendar' : '⬡ Heatmap'}
{showHeatmap ? '\u2190 Calendar' : '\u2b21 Heatmap'}
</button>
</div>
@@ -142,7 +155,7 @@ export default function MainCalendar({ onCalendarReady }) {
{showHeatmap ? (
<WorkloadHeatmap />
) : (
<div className="h-full p-4 pt-2">
<div ref={wrapperRef} className="h-full p-4 pt-2">
<FullCalendar
ref={calRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}