feat: add visual feedback for CalDAV save & sync actions
- Show spinner + loading text while request is in progress - Display success (green) or error (red) message, auto-clears after 3s - Save and Sync have independent feedback rows (both visible at once) - Fix CaldavTextInput theming and add secureTextEntry for password - Reset CustomTextInput cursor to start when unfocused
This commit is contained in:
@@ -77,7 +77,7 @@ src/
|
|||||||
│ │ ├── _layout.tsx # Tab bar configuration (themed)
|
│ │ ├── _layout.tsx # Tab bar configuration (themed)
|
||||||
│ │ ├── chat.tsx # Chat screen (AI conversation)
|
│ │ ├── chat.tsx # Chat screen (AI conversation)
|
||||||
│ │ ├── calendar.tsx # Calendar overview
|
│ │ ├── calendar.tsx # Calendar overview
|
||||||
│ │ └── settings.tsx # Settings screen (theme switcher, logout)
|
│ │ └── settings.tsx # Settings screen (theme switcher, logout, CalDAV config with feedback)
|
||||||
│ ├── editEvent.tsx # Event edit screen (dual-mode: calendar/chat)
|
│ ├── editEvent.tsx # Event edit screen (dual-mode: calendar/chat)
|
||||||
│ ├── event/
|
│ ├── event/
|
||||||
│ │ └── [id].tsx # Event detail screen (dynamic route)
|
│ │ └── [id].tsx # Event detail screen (dynamic route)
|
||||||
@@ -612,7 +612,7 @@ NODE_ENV=development # development = pretty logs, production = JSON
|
|||||||
- `ThemeStore`: Zustand store with theme state and setTheme()
|
- `ThemeStore`: Zustand store with theme state and setTheme()
|
||||||
- `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
|
- `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
|
||||||
- All components use `useThemeStore()` for reactive theme colors
|
- All components use `useThemeStore()` for reactive theme colors
|
||||||
- Settings screen with theme switcher (light/dark) and CalDAV configuration (url, username, password with save/sync buttons, loads existing config on mount)
|
- Settings screen with theme switcher (light/dark) and CalDAV configuration (url, username, password with save/sync buttons, loads existing config on mount). Save/Sync buttons show independent feedback via `FeedbackRow` component: spinner + loading text during request, then success (green) or error (red) message that auto-clears after 3s. Both feedbacks can be visible simultaneously.
|
||||||
- `BaseButton`: Reusable themed button component
|
- `BaseButton`: Reusable themed button component
|
||||||
- Tab navigation (Chat, Calendar, Settings) implemented with themed UI
|
- Tab navigation (Chat, Calendar, Settings) implemented with themed UI
|
||||||
- Calendar screen fully functional:
|
- Calendar screen fully functional:
|
||||||
@@ -639,7 +639,7 @@ NODE_ENV=development # development = pretty logs, production = JSON
|
|||||||
- `EventService`: getAll(), getById(), getByDateRange(), create(), update(), delete(mode, occurrenceDate) - fully implemented with recurring delete modes
|
- `EventService`: getAll(), getById(), getByDateRange(), create(), update(), delete(mode, occurrenceDate) - fully implemented with recurring delete modes
|
||||||
- `ChatService`: sendMessage(), confirmEvent(deleteMode, occurrenceDate), rejectEvent(), getConversations(), getConversation(), updateProposalEvent() - fully implemented with cursor pagination, recurring delete support, and proposal editing
|
- `ChatService`: sendMessage(), confirmEvent(deleteMode, occurrenceDate), rejectEvent(), getConversations(), getConversation(), updateProposalEvent() - fully implemented with cursor pagination, recurring delete support, and proposal editing
|
||||||
- `CaldavConfigService`: saveConfig(), getConfig(), deleteConfig(), pull(), pushAll(), sync() - CalDAV config management and sync trigger
|
- `CaldavConfigService`: saveConfig(), getConfig(), deleteConfig(), pull(), pushAll(), sync() - CalDAV config management and sync trigger
|
||||||
- `CustomTextInput`: Themed text input with focus border highlight. Props: `text`, `onValueChange`, `placeholder`, `placeholderTextColor`, `secureTextEntry`, `autoCapitalize`, `keyboardType`, `className`, `multiline`. No default padding — callers must set padding via `className` (e.g., `px-3 py-2` or `p-4`)
|
- `CustomTextInput`: Themed text input with focus border highlight. Props: `text`, `onValueChange`, `placeholder`, `placeholderTextColor`, `secureTextEntry`, `autoCapitalize`, `keyboardType`, `className`, `multiline`. No default padding — callers must set padding via `className` (e.g., `px-3 py-2` or `p-4`). When not focused, cursor is reset to start (`selection={{ start: 0 }}`) to avoid text appearing scrolled to the end.
|
||||||
- `CardBase`: Reusable card component with header (title/subtitle), content area, and optional footer button - configurable padding, border, text size via props, ScrollView uses `nestedScrollEnabled` for Android
|
- `CardBase`: Reusable card component with header (title/subtitle), content area, and optional footer button - configurable padding, border, text size via props, ScrollView uses `nestedScrollEnabled` for Android
|
||||||
- `ModalBase`: Reusable modal wrapper with backdrop (absolute-positioned behind card), uses CardBase internally - provides click-outside-to-close, Android back button support, and proper scrolling on Android
|
- `ModalBase`: Reusable modal wrapper with backdrop (absolute-positioned behind card), uses CardBase internally - provides click-outside-to-close, Android back button support, and proper scrolling on Android
|
||||||
- `EventCardBase`: Event card with date/time/recurring icons - uses CardBase for structure. Accepts `recurrenceRule` string (not boolean) and displays German-formatted recurrence via `formatRecurrenceRule()`
|
- `EventCardBase`: Event card with date/time/recurring icons - uses CardBase for structure. Accepts `recurrenceRule` string (not boolean) and displays German-formatted recurrence via `formatRecurrenceRule()`
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { Text, View } from "react-native";
|
import { ActivityIndicator, Text, View } from "react-native";
|
||||||
import BaseBackground from "../../components/BaseBackground";
|
import BaseBackground from "../../components/BaseBackground";
|
||||||
import BaseButton, { BaseButtonProps } from "../../components/BaseButton";
|
import BaseButton, { BaseButtonProps } from "../../components/BaseButton";
|
||||||
import { useThemeStore } from "../../stores/ThemeStore";
|
import { useThemeStore } from "../../stores/ThemeStore";
|
||||||
@@ -8,7 +8,7 @@ import { Ionicons } from "@expo/vector-icons";
|
|||||||
import { SimpleHeader } from "../../components/Header";
|
import { SimpleHeader } from "../../components/Header";
|
||||||
import { THEMES } from "../../Themes";
|
import { THEMES } from "../../Themes";
|
||||||
import CustomTextInput from "../../components/CustomTextInput";
|
import CustomTextInput from "../../components/CustomTextInput";
|
||||||
import { useState } from "react";
|
import { useCallback, useRef, useState } from "react";
|
||||||
import { CaldavConfigService } from "../../services/CaldavConfigService";
|
import { CaldavConfigService } from "../../services/CaldavConfigService";
|
||||||
import { useCaldavConfigStore } from "../../stores";
|
import { useCaldavConfigStore } from "../../stores";
|
||||||
|
|
||||||
@@ -33,25 +33,54 @@ type CaldavTextInputProps = {
|
|||||||
title: string;
|
title: string;
|
||||||
value: string;
|
value: string;
|
||||||
onValueChange: (text: string) => void;
|
onValueChange: (text: string) => void;
|
||||||
|
secureTextEntry?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CaldavTextInput = ({
|
const CaldavTextInput = ({
|
||||||
title,
|
title,
|
||||||
value,
|
value,
|
||||||
onValueChange,
|
onValueChange,
|
||||||
|
secureTextEntry,
|
||||||
}: CaldavTextInputProps) => {
|
}: CaldavTextInputProps) => {
|
||||||
|
const { theme } = useThemeStore();
|
||||||
return (
|
return (
|
||||||
<View className="flex flex-row items-center py-1">
|
<View className="flex flex-row items-center py-1">
|
||||||
<Text className="ml-4 w-24">{title}:</Text>
|
<Text className="ml-4 w-24" style={{ color: theme.textPrimary }}>{title}:</Text>
|
||||||
<CustomTextInput
|
<CustomTextInput
|
||||||
className="flex-1 mr-4 px-3 py-2"
|
className="flex-1 mr-4 px-3 py-2"
|
||||||
text={value}
|
text={value}
|
||||||
onValueChange={onValueChange}
|
onValueChange={onValueChange}
|
||||||
|
secureTextEntry={secureTextEntry}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
type Feedback = { text: string; isError: boolean; loading: boolean };
|
||||||
|
|
||||||
|
const FeedbackRow = ({ feedback }: { feedback: Feedback | null }) => {
|
||||||
|
const { theme } = useThemeStore();
|
||||||
|
if (!feedback) return null;
|
||||||
|
return (
|
||||||
|
<View className="flex flex-row items-center justify-center mt-2 mx-4 gap-2">
|
||||||
|
{feedback.loading && (
|
||||||
|
<ActivityIndicator size="small" color={theme.textMuted} />
|
||||||
|
)}
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: feedback.loading
|
||||||
|
? theme.textMuted
|
||||||
|
: feedback.isError
|
||||||
|
? theme.rejectButton
|
||||||
|
: theme.confirmButton,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{feedback.text}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const CaldavSettings = () => {
|
const CaldavSettings = () => {
|
||||||
const { theme } = useThemeStore();
|
const { theme } = useThemeStore();
|
||||||
const { config, setConfig } = useCaldavConfigStore();
|
const { config, setConfig } = useCaldavConfigStore();
|
||||||
@@ -59,18 +88,51 @@ const CaldavSettings = () => {
|
|||||||
const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? "");
|
const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? "");
|
||||||
const [username, setUsername] = useState(config?.username ?? "");
|
const [username, setUsername] = useState(config?.username ?? "");
|
||||||
const [password, setPassword] = useState(config?.password ?? "");
|
const [password, setPassword] = useState(config?.password ?? "");
|
||||||
|
const [saveFeedback, setSaveFeedback] = useState<Feedback | null>(null);
|
||||||
|
const [syncFeedback, setSyncFeedback] = useState<Feedback | null>(null);
|
||||||
|
const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
const showFeedback = useCallback(
|
||||||
|
(
|
||||||
|
setter: typeof setSaveFeedback,
|
||||||
|
timer: typeof saveTimer,
|
||||||
|
text: string,
|
||||||
|
isError: boolean,
|
||||||
|
loading = false,
|
||||||
|
) => {
|
||||||
|
if (timer.current) clearTimeout(timer.current);
|
||||||
|
setter({ text, isError, loading });
|
||||||
|
if (!loading) {
|
||||||
|
timer.current = setTimeout(() => setter(null), 3000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
);
|
||||||
|
|
||||||
const saveConfig = async () => {
|
const saveConfig = async () => {
|
||||||
|
showFeedback(setSaveFeedback, saveTimer, "Speichere Konfiguration...", false, true);
|
||||||
|
try {
|
||||||
const saved = await CaldavConfigService.saveConfig(
|
const saved = await CaldavConfigService.saveConfig(
|
||||||
serverUrl,
|
serverUrl,
|
||||||
username,
|
username,
|
||||||
password,
|
password,
|
||||||
);
|
);
|
||||||
setConfig(saved);
|
setConfig(saved);
|
||||||
|
showFeedback(setSaveFeedback, saveTimer, "Konfiguration wurde gespeichert", false);
|
||||||
|
} catch {
|
||||||
|
showFeedback(setSaveFeedback, saveTimer, "Fehler beim Speichern der Konfiguration", true);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const sync = async () => {
|
const sync = async () => {
|
||||||
|
showFeedback(setSyncFeedback, syncTimer, "Synchronisiere...", false, true);
|
||||||
|
try {
|
||||||
await CaldavConfigService.sync();
|
await CaldavConfigService.sync();
|
||||||
|
showFeedback(setSyncFeedback, syncTimer, "Synchronisierung erfolgreich", false);
|
||||||
|
} catch {
|
||||||
|
showFeedback(setSyncFeedback, syncTimer, "Fehler beim Synchronisieren", true);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -99,6 +161,7 @@ const CaldavSettings = () => {
|
|||||||
title="password"
|
title="password"
|
||||||
value={password}
|
value={password}
|
||||||
onValueChange={setPassword}
|
onValueChange={setPassword}
|
||||||
|
secureTextEntry
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
<View className="flex flex-row">
|
<View className="flex flex-row">
|
||||||
@@ -109,6 +172,8 @@ const CaldavSettings = () => {
|
|||||||
Sync
|
Sync
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</View>
|
</View>
|
||||||
|
<FeedbackRow feedback={saveFeedback} />
|
||||||
|
<FeedbackRow feedback={syncFeedback} />
|
||||||
</View>
|
</View>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ const CustomTextInput = (props: CustomTextInputProps) => {
|
|||||||
secureTextEntry={props.secureTextEntry}
|
secureTextEntry={props.secureTextEntry}
|
||||||
autoCapitalize={props.autoCapitalize}
|
autoCapitalize={props.autoCapitalize}
|
||||||
keyboardType={props.keyboardType}
|
keyboardType={props.keyboardType}
|
||||||
|
selection={!focused ? { start: 0 } : undefined}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: theme.messageBorderBg,
|
backgroundColor: theme.messageBorderBg,
|
||||||
color: theme.textPrimary,
|
color: theme.textPrimary,
|
||||||
|
|||||||
Reference in New Issue
Block a user