first implementation of tamagui mobile pages
This commit is contained in:
Codex Agent
770
resources/js/admin/mobile/EventTasksPage.tsx
Normal file
770
resources/js/admin/mobile/EventTasksPage.tsx
Normal file
@@ -0,0 +1,770 @@
|
||||
import React from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RefreshCcw, Plus, Folder, Pencil, Trash2, MoreHorizontal } from 'lucide-react';
|
||||
import { YStack, XStack } from '@tamagui/stacks';
|
||||
import { SizableText as Text } from '@tamagui/text';
|
||||
import { ListItem } from '@tamagui/list-item';
|
||||
import { Pressable } from '@tamagui/react-native-web-lite';
|
||||
import { MobileScaffold } from './components/Scaffold';
|
||||
import { MobileCard, CTAButton } from './components/Primitives';
|
||||
import { BottomNav } from './components/BottomNav';
|
||||
import {
|
||||
getEvent,
|
||||
getEventTasks,
|
||||
updateTask,
|
||||
TenantTask,
|
||||
assignTasksToEvent,
|
||||
getTasks,
|
||||
getTaskCollections,
|
||||
importTaskCollection,
|
||||
createTask,
|
||||
TenantTaskCollection,
|
||||
getEmotions,
|
||||
TenantEmotion,
|
||||
detachTasksFromEvent,
|
||||
createEmotion,
|
||||
updateEmotion as updateEmotionApi,
|
||||
deleteEmotion as deleteEmotionApi,
|
||||
} from '../api';
|
||||
import { adminPath } from '../constants';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
import { getApiErrorMessage } from '../lib/apiError';
|
||||
import toast from 'react-hot-toast';
|
||||
import { MobileSheet } from './components/Sheet';
|
||||
import { Tag } from './components/Tag';
|
||||
import { useMobileNav } from './hooks/useMobileNav';
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: '100%',
|
||||
height: 40,
|
||||
borderRadius: 10,
|
||||
border: '1px solid #e5e7eb',
|
||||
padding: '0 12px',
|
||||
fontSize: 13,
|
||||
background: 'white',
|
||||
};
|
||||
|
||||
function InlineSeparator() {
|
||||
return <XStack height={1} backgroundColor="#e5e7eb" opacity={0.7} marginLeft="$3" />;
|
||||
}
|
||||
|
||||
export default function MobileEventTasksPage() {
|
||||
const { slug: slugParam } = useParams<{ slug?: string }>();
|
||||
const slug = slugParam ?? null;
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation('management');
|
||||
|
||||
const [tasks, setTasks] = React.useState<TenantTask[]>([]);
|
||||
const [library, setLibrary] = React.useState<TenantTask[]>([]);
|
||||
const [collections, setCollections] = React.useState<TenantTaskCollection[]>([]);
|
||||
const [emotions, setEmotions] = React.useState<TenantEmotion[]>([]);
|
||||
const [showCollectionSheet, setShowCollectionSheet] = React.useState(false);
|
||||
const [showTaskSheet, setShowTaskSheet] = React.useState(false);
|
||||
const [newTask, setNewTask] = React.useState({ id: null as number | null, title: '', description: '', emotion_id: '' as string | '' });
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
const [busyId, setBusyId] = React.useState<number | null>(null);
|
||||
const [assigningId, setAssigningId] = React.useState<number | null>(null);
|
||||
const [eventId, setEventId] = React.useState<number | null>(null);
|
||||
const { go } = useMobileNav(slug);
|
||||
const [searchTerm, setSearchTerm] = React.useState('');
|
||||
const [emotionFilter, setEmotionFilter] = React.useState<string>('');
|
||||
const [expandedLibrary, setExpandedLibrary] = React.useState(false);
|
||||
const [expandedCollections, setExpandedCollections] = React.useState(false);
|
||||
const [showActionsSheet, setShowActionsSheet] = React.useState(false);
|
||||
const [showBulkSheet, setShowBulkSheet] = React.useState(false);
|
||||
const [bulkLines, setBulkLines] = React.useState('');
|
||||
const [showEmotionSheet, setShowEmotionSheet] = React.useState(false);
|
||||
const [editingEmotion, setEditingEmotion] = React.useState<TenantEmotion | null>(null);
|
||||
const [emotionForm, setEmotionForm] = React.useState({ name: '', color: '#e5e7eb' });
|
||||
const [savingEmotion, setSavingEmotion] = React.useState(false);
|
||||
|
||||
const load = React.useCallback(async () => {
|
||||
if (!slug) {
|
||||
setError(t('events.errors.missingSlug', 'Kein Event-Slug angegeben.'));
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const event = await getEvent(slug);
|
||||
setEventId(event.id);
|
||||
const result = await getEventTasks(event.id, 1);
|
||||
const libraryTasks = await getTasks({ per_page: 50 });
|
||||
const collectionList = await getTaskCollections({ per_page: 50 });
|
||||
const emotionList = await getEmotions();
|
||||
setTasks(result.data);
|
||||
setLibrary(libraryTasks.data.filter((task) => !result.data.find((t) => t.id === task.id)));
|
||||
setCollections(collectionList.data ?? []);
|
||||
setEmotions(emotionList ?? []);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(getApiErrorMessage(err, t('events.errors.loadFailed', 'Tasks konnten nicht geladen werden.')));
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [slug, t]);
|
||||
|
||||
React.useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
async function quickAssign(taskId: number) {
|
||||
if (!eventId) return;
|
||||
setAssigningId(taskId);
|
||||
try {
|
||||
await assignTasksToEvent(eventId, [taskId]);
|
||||
const result = await getEventTasks(eventId, 1);
|
||||
setTasks(result.data);
|
||||
setLibrary((prev) => prev.filter((t) => t.id !== taskId));
|
||||
toast.success(t('events.tasks.assigned', 'Task hinzugefügt'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Task konnte nicht zugewiesen werden.')));
|
||||
toast.error(t('events.tasks.updateFailed', 'Task konnte nicht zugewiesen werden.'));
|
||||
}
|
||||
} finally {
|
||||
setAssigningId(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function importCollection(collectionId: number) {
|
||||
if (!eventId) return;
|
||||
try {
|
||||
await importTaskCollection(collectionId, eventId);
|
||||
const result = await getEventTasks(eventId, 1);
|
||||
setTasks(result.data);
|
||||
toast.success(t('events.tasks.imported', 'Aufgabenpaket importiert'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Paket konnte nicht importiert werden.')));
|
||||
toast.error(t('events.errors.saveFailed', 'Paket konnte nicht importiert werden.'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function createNewTask() {
|
||||
if (!eventId || !newTask.title.trim()) return;
|
||||
try {
|
||||
if (newTask.id) {
|
||||
await updateTask(newTask.id, {
|
||||
title: newTask.title.trim(),
|
||||
description: newTask.description.trim() || null,
|
||||
emotion_id: newTask.emotion_id ? Number(newTask.emotion_id) : undefined,
|
||||
} as any);
|
||||
} else {
|
||||
const created = await createTask({
|
||||
title: newTask.title.trim(),
|
||||
description: newTask.description.trim() || null,
|
||||
emotion_id: newTask.emotion_id ? Number(newTask.emotion_id) : undefined,
|
||||
} as any);
|
||||
await assignTasksToEvent(eventId, [created.id]);
|
||||
}
|
||||
const result = await getEventTasks(eventId, 1);
|
||||
setTasks(result.data);
|
||||
setShowTaskSheet(false);
|
||||
setNewTask({ id: null, title: '', description: '', emotion_id: '' });
|
||||
toast.success(t('events.tasks.created', 'Aufgabe gespeichert'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Aufgabe konnte nicht erstellt werden.')));
|
||||
toast.error(t('events.errors.saveFailed', 'Aufgabe konnte nicht erstellt werden.'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function detachTask(taskId: number) {
|
||||
if (!eventId) return;
|
||||
setBusyId(taskId);
|
||||
try {
|
||||
await detachTasksFromEvent(eventId, [taskId]);
|
||||
setTasks((prev) => prev.filter((task) => task.id !== taskId));
|
||||
toast.success(t('events.tasks.removed', 'Aufgabe entfernt'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(getApiErrorMessage(err, t('events.errors.saveFailed', 'Aufgabe konnte nicht entfernt werden.')));
|
||||
toast.error(t('events.errors.saveFailed', 'Aufgabe konnte nicht entfernt werden.'));
|
||||
}
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
}
|
||||
|
||||
const startEdit = (task: TenantTask) => {
|
||||
setNewTask({
|
||||
id: task.id,
|
||||
title: task.title,
|
||||
description: task.description ?? '',
|
||||
emotion_id: task.emotion?.id ? String(task.emotion.id) : '',
|
||||
});
|
||||
setShowTaskSheet(true);
|
||||
};
|
||||
|
||||
const filteredTasks = tasks.filter((task) => {
|
||||
const matchText =
|
||||
!searchTerm ||
|
||||
task.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(task.description ?? '').toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchEmotion = !emotionFilter || task.emotion?.id === Number(emotionFilter);
|
||||
return matchText && matchEmotion;
|
||||
});
|
||||
|
||||
async function handleBulkAdd() {
|
||||
if (!eventId || !bulkLines.trim()) return;
|
||||
const lines = bulkLines
|
||||
.split('\n')
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean);
|
||||
if (!lines.length) return;
|
||||
try {
|
||||
for (const line of lines) {
|
||||
const created = await createTask({ title: line } as any);
|
||||
await assignTasksToEvent(eventId, [created.id]);
|
||||
}
|
||||
const result = await getEventTasks(eventId, 1);
|
||||
setTasks(result.data);
|
||||
setBulkLines('');
|
||||
setShowBulkSheet(false);
|
||||
toast.success(t('events.tasks.created', 'Aufgabe gespeichert'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
toast.error(t('events.errors.saveFailed', 'Aufgabe konnte nicht erstellt werden.'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEmotion() {
|
||||
if (!emotionForm.name.trim()) return;
|
||||
setSavingEmotion(true);
|
||||
try {
|
||||
if (editingEmotion) {
|
||||
const updated = await updateEmotionApi(editingEmotion.id, { name: emotionForm.name.trim(), color: emotionForm.color });
|
||||
setEmotions((prev) => prev.map((em) => (em.id === editingEmotion.id ? updated : em)));
|
||||
} else {
|
||||
const created = await createEmotion({ name: emotionForm.name.trim(), color: emotionForm.color });
|
||||
setEmotions((prev) => [...prev, created]);
|
||||
}
|
||||
setShowEmotionSheet(false);
|
||||
setEditingEmotion(null);
|
||||
setEmotionForm({ name: '', color: '#e5e7eb' });
|
||||
toast.success(t('events.tasks.emotionSaved', 'Emotion gespeichert'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
toast.error(getApiErrorMessage(err, t('events.errors.saveFailed', 'Konnte nicht gespeichert werden.')));
|
||||
}
|
||||
} finally {
|
||||
setSavingEmotion(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function removeEmotion(emotionId: number) {
|
||||
try {
|
||||
await deleteEmotionApi(emotionId);
|
||||
setEmotions((prev) => prev.filter((em) => em.id !== emotionId));
|
||||
toast.success(t('events.tasks.emotionRemoved', 'Emotion entfernt'));
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
toast.error(getApiErrorMessage(err, t('events.errors.saveFailed', 'Konnte nicht gespeichert werden.')));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<MobileScaffold
|
||||
title={t('events.tasks.title', 'Tasks & Checklists')}
|
||||
onBack={() => navigate(-1)}
|
||||
rightSlot={
|
||||
<XStack space="$2">
|
||||
<Pressable onPress={() => load()}>
|
||||
<RefreshCcw size={18} color="#0f172a" />
|
||||
</Pressable>
|
||||
<Pressable onPress={() => setShowActionsSheet(true)}>
|
||||
<MoreHorizontal size={18} color="#0f172a" />
|
||||
</Pressable>
|
||||
</XStack>
|
||||
}
|
||||
footer={
|
||||
<BottomNav active="tasks" onNavigate={go} />
|
||||
}
|
||||
>
|
||||
{error ? (
|
||||
<MobileCard>
|
||||
<Text fontSize={13} fontWeight="600" color="#b91c1c">
|
||||
{error}
|
||||
</Text>
|
||||
</MobileCard>
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<YStack space="$2">
|
||||
{Array.from({ length: 4 }).map((_, idx) => (
|
||||
<MobileCard key={`tsk-${idx}`} height={70} opacity={0.6} />
|
||||
))}
|
||||
</YStack>
|
||||
) : tasks.length === 0 ? (
|
||||
<MobileCard alignItems="center" justifyContent="center" space="$2">
|
||||
<Text fontSize={13} fontWeight="500" color="#4b5563">
|
||||
{t('events.tasks.empty', 'Noch keine Aufgaben.')}
|
||||
</Text>
|
||||
</MobileCard>
|
||||
) : (
|
||||
<YStack space="$2">
|
||||
<YStack space="$2">
|
||||
<input
|
||||
type="search"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder={t('events.tasks.search', 'Search tasks')}
|
||||
style={{ ...inputStyle, height: 38 }}
|
||||
/>
|
||||
<XStack space="$2" flexWrap="wrap">
|
||||
<Chip
|
||||
active={!emotionFilter}
|
||||
label={t('events.tasks.allEmotions', 'All')}
|
||||
onPress={() => setEmotionFilter('')}
|
||||
/>
|
||||
{emotions.map((emotion) => (
|
||||
<Chip
|
||||
key={emotion.id}
|
||||
label={emotion.name}
|
||||
color={emotion.color ?? '#e5e7eb'}
|
||||
active={emotionFilter === String(emotion.id)}
|
||||
onPress={() => setEmotionFilter(String(emotion.id))}
|
||||
/>
|
||||
))}
|
||||
</XStack>
|
||||
</YStack>
|
||||
|
||||
<Text fontSize="$sm" color="#4b5563">
|
||||
{t('events.tasks.count', '{{count}} Tasks', { count: filteredTasks.length })}
|
||||
</Text>
|
||||
<YStack borderWidth={1} borderColor="#e5e7eb" borderRadius="$4" overflow="hidden">
|
||||
{filteredTasks.map((task, idx) => (
|
||||
<React.Fragment key={task.id}>
|
||||
<ListItem
|
||||
title={
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{task.title}
|
||||
</Text>
|
||||
}
|
||||
subTitle={
|
||||
task.description ? (
|
||||
<Text fontSize={11.5} fontWeight="400" color="#6b7280">
|
||||
{task.description}
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
iconAfter={
|
||||
<XStack space="$2">
|
||||
<Pressable onPress={() => startEdit(task)}>
|
||||
<Pencil size={14} color="#007AFF" />
|
||||
</Pressable>
|
||||
<Pressable disabled={busyId === task.id} onPress={() => detachTask(task.id)}>
|
||||
<Trash2 size={14} color="#ef4444" />
|
||||
</Pressable>
|
||||
</XStack>
|
||||
}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
>
|
||||
{task.emotion ? (
|
||||
<XStack marginTop="$1">
|
||||
<Tag label={task.emotion.name ?? ''} color={task.emotion.color ?? '#e5e7eb'} />
|
||||
</XStack>
|
||||
) : null}
|
||||
</ListItem>
|
||||
{idx < tasks.length - 1 ? <InlineSeparator /> : null}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</YStack>
|
||||
<XStack justifyContent="space-between" alignItems="center" marginTop="$2">
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{t('events.tasks.library', 'Weitere Aufgaben')}
|
||||
</Text>
|
||||
<Pressable onPress={() => setShowCollectionSheet(true)}>
|
||||
<Text fontSize={12} fontWeight="600" color="#007AFF">
|
||||
{t('events.tasks.import', 'Import Pack')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</XStack>
|
||||
<Pressable onPress={() => setExpandedLibrary((prev) => !prev)}>
|
||||
<Text fontSize={12} fontWeight="600" color="#007AFF">
|
||||
{expandedLibrary ? t('events.tasks.hideLibrary', 'Hide library') : t('events.tasks.viewAllLibrary', 'View all')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
{library.length === 0 ? (
|
||||
<Text fontSize={12} fontWeight="500" color="#6b7280">
|
||||
{t('events.tasks.libraryEmpty', 'Keine weiteren Aufgaben verfügbar.')}
|
||||
</Text>
|
||||
) : (
|
||||
<YStack borderWidth={1} borderColor="#e5e7eb" borderRadius="$4" overflow="hidden">
|
||||
{(expandedLibrary ? library : library.slice(0, 6)).map((task, idx, arr) => (
|
||||
<React.Fragment key={`lib-${task.id}`}>
|
||||
<ListItem
|
||||
title={
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{task.title}
|
||||
</Text>
|
||||
}
|
||||
subTitle={
|
||||
task.description ? (
|
||||
<Text fontSize={11.5} fontWeight="400" color="#6b7280">
|
||||
{task.description}
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
iconAfter={
|
||||
<Pressable onPress={() => quickAssign(task.id)}>
|
||||
<Text fontSize={12} fontWeight="600" color="#007AFF">
|
||||
{assigningId === task.id ? t('common.processing', '...') : t('events.tasks.add', 'Add')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
/>
|
||||
{idx < arr.length - 1 ? <InlineSeparator /> : null}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</YStack>
|
||||
)}
|
||||
</YStack>
|
||||
)}
|
||||
|
||||
<MobileSheet
|
||||
open={showCollectionSheet}
|
||||
onClose={() => setShowCollectionSheet(false)}
|
||||
title={t('events.tasks.import', 'Aufgabenpaket importieren')}
|
||||
footer={null}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<Pressable onPress={() => setExpandedCollections((prev) => !prev)}>
|
||||
<Text fontSize={12} fontWeight="600" color="#007AFF">
|
||||
{expandedCollections ? t('events.tasks.hideCollections', 'Hide collections') : t('events.tasks.showCollections', 'Show all')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
{collections.length === 0 ? (
|
||||
<Text fontSize={13} fontWeight="500" color="#4b5563">
|
||||
{t('events.tasks.collectionsEmpty', 'Keine Pakete vorhanden.')}
|
||||
</Text>
|
||||
) : (
|
||||
<YStack borderWidth={1} borderColor="#e5e7eb" borderRadius="$4" overflow="hidden">
|
||||
{(expandedCollections ? collections : collections.slice(0, 6)).map((collection, idx, arr) => (
|
||||
<React.Fragment key={collection.id}>
|
||||
<ListItem
|
||||
title={
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{collection.title}
|
||||
</Text>
|
||||
}
|
||||
subTitle={
|
||||
collection.description ? (
|
||||
<Text fontSize={11.5} fontWeight="400" color="#6b7280">
|
||||
{collection.description}
|
||||
</Text>
|
||||
) : null
|
||||
}
|
||||
iconAfter={
|
||||
<Pressable onPress={() => importCollection(collection.id)}>
|
||||
<Text fontSize={12} fontWeight="600" color="#007AFF">
|
||||
{t('events.tasks.import', 'Import')}
|
||||
</Text>
|
||||
</Pressable>
|
||||
}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
/>
|
||||
{idx < arr.length - 1 ? <InlineSeparator /> : null}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</YStack>
|
||||
)}
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<MobileSheet
|
||||
open={showTaskSheet}
|
||||
onClose={() => setShowTaskSheet(false)}
|
||||
title={t('events.tasks.addTask', 'Aufgabe hinzufügen')}
|
||||
footer={
|
||||
<CTAButton label={t('events.tasks.saveTask', 'Aufgabe speichern')} onPress={() => createNewTask()} />
|
||||
}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<Field label={t('events.tasks.title', 'Titel')}>
|
||||
<input
|
||||
type="text"
|
||||
value={newTask.title}
|
||||
onChange={(e) => setNewTask((prev) => ({ ...prev, title: e.target.value }))}
|
||||
placeholder={t('events.tasks.titlePlaceholder', 'z.B. Erstes Gruppenfoto')}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t('events.tasks.description', 'Beschreibung')}>
|
||||
<textarea
|
||||
value={newTask.description}
|
||||
onChange={(e) => setNewTask((prev) => ({ ...prev, description: e.target.value }))}
|
||||
placeholder={t('events.tasks.descriptionPlaceholder', 'Optionale Hinweise')}
|
||||
style={{ ...inputStyle, minHeight: 80 }}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t('events.tasks.emotion', 'Emotion')}>
|
||||
<select
|
||||
value={newTask.emotion_id}
|
||||
onChange={(e) => setNewTask((prev) => ({ ...prev, emotion_id: e.target.value }))}
|
||||
style={{ ...inputStyle, height: 42 }}
|
||||
>
|
||||
<option value="">{t('events.tasks.emotionNone', 'Keine')}</option>
|
||||
{emotions.map((emotion) => (
|
||||
<option key={emotion.id} value={emotion.id}>
|
||||
{emotion.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<MobileSheet
|
||||
open={showActionsSheet}
|
||||
onClose={() => setShowActionsSheet(false)}
|
||||
title={t('events.tasks.moreActions', 'Mehr Aktionen')}
|
||||
footer={null}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<ListItem
|
||||
title={
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{t('events.tasks.bulkAdd', 'Bulk add')}
|
||||
</Text>
|
||||
}
|
||||
onPress={() => {
|
||||
setShowActionsSheet(false);
|
||||
setShowBulkSheet(true);
|
||||
}}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
/>
|
||||
<ListItem
|
||||
title={
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{t('events.tasks.manageEmotions', 'Manage emotions')}
|
||||
</Text>
|
||||
}
|
||||
subTitle={
|
||||
<Text fontSize={11.5} fontWeight="400" color="#6b7280">
|
||||
{t('events.tasks.manageEmotionsHint', 'Filter and keep your taxonomy tidy.')}
|
||||
</Text>
|
||||
}
|
||||
onPress={() => {
|
||||
setShowActionsSheet(false);
|
||||
setShowEmotionSheet(true);
|
||||
}}
|
||||
paddingVertical="$2"
|
||||
paddingHorizontal="$3"
|
||||
/>
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<MobileSheet
|
||||
open={showBulkSheet}
|
||||
onClose={() => setShowBulkSheet(false)}
|
||||
title={t('events.tasks.bulkAdd', 'Bulk add')}
|
||||
footer={<CTAButton label={t('events.tasks.saveTask', 'Aufgabe speichern')} onPress={() => handleBulkAdd()} />}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<Text fontSize={12} color="#4b5563">
|
||||
{t('events.tasks.bulkHint', 'One task per line. These will be created and added to the event.')}
|
||||
</Text>
|
||||
<textarea
|
||||
value={bulkLines}
|
||||
onChange={(e) => setBulkLines(e.target.value)}
|
||||
placeholder={t('events.tasks.bulkPlaceholder', 'e.g.\nBride & groom portrait\nGroup photo main guests')}
|
||||
style={{ ...inputStyle, minHeight: 140, fontSize: 12.5 }}
|
||||
/>
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<MobileSheet
|
||||
open={showEmotionSheet}
|
||||
onClose={() => {
|
||||
setShowEmotionSheet(false);
|
||||
setEditingEmotion(null);
|
||||
setEmotionForm({ name: '', color: '#e5e7eb' });
|
||||
}}
|
||||
title={t('events.tasks.manageEmotions', 'Manage emotions')}
|
||||
footer={
|
||||
<CTAButton
|
||||
label={savingEmotion ? t('common.saving', 'Saving...') : t('events.tasks.saveEmotion', 'Emotion speichern')}
|
||||
onPress={() => saveEmotion()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<Field label={t('events.tasks.emotionName', 'Name')}>
|
||||
<input
|
||||
type="text"
|
||||
value={emotionForm.name}
|
||||
onChange={(e) => setEmotionForm((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder={t('events.tasks.emotionNamePlaceholder', 'z.B. Joy')}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t('events.tasks.emotionColor', 'Farbe')}>
|
||||
<input
|
||||
type="color"
|
||||
value={emotionForm.color}
|
||||
onChange={(e) => setEmotionForm((prev) => ({ ...prev, color: e.target.value }))}
|
||||
style={{ width: '100%', height: 44, borderRadius: 10, border: '1px solid #e5e7eb', background: 'white' }}
|
||||
/>
|
||||
</Field>
|
||||
<YStack space="$2">
|
||||
{emotions.map((em) => (
|
||||
<ListItem
|
||||
key={`emo-${em.id}`}
|
||||
title={
|
||||
<XStack alignItems="center" space="$2">
|
||||
<Tag label={em.name ?? ''} color={em.color ?? '#e5e7eb'} />
|
||||
</XStack>
|
||||
}
|
||||
iconAfter={
|
||||
<XStack space="$2">
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setEditingEmotion(em);
|
||||
setEmotionForm({ name: em.name ?? '', color: em.color ?? '#e5e7eb' });
|
||||
}}
|
||||
>
|
||||
<Pencil size={14} color="#007AFF" />
|
||||
</Pressable>
|
||||
<Pressable onPress={() => removeEmotion(em.id)}>
|
||||
<Trash2 size={14} color="#ef4444" />
|
||||
</Pressable>
|
||||
</XStack>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</YStack>
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<MobileSheet
|
||||
open={showEmotionSheet}
|
||||
onClose={() => {
|
||||
setShowEmotionSheet(false);
|
||||
setEditingEmotion(null);
|
||||
setEmotionForm({ name: '', color: '#e5e7eb' });
|
||||
}}
|
||||
title={t('events.tasks.manageEmotions', 'Manage emotions')}
|
||||
footer={
|
||||
<CTAButton
|
||||
label={t('events.tasks.saveEmotion', 'Emotion speichern')}
|
||||
onPress={() => {
|
||||
void saveEmotion();
|
||||
}}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<YStack space="$2">
|
||||
<Field label={t('events.tasks.emotionName', 'Name')}>
|
||||
<input
|
||||
type="text"
|
||||
value={emotionForm.name}
|
||||
onChange={(e) => setEmotionForm((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder={t('events.tasks.emotionNamePlaceholder', 'z.B. Joy')}
|
||||
style={inputStyle}
|
||||
/>
|
||||
</Field>
|
||||
<Field label={t('events.tasks.emotionColor', 'Farbe')}>
|
||||
<input
|
||||
type="color"
|
||||
value={emotionForm.color}
|
||||
onChange={(e) => setEmotionForm((prev) => ({ ...prev, color: e.target.value }))}
|
||||
style={{ width: '100%', height: 44, borderRadius: 10, border: '1px solid #e5e7eb', background: 'white' }}
|
||||
/>
|
||||
</Field>
|
||||
<YStack space="$2">
|
||||
{emotions.map((em) => (
|
||||
<ListItem
|
||||
key={`emo-${em.id}`}
|
||||
title={
|
||||
<XStack alignItems="center" space="$2">
|
||||
<Tag label={em.name ?? ''} color={em.color ?? '#e5e7eb'} />
|
||||
</XStack>
|
||||
}
|
||||
iconAfter={
|
||||
<XStack space="$2">
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setEditingEmotion(em);
|
||||
setEmotionForm({ name: em.name ?? '', color: em.color ?? '#e5e7eb' });
|
||||
}}
|
||||
>
|
||||
<Pencil size={14} color="#007AFF" />
|
||||
</Pressable>
|
||||
<Pressable onPress={() => removeEmotion(em.id)}>
|
||||
<Trash2 size={14} color="#ef4444" />
|
||||
</Pressable>
|
||||
</XStack>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</YStack>
|
||||
</YStack>
|
||||
</MobileSheet>
|
||||
|
||||
<Pressable
|
||||
onPress={() => setShowTaskSheet(true)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
right: 20,
|
||||
bottom: 90,
|
||||
width: 56,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#007AFF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 10px 25px rgba(0,122,255,0.35)',
|
||||
zIndex: 60,
|
||||
}}
|
||||
>
|
||||
<Plus size={20} color="#ffffff" />
|
||||
</Pressable>
|
||||
</MobileScaffold>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<YStack space="$1">
|
||||
<Text fontSize={12.5} fontWeight="600" color="#111827">
|
||||
{label}
|
||||
</Text>
|
||||
{children}
|
||||
</YStack>
|
||||
);
|
||||
}
|
||||
|
||||
function Chip({ label, onPress, active, color }: { label: string; onPress: () => void; active: boolean; color?: string }) {
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
<XStack
|
||||
alignItems="center"
|
||||
paddingHorizontal="$3"
|
||||
paddingVertical={8}
|
||||
borderRadius={999}
|
||||
backgroundColor={active ? '#e0f2fe' : '#f3f4f6'}
|
||||
borderWidth={1}
|
||||
borderColor={active ? '#93c5fd' : '#e5e7eb'}
|
||||
>
|
||||
<Text fontSize={12} fontWeight="600" color={color ?? (active ? '#0f172a' : '#4b5563')}>
|
||||
{label}
|
||||
</Text>
|
||||
</XStack>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user