Update calendar with multi-select
This commit is contained in:
+125
-77
@@ -1,25 +1,53 @@
|
||||
import { ReactNode, useState } from 'react'
|
||||
import { ReactNode, useState, useEffect } from 'react'
|
||||
import { useWorkspace } from '@/context'
|
||||
import { usePlannedDays } from '@/hooks'
|
||||
import { usePlannedDays, useShowWeekNumbers, getLastLeaveType, setLastLeaveType } from '@/hooks'
|
||||
import type { PlannedLeaveDay } from '@/types'
|
||||
import { Layout } from '@/components/layout/Layout'
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner'
|
||||
import { CalendarDay } from '@/components/common/CalendarDay'
|
||||
import { CalendarEvent } from '@/components/common/CalendarEvent'
|
||||
import { CalendarWeek } from '@/components/common/CalendarWeek'
|
||||
import { PlannedDayModal } from '@/components/modals/PlannedDayModal'
|
||||
import { getColorForType } from '@/utils/leaveTypes'
|
||||
import { datesInRange } from '@/utils/dates'
|
||||
import './calendar.css'
|
||||
|
||||
export function Calendar(): ReactNode {
|
||||
const { isLoading: wsLoading, selectedChildId, workspace, personalDataUuid } = useWorkspace()
|
||||
const { isLoading: wsLoading, selectedChildId, workspace, personalDataUuid, parentName } = useWorkspace()
|
||||
const { data: plannedDays, isLoading: pdLoading, add, update, remove } = usePlannedDays(selectedChildId ?? undefined)
|
||||
const [showWeekNumbers] = useShowWeekNumbers()
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date())
|
||||
const [selectedDate, setSelectedDate] = useState<string | null>(null)
|
||||
const [selectedDates, setSelectedDates] = useState<Set<string>>(new Set())
|
||||
const [dragAnchor, setDragAnchor] = useState<string | null>(null)
|
||||
const [dragCurrent, setDragCurrent] = useState<string | null>(null)
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
const [isRangeMode, setIsRangeMode] = useState(false)
|
||||
const [isSaving, setIsSaving] = useState(false)
|
||||
const [modalError, setModalError] = useState<string | null>(null)
|
||||
|
||||
const isLoading = wsLoading || pdLoading
|
||||
|
||||
useEffect(() => {
|
||||
const handlePointerUp = () => {
|
||||
if (isDragging && dragAnchor && dragCurrent) {
|
||||
const dates = datesInRange(dragAnchor, dragCurrent)
|
||||
setSelectedDates(new Set(dates))
|
||||
|
||||
if (dates.length === 1) {
|
||||
setIsRangeMode(false)
|
||||
} else {
|
||||
setIsRangeMode(true)
|
||||
}
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
setIsDragging(false)
|
||||
}
|
||||
|
||||
if (isDragging) {
|
||||
window.addEventListener('pointerup', handlePointerUp)
|
||||
return () => window.removeEventListener('pointerup', handlePointerUp)
|
||||
}
|
||||
}, [isDragging, dragAnchor, dragCurrent])
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner message="Loading calendar..." />
|
||||
}
|
||||
@@ -54,16 +82,6 @@ export function Calendar(): ReactNode {
|
||||
}
|
||||
weeks.push(currentWeek)
|
||||
|
||||
const getEventsForDate = (date: string) => {
|
||||
return (plannedDays ?? [])
|
||||
.filter((pd: PlannedLeaveDay) => pd.date === date)
|
||||
.map((pd: PlannedLeaveDay) => ({
|
||||
type: pd.dayType,
|
||||
color: getColorForType(pd.dayType),
|
||||
title: pd.dayType,
|
||||
}))
|
||||
}
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
setCurrentMonth(new Date(year, month - 1, 1))
|
||||
}
|
||||
@@ -72,9 +90,21 @@ export function Calendar(): ReactNode {
|
||||
setCurrentMonth(new Date(year, month + 1, 1))
|
||||
}
|
||||
|
||||
const handlePointerDown = (date: string) => {
|
||||
setDragAnchor(date)
|
||||
setDragCurrent(date)
|
||||
setIsDragging(true)
|
||||
}
|
||||
|
||||
const handlePointerEnter = (date: string) => {
|
||||
if (isDragging) {
|
||||
setDragCurrent(date)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDayClick = (date: string) => {
|
||||
setSelectedDate(date)
|
||||
setModalError(null)
|
||||
setSelectedDates(new Set([date]))
|
||||
setIsRangeMode(false)
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
@@ -87,51 +117,63 @@ export function Calendar(): ReactNode {
|
||||
parentId: string
|
||||
isDubbeldag: boolean
|
||||
}) => {
|
||||
if (!selectedDate || !selectedChildId || !workspace?.id || !personalDataUuid) return
|
||||
if (selectedDates.size === 0 || !selectedChildId || !workspace?.id || !personalDataUuid) return
|
||||
|
||||
try {
|
||||
setIsSaving(true)
|
||||
setModalError(null)
|
||||
|
||||
const existingDay = getExistingDay(selectedDate)
|
||||
setLastLeaveType(payload.dayType)
|
||||
|
||||
if (existingDay) {
|
||||
await update(existingDay.id, {
|
||||
day_type: payload.dayType,
|
||||
is_dubbeldag: payload.isDubbeldag,
|
||||
})
|
||||
} else {
|
||||
await add({
|
||||
workspace_id: workspace.id,
|
||||
child_id: selectedChildId,
|
||||
parent_personal_data_uuid: personalDataUuid,
|
||||
date: selectedDate,
|
||||
day_type: payload.dayType,
|
||||
is_dubbeldag: payload.isDubbeldag,
|
||||
})
|
||||
for (const date of selectedDates) {
|
||||
const existingDay = (plannedDays ?? []).find(
|
||||
(pd: PlannedLeaveDay) => pd.date === date && pd.parentPersonalDataUuid === personalDataUuid
|
||||
)
|
||||
|
||||
if (existingDay) {
|
||||
await update(existingDay.id, {
|
||||
day_type: payload.dayType,
|
||||
is_dubbeldag: payload.isDubbeldag,
|
||||
})
|
||||
} else {
|
||||
await add({
|
||||
workspace_id: workspace.id,
|
||||
child_id: selectedChildId,
|
||||
parent_personal_data_uuid: personalDataUuid,
|
||||
date,
|
||||
day_type: payload.dayType,
|
||||
is_dubbeldag: payload.isDubbeldag,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setIsModalOpen(false)
|
||||
setSelectedDates(new Set())
|
||||
} catch (err) {
|
||||
setModalError(err instanceof Error ? err.message : 'Failed to save planned day')
|
||||
setModalError(err instanceof Error ? err.message : 'Failed to save planned days')
|
||||
} finally {
|
||||
setIsSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeletePlannedDay = async () => {
|
||||
if (!selectedDate) return
|
||||
if (selectedDates.size !== 1) return
|
||||
|
||||
try {
|
||||
setIsSaving(true)
|
||||
setModalError(null)
|
||||
|
||||
const existingDay = getExistingDay(selectedDate)
|
||||
const dates = Array.from(selectedDates)
|
||||
const date = dates[0]
|
||||
if (!date) return
|
||||
|
||||
const existingDay = getExistingDay(date)
|
||||
if (existingDay) {
|
||||
await remove(existingDay.id)
|
||||
}
|
||||
|
||||
setIsModalOpen(false)
|
||||
setSelectedDates(new Set())
|
||||
} catch (err) {
|
||||
setModalError(err instanceof Error ? err.message : 'Failed to delete planned day')
|
||||
} finally {
|
||||
@@ -139,6 +181,9 @@ export function Calendar(): ReactNode {
|
||||
}
|
||||
}
|
||||
|
||||
const defaultLeaveType = getLastLeaveType() ?? 'vacation'
|
||||
const firstSelectedDate = Array.from(selectedDates).sort()[0]
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div data-testid="calendar" className="calendar">
|
||||
@@ -154,59 +199,75 @@ export function Calendar(): ReactNode {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="calendar__grid">
|
||||
<div className={`calendar__grid${showWeekNumbers ? ' calendar__grid--with-week-numbers' : ''}`}>
|
||||
{showWeekNumbers && <div className="calendar__week-number-header" />}
|
||||
{['Mån', 'Tis', 'Ons', 'Tor', 'Fre', 'Lör', 'Sön'].map((day) => (
|
||||
<div key={day} className="calendar__weekday">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{weeks.map((week, weekIdx) =>
|
||||
week.map((date, dayIdx) => {
|
||||
const events = getEventsForDate(date)
|
||||
const isCurrentMonth = new Date(date).getMonth() === month
|
||||
const isToday = date === getTodayString()
|
||||
return (
|
||||
<CalendarDay
|
||||
key={`${weekIdx}-${dayIdx}`}
|
||||
date={date}
|
||||
events={events}
|
||||
isCurrentMonth={isCurrentMonth}
|
||||
isToday={isToday}
|
||||
onClick={isCurrentMonth ? () => handleDayClick(date) : undefined}
|
||||
/>
|
||||
)
|
||||
})
|
||||
)}
|
||||
{weeks.map((week, weekIdx) => {
|
||||
const firstDate = week[0]
|
||||
const weekMonth = firstDate ? new Date(firstDate + 'T00:00:00Z').getMonth() : month
|
||||
return (
|
||||
<CalendarWeek
|
||||
key={weekIdx}
|
||||
weekDates={week}
|
||||
plannedDays={plannedDays ?? []}
|
||||
selectedDates={selectedDates}
|
||||
parentName={parentName ?? 'Du'}
|
||||
personalDataUuid={personalDataUuid ?? ''}
|
||||
isCurrentMonth={weekMonth === month}
|
||||
showWeekNumbers={showWeekNumbers}
|
||||
onDayClick={handleDayClick}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerEnter={handlePointerEnter}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="calendar__legend">
|
||||
<h3>Legend</h3>
|
||||
<div className="calendar__legend-items">
|
||||
<div className="calendar__legend-item">
|
||||
<CalendarEvent leaveType="Vacation" color={getColorForType('vacation')} />
|
||||
<span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('vacation') }} />
|
||||
<span>Vacation</span>
|
||||
</div>
|
||||
<div className="calendar__legend-item">
|
||||
<CalendarEvent leaveType="Sick" color={getColorForType('sjukpenning')} />
|
||||
<span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('sjukpenning') }} />
|
||||
<span>Sick Leave</span>
|
||||
</div>
|
||||
<div className="calendar__legend-item">
|
||||
<CalendarEvent leaveType="Parental" color={getColorForType('lagsta')} />
|
||||
<span className="calendar__legend-swatch" style={{ backgroundColor: getColorForType('lagsta') }} />
|
||||
<span>Parental</span>
|
||||
</div>
|
||||
<div className="calendar__legend-item">
|
||||
<span className="calendar__legend-swatch calendar__legend-swatch--dubbeldag">2×</span>
|
||||
<span>Double day</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedDate && (
|
||||
{firstSelectedDate && (
|
||||
<PlannedDayModal
|
||||
date={selectedDate}
|
||||
date={firstSelectedDate}
|
||||
isOpen={isModalOpen}
|
||||
existingDay={getExistingDay(selectedDate) ?? null}
|
||||
parents={[{ id: personalDataUuid ?? '', name: 'Current Parent' }]}
|
||||
existingDay={isRangeMode ? null : getExistingDay(firstSelectedDate) ?? null}
|
||||
parents={[{ id: personalDataUuid ?? '', name: parentName ?? 'Du' }]}
|
||||
selectedParentId={personalDataUuid ?? ''}
|
||||
onSave={handleSavePlannedDay}
|
||||
onDelete={getExistingDay(selectedDate) ? handleDeletePlannedDay : undefined}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onDelete={!isRangeMode && getExistingDay(firstSelectedDate) ? handleDeletePlannedDay : undefined}
|
||||
onClose={() => {
|
||||
setIsModalOpen(false)
|
||||
setSelectedDates(new Set())
|
||||
}}
|
||||
isSaving={isSaving}
|
||||
error={modalError}
|
||||
isRangeMode={isRangeMode}
|
||||
dayCount={selectedDates.size}
|
||||
defaultDayType={defaultLeaveType}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -220,16 +281,3 @@ function formatDate(date: Date): string {
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
function getTodayString(): string {
|
||||
return formatDate(new Date())
|
||||
}
|
||||
|
||||
function getColorForType(type: string): string {
|
||||
const colorMap: Record<string, string> = {
|
||||
vacation: '#4CAF50',
|
||||
sjukpenning: '#FF9800',
|
||||
lagsta: '#2196F3',
|
||||
}
|
||||
return colorMap[type] ?? '#9E9E9E'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user