feat: add EditEventScreen with calendar and chat mode support
Add a unified event editor that works in two modes: - Calendar mode: Create/edit events directly via EventService API - Chat mode: Edit AI-proposed events before confirming them The chat mode allows users to modify proposed events (title, time, recurrence) and persists changes both locally and to the server. New components: DateTimePicker, ScrollableDropdown, useDropdownPosition New API: PUT /api/chat/messages/:messageId/proposal
This commit is contained in:
597
apps/client/src/app/editEvent.tsx
Normal file
597
apps/client/src/app/editEvent.tsx
Normal file
@@ -0,0 +1,597 @@
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
Pressable,
|
||||
ActivityIndicator,
|
||||
} from "react-native";
|
||||
import { Frequency, rrulestr } from "rrule";
|
||||
import BaseBackground from "../components/BaseBackground";
|
||||
import { useThemeStore } from "../stores/ThemeStore";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import Header, { HeaderButton } from "../components/Header";
|
||||
import {
|
||||
DatePickerButton,
|
||||
TimePickerButton,
|
||||
} from "../components/DateTimePicker";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { ScrollableDropdown } from "../components/ScrollableDropdown";
|
||||
import { useDropdownPosition } from "../hooks/useDropdownPosition";
|
||||
import { EventService, ChatService } from "../services";
|
||||
import { buildRRule, CreateEventDTO } from "@calchat/shared";
|
||||
import { useChatStore } from "../stores";
|
||||
|
||||
// Direct store access for getting current state in callbacks
|
||||
const getChatStoreState = () => useChatStore.getState();
|
||||
|
||||
type EditEventTextFieldProps = {
|
||||
titel: string;
|
||||
text?: string;
|
||||
focused?: boolean;
|
||||
className?: string;
|
||||
multiline?: boolean;
|
||||
onValueChange?: (text: string) => void;
|
||||
};
|
||||
|
||||
const EditEventTextField = (props: EditEventTextFieldProps) => {
|
||||
const { theme } = useThemeStore();
|
||||
const [focused, setFocused] = useState(props.focused ?? false);
|
||||
|
||||
return (
|
||||
<View className={props.className}>
|
||||
<Text className="text-xl" style={{ color: theme.textPrimary }}>
|
||||
{props.titel}
|
||||
</Text>
|
||||
<TextInput
|
||||
onChangeText={props.onValueChange}
|
||||
value={props.text}
|
||||
multiline={props.multiline}
|
||||
className="flex-1 border border-solid rounded-2xl px-3 py-2 w-full h-11/12"
|
||||
style={{
|
||||
backgroundColor: theme.messageBorderBg,
|
||||
color: theme.textPrimary,
|
||||
textAlignVertical: "top",
|
||||
borderColor: focused ? theme.chatBot : theme.borderPrimary,
|
||||
}}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
type PickerRowProps = {
|
||||
title: string;
|
||||
showLabels?: boolean;
|
||||
dateValue: Date;
|
||||
onDateChange: (date: Date) => void;
|
||||
onTimeChange: (date: Date) => void;
|
||||
};
|
||||
|
||||
const PickerRow = ({
|
||||
showLabels,
|
||||
dateValue,
|
||||
title,
|
||||
onDateChange,
|
||||
onTimeChange,
|
||||
}: PickerRowProps) => {
|
||||
const { theme } = useThemeStore();
|
||||
return (
|
||||
<View className="flex flex-row w-11/12 mt-4 items-end justify-between gap-x-2">
|
||||
<Text className="text-xl pb-2" style={{ color: theme.textPrimary }}>
|
||||
{title}
|
||||
</Text>
|
||||
<View className="flex flex-row w-10/12 gap-x-2">
|
||||
<DatePickerButton
|
||||
className="flex-1"
|
||||
label={showLabels ? "Datum" : undefined}
|
||||
value={dateValue}
|
||||
onChange={onDateChange}
|
||||
/>
|
||||
<TimePickerButton
|
||||
className="flex-1"
|
||||
label={showLabels ? "Uhrzeit" : undefined}
|
||||
value={dateValue}
|
||||
onChange={onTimeChange}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
type RepeatType = "Tag" | "Woche" | "Monat" | "Jahr";
|
||||
|
||||
const REPEAT_TYPE_LABELS: Record<RepeatType, string> = {
|
||||
Tag: "Tage",
|
||||
Woche: "Wochen",
|
||||
Monat: "Monate",
|
||||
Jahr: "Jahre",
|
||||
};
|
||||
|
||||
type RepeatPressableProps = {
|
||||
focused: boolean;
|
||||
repeatType: RepeatType;
|
||||
setRepeatType: (repeatType: RepeatType) => void;
|
||||
};
|
||||
|
||||
const RepeatPressable = ({
|
||||
focused,
|
||||
repeatType,
|
||||
setRepeatType,
|
||||
}: RepeatPressableProps) => {
|
||||
const { theme } = useThemeStore();
|
||||
return (
|
||||
<Pressable
|
||||
className="px-4 py-2 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: focused ? theme.chatBot : theme.secondaryBg,
|
||||
borderColor: theme.borderPrimary,
|
||||
}}
|
||||
onPress={() => setRepeatType(repeatType)}
|
||||
>
|
||||
<Text style={{ color: focused ? theme.buttonText : theme.textPrimary }}>
|
||||
{repeatType}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
type RepeatSelectorProps = {
|
||||
repeatCount: number;
|
||||
onRepeatCountChange: (count: number) => void;
|
||||
repeatType: RepeatType;
|
||||
onRepeatTypeChange: (type: RepeatType) => void;
|
||||
};
|
||||
|
||||
// Static data for repeat count dropdown (1-120)
|
||||
const REPEAT_COUNT_DATA = Array.from({ length: 120 }, (_, i) => i + 1);
|
||||
|
||||
const RepeatSelector = ({
|
||||
repeatCount,
|
||||
onRepeatCountChange,
|
||||
repeatType,
|
||||
onRepeatTypeChange,
|
||||
}: RepeatSelectorProps) => {
|
||||
const { theme } = useThemeStore();
|
||||
const dropdown = useDropdownPosition(2);
|
||||
|
||||
const handleSelectCount = useCallback(
|
||||
(count: number) => {
|
||||
onRepeatCountChange(count);
|
||||
dropdown.close();
|
||||
},
|
||||
[onRepeatCountChange, dropdown],
|
||||
);
|
||||
|
||||
const typeLabel = REPEAT_TYPE_LABELS[repeatType];
|
||||
|
||||
return (
|
||||
<View className="mt-4">
|
||||
{/* Repeat Type Selection */}
|
||||
<View className="flex flex-row gap-2 mb-3">
|
||||
<RepeatPressable
|
||||
repeatType="Tag"
|
||||
setRepeatType={onRepeatTypeChange}
|
||||
focused={repeatType === "Tag"}
|
||||
/>
|
||||
<RepeatPressable
|
||||
repeatType="Woche"
|
||||
setRepeatType={onRepeatTypeChange}
|
||||
focused={repeatType === "Woche"}
|
||||
/>
|
||||
<RepeatPressable
|
||||
repeatType="Monat"
|
||||
setRepeatType={onRepeatTypeChange}
|
||||
focused={repeatType === "Monat"}
|
||||
/>
|
||||
<RepeatPressable
|
||||
repeatType="Jahr"
|
||||
setRepeatType={onRepeatTypeChange}
|
||||
focused={repeatType === "Jahr"}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Repeat Count Selection */}
|
||||
<View className="flex flex-row items-center">
|
||||
<Text className="text-lg" style={{ color: theme.textPrimary }}>
|
||||
Alle{" "}
|
||||
</Text>
|
||||
<Pressable
|
||||
ref={dropdown.ref}
|
||||
className="px-4 py-2 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: theme.secondaryBg,
|
||||
borderColor: theme.borderPrimary,
|
||||
}}
|
||||
onPress={dropdown.open}
|
||||
>
|
||||
<Text className="text-lg" style={{ color: theme.textPrimary }}>
|
||||
{repeatCount}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Text className="text-lg" style={{ color: theme.textPrimary }}>
|
||||
{" "}
|
||||
{typeLabel}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Count Dropdown */}
|
||||
<ScrollableDropdown
|
||||
visible={dropdown.visible}
|
||||
onClose={dropdown.close}
|
||||
position={{
|
||||
bottom: 12,
|
||||
left: 10,
|
||||
width: 100,
|
||||
}}
|
||||
data={REPEAT_COUNT_DATA}
|
||||
keyExtractor={(n) => String(n)}
|
||||
renderItem={(n, theme) => (
|
||||
<View
|
||||
className="w-full flex justify-center items-center py-2"
|
||||
style={{
|
||||
backgroundColor: n % 2 === 0 ? theme.primeBg : theme.secondaryBg,
|
||||
}}
|
||||
>
|
||||
<Text className="text-xl" style={{ color: theme.textPrimary }}>
|
||||
{n}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
onSelect={handleSelectCount}
|
||||
heightRatio={0.4}
|
||||
initialScrollIndex={repeatCount - 1}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
type EditEventHeaderProps = {
|
||||
id?: string;
|
||||
mode?: "calendar" | "chat";
|
||||
};
|
||||
|
||||
const EditEventHeader = ({ id, mode }: EditEventHeaderProps) => {
|
||||
const getTitle = () => {
|
||||
if (mode === "chat") return "Edit Proposal";
|
||||
return id ? "Edit Meeting" : "New Meeting";
|
||||
};
|
||||
|
||||
return (
|
||||
<Header className="flex flex-row justify-center items-center">
|
||||
<HeaderButton
|
||||
className="absolute left-6"
|
||||
iconName="arrow-back-outline"
|
||||
iconSize={36}
|
||||
onPress={router.back}
|
||||
/>
|
||||
<View className="h-full flex justify-center ml-4">
|
||||
<Text className="text-center text-3xl font-bold">{getTitle()}</Text>
|
||||
</View>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
type EditEventParams = {
|
||||
id?: string;
|
||||
date?: string;
|
||||
mode?: "calendar" | "chat";
|
||||
eventData?: string;
|
||||
proposalContext?: string;
|
||||
};
|
||||
|
||||
type ProposalContext = {
|
||||
messageId: string;
|
||||
proposalId: string;
|
||||
conversationId: string;
|
||||
};
|
||||
|
||||
const EditEventScreen = () => {
|
||||
const { id, date, mode, eventData, proposalContext } =
|
||||
useLocalSearchParams<EditEventParams>();
|
||||
const { theme } = useThemeStore();
|
||||
const updateMessage = useChatStore((state) => state.updateMessage);
|
||||
|
||||
// Only show loading if we need to fetch from API (calendar mode with id)
|
||||
const [isLoading, setIsLoading] = useState(
|
||||
mode !== "chat" && !!id && !eventData,
|
||||
);
|
||||
|
||||
// Initialize dates from URL parameter or use current time
|
||||
const initialDate = date ? new Date(date) : new Date();
|
||||
const initialEndDate = new Date(initialDate.getTime() + 60 * 60 * 1000);
|
||||
|
||||
const [repeatVisible, setRepeatVisible] = useState(false);
|
||||
const [repeatCount, setRepeatCount] = useState(1);
|
||||
const [repeatType, setRepeatType] = useState<RepeatType>("Tag");
|
||||
const [startDate, setStartDate] = useState(initialDate);
|
||||
const [endDate, setEndDate] = useState(initialEndDate);
|
||||
const [title, setTitle] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
// Helper to populate form from event data
|
||||
const populateFormFromEvent = useCallback((event: CreateEventDTO) => {
|
||||
setStartDate(new Date(event.startTime));
|
||||
setEndDate(new Date(event.endTime));
|
||||
setTitle(event.title);
|
||||
if (event.description) {
|
||||
setDescription(event.description);
|
||||
}
|
||||
|
||||
if (event.recurrenceRule) {
|
||||
setRepeatVisible(true);
|
||||
|
||||
const rrule = rrulestr(event.recurrenceRule);
|
||||
if (rrule.options.interval) {
|
||||
setRepeatCount(rrule.options.interval);
|
||||
}
|
||||
switch (rrule.options.freq) {
|
||||
case Frequency.DAILY:
|
||||
setRepeatType("Tag");
|
||||
break;
|
||||
case Frequency.WEEKLY:
|
||||
setRepeatType("Woche");
|
||||
break;
|
||||
case Frequency.MONTHLY:
|
||||
setRepeatType("Monat");
|
||||
break;
|
||||
case Frequency.YEARLY:
|
||||
setRepeatType("Jahr");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Load event data based on mode
|
||||
useEffect(() => {
|
||||
// Chat mode: load from eventData JSON parameter
|
||||
if (mode === "chat" && eventData) {
|
||||
try {
|
||||
const event = JSON.parse(eventData) as CreateEventDTO;
|
||||
populateFormFromEvent(event);
|
||||
} catch (error) {
|
||||
console.error("Failed to parse eventData:", error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Calendar mode with id: fetch from API
|
||||
if (id && !eventData) {
|
||||
const fetchEvent = async () => {
|
||||
try {
|
||||
const event = await EventService.getById(id);
|
||||
populateFormFromEvent({
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
startTime: event.startTime,
|
||||
endTime: event.endTime,
|
||||
recurrenceRule: event.recurrenceRule,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to load event: ", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchEvent();
|
||||
}
|
||||
}, [id, mode, eventData, populateFormFromEvent]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<BaseBackground>
|
||||
<EditEventHeader id={id} mode={mode} />
|
||||
<View className="flex-1 justify-center items-center">
|
||||
<ActivityIndicator size="large" color={theme.chatBot} />
|
||||
</View>
|
||||
</BaseBackground>
|
||||
);
|
||||
}
|
||||
|
||||
const handleStartDateChange = (date: Date) => {
|
||||
// Keep the time from startDate, update the date part
|
||||
const newStart = new Date(startDate);
|
||||
newStart.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
setStartDate(newStart);
|
||||
|
||||
// If end date is before new start date, adjust it
|
||||
if (endDate < newStart) {
|
||||
const newEnd = new Date(newStart);
|
||||
newEnd.setHours(newStart.getHours() + 1);
|
||||
setEndDate(newEnd);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartTimeChange = (date: Date) => {
|
||||
// Keep the date from startDate, update the time part
|
||||
const newStart = new Date(startDate);
|
||||
newStart.setHours(date.getHours(), date.getMinutes(), 0, 0);
|
||||
setStartDate(newStart);
|
||||
|
||||
// If end time is before new start time on the same day, adjust it
|
||||
if (endDate <= newStart) {
|
||||
const newEnd = new Date(newStart);
|
||||
newEnd.setHours(newStart.getHours() + 1);
|
||||
setEndDate(newEnd);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEndDateChange = (date: Date) => {
|
||||
// Keep the time from endDate, update the date part
|
||||
const newEnd = new Date(endDate);
|
||||
newEnd.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
setEndDate(newEnd);
|
||||
};
|
||||
|
||||
const handleEndTimeChange = (date: Date) => {
|
||||
// Keep the date from endDate, update the time part
|
||||
const newEnd = new Date(endDate);
|
||||
newEnd.setHours(date.getHours(), date.getMinutes(), 0, 0);
|
||||
setEndDate(newEnd);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const eventObject: CreateEventDTO = {
|
||||
title,
|
||||
description: description === "" ? undefined : description,
|
||||
startTime: startDate,
|
||||
endTime: endDate,
|
||||
recurrenceRule: repeatVisible
|
||||
? buildRRule(repeatType, repeatCount)
|
||||
: undefined,
|
||||
};
|
||||
|
||||
// Chat mode: update proposal locally and on server
|
||||
if (mode === "chat" && proposalContext) {
|
||||
try {
|
||||
const context = JSON.parse(proposalContext) as ProposalContext;
|
||||
|
||||
// Update locally in ChatStore
|
||||
const currentMessages = getChatStoreState().messages;
|
||||
const message = currentMessages.find((m) => m.id === context.messageId);
|
||||
|
||||
if (message?.proposedChanges) {
|
||||
const updatedProposals = message.proposedChanges.map((p) =>
|
||||
p.id === context.proposalId ? { ...p, event: eventObject } : p,
|
||||
);
|
||||
updateMessage(context.messageId, {
|
||||
proposedChanges: updatedProposals,
|
||||
});
|
||||
}
|
||||
|
||||
// Persist to server
|
||||
await ChatService.updateProposalEvent(
|
||||
context.messageId,
|
||||
context.proposalId,
|
||||
eventObject,
|
||||
);
|
||||
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.error("Failed to update proposal:", error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Calendar mode: call API
|
||||
try {
|
||||
if (id) {
|
||||
await EventService.update(id, eventObject);
|
||||
} else {
|
||||
await EventService.create(eventObject);
|
||||
}
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.error("Creating/Updating event failed!", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonText = () => {
|
||||
if (mode === "chat") {
|
||||
return "Fertig";
|
||||
}
|
||||
return id ? "Aktualisiere Termin" : "Erstelle neuen Termin";
|
||||
};
|
||||
|
||||
return (
|
||||
<BaseBackground>
|
||||
<EditEventHeader id={id} mode={mode} />
|
||||
<View className="h-full flex items-center">
|
||||
{/* Date and Time */}
|
||||
<View className="w-11/12">
|
||||
<EditEventTextField
|
||||
className="h-16 mt-2"
|
||||
titel="Titel"
|
||||
text={title}
|
||||
onValueChange={setTitle}
|
||||
/>
|
||||
<PickerRow
|
||||
title="Von"
|
||||
dateValue={startDate}
|
||||
onDateChange={handleStartDateChange}
|
||||
onTimeChange={handleStartTimeChange}
|
||||
showLabels
|
||||
/>
|
||||
<PickerRow
|
||||
title="Bis"
|
||||
dateValue={endDate}
|
||||
onDateChange={handleEndDateChange}
|
||||
onTimeChange={handleEndTimeChange}
|
||||
/>
|
||||
|
||||
{/* TODO: Reminder */}
|
||||
|
||||
{/* Notes */}
|
||||
<EditEventTextField
|
||||
className="h-64 mt-6"
|
||||
titel="Notizen"
|
||||
text={description}
|
||||
onValueChange={setDescription}
|
||||
multiline
|
||||
/>
|
||||
|
||||
{/* Repeat Toggle Button */}
|
||||
<Pressable
|
||||
className="flex flex-row w-1/3 h-10 mt-4 rounded-lg items-center justify-evenly"
|
||||
style={{
|
||||
backgroundColor: repeatVisible
|
||||
? theme.chatBot
|
||||
: theme.secondaryBg,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.borderPrimary,
|
||||
}}
|
||||
onPress={() => setRepeatVisible(!repeatVisible)}
|
||||
>
|
||||
<Ionicons
|
||||
name="repeat"
|
||||
size={24}
|
||||
color={repeatVisible ? theme.buttonText : theme.textPrimary}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: repeatVisible ? theme.buttonText : theme.textPrimary,
|
||||
}}
|
||||
>
|
||||
Wiederholen
|
||||
</Text>
|
||||
</Pressable>
|
||||
|
||||
{/* Repeat Selector (shown when toggle is active) */}
|
||||
{repeatVisible && (
|
||||
<RepeatSelector
|
||||
repeatCount={repeatCount}
|
||||
onRepeatCountChange={setRepeatCount}
|
||||
repeatType={repeatType}
|
||||
onRepeatTypeChange={setRepeatType}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Send new or updated Event */}
|
||||
<View className="absolute bottom-16 w-full h-16">
|
||||
<Pressable
|
||||
className="flex flex-row justify-center items-center py-3"
|
||||
onPress={handleSave}
|
||||
style={{
|
||||
backgroundColor: theme.confirmButton,
|
||||
}}
|
||||
>
|
||||
{mode !== "chat" && (
|
||||
<Ionicons name="add-outline" size={24} color={theme.buttonText} />
|
||||
)}
|
||||
<Text
|
||||
style={{ color: theme.buttonText }}
|
||||
className="font-semibold ml-1"
|
||||
>
|
||||
{getButtonText()}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</BaseBackground>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditEventScreen;
|
||||
Reference in New Issue
Block a user