Update calendar with multi-select
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
"use strict";
|
||||
(() => {
|
||||
// src/utils/leaveTypes.ts
|
||||
function getColorForType(type) {
|
||||
const colorMap = {
|
||||
vacation: "#4CAF50",
|
||||
sjukpenning: "#FF9800",
|
||||
lagsta: "#2196F3"
|
||||
};
|
||||
return colorMap[type] ?? "#9E9E9E";
|
||||
}
|
||||
function getLabelForType(type) {
|
||||
const labelMap = {
|
||||
vacation: "Vacation",
|
||||
sjukpenning: "Sick Leave",
|
||||
lagsta: "Parental"
|
||||
};
|
||||
return labelMap[type] ?? "Unknown";
|
||||
}
|
||||
})();
|
||||
@@ -6,6 +6,10 @@ export interface CalendarDayProps {
|
||||
isCurrentMonth?: boolean | undefined
|
||||
onClick?: (() => void) | undefined
|
||||
isToday?: boolean | undefined
|
||||
isSelected?: boolean | undefined
|
||||
onPointerDown?: ((date: string) => void) | undefined
|
||||
onPointerEnter?: ((date: string) => void) | undefined
|
||||
onActivate?: (() => void) | undefined
|
||||
}
|
||||
|
||||
export function CalendarDay({
|
||||
@@ -14,9 +18,23 @@ export function CalendarDay({
|
||||
isCurrentMonth = true,
|
||||
onClick,
|
||||
isToday = false,
|
||||
isSelected = false,
|
||||
onPointerDown,
|
||||
onPointerEnter,
|
||||
onActivate,
|
||||
}: CalendarDayProps): ReactNode {
|
||||
const dayNum = new Date(date + 'T00:00:00Z').getUTCDate()
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
if (onActivate) {
|
||||
onActivate()
|
||||
} else {
|
||||
onClick?.()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="calendar-day"
|
||||
@@ -24,12 +42,10 @@ export function CalendarDay({
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${date}${events.length > 0 ? ` with ${events.length} event(s)` : ''}`}
|
||||
className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''} ${isToday ? 'calendar-day--today' : ''}`}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onClick?.()
|
||||
}
|
||||
}}
|
||||
className={`calendar-day ${!isCurrentMonth ? 'calendar-day--disabled' : ''} ${events.length > 0 ? 'calendar-day--has-events' : ''} ${isToday ? 'calendar-day--today' : ''} ${isSelected ? 'calendar-day--selected' : ''}`}
|
||||
onKeyDown={handleKeyDown}
|
||||
onPointerDown={() => onPointerDown?.(date)}
|
||||
onPointerEnter={() => onPointerEnter?.(date)}
|
||||
>
|
||||
<div className="calendar-day__number">{dayNum}</div>
|
||||
{events.length > 0 && (
|
||||
|
||||
@@ -5,6 +5,8 @@ export interface CalendarEventProps {
|
||||
color: string
|
||||
title?: string
|
||||
onDismiss?: () => void
|
||||
isDubbeldag?: boolean | undefined
|
||||
parentLabel?: string | undefined
|
||||
}
|
||||
|
||||
export function CalendarEvent({
|
||||
@@ -12,7 +14,11 @@ export function CalendarEvent({
|
||||
color,
|
||||
title,
|
||||
onDismiss,
|
||||
isDubbeldag = false,
|
||||
parentLabel,
|
||||
}: CalendarEventProps): ReactNode {
|
||||
const displayLabel = parentLabel ? `${parentLabel} · ${leaveType}` : leaveType
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="calendar-event"
|
||||
@@ -20,8 +26,9 @@ export function CalendarEvent({
|
||||
style={{ backgroundColor: color }}
|
||||
>
|
||||
<span className="calendar-event__label" title={title ?? leaveType}>
|
||||
{leaveType}
|
||||
{displayLabel}
|
||||
</span>
|
||||
{isDubbeldag && <span className="calendar-event__badge">2×</span>}
|
||||
{onDismiss && (
|
||||
<button
|
||||
className="calendar-event__dismiss"
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
import { ReactNode, useMemo } from 'react'
|
||||
import type { PlannedLeaveDay } from '@/types'
|
||||
import { getColorForType, getLabelForType } from '@/utils/leaveTypes'
|
||||
import { getISOWeekNumber } from '@/utils/dates'
|
||||
import { CalendarDay } from './CalendarDay'
|
||||
import { CalendarEvent } from './CalendarEvent'
|
||||
|
||||
export interface CalendarWeekProps {
|
||||
weekDates: string[]
|
||||
plannedDays: PlannedLeaveDay[]
|
||||
selectedDates: Set<string>
|
||||
parentName: string
|
||||
personalDataUuid: string
|
||||
isCurrentMonth: boolean
|
||||
showWeekNumbers: boolean
|
||||
onDayClick: (date: string) => void
|
||||
onPointerDown: (date: string) => void
|
||||
onPointerEnter: (date: string) => void
|
||||
}
|
||||
|
||||
interface BarData {
|
||||
startCol: number
|
||||
endCol: number
|
||||
parentUuid: string
|
||||
dayType: string
|
||||
isDubbeldag: boolean
|
||||
lane: number
|
||||
}
|
||||
|
||||
function buildBarsForWeek(
|
||||
weekDates: string[],
|
||||
plannedDays: PlannedLeaveDay[]
|
||||
): BarData[] {
|
||||
const dayToEntries = new Map<string, PlannedLeaveDay[]>()
|
||||
|
||||
for (const date of weekDates) {
|
||||
dayToEntries.set(date, plannedDays.filter((pd) => pd.date === date))
|
||||
}
|
||||
|
||||
const series = new Map<
|
||||
string,
|
||||
{ bars: Array<{ startIdx: number; endIdx: number }> }
|
||||
>()
|
||||
|
||||
for (const pd of plannedDays) {
|
||||
if (!weekDates.includes(pd.date)) continue
|
||||
|
||||
const key = `${pd.parentPersonalDataUuid}|${pd.dayType}|${pd.isDubbeldag}`
|
||||
if (!series.has(key)) {
|
||||
series.set(key, { bars: [] })
|
||||
}
|
||||
}
|
||||
|
||||
const result: Array<{
|
||||
startCol: number
|
||||
endCol: number
|
||||
parentUuid: string
|
||||
dayType: string
|
||||
isDubbeldag: boolean
|
||||
}> = []
|
||||
|
||||
for (const [key] of series) {
|
||||
const parts = key.split('|')
|
||||
const parentUuid = parts[0] ?? ''
|
||||
const dayType = parts[1] ?? ''
|
||||
const isDubbeldag = parts[2] ?? 'false'
|
||||
const isDoubleStr = isDubbeldag === 'true'
|
||||
|
||||
let startIdx = -1
|
||||
|
||||
for (let i = 0; i < weekDates.length; i++) {
|
||||
const date = weekDates[i]
|
||||
const hasEntry = plannedDays.some(
|
||||
(pd) =>
|
||||
pd.date === date &&
|
||||
pd.parentPersonalDataUuid === parentUuid &&
|
||||
pd.dayType === dayType &&
|
||||
pd.isDubbeldag === isDoubleStr
|
||||
)
|
||||
|
||||
if (hasEntry) {
|
||||
if (startIdx === -1) {
|
||||
startIdx = i
|
||||
}
|
||||
} else {
|
||||
if (startIdx !== -1) {
|
||||
result.push({
|
||||
startCol: startIdx,
|
||||
endCol: i - 1,
|
||||
parentUuid,
|
||||
dayType,
|
||||
isDubbeldag: isDoubleStr,
|
||||
})
|
||||
startIdx = -1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (startIdx !== -1) {
|
||||
result.push({
|
||||
startCol: startIdx,
|
||||
endCol: weekDates.length - 1,
|
||||
parentUuid,
|
||||
dayType,
|
||||
isDubbeldag: isDoubleStr,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const barLanes = assignLanes(result)
|
||||
return barLanes
|
||||
}
|
||||
|
||||
function assignLanes(
|
||||
bars: Array<{ startCol: number; endCol: number; parentUuid: string; dayType: string; isDubbeldag: boolean }>
|
||||
): BarData[] {
|
||||
const sorted = [...bars].sort((a, b) => {
|
||||
if (a.startCol !== b.startCol) return a.startCol - b.startCol
|
||||
return b.endCol - a.endCol - (a.endCol - a.startCol) - (b.endCol - b.startCol)
|
||||
})
|
||||
|
||||
const lanes: BarData[][] = []
|
||||
|
||||
for (const bar of sorted) {
|
||||
let assignedLane = -1
|
||||
|
||||
for (let laneIdx = 0; laneIdx < lanes.length; laneIdx++) {
|
||||
const lane = lanes[laneIdx]
|
||||
if (lane && lane.every((b) => !(b.startCol <= bar.endCol && b.endCol >= bar.startCol))) {
|
||||
assignedLane = laneIdx
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (assignedLane === -1) {
|
||||
assignedLane = lanes.length
|
||||
lanes.push([])
|
||||
}
|
||||
|
||||
const targetLane = lanes[assignedLane]
|
||||
if (targetLane) {
|
||||
targetLane.push({
|
||||
startCol: bar.startCol,
|
||||
endCol: bar.endCol,
|
||||
parentUuid: bar.parentUuid,
|
||||
dayType: bar.dayType,
|
||||
isDubbeldag: bar.isDubbeldag,
|
||||
lane: assignedLane,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return lanes.flat()
|
||||
}
|
||||
|
||||
export function CalendarWeek({
|
||||
weekDates,
|
||||
plannedDays,
|
||||
selectedDates,
|
||||
parentName,
|
||||
personalDataUuid,
|
||||
isCurrentMonth,
|
||||
showWeekNumbers,
|
||||
onDayClick,
|
||||
onPointerDown,
|
||||
onPointerEnter,
|
||||
}: CalendarWeekProps): ReactNode {
|
||||
const bars = useMemo(() => buildBarsForWeek(weekDates, plannedDays), [weekDates, plannedDays])
|
||||
|
||||
const maxLane = bars.length > 0 ? Math.max(...bars.map((b) => b.lane)) : 0
|
||||
const barHeight = 28
|
||||
const laneGap = 4
|
||||
const weekMinHeight = 84 + (maxLane + 1) * (barHeight + laneGap)
|
||||
|
||||
const firstDate = weekDates[0]
|
||||
const weekNumber = getISOWeekNumber(new Date(firstDate + 'T00:00:00Z'))
|
||||
|
||||
return (
|
||||
<div
|
||||
className="calendar-week"
|
||||
style={{
|
||||
display: 'contents',
|
||||
minHeight: `${weekMinHeight}px`,
|
||||
}}
|
||||
>
|
||||
{showWeekNumbers && (
|
||||
<div className="calendar__week-number">
|
||||
<span className="calendar__week-number-text">v.{weekNumber}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{weekDates.map((date) => {
|
||||
const weekDateObj = new Date(weekDates[0] + 'T00:00:00Z')
|
||||
const dateObj = new Date(date + 'T00:00:00Z')
|
||||
const dayIsCurrentMonth = dateObj.getMonth() === weekDateObj.getMonth()
|
||||
|
||||
return (
|
||||
<div key={date} className="calendar-week__day-cell" style={{ position: 'relative' }}>
|
||||
<CalendarDay
|
||||
date={date}
|
||||
isCurrentMonth={isCurrentMonth && dayIsCurrentMonth}
|
||||
isToday={date === getTodayString()}
|
||||
isSelected={selectedDates.has(date)}
|
||||
onClick={() => {
|
||||
if (isCurrentMonth && dayIsCurrentMonth) {
|
||||
onDayClick(date)
|
||||
}
|
||||
}}
|
||||
onPointerDown={(d) => {
|
||||
if (isCurrentMonth && dayIsCurrentMonth) {
|
||||
onPointerDown(d)
|
||||
}
|
||||
}}
|
||||
onPointerEnter={(d) => {
|
||||
if (isCurrentMonth && dayIsCurrentMonth) {
|
||||
onPointerEnter(d)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
className="calendar-week__day-bars"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '80%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
>
|
||||
{bars
|
||||
.filter((b) => {
|
||||
const dateIdx = weekDates.indexOf(date)
|
||||
return dateIdx >= b.startCol && dateIdx <= b.endCol
|
||||
})
|
||||
.map((bar, idx) => {
|
||||
const parentUuid = bar.parentUuid
|
||||
const label = parentUuid === personalDataUuid ? parentName : 'Partner'
|
||||
const typeLabel = getLabelForType(bar.dayType)
|
||||
const color = getColorForType(bar.dayType)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className="calendar-bar"
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
height: barHeight,
|
||||
marginBottom: laneGap,
|
||||
}}
|
||||
data-testid={`calendar-bar-${idx}`}
|
||||
>
|
||||
<CalendarEvent
|
||||
leaveType={typeLabel}
|
||||
color={color}
|
||||
isDubbeldag={bar.isDubbeldag}
|
||||
parentLabel={label}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getTodayString(): string {
|
||||
const today = new Date()
|
||||
const year = today.getFullYear()
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(today.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
@@ -17,6 +17,9 @@ export interface PlannedDayModalProps {
|
||||
onClose: () => void
|
||||
isSaving?: boolean | undefined
|
||||
error?: string | null | undefined
|
||||
isRangeMode?: boolean | undefined
|
||||
dayCount?: number | undefined
|
||||
defaultDayType?: 'sjukpenning' | 'lagsta' | 'vacation' | undefined
|
||||
}
|
||||
|
||||
export function PlannedDayModal({
|
||||
@@ -30,6 +33,9 @@ export function PlannedDayModal({
|
||||
onClose,
|
||||
isSaving = false,
|
||||
error = null,
|
||||
isRangeMode = false,
|
||||
dayCount = 1,
|
||||
defaultDayType,
|
||||
}: PlannedDayModalProps): ReactNode {
|
||||
const [dayType, setDayType] = useState<'sjukpenning' | 'lagsta' | 'vacation'>('vacation')
|
||||
const [parentId, setParentId] = useState(selectedParentId)
|
||||
@@ -42,12 +48,18 @@ export function PlannedDayModal({
|
||||
setParentId(existingDay.parentPersonalDataUuid)
|
||||
setIsDubbeldag(existingDay.isDubbeldag)
|
||||
} else {
|
||||
setDayType('vacation')
|
||||
setDayType(defaultDayType ?? 'vacation')
|
||||
setParentId(selectedParentId)
|
||||
setIsDubbeldag(false)
|
||||
}
|
||||
setLocalError(null)
|
||||
}, [isOpen, existingDay, selectedParentId])
|
||||
}, [isOpen, existingDay, selectedParentId, defaultDayType])
|
||||
|
||||
useEffect(() => {
|
||||
if (dayType === 'vacation') {
|
||||
setIsDubbeldag(false)
|
||||
}
|
||||
}, [dayType])
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
@@ -83,18 +95,20 @@ export function PlannedDayModal({
|
||||
day: 'numeric',
|
||||
})
|
||||
|
||||
const modalTitle = isRangeMode ? `Plan ${dayCount} days` : existingDay ? 'Edit Planned Day' : 'Plan a Day'
|
||||
|
||||
return (
|
||||
<div className="planned-day-modal__overlay" onClick={onClose}>
|
||||
<div className="planned-day-modal__content" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="planned-day-modal__header">
|
||||
<h2 data-testid="modal-title">{existingDay ? 'Edit Planned Day' : 'Plan a Day'}</h2>
|
||||
<h2 data-testid="modal-title">{modalTitle}</h2>
|
||||
<button className="planned-day-modal__close" onClick={onClose} aria-label="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="planned-day-modal__body">
|
||||
<p className="planned-day-modal__date">{displayDate}</p>
|
||||
{!isRangeMode && <p className="planned-day-modal__date">{displayDate}</p>}
|
||||
|
||||
{(error || localError) && (
|
||||
<div className="planned-day-modal__error" role="alert">
|
||||
@@ -148,16 +162,21 @@ export function PlannedDayModal({
|
||||
type="checkbox"
|
||||
checked={isDubbeldag}
|
||||
onChange={(e) => setIsDubbeldag(e.target.checked)}
|
||||
disabled={isSaving}
|
||||
disabled={isSaving || dayType === 'vacation'}
|
||||
data-testid="dubbeldag-checkbox"
|
||||
/>
|
||||
{' '}Double day (both parents taking leave)
|
||||
</label>
|
||||
{dayType === 'vacation' && (
|
||||
<p className="planned-day-modal__hint">
|
||||
Dubbeldagar gäller inte för semester
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="planned-day-modal__footer">
|
||||
{existingDay && onDelete && (
|
||||
{!isRangeMode && existingDay && onDelete && (
|
||||
<button
|
||||
className="planned-day-modal__button planned-day-modal__button--danger"
|
||||
onClick={handleDelete}
|
||||
|
||||
@@ -109,6 +109,18 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.planned-day-modal__checkbox-label input[type='checkbox']:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.planned-day-modal__hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 6px;
|
||||
margin-left: 24px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.planned-day-modal__footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
export { useAnalytics } from './useAnalytics'
|
||||
export { useBreakPeriods } from './useBreakPeriods'
|
||||
export { useShowWeekNumbers, getLastLeaveType, setLastLeaveType } from './useCalendarPreferences'
|
||||
export { useOptimizationTips } from './useOptimizationTips'
|
||||
export { useParentalLeave } from './useParentalLeave'
|
||||
export { usePlannedDays } from './usePlannedDays'
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
const SHOW_WEEK_NUMBERS_KEY = 'calendar_show_week_numbers'
|
||||
const LAST_LEAVE_TYPE_KEY = 'calendar_last_leave_type'
|
||||
const STORAGE_EVENT_NAME = 'calendar:preferences-changed'
|
||||
|
||||
type LeaveType = 'sjukpenning' | 'lagsta' | 'vacation'
|
||||
|
||||
export function useShowWeekNumbers(): [boolean, (show: boolean) => void] {
|
||||
const [showWeekNumbers, setShowWeekNumbers] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(SHOW_WEEK_NUMBERS_KEY)
|
||||
setShowWeekNumbers(stored === 'true')
|
||||
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === SHOW_WEEK_NUMBERS_KEY) {
|
||||
setShowWeekNumbers(e.newValue === 'true')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCustomEvent = () => {
|
||||
const stored = localStorage.getItem(SHOW_WEEK_NUMBERS_KEY)
|
||||
setShowWeekNumbers(stored === 'true')
|
||||
}
|
||||
|
||||
window.addEventListener('storage', handleStorageChange)
|
||||
window.addEventListener(STORAGE_EVENT_NAME, handleCustomEvent)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange)
|
||||
window.removeEventListener(STORAGE_EVENT_NAME, handleCustomEvent)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const updateShowWeekNumbers = (show: boolean) => {
|
||||
localStorage.setItem(SHOW_WEEK_NUMBERS_KEY, show ? 'true' : 'false')
|
||||
window.dispatchEvent(new Event(STORAGE_EVENT_NAME))
|
||||
}
|
||||
|
||||
return [showWeekNumbers, updateShowWeekNumbers]
|
||||
}
|
||||
|
||||
export function getLastLeaveType(): LeaveType | null {
|
||||
const stored = sessionStorage.getItem(LAST_LEAVE_TYPE_KEY)
|
||||
if (!stored || !isValidLeaveType(stored)) {
|
||||
return null
|
||||
}
|
||||
return stored as LeaveType
|
||||
}
|
||||
|
||||
export function setLastLeaveType(type: LeaveType): void {
|
||||
if (!isValidLeaveType(type)) {
|
||||
return
|
||||
}
|
||||
sessionStorage.setItem(LAST_LEAVE_TYPE_KEY, type)
|
||||
}
|
||||
|
||||
function isValidLeaveType(value: string): value is LeaveType {
|
||||
return ['sjukpenning', 'lagsta', 'vacation'].includes(value)
|
||||
}
|
||||
+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'
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ReactNode, useState, useEffect } from 'react'
|
||||
import { useWorkspace } from '@/context'
|
||||
import { useVacationDays, useBreakPeriods } from '@/hooks'
|
||||
import { useVacationDays, useBreakPeriods, useShowWeekNumbers } from '@/hooks'
|
||||
import * as api from '@/services/api'
|
||||
import { Layout } from '@/components/layout/Layout'
|
||||
import { LoadingSpinner } from '@/components/common/LoadingSpinner'
|
||||
@@ -16,6 +16,7 @@ export function Settings(): ReactNode {
|
||||
const { data: breakPeriods, isLoading: bpLoading, add: addBreakPeriod, remove: removeBreakPeriod } = useBreakPeriods(
|
||||
workspace?.id ?? null
|
||||
)
|
||||
const [showWeekNumbers, setShowWeekNumbers] = useShowWeekNumbers()
|
||||
|
||||
const [childBirthDate, setChildBirthDate] = useState('')
|
||||
const [parentData, setParentData] = useState({ salaryType: '', employmentStatus: '' })
|
||||
@@ -284,6 +285,19 @@ export function Settings(): ReactNode {
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="settings-page__section">
|
||||
<h2>Calendar</h2>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showWeekNumbers}
|
||||
onChange={(e) => setShowWeekNumbers(e.target.checked)}
|
||||
data-testid="show-week-numbers-checkbox"
|
||||
/>
|
||||
<span>Visa veckonummer</span>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<section className="settings-page__section">
|
||||
<h2>Partner</h2>
|
||||
<p>Add a partner to plan parental leave together.</p>
|
||||
|
||||
@@ -114,6 +114,11 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.calendar-day--selected {
|
||||
background-color: #e3f2fd;
|
||||
border-color: #0066cc;
|
||||
}
|
||||
|
||||
.calendar-day__events {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -128,6 +133,71 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar-week {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-week__day-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-week__days-grid {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.calendar-week__day-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.calendar-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.calendar-event {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.calendar-event__label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.calendar-event__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 3px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 2px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.calendar__legend {
|
||||
padding: 16px;
|
||||
background-color: #f9f9f9;
|
||||
@@ -144,7 +214,7 @@
|
||||
|
||||
.calendar__legend-items {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@@ -156,9 +226,51 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.calendar__legend-item .calendar-event {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
min-width: 12px;
|
||||
.calendar__legend-swatch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar__legend-swatch--dubbeldag {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid #999;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.calendar__grid--with-week-numbers {
|
||||
grid-template-columns: 50px repeat(7, 1fr);
|
||||
}
|
||||
|
||||
.calendar__week-number-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 8px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar__week-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.calendar__week-number-text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -62,3 +62,42 @@ export function getMonthName(date: Date): string {
|
||||
const formatter = new Intl.DateTimeFormat('sv-SE', { month: 'long' })
|
||||
return formatter.format(date)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get ISO week number (1-53) for a date.
|
||||
* ISO-8601: Monday-first, week 1 = contains the year's first Thursday.
|
||||
*/
|
||||
export function getISOWeekNumber(date: Date): number {
|
||||
if (!isValidDate(date)) return 0
|
||||
|
||||
const d = new Date(date.getTime())
|
||||
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7))
|
||||
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
|
||||
const weekNum = Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
|
||||
|
||||
return weekNum
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all dates in a range (inclusive, ascending order, order-independent).
|
||||
* Dates should be ISO strings (YYYY-MM-DD).
|
||||
*/
|
||||
export function datesInRange(startStr: string, endStr: string): string[] {
|
||||
const start = parseInputDate(startStr)
|
||||
const end = parseInputDate(endStr)
|
||||
|
||||
if (!isValidDate(start) || !isValidDate(end)) {
|
||||
return []
|
||||
}
|
||||
|
||||
const [first, second] = start <= end ? [start, end] : [end, start]
|
||||
const result: string[] = []
|
||||
const current = new Date(first)
|
||||
|
||||
while (current <= second) {
|
||||
result.push(formatDateForInput(current))
|
||||
current.setUTCDate(current.getUTCDate() + 1)
|
||||
}
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
export function getColorForType(type: string): string {
|
||||
const colorMap: Record<string, string> = {
|
||||
vacation: '#4CAF50',
|
||||
sjukpenning: '#FF9800',
|
||||
lagsta: '#2196F3',
|
||||
}
|
||||
return colorMap[type] ?? '#9E9E9E'
|
||||
}
|
||||
|
||||
export function getLabelForType(type: string): string {
|
||||
const labelMap: Record<string, string> = {
|
||||
vacation: 'Vacation',
|
||||
sjukpenning: 'Sick Leave',
|
||||
lagsta: 'Parental',
|
||||
}
|
||||
return labelMap[type] ?? 'Unknown'
|
||||
}
|
||||
Reference in New Issue
Block a user