mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:41:09 +02:00
refactor(todo,calendar): extract duplicated constants and utilities
Todo: - Extract priority colors to lib/constants/priority.ts (was in TaskItem + KanbanTaskCard) - Extract formatDueDate to lib/utils/date-display.ts (was in TaskItem + KanbanTaskCard + task-parser) - Extract withErrorHandling to lib/stores/store-helpers.ts (was in 3 stores) Calendar: - Extract formatTime, snapToGrid, getDayFromX, getMinutesFromY to lib/utils/drag-helpers.ts (was duplicated across 4 drag/drop composables) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
74ff066050
commit
101f20ec34
13 changed files with 438 additions and 371 deletions
|
|
@ -3,10 +3,8 @@
|
|||
* Handles click-and-drag on the calendar grid to create new events
|
||||
*/
|
||||
|
||||
import {
|
||||
SNAP_INTERVAL_MINUTES,
|
||||
DEFAULT_EVENT_DURATION_MINUTES,
|
||||
} from '$lib/utils/calendarConstants';
|
||||
import { DEFAULT_EVENT_DURATION_MINUTES } from '$lib/utils/calendarConstants';
|
||||
import { formatTime, getSnapMinutes, getDayFromX, getMinutesFromY } from '$lib/utils/drag-helpers';
|
||||
|
||||
export interface DragToCreateConfig {
|
||||
containerEl: HTMLElement | null;
|
||||
|
|
@ -30,38 +28,21 @@ export function useDragToCreate(getConfig: () => DragToCreateConfig) {
|
|||
let createPreviewHeight = $state(0);
|
||||
let hasMoved = $state(false);
|
||||
|
||||
function getSnapMinutes(): number {
|
||||
return getConfig().snapMinutes ?? SNAP_INTERVAL_MINUTES;
|
||||
function dayFromX(clientX: number): Date | null {
|
||||
const config = getConfig();
|
||||
return getDayFromX(clientX, config.containerEl, config.days);
|
||||
}
|
||||
|
||||
function getDayFromX(clientX: number): Date | null {
|
||||
function minutesFromY(clientY: number): number {
|
||||
const config = getConfig();
|
||||
if (!config.containerEl) return null;
|
||||
|
||||
const rect = config.containerEl.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
const dayWidth = rect.width / config.days.length;
|
||||
const dayIndex = Math.floor(relativeX / dayWidth);
|
||||
|
||||
if (dayIndex >= 0 && dayIndex < config.days.length) {
|
||||
return config.days[dayIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getMinutesFromY(clientY: number): number {
|
||||
const config = getConfig();
|
||||
if (!config.containerEl) return 0;
|
||||
|
||||
const rect = config.containerEl.getBoundingClientRect();
|
||||
const scrollTop = config.containerEl.parentElement?.scrollTop || 0;
|
||||
const relativeY = clientY - rect.top + scrollTop;
|
||||
const visibleMinutes =
|
||||
(relativeY / (config.totalVisibleHours * config.hourHeight)) * config.totalVisibleHours * 60;
|
||||
const totalMinutes = visibleMinutes + config.firstVisibleHour * 60;
|
||||
|
||||
const snap = getSnapMinutes();
|
||||
return Math.round(totalMinutes / snap) * snap;
|
||||
return getMinutesFromY(
|
||||
clientY,
|
||||
config.containerEl,
|
||||
config.totalVisibleHours,
|
||||
config.hourHeight,
|
||||
config.firstVisibleHour,
|
||||
config.snapMinutes
|
||||
);
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
|
|
@ -87,11 +68,11 @@ export function useDragToCreate(getConfig: () => DragToCreateConfig) {
|
|||
|
||||
e.preventDefault();
|
||||
|
||||
const day = getDayFromX(e.clientX);
|
||||
const day = dayFromX(e.clientX);
|
||||
if (!day) return;
|
||||
|
||||
const minutes = getMinutesFromY(e.clientY);
|
||||
const snap = getSnapMinutes();
|
||||
const minutes = minutesFromY(e.clientY);
|
||||
const snap = getSnapMinutes(config.snapMinutes);
|
||||
const snappedMinutes = Math.round(minutes / snap) * snap;
|
||||
|
||||
isCreating = true;
|
||||
|
|
@ -111,12 +92,12 @@ export function useDragToCreate(getConfig: () => DragToCreateConfig) {
|
|||
|
||||
hasMoved = true;
|
||||
const config = getConfig();
|
||||
const snap = getSnapMinutes();
|
||||
const snap = getSnapMinutes(config.snapMinutes);
|
||||
|
||||
const day = getDayFromX(e.clientX);
|
||||
const day = dayFromX(e.clientX);
|
||||
if (day) createTargetDay = day;
|
||||
|
||||
const minutes = getMinutesFromY(e.clientY);
|
||||
const minutes = minutesFromY(e.clientY);
|
||||
const snappedMinutes = Math.round(minutes / snap) * snap;
|
||||
|
||||
if (snappedMinutes >= createStartMinutes) {
|
||||
|
|
@ -156,8 +137,7 @@ export function useDragToCreate(getConfig: () => DragToCreateConfig) {
|
|||
}
|
||||
|
||||
function getCreatePreviewTime(): string {
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return `${pad(Math.floor(createStartMinutes / 60))}:${pad(createStartMinutes % 60)} - ${pad(Math.floor(createEndMinutes / 60))}:${pad(createEndMinutes % 60)}`;
|
||||
return `${formatTime(Math.floor(createStartMinutes / 60), createStartMinutes % 60)} - ${formatTime(Math.floor(createEndMinutes / 60), createEndMinutes % 60)}`;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import type { CalendarEvent } from '@calendar/shared';
|
|||
import { differenceInMinutes, addMinutes, setHours, setMinutes } from 'date-fns';
|
||||
import { toDate } from '$lib/utils/eventDateHelpers';
|
||||
import { eventsStore } from '$lib/stores/events.svelte';
|
||||
import { SNAP_INTERVAL_MINUTES } from '$lib/utils/calendarConstants';
|
||||
import { formatTime, getDayFromX, getMinutesFromY } from '$lib/utils/drag-helpers';
|
||||
|
||||
export interface EventDragDropConfig {
|
||||
/** Reference to the container element for position calculations */
|
||||
|
|
@ -69,51 +69,21 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
|
||||
// ========== Helper Functions ==========
|
||||
|
||||
function getSnapMinutes(): number {
|
||||
return getConfig().snapMinutes ?? SNAP_INTERVAL_MINUTES;
|
||||
}
|
||||
|
||||
function snapToGrid(minutes: number): number {
|
||||
const snap = getSnapMinutes();
|
||||
return Math.round(minutes / snap) * snap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get day from X coordinate (for multi-day views)
|
||||
*/
|
||||
function getDayFromX(clientX: number): Date | null {
|
||||
function dayFromX(clientX: number): Date | null {
|
||||
const config = getConfig();
|
||||
if (!config.containerEl) return null;
|
||||
|
||||
const rect = config.containerEl.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
const dayWidth = rect.width / config.days.length;
|
||||
const dayIndex = Math.floor(relativeX / dayWidth);
|
||||
|
||||
if (dayIndex >= 0 && dayIndex < config.days.length) {
|
||||
return config.days[dayIndex];
|
||||
}
|
||||
return null;
|
||||
return getDayFromX(clientX, config.containerEl, config.days);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get minutes from Y coordinate
|
||||
*/
|
||||
function getMinutesFromY(clientY: number): number {
|
||||
function minutesFromY(clientY: number): number {
|
||||
const config = getConfig();
|
||||
if (!config.containerEl) return 0;
|
||||
|
||||
const rect = config.containerEl.getBoundingClientRect();
|
||||
const scrollTop = config.containerEl.parentElement?.scrollTop || 0;
|
||||
const relativeY = clientY - rect.top + scrollTop;
|
||||
|
||||
// Account for hidden early hours
|
||||
const visibleMinutes =
|
||||
(relativeY / (config.totalVisibleHours * config.hourHeight)) * config.totalVisibleHours * 60;
|
||||
const totalMinutes = visibleMinutes + config.firstVisibleHour * 60;
|
||||
|
||||
// Snap to interval
|
||||
return snapToGrid(totalMinutes);
|
||||
return getMinutesFromY(
|
||||
clientY,
|
||||
config.containerEl,
|
||||
config.totalVisibleHours,
|
||||
config.hourHeight,
|
||||
config.firstVisibleHour,
|
||||
config.snapMinutes
|
||||
);
|
||||
}
|
||||
|
||||
// ========== Drag Functions ==========
|
||||
|
|
@ -139,7 +109,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
dragTargetDay = start;
|
||||
|
||||
// Calculate offset from event start to click position
|
||||
const clickMinutes = getMinutesFromY(e.clientY);
|
||||
const clickMinutes = minutesFromY(e.clientY);
|
||||
dragOffsetMinutes = clickMinutes - startMinutes;
|
||||
|
||||
document.addEventListener('pointermove', handleDragMove);
|
||||
|
|
@ -153,8 +123,8 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
hasMoved = true;
|
||||
|
||||
// Calculate new position
|
||||
const newDay = getDayFromX(e.clientX);
|
||||
const newMinutes = getMinutesFromY(e.clientY) - dragOffsetMinutes;
|
||||
const newDay = dayFromX(e.clientX);
|
||||
const newMinutes = minutesFromY(e.clientY) - dragOffsetMinutes;
|
||||
|
||||
// Clamp to valid range
|
||||
const clampedMinutes = Math.max(
|
||||
|
|
@ -183,7 +153,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
const duration = differenceInMinutes(end, start);
|
||||
|
||||
// Calculate new start time
|
||||
const newMinutes = getMinutesFromY(e.clientY) - dragOffsetMinutes;
|
||||
const newMinutes = minutesFromY(e.clientY) - dragOffsetMinutes;
|
||||
const clampedMinutes = Math.max(0, Math.min(24 * 60 - 15, newMinutes));
|
||||
const newHours = Math.floor(clampedMinutes / 60);
|
||||
const newMins = clampedMinutes % 60;
|
||||
|
|
@ -244,7 +214,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
resizePreviewHeight = (duration / (config.totalVisibleHours * 60)) * 100;
|
||||
|
||||
// Calculate offset between snapped click position and actual event boundary
|
||||
const clickMinutes = getMinutesFromY(e.clientY);
|
||||
const clickMinutes = minutesFromY(e.clientY);
|
||||
if (edge === 'top') {
|
||||
resizeOffsetMinutes = clickMinutes - startMinutes;
|
||||
} else {
|
||||
|
|
@ -261,7 +231,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
const config = getConfig();
|
||||
hasMoved = true;
|
||||
|
||||
const currentMinutes = getMinutesFromY(e.clientY);
|
||||
const currentMinutes = minutesFromY(e.clientY);
|
||||
// Apply offset to prevent jumping when drag starts
|
||||
const adjustedMinutes = currentMinutes - resizeOffsetMinutes;
|
||||
const originalStartMinutes =
|
||||
|
|
@ -298,7 +268,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
}
|
||||
|
||||
const config = getConfig();
|
||||
const currentMinutes = getMinutesFromY(e.clientY);
|
||||
const currentMinutes = minutesFromY(e.clientY);
|
||||
// Apply offset to prevent jumping
|
||||
const adjustedMinutes = currentMinutes - resizeOffsetMinutes;
|
||||
const originalStartMinutes =
|
||||
|
|
@ -399,8 +369,7 @@ export function useEventDragDrop(getConfig: () => EventDragDropConfig) {
|
|||
endMin = Math.round(previewEndMinutes);
|
||||
}
|
||||
|
||||
const pad = (n: number) => n.toString().padStart(2, '0');
|
||||
return `${pad(Math.floor(startMin / 60))}:${pad(startMin % 60)} - ${pad(Math.floor(endMin / 60))}:${pad(endMin % 60)}`;
|
||||
return `${formatTime(Math.floor(startMin / 60), startMin % 60)} - ${formatTime(Math.floor(endMin / 60), endMin % 60)}`;
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import { todosStore } from '$lib/stores/todos.svelte';
|
||||
import { format } from 'date-fns';
|
||||
import { SNAP_INTERVAL_MINUTES } from '$lib/utils/calendarConstants';
|
||||
import { formatTime, getSnapMinutes } from '$lib/utils/drag-helpers';
|
||||
|
||||
export interface SidebarDropConfig {
|
||||
/** First visible hour (for filtered hours mode) */
|
||||
|
|
@ -20,14 +20,6 @@ export function useSidebarDrop(getConfig: () => SidebarDropConfig) {
|
|||
// Track active drop target (for visual feedback)
|
||||
let dropTarget = $state<{ day: Date; y: number } | null>(null);
|
||||
|
||||
function getSnapMinutes(): number {
|
||||
return getConfig().snapMinutes ?? SNAP_INTERVAL_MINUTES;
|
||||
}
|
||||
|
||||
function formatTime(hours: number, minutes: number): string {
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle dragover event on a day column
|
||||
*/
|
||||
|
|
@ -82,7 +74,7 @@ export function useSidebarDrop(getConfig: () => SidebarDropConfig) {
|
|||
|
||||
const minutesPerPercent = (config.totalVisibleHours * 60) / 100;
|
||||
const rawMinutes = percentY * minutesPerPercent;
|
||||
const snapMinutes = getSnapMinutes();
|
||||
const snapMinutes = getSnapMinutes(getConfig().snapMinutes);
|
||||
const snappedMinutes = Math.round(rawMinutes / snapMinutes) * snapMinutes;
|
||||
const totalMinutes = config.firstVisibleHour * 60 + snappedMinutes;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
import type { Task } from '$lib/stores/todos.svelte';
|
||||
import { todosStore } from '$lib/stores/todos.svelte';
|
||||
import { format } from 'date-fns';
|
||||
import { SNAP_INTERVAL_MINUTES } from '$lib/utils/calendarConstants';
|
||||
import { formatTime, getSnapMinutes } from '$lib/utils/drag-helpers';
|
||||
|
||||
export interface TaskDragDropConfig {
|
||||
/** Reference to the container element for position calculations */
|
||||
|
|
@ -43,14 +43,6 @@ export function useTaskDragDrop(getConfig: () => TaskDragDropConfig) {
|
|||
|
||||
// ========== Helper Functions ==========
|
||||
|
||||
function getSnapMinutes(): number {
|
||||
return getConfig().snapMinutes ?? SNAP_INTERVAL_MINUTES;
|
||||
}
|
||||
|
||||
function formatTime(hours: number, minutes: number): string {
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// ========== Drag Functions ==========
|
||||
|
||||
function startDrag(task: Task, e: PointerEvent) {
|
||||
|
|
@ -105,7 +97,7 @@ export function useTaskDragDrop(getConfig: () => TaskDragDropConfig) {
|
|||
// Snap to intervals
|
||||
const minutesPerPercent = (config.totalVisibleHours * 60) / 100;
|
||||
const rawMinutes = percentY * minutesPerPercent;
|
||||
const snapMinutes = getSnapMinutes();
|
||||
const snapMinutes = getSnapMinutes(getConfig().snapMinutes);
|
||||
const snappedMinutes = Math.round(rawMinutes / snapMinutes) * snapMinutes;
|
||||
taskDragPreviewTop = (snappedMinutes / (config.totalVisibleHours * 60)) * 100;
|
||||
}
|
||||
|
|
@ -192,7 +184,7 @@ export function useTaskDragDrop(getConfig: () => TaskDragDropConfig) {
|
|||
const percentY = Math.max(0, Math.min(100, (relativeY / rect.height) * 100));
|
||||
|
||||
const minutesPerPercent = (config.totalVisibleHours * 60) / 100;
|
||||
const snapMinutes = getSnapMinutes();
|
||||
const snapMinutes = getSnapMinutes(getConfig().snapMinutes);
|
||||
|
||||
if (taskResizeEdge === 'top') {
|
||||
// Adjust start time, keep end fixed
|
||||
|
|
|
|||
73
apps/calendar/apps/web/src/lib/utils/drag-helpers.ts
Normal file
73
apps/calendar/apps/web/src/lib/utils/drag-helpers.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/**
|
||||
* Shared drag/drop utility functions
|
||||
* Used by useEventDragDrop, useDragToCreate
|
||||
*/
|
||||
|
||||
import { SNAP_INTERVAL_MINUTES } from '$lib/utils/calendarConstants';
|
||||
|
||||
/**
|
||||
* Format hours and minutes as HH:MM string
|
||||
*/
|
||||
export function formatTime(hours: number, minutes: number): string {
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the effective snap interval, falling back to the default constant
|
||||
*/
|
||||
export function getSnapMinutes(snapMinutes?: number): number {
|
||||
return snapMinutes ?? SNAP_INTERVAL_MINUTES;
|
||||
}
|
||||
|
||||
/**
|
||||
* Snap a minute value to the nearest grid interval
|
||||
*/
|
||||
export function snapToGrid(minutes: number, snapMinutes?: number): number {
|
||||
const snap = getSnapMinutes(snapMinutes);
|
||||
return Math.round(minutes / snap) * snap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map an X client coordinate to a day column based on container width
|
||||
*/
|
||||
export function getDayFromX(
|
||||
clientX: number,
|
||||
containerEl: HTMLElement | null,
|
||||
days: Date[]
|
||||
): Date | null {
|
||||
if (!containerEl) return null;
|
||||
|
||||
const rect = containerEl.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
const dayWidth = rect.width / days.length;
|
||||
const dayIndex = Math.floor(relativeX / dayWidth);
|
||||
|
||||
if (dayIndex >= 0 && dayIndex < days.length) {
|
||||
return days[dayIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map a Y client coordinate to total minutes in the day,
|
||||
* accounting for scroll offset, visible hour range, and snap interval
|
||||
*/
|
||||
export function getMinutesFromY(
|
||||
clientY: number,
|
||||
containerEl: HTMLElement | null,
|
||||
totalVisibleHours: number,
|
||||
hourHeight: number,
|
||||
firstVisibleHour: number,
|
||||
snapMinutes?: number
|
||||
): number {
|
||||
if (!containerEl) return 0;
|
||||
|
||||
const rect = containerEl.getBoundingClientRect();
|
||||
const scrollTop = containerEl.parentElement?.scrollTop || 0;
|
||||
const relativeY = clientY - rect.top + scrollTop;
|
||||
|
||||
const visibleMinutes = (relativeY / (totalVisibleHours * hourHeight)) * totalVisibleHours * 60;
|
||||
const totalMinutes = visibleMinutes + firstVisibleHour * 60;
|
||||
|
||||
return snapToGrid(totalMinutes, snapMinutes);
|
||||
}
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
} from '@todo/shared';
|
||||
import type { ContactReference, ContactOrManual } from '@manacore/shared-types';
|
||||
import { STATUS_OPTIONS, RECURRENCE_OPTIONS } from '@todo/shared';
|
||||
import { format, isToday, isPast, isTomorrow } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import { isToday, isPast } from 'date-fns';
|
||||
import { formatDueDate } from '$lib/utils/date-display';
|
||||
import { getContext } from 'svelte';
|
||||
import type { Project } from '@todo/shared';
|
||||
import { getActiveProjects, getProjectColor } from '$lib/data/task-queries';
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
FunRatingPicker,
|
||||
TagSelector,
|
||||
} from './form';
|
||||
import { PRIORITY_COLORS } from '$lib/constants/priority';
|
||||
|
||||
interface Props {
|
||||
task: Task;
|
||||
|
|
@ -291,21 +292,12 @@
|
|||
subtasks = newSubtasks;
|
||||
}
|
||||
|
||||
// Priority colors
|
||||
const priorityColors: Record<string, string> = {
|
||||
low: '#22c55e',
|
||||
medium: '#eab308',
|
||||
high: '#f97316',
|
||||
urgent: '#ef4444',
|
||||
};
|
||||
const priorityColors = PRIORITY_COLORS;
|
||||
|
||||
// Format due date
|
||||
let dueDateText = $derived(() => {
|
||||
if (!task.dueDate) return null;
|
||||
const date = new Date(task.dueDate);
|
||||
if (isToday(date)) return 'Heute';
|
||||
if (isTomorrow(date)) return 'Morgen';
|
||||
return format(date, 'dd. MMM', { locale: de });
|
||||
return formatDueDate(new Date(task.dueDate));
|
||||
});
|
||||
|
||||
// Check if overdue
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import type { Task } from '@todo/shared';
|
||||
import { format, isToday, isPast, isTomorrow } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import { isToday, isPast } from 'date-fns';
|
||||
import { formatDueDate } from '$lib/utils/date-display';
|
||||
import { ConfirmationModal, ContactAvatar } from '@manacore/shared-ui';
|
||||
import TaskEditModal from '../TaskEditModal.svelte';
|
||||
import {
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
Note,
|
||||
Trash,
|
||||
} from '@manacore/shared-icons';
|
||||
import { PRIORITY_BG_CLASSES } from '$lib/constants/priority';
|
||||
|
||||
interface Props {
|
||||
task: Task;
|
||||
|
|
@ -36,21 +37,12 @@
|
|||
let contextMenuX = $state(0);
|
||||
let contextMenuY = $state(0);
|
||||
|
||||
// Priority colors (consistent with KanbanFilters)
|
||||
const priorityColors: Record<string, string> = {
|
||||
low: 'bg-blue-500',
|
||||
medium: 'bg-yellow-500',
|
||||
high: 'bg-orange-500',
|
||||
urgent: 'bg-red-500',
|
||||
};
|
||||
const priorityColors = PRIORITY_BG_CLASSES;
|
||||
|
||||
// Format due date
|
||||
let dueDateText = $derived(() => {
|
||||
if (!task.dueDate) return null;
|
||||
const date = new Date(task.dueDate);
|
||||
if (isToday(date)) return 'Heute';
|
||||
if (isTomorrow(date)) return 'Morgen';
|
||||
return format(date, 'dd. MMM', { locale: de });
|
||||
return formatDueDate(new Date(task.dueDate));
|
||||
});
|
||||
|
||||
// Check if overdue
|
||||
|
|
|
|||
37
apps/todo/apps/web/src/lib/constants/priority.ts
Normal file
37
apps/todo/apps/web/src/lib/constants/priority.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import type { TaskPriority } from '@todo/shared';
|
||||
|
||||
/**
|
||||
* Hex color for each priority level, used for inline styles (e.g. checkbox tint).
|
||||
*/
|
||||
export const PRIORITY_COLORS: Record<TaskPriority, string> = {
|
||||
low: '#22c55e',
|
||||
medium: '#eab308',
|
||||
high: '#f97316',
|
||||
urgent: '#ef4444',
|
||||
};
|
||||
|
||||
/**
|
||||
* Tailwind background-color class for each priority level,
|
||||
* used for dot indicators and filter pill backgrounds.
|
||||
*/
|
||||
export const PRIORITY_BG_CLASSES: Record<TaskPriority, string> = {
|
||||
low: 'bg-blue-500',
|
||||
medium: 'bg-yellow-500',
|
||||
high: 'bg-orange-500',
|
||||
urgent: 'bg-red-500',
|
||||
};
|
||||
|
||||
/**
|
||||
* Full priority option descriptors for filter UIs.
|
||||
*/
|
||||
export const PRIORITY_OPTIONS: {
|
||||
value: TaskPriority;
|
||||
label: string;
|
||||
color: string;
|
||||
bgColor: string;
|
||||
}[] = [
|
||||
{ value: 'urgent', label: 'Dringend', color: '#ef4444', bgColor: 'bg-red-500' },
|
||||
{ value: 'high', label: 'Hoch', color: '#f97316', bgColor: 'bg-orange-500' },
|
||||
{ value: 'medium', label: 'Normal', color: '#eab308', bgColor: 'bg-yellow-500' },
|
||||
{ value: 'low', label: 'Niedrig', color: '#3b82f6', bgColor: 'bg-blue-500' },
|
||||
];
|
||||
|
|
@ -6,8 +6,10 @@
|
|||
*/
|
||||
|
||||
import { boardViewCollection, type LocalBoardView, type ViewColumn } from '$lib/data/local-store';
|
||||
import { withErrorHandling } from './store-helpers';
|
||||
|
||||
let error = $state<string | null>(null);
|
||||
const setError = (e: string | null) => (error = e);
|
||||
|
||||
export const boardViewsStore = {
|
||||
get error() {
|
||||
|
|
@ -15,70 +17,74 @@ export const boardViewsStore = {
|
|||
},
|
||||
|
||||
async createView(data: Omit<LocalBoardView, 'id'>) {
|
||||
error = null;
|
||||
try {
|
||||
const count = await boardViewCollection.count();
|
||||
const newView: LocalBoardView = {
|
||||
...data,
|
||||
id: crypto.randomUUID(),
|
||||
order: data.order ?? count,
|
||||
};
|
||||
return await boardViewCollection.insert(newView);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to create view';
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const count = await boardViewCollection.count();
|
||||
const newView: LocalBoardView = {
|
||||
...data,
|
||||
id: crypto.randomUUID(),
|
||||
order: data.order ?? count,
|
||||
};
|
||||
return await boardViewCollection.insert(newView);
|
||||
},
|
||||
'Failed to create view',
|
||||
{ log: false }
|
||||
);
|
||||
},
|
||||
|
||||
async updateView(id: string, data: Partial<LocalBoardView>) {
|
||||
error = null;
|
||||
try {
|
||||
return await boardViewCollection.update(id, data as Partial<LocalBoardView>);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update view';
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
return await boardViewCollection.update(id, data as Partial<LocalBoardView>);
|
||||
},
|
||||
'Failed to update view',
|
||||
{ log: false }
|
||||
);
|
||||
},
|
||||
|
||||
async deleteView(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
await boardViewCollection.delete(id);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to delete view';
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
await boardViewCollection.delete(id);
|
||||
},
|
||||
'Failed to delete view',
|
||||
{ log: false }
|
||||
);
|
||||
},
|
||||
|
||||
async reorderViews(viewIds: string[]) {
|
||||
error = null;
|
||||
try {
|
||||
for (let i = 0; i < viewIds.length; i++) {
|
||||
await boardViewCollection.update(viewIds[i], { order: i } as Partial<LocalBoardView>);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to reorder views';
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
for (let i = 0; i < viewIds.length; i++) {
|
||||
await boardViewCollection.update(viewIds[i], { order: i } as Partial<LocalBoardView>);
|
||||
}
|
||||
},
|
||||
'Failed to reorder views',
|
||||
{ rethrow: false, log: false }
|
||||
);
|
||||
},
|
||||
|
||||
/** Update a column's taskIds (for custom groupBy with manual task assignment) */
|
||||
async updateColumnTaskIds(viewId: string, columnId: string, taskIds: string[]) {
|
||||
error = null;
|
||||
try {
|
||||
const view = await boardViewCollection.get(viewId);
|
||||
if (!view) return;
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const view = await boardViewCollection.get(viewId);
|
||||
if (!view) return;
|
||||
|
||||
const updatedColumns = view.columns.map((col: ViewColumn) =>
|
||||
col.id === columnId
|
||||
? { ...col, match: { ...col.match, taskIds } }
|
||||
: col
|
||||
);
|
||||
await boardViewCollection.update(viewId, {
|
||||
columns: updatedColumns,
|
||||
} as Partial<LocalBoardView>);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update column';
|
||||
throw e;
|
||||
}
|
||||
const updatedColumns = view.columns.map((col: ViewColumn) =>
|
||||
col.id === columnId ? { ...col, match: { ...col.match, taskIds } } : col
|
||||
);
|
||||
await boardViewCollection.update(viewId, {
|
||||
columns: updatedColumns,
|
||||
} as Partial<LocalBoardView>);
|
||||
},
|
||||
'Failed to update column',
|
||||
{ log: false }
|
||||
);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ import type { Project } from '@todo/shared';
|
|||
import { projectCollection, type LocalProject } from '$lib/data/local-store';
|
||||
import { toProject } from '$lib/data/task-queries';
|
||||
import { TodoEvents } from '@manacore/shared-utils/analytics';
|
||||
import { withErrorHandling } from './store-helpers';
|
||||
|
||||
let error = $state<string | null>(null);
|
||||
const setError = (e: string | null) => (error = e);
|
||||
|
||||
export const projectsStore = {
|
||||
get error() {
|
||||
|
|
@ -19,85 +21,80 @@ export const projectsStore = {
|
|||
},
|
||||
|
||||
async createProject(data: { name: string; description?: string; color?: string; icon?: string }) {
|
||||
error = null;
|
||||
try {
|
||||
const count = await projectCollection.count();
|
||||
const newLocal: LocalProject = {
|
||||
id: crypto.randomUUID(),
|
||||
name: data.name,
|
||||
color: data.color ?? '#6b7280',
|
||||
icon: data.icon ?? null,
|
||||
order: count,
|
||||
isArchived: false,
|
||||
isDefault: false,
|
||||
};
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const count = await projectCollection.count();
|
||||
const newLocal: LocalProject = {
|
||||
id: crypto.randomUUID(),
|
||||
name: data.name,
|
||||
color: data.color ?? '#6b7280',
|
||||
icon: data.icon ?? null,
|
||||
order: count,
|
||||
isArchived: false,
|
||||
isDefault: false,
|
||||
};
|
||||
|
||||
const inserted = await projectCollection.insert(newLocal);
|
||||
TodoEvents.projectCreated();
|
||||
return toProject(inserted);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to create project';
|
||||
console.error('Failed to create project:', e);
|
||||
throw e;
|
||||
}
|
||||
const inserted = await projectCollection.insert(newLocal);
|
||||
TodoEvents.projectCreated();
|
||||
return toProject(inserted);
|
||||
},
|
||||
'Failed to create project'
|
||||
);
|
||||
},
|
||||
|
||||
async updateProject(
|
||||
id: string,
|
||||
data: { name?: string; description?: string; color?: string; icon?: string }
|
||||
) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await projectCollection.update(id, data as Partial<LocalProject>);
|
||||
if (updated) {
|
||||
return toProject(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update project';
|
||||
console.error('Failed to update project:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await projectCollection.update(id, data as Partial<LocalProject>);
|
||||
if (updated) {
|
||||
return toProject(updated);
|
||||
}
|
||||
},
|
||||
'Failed to update project'
|
||||
);
|
||||
},
|
||||
|
||||
async deleteProject(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
await projectCollection.delete(id);
|
||||
TodoEvents.projectDeleted();
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to delete project';
|
||||
console.error('Failed to delete project:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
await projectCollection.delete(id);
|
||||
TodoEvents.projectDeleted();
|
||||
},
|
||||
'Failed to delete project'
|
||||
);
|
||||
},
|
||||
|
||||
async archiveProject(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await projectCollection.update(id, {
|
||||
isArchived: true,
|
||||
} as Partial<LocalProject>);
|
||||
if (updated) {
|
||||
return toProject(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to archive project';
|
||||
console.error('Failed to archive project:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await projectCollection.update(id, {
|
||||
isArchived: true,
|
||||
} as Partial<LocalProject>);
|
||||
if (updated) {
|
||||
return toProject(updated);
|
||||
}
|
||||
},
|
||||
'Failed to archive project'
|
||||
);
|
||||
},
|
||||
|
||||
async reorderProjects(projectIds: string[]) {
|
||||
error = null;
|
||||
try {
|
||||
for (let i = 0; i < projectIds.length; i++) {
|
||||
await projectCollection.update(projectIds[i], { order: i } as Partial<LocalProject>);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to reorder projects';
|
||||
console.error('Failed to reorder projects:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
for (let i = 0; i < projectIds.length; i++) {
|
||||
await projectCollection.update(projectIds[i], { order: i } as Partial<LocalProject>);
|
||||
}
|
||||
},
|
||||
'Failed to reorder projects'
|
||||
);
|
||||
},
|
||||
|
||||
get guestInboxId() {
|
||||
|
|
|
|||
30
apps/todo/apps/web/src/lib/stores/store-helpers.ts
Normal file
30
apps/todo/apps/web/src/lib/stores/store-helpers.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Shared error-handling helper for mutation stores.
|
||||
*
|
||||
* Wraps an async operation with consistent error state management:
|
||||
* clears the error before the operation, captures it on failure,
|
||||
* and optionally logs / re-throws.
|
||||
*/
|
||||
|
||||
export async function withErrorHandling<T>(
|
||||
setError: (e: string | null) => void,
|
||||
operation: () => Promise<T>,
|
||||
errorMessage: string,
|
||||
options?: { rethrow?: boolean; log?: boolean }
|
||||
): Promise<T | undefined> {
|
||||
const { rethrow = true, log = true } = options ?? {};
|
||||
setError(null);
|
||||
try {
|
||||
return await operation();
|
||||
} catch (e) {
|
||||
const msg = e instanceof Error ? e.message : errorMessage;
|
||||
setError(msg);
|
||||
if (log) {
|
||||
console.error(errorMessage + ':', e);
|
||||
}
|
||||
if (rethrow) {
|
||||
throw e;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,8 +10,10 @@ import type { Task, TaskPriority, TaskStatus, Subtask } from '@todo/shared';
|
|||
import { taskCollection, type LocalTask } from '$lib/data/local-store';
|
||||
import { toTask } from '$lib/data/task-queries';
|
||||
import { TodoEvents } from '@manacore/shared-utils/analytics';
|
||||
import { withErrorHandling } from './store-helpers';
|
||||
|
||||
let error = $state<string | null>(null);
|
||||
const setError = (e: string | null) => (error = e);
|
||||
|
||||
export const tasksStore = {
|
||||
get error() {
|
||||
|
|
@ -29,31 +31,30 @@ export const tasksStore = {
|
|||
recurrenceRule?: string;
|
||||
estimatedDuration?: number;
|
||||
}) {
|
||||
error = null;
|
||||
try {
|
||||
const count = await taskCollection.count();
|
||||
const newLocal: LocalTask = {
|
||||
id: crypto.randomUUID(),
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
projectId: data.projectId ?? null,
|
||||
priority: data.priority ?? 'medium',
|
||||
isCompleted: false,
|
||||
dueDate: data.dueDate ?? null,
|
||||
estimatedDuration: data.estimatedDuration ?? null,
|
||||
order: count,
|
||||
recurrenceRule: data.recurrenceRule ?? null,
|
||||
subtasks: data.subtasks,
|
||||
};
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const count = await taskCollection.count();
|
||||
const newLocal: LocalTask = {
|
||||
id: crypto.randomUUID(),
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
projectId: data.projectId ?? null,
|
||||
priority: data.priority ?? 'medium',
|
||||
isCompleted: false,
|
||||
dueDate: data.dueDate ?? null,
|
||||
estimatedDuration: data.estimatedDuration ?? null,
|
||||
order: count,
|
||||
recurrenceRule: data.recurrenceRule ?? null,
|
||||
subtasks: data.subtasks,
|
||||
};
|
||||
|
||||
const inserted = await taskCollection.insert(newLocal);
|
||||
TodoEvents.taskCreated(!!data.dueDate);
|
||||
return toTask(inserted);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to create task';
|
||||
console.error('Failed to create task:', e);
|
||||
throw e;
|
||||
}
|
||||
const inserted = await taskCollection.insert(newLocal);
|
||||
TodoEvents.taskCreated(!!data.dueDate);
|
||||
return toTask(inserted);
|
||||
},
|
||||
'Failed to create task'
|
||||
);
|
||||
},
|
||||
|
||||
async updateTask(
|
||||
|
|
@ -77,17 +78,16 @@ export const tasksStore = {
|
|||
labelIds?: string[];
|
||||
}
|
||||
) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, data as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update task';
|
||||
console.error('Failed to update task:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, data as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to update task'
|
||||
);
|
||||
},
|
||||
|
||||
async updateTaskOptimistic(
|
||||
|
|
@ -108,107 +108,102 @@ export const tasksStore = {
|
|||
},
|
||||
|
||||
async deleteTask(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
await taskCollection.delete(id);
|
||||
TodoEvents.taskDeleted();
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to delete task';
|
||||
console.error('Failed to delete task:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
await taskCollection.delete(id);
|
||||
TodoEvents.taskDeleted();
|
||||
},
|
||||
'Failed to delete task'
|
||||
);
|
||||
},
|
||||
|
||||
async completeTask(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, {
|
||||
isCompleted: true,
|
||||
completedAt: new Date().toISOString(),
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
TodoEvents.taskCompleted();
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to complete task';
|
||||
console.error('Failed to complete task:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, {
|
||||
isCompleted: true,
|
||||
completedAt: new Date().toISOString(),
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
TodoEvents.taskCompleted();
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to complete task'
|
||||
);
|
||||
},
|
||||
|
||||
async uncompleteTask(id: string) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, {
|
||||
isCompleted: false,
|
||||
completedAt: null,
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
TodoEvents.taskUncompleted();
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to uncomplete task';
|
||||
console.error('Failed to uncomplete task:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, {
|
||||
isCompleted: false,
|
||||
completedAt: null,
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
TodoEvents.taskUncompleted();
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to uncomplete task'
|
||||
);
|
||||
},
|
||||
|
||||
async moveTask(id: string, projectId: string | null) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, { projectId } as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to move task';
|
||||
console.error('Failed to move task:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, { projectId } as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to move task'
|
||||
);
|
||||
},
|
||||
|
||||
async updateLabels(id: string, labelIds: string[]) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, {
|
||||
metadata: { labelIds },
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update labels';
|
||||
console.error('Failed to update labels:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, {
|
||||
metadata: { labelIds },
|
||||
} as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to update labels'
|
||||
);
|
||||
},
|
||||
|
||||
async updateSubtasks(id: string, subtasks: Subtask[]) {
|
||||
error = null;
|
||||
try {
|
||||
const updated = await taskCollection.update(id, { subtasks } as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to update subtasks';
|
||||
console.error('Failed to update subtasks:', e);
|
||||
throw e;
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
const updated = await taskCollection.update(id, { subtasks } as Partial<LocalTask>);
|
||||
if (updated) {
|
||||
return toTask(updated);
|
||||
}
|
||||
},
|
||||
'Failed to update subtasks'
|
||||
);
|
||||
},
|
||||
|
||||
async reorderTasks(taskIds: string[]) {
|
||||
error = null;
|
||||
try {
|
||||
for (let i = 0; i < taskIds.length; i++) {
|
||||
await taskCollection.update(taskIds[i], { order: i } as Partial<LocalTask>);
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Failed to reorder tasks';
|
||||
console.error('Failed to reorder tasks:', e);
|
||||
}
|
||||
return withErrorHandling(
|
||||
setError,
|
||||
async () => {
|
||||
for (let i = 0; i < taskIds.length; i++) {
|
||||
await taskCollection.update(taskIds[i], { order: i } as Partial<LocalTask>);
|
||||
}
|
||||
},
|
||||
'Failed to reorder tasks',
|
||||
{ rethrow: false }
|
||||
);
|
||||
},
|
||||
|
||||
isDemoTask(_taskId: string) {
|
||||
|
|
|
|||
12
apps/todo/apps/web/src/lib/utils/date-display.ts
Normal file
12
apps/todo/apps/web/src/lib/utils/date-display.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import { format, isToday, isTomorrow } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
|
||||
/**
|
||||
* Format a due date for display.
|
||||
* Returns 'Heute' for today, 'Morgen' for tomorrow, or 'dd. MMM' (German locale) otherwise.
|
||||
*/
|
||||
export function formatDueDate(date: Date): string {
|
||||
if (isToday(date)) return 'Heute';
|
||||
if (isTomorrow(date)) return 'Morgen';
|
||||
return format(date, 'dd. MMM', { locale: de });
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue