Agent Zero
466 lines
23 KiB
TypeScript
466 lines
23 KiB
TypeScript
/**
|
|
* Tasks page — 3-column explorer layout (tree + list + detail).
|
|
* Rebuilt for UI-Overhaul Phase 4.
|
|
*/
|
|
|
|
import { asError } from '@/utils/errorTypes';
|
|
import React, { useState, useMemo, useCallback, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ResizablePanel } from '@/components/ui/ResizablePanel';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Select } from '@/components/ui/Select';
|
|
import { Modal } from '@/components/ui/Modal';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { EmptyState } from '@/components/ui/EmptyState';
|
|
import { useToast } from '@/components/ui/Toast';
|
|
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
|
|
import { Loader2, Plus, CheckSquare, Clock, AlertCircle, ChevronDown, ChevronRight, List, LayoutGrid } from 'lucide-react';
|
|
import {
|
|
useTasks,
|
|
useCreateTask,
|
|
useUpdateTask,
|
|
useDeleteTask,
|
|
useUpdateTaskStatus,
|
|
type Task,
|
|
type TaskFilter,
|
|
type TaskStatus,
|
|
} from '@/api/tasks';
|
|
|
|
const STATUS_COLORS: Record<string, 'secondary' | 'info' | 'success' | 'warning' | 'danger'> = {
|
|
open: 'secondary',
|
|
in_progress: 'info',
|
|
review: 'warning',
|
|
blocked: 'danger',
|
|
done: 'success',
|
|
cancelled: 'secondary',
|
|
};
|
|
|
|
const PRIORITY_COLORS: Record<string, 'secondary' | 'info' | 'warning' | 'danger'> = {
|
|
low: 'secondary',
|
|
medium: 'info',
|
|
high: 'warning',
|
|
urgent: 'danger',
|
|
};
|
|
|
|
const STATUS_GROUPS: { key: string; label: string; statuses: TaskStatus[] }[] = [
|
|
{ key: 'open', label: 'Offen', statuses: ['open'] },
|
|
{ key: 'in_progress', label: 'In Bearbeitung', statuses: ['in_progress', 'review'] },
|
|
{ key: 'blocked', label: 'Blockiert', statuses: ['blocked'] },
|
|
{ key: 'done', label: 'Erledigt', statuses: ['done', 'cancelled'] },
|
|
];
|
|
|
|
const PRIORITY_GROUPS: { key: string; label: string }[] = [
|
|
{ key: 'urgent', label: 'Dringend' },
|
|
{ key: 'high', label: 'Hoch' },
|
|
{ key: 'medium', label: 'Mittel' },
|
|
{ key: 'low', label: 'Niedrig' },
|
|
];
|
|
|
|
function formatDate(dateStr: string | null): string {
|
|
if (!dateStr) return '—';
|
|
try { return new Date(dateStr).toLocaleDateString(); } catch { return dateStr; }
|
|
}
|
|
|
|
function isOverdue(dateStr: string | null, status: string): boolean {
|
|
if (!dateStr || status === 'done' || status === 'cancelled') return false;
|
|
try { return new Date(dateStr) < new Date(); } catch { return false; }
|
|
}
|
|
|
|
// ─── Task Tree ───
|
|
|
|
interface TaskTreeProps {
|
|
tasks: Task[];
|
|
selectedTaskId: string | null;
|
|
onSelect: (task: Task) => void;
|
|
filter: TaskFilter;
|
|
setFilter: (f: TaskFilter) => void;
|
|
}
|
|
|
|
function TaskTree({ tasks, selectedTaskId, onSelect, filter, setFilter }: TaskTreeProps) {
|
|
const { t } = useTranslation();
|
|
const [treeMode, setTreeMode] = useState<'status' | 'priority'>('status');
|
|
const [expanded, setExpanded] = useState<Set<string>>(new Set(['open', 'in_progress', 'urgent', 'high']));
|
|
|
|
const toggle = (key: string) => setExpanded((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(key)) next.delete(key); else next.add(key);
|
|
return next;
|
|
});
|
|
|
|
const grouped = useMemo(() => {
|
|
if (treeMode === 'status') {
|
|
return STATUS_GROUPS.map(g => ({
|
|
key: g.key,
|
|
label: g.label,
|
|
items: tasks.filter(t => g.statuses.includes(t.status)),
|
|
}));
|
|
}
|
|
return PRIORITY_GROUPS.map(g => ({
|
|
key: g.key,
|
|
label: g.label,
|
|
items: tasks.filter(t => t.priority === g.key),
|
|
}));
|
|
}, [tasks, treeMode]);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="px-3 py-2 border-b border-secondary-200">
|
|
<h2 className="text-sm font-semibold text-secondary-900 flex items-center gap-2">
|
|
<CheckSquare className="w-4 h-4" />
|
|
{t('tasks.title')}
|
|
</h2>
|
|
</div>
|
|
<div className="px-3 py-2 border-b border-secondary-200">
|
|
<div className="flex gap-1">
|
|
<button
|
|
onClick={() => setTreeMode('status')}
|
|
className={`px-2 py-1 text-xs rounded ${treeMode === 'status' ? 'bg-primary-100 text-primary-700' : 'text-secondary-500 hover:bg-secondary-100'}`}
|
|
>{t('tasks.nachstatus')}</button>
|
|
<button
|
|
onClick={() => setTreeMode('priority')}
|
|
className={`px-2 py-1 text-xs rounded ${treeMode === 'priority' ? 'bg-primary-100 text-primary-700' : 'text-secondary-500 hover:bg-secondary-100'}`}
|
|
>{t('tasks.nachpriorität')}</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-2">
|
|
<button
|
|
onClick={() => setFilter({})}
|
|
className={`w-full text-left px-3 py-2 rounded-md text-sm font-medium min-h-touch hover:bg-secondary-100 ${!filter.status && !filter.priority ? 'bg-primary-50 text-primary-700' : 'text-secondary-700'}`}
|
|
>{t('tasks.alletasks')}{tasks.length})</button>
|
|
{grouped.map(group => (
|
|
<div key={group.key} className="mt-1">
|
|
<div
|
|
className="flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-secondary-500 hover:bg-secondary-50 cursor-pointer select-none"
|
|
onClick={() => toggle(group.key)}
|
|
>
|
|
{expanded.has(group.key) ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
|
|
<span className="flex-1">{group.label}</span>
|
|
<span className="text-secondary-400">{group.items.length}</span>
|
|
</div>
|
|
{expanded.has(group.key) && group.items.map(task => (
|
|
<button
|
|
key={task.id}
|
|
onClick={() => onSelect(task)}
|
|
className={`w-full flex items-start gap-2 px-3 py-2 text-left hover:bg-secondary-50 transition-colors ${selectedTaskId === task.id ? 'bg-primary-50 border-l-2 border-primary-500' : ''}`}
|
|
style={{ paddingLeft: '28px' }}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="text-sm font-medium text-secondary-900 truncate block">{task.title}</span>
|
|
{task.due_date && (
|
|
<span className={`text-xs flex items-center gap-1 mt-0.5 ${isOverdue(task.due_date, task.status) ? 'text-danger-600' : 'text-secondary-400'}`}>
|
|
<Clock className="w-3 h-3" />{formatDate(task.due_date)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Task Detail ───
|
|
|
|
interface TaskDetailProps {
|
|
task: Task | null;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onStatusChange: (status: TaskStatus) => void;
|
|
}
|
|
|
|
function TaskDetail({ task, onEdit, onDelete, onStatusChange }: TaskDetailProps) {
|
|
const { t } = useTranslation();
|
|
if (!task) {
|
|
return <EmptyState title={t('tasks.selectTask', 'Task auswählen')} description={t('tasks.selectTaskDesc', 'Wähle einen Task aus der Liste')} />;
|
|
}
|
|
const overdue = isOverdue(task.due_date, task.status);
|
|
return (
|
|
<div className="overflow-y-auto h-full p-4" data-testid="task-detail">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-secondary-900">{task.title}</h2>
|
|
<div className="flex gap-2">
|
|
<Button size="sm" variant="ghost" onClick={onEdit}>{t('common.edit')}</Button>
|
|
<Button size="sm" variant="danger" onClick={onDelete}>{t('common.delete')}</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Badge variant={STATUS_COLORS[task.status] || 'secondary'}>
|
|
{t(`tasks.status${task.status.charAt(0).toUpperCase() + task.status.slice(1).replace('_', '')}`)}
|
|
</Badge>
|
|
<Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>
|
|
{t(`tasks.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`)}
|
|
</Badge>
|
|
{overdue && <Badge variant="danger"><AlertCircle className="w-3 h-3 inline mr-1" />Überfällig</Badge>}
|
|
</div>
|
|
{task.description && <p className="text-sm text-secondary-700 mb-4 whitespace-pre-wrap">{task.description}</p>}
|
|
<div className="space-y-2 text-sm">
|
|
<div><span className="font-medium text-secondary-500">{t('tasks.dueDate')}:</span> {formatDate(task.due_date)}</div>
|
|
<div><span className="font-medium text-secondary-500">Status:</span>
|
|
<select value={task.status} onChange={(e) => onStatusChange(e.target.value as TaskStatus)} className="ml-2 text-sm border border-secondary-200 rounded px-2 py-1">
|
|
<option value="open">Offen</option>
|
|
<option value="in_progress">{t('tasks.inbearbeitung')}</option>
|
|
<option value="review">Review</option>
|
|
<option value="done">Erledigt</option>
|
|
<option value="cancelled">Abgebrochen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{task.status !== 'done' && (
|
|
<Button size="sm" className="mt-4" onClick={() => onStatusChange('done')}>{t('tasks.markDone')}</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Main Page ───
|
|
|
|
export function TasksPage() {
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const registerItems = usePluginToolbarStore((s) => s.registerItems);
|
|
const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);
|
|
|
|
const [page, setPage] = useState(1);
|
|
const [filter, setFilter] = useState<TaskFilter>({});
|
|
const [search, setSearch] = useState('');
|
|
const [debouncedSearch, setDebouncedSearch] = useState('');
|
|
const [createModalOpen, setCreateModalOpen] = useState(false);
|
|
const [editingTask, setEditingTask] = useState<Task | null>(null);
|
|
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
|
const [viewMode, setViewMode] = useState<'list' | 'kanban'>('list');
|
|
const [activeView, setActiveView] = useState<'tree' | 'list' | 'detail'>('tree');
|
|
|
|
React.useEffect(() => {
|
|
const timer = setTimeout(() => setDebouncedSearch(search), 300);
|
|
return () => clearTimeout(timer);
|
|
}, [search]);
|
|
|
|
const effectiveFilter = useMemo(() => ({ ...filter, search: debouncedSearch || undefined }), [filter, debouncedSearch]);
|
|
const { data, isLoading } = useTasks(page, 100, effectiveFilter);
|
|
const createMutation = useCreateTask();
|
|
const updateMutation = useUpdateTask();
|
|
const deleteMutation = useDeleteTask();
|
|
const statusMutation = useUpdateTaskStatus();
|
|
const tasks = data?.items || [];
|
|
|
|
// Register toolbar
|
|
useEffect(() => {
|
|
registerItems('tasks', [
|
|
{ id: 'new-task', plugin: 'tasks', label: t('tasks.create'), group: 'actions', onClick: () => { setEditingTask(null); setCreateModalOpen(true); }, icon: <Plus className="w-3.5 h-3.5" strokeWidth={2} /> },
|
|
{ id: 'view-mode', plugin: 'tasks', label: viewMode === 'list' ? 'Liste' : 'Kanban', group: 'view-mode', type: 'select' as const, selectValue: viewMode, selectOptions: [{ value: 'list', label: 'Liste' }, { value: 'kanban', label: 'Kanban' }], onSelect: (v: string) => setViewMode(v as 'list' | 'kanban'), onClick: () => {} },
|
|
]);
|
|
return () => unregisterPlugin('tasks');
|
|
}, [registerItems, unregisterPlugin, t, viewMode]);
|
|
|
|
const handleCreate = async (formData: Partial<Task>) => {
|
|
try {
|
|
await createMutation.mutateAsync({
|
|
title: formData.title || '',
|
|
description: formData.description || null,
|
|
priority: formData.priority || 'medium',
|
|
status: formData.status || 'open',
|
|
due_date: formData.due_date || null,
|
|
});
|
|
toast.success(t('tasks.created'));
|
|
setCreateModalOpen(false);
|
|
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
|
};
|
|
|
|
const handleUpdate = async (formData: Partial<Task>) => {
|
|
if (!editingTask) return;
|
|
try {
|
|
await updateMutation.mutateAsync({ id: editingTask.id, data: formData });
|
|
toast.success(t('tasks.updated'));
|
|
setEditingTask(null);
|
|
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
|
};
|
|
|
|
const handleDelete = async (task: Task) => {
|
|
if (!window.confirm(t('tasks.deleteConfirm'))) return;
|
|
try {
|
|
await deleteMutation.mutateAsync(task.id);
|
|
toast.success(t('tasks.deleted'));
|
|
setSelectedTask(null);
|
|
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
|
};
|
|
|
|
const handleStatusChange = async (task: Task, newStatus: TaskStatus) => {
|
|
try {
|
|
await statusMutation.mutateAsync({ id: task.id, status: newStatus });
|
|
toast.success(t('tasks.statusUpdated'));
|
|
if (selectedTask?.id === task.id) setSelectedTask({ ...task, status: newStatus });
|
|
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
|
};
|
|
|
|
const handleSelectTask = useCallback((task: Task) => {
|
|
setSelectedTask(task);
|
|
setActiveView('detail');
|
|
}, []);
|
|
|
|
// Kanban view
|
|
const kanbanColumns = STATUS_GROUPS.map(g => ({
|
|
...g,
|
|
items: tasks.filter(t => g.statuses.includes(t.status)),
|
|
}));
|
|
|
|
return (
|
|
<div className="flex h-full" data-testid="tasks-page">
|
|
{/* Desktop: 3-column layout */}
|
|
<div className="hidden md:flex w-full">
|
|
<ResizablePanel initialWidth={224} minWidth={180} maxWidth={350} className="border-r border-secondary-200 bg-white">
|
|
<TaskTree tasks={tasks} selectedTaskId={selectedTask?.id ?? null} onSelect={handleSelectTask} filter={filter} setFilter={setFilter} />
|
|
</ResizablePanel>
|
|
|
|
<div className="flex-1 flex">
|
|
{/* List/Kanban */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{/* Search bar */}
|
|
<div className="px-4 py-2 border-b border-secondary-200 bg-white">
|
|
<Input type="text" placeholder={t('common.search')} value={search} onChange={(e) => setSearch(e.target.value)} className="w-full" />
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12"><Loader2 className="animate-spin h-5 w-5 text-secondary-400" /></div>
|
|
) : tasks.length === 0 ? (
|
|
<EmptyState title={t('tasks.noTasks')} description={t('tasks.noTasksDesc')} />
|
|
) : viewMode === 'list' ? (
|
|
<ul className="divide-y divide-secondary-100" role="list">
|
|
{tasks.map((task) => {
|
|
const overdue = isOverdue(task.due_date, task.status);
|
|
return (
|
|
<li key={task.id} className="px-4 py-3 hover:bg-secondary-50 cursor-pointer" onClick={() => handleSelectTask(task)} data-testid={`task-item-${task.id}`}>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-secondary-900">{task.title}</span>
|
|
{overdue && <AlertCircle className="w-4 h-4 text-danger-500" />}
|
|
</div>
|
|
{task.description && <p className="text-xs text-secondary-500 truncate mt-0.5">{task.description}</p>}
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<Badge variant={STATUS_COLORS[task.status] || 'secondary'}>{t(`tasks.status${task.status.charAt(0).toUpperCase() + task.status.slice(1).replace('_', '')}`)}</Badge>
|
|
<Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>{t(`tasks.priority${task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}`)}</Badge>
|
|
{task.due_date && <span className={`text-xs flex items-center gap-1 ${overdue ? 'text-danger-600' : 'text-secondary-500'}`}><Clock className="w-3 h-3" />{formatDate(task.due_date)}</span>}
|
|
</div>
|
|
</div>
|
|
{task.status !== 'done' && (
|
|
<button onClick={(e) => { e.stopPropagation(); handleStatusChange(task, 'done'); }} className="text-xs text-success-600 hover:text-success-700 px-2 py-1 min-h-touch">{t('tasks.markDone')}</button>
|
|
)}
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : (
|
|
/* Kanban view */
|
|
<div className="flex gap-4 p-4 overflow-x-auto h-full">
|
|
{kanbanColumns.map(col => (
|
|
<div key={col.key} className="flex-shrink-0 w-64 bg-secondary-50 rounded-lg p-3 max-h-full overflow-y-auto">
|
|
<h3 className="text-sm font-semibold text-secondary-700 mb-2 flex items-center justify-between">
|
|
{col.label}<span className="text-xs text-secondary-400">{col.items.length}</span>
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{col.items.map(task => (
|
|
<div key={task.id} onClick={() => handleSelectTask(task)} className={`bg-white rounded-md p-3 shadow-sm cursor-pointer hover:shadow-md transition-shadow ${selectedTask?.id === task.id ? 'ring-2 ring-primary-500' : ''}`}>
|
|
<p className="text-sm font-medium text-secondary-900">{task.title}</p>
|
|
<div className="flex items-center gap-1 mt-2">
|
|
<Badge variant={PRIORITY_COLORS[task.priority] || 'secondary'}>{task.priority}</Badge>
|
|
{task.due_date && <span className={`text-xs ${isOverdue(task.due_date, task.status) ? 'text-danger-600' : 'text-secondary-400'}`}><Clock className="w-3 h-3 inline" />{formatDate(task.due_date)}</span>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{col.items.length === 0 && <p className="text-xs text-secondary-400 text-center py-4">{t('tasks.keinetasks')}</p>}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Detail panel */}
|
|
<ResizablePanel initialWidth={350} minWidth={250} maxWidth={500} className="border-l border-secondary-200 bg-white">
|
|
<TaskDetail
|
|
task={selectedTask}
|
|
onEdit={() => { setEditingTask(selectedTask); }}
|
|
onDelete={() => { if (selectedTask) handleDelete(selectedTask); }}
|
|
onStatusChange={(s) => { if (selectedTask) handleStatusChange(selectedTask, s); }}
|
|
/>
|
|
</ResizablePanel>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile: single pane */}
|
|
<div className="md:hidden w-full">
|
|
{activeView === 'tree' ? (
|
|
<TaskTree tasks={tasks} selectedTaskId={selectedTask?.id ?? null} onSelect={handleSelectTask} filter={filter} setFilter={setFilter} />
|
|
) : activeView === 'detail' && selectedTask ? (
|
|
<TaskDetail task={selectedTask} onEdit={() => { setEditingTask(selectedTask); }} onDelete={() => handleDelete(selectedTask)} onStatusChange={(s) => handleStatusChange(selectedTask, s)} />
|
|
) : (
|
|
<div className="overflow-y-auto">
|
|
<div className="px-4 py-2 border-b border-secondary-200 bg-white">
|
|
<Input type="text" placeholder={t('common.search')} value={search} onChange={(e) => setSearch(e.target.value)} className="w-full" />
|
|
</div>
|
|
{isLoading ? <Loader2 className="animate-spin h-5 w-5 text-secondary-400 mx-auto mt-8" /> : tasks.length === 0 ? <EmptyState title={t('tasks.noTasks')} description={t('tasks.noTasksDesc')} /> : (
|
|
<ul className="divide-y divide-secondary-100">
|
|
{tasks.map(task => (
|
|
<li key={task.id} className="px-4 py-3 hover:bg-secondary-50 cursor-pointer" onClick={() => handleSelectTask(task)}>
|
|
<span className="text-sm font-medium text-secondary-900">{task.title}</span>
|
|
<div className="flex gap-1 mt-1"><Badge variant={STATUS_COLORS[task.status] || 'secondary'}>{task.status}</Badge></div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Create/Edit Modal */}
|
|
<TaskModal open={createModalOpen || !!editingTask} onClose={() => { setCreateModalOpen(false); setEditingTask(null); }} task={editingTask} onSubmit={editingTask ? handleUpdate : handleCreate} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Task Create/Edit Modal ──
|
|
|
|
function TaskModal({ open, onClose, task, onSubmit }: {
|
|
open: boolean; onClose: () => void; task?: Task | null; onSubmit: (data: Partial<Task>) => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const [title, setTitle] = useState(task?.title || '');
|
|
const [description, setDescription] = useState(task?.description || '');
|
|
const [priority, setPriority] = useState(task?.priority || 'medium');
|
|
const [status, setStatus] = useState(task?.status || 'open');
|
|
const [dueDate, setDueDate] = useState(task?.due_date ? task.due_date.slice(0, 10) : '');
|
|
|
|
React.useEffect(() => {
|
|
if (open) {
|
|
setTitle(task?.title || ''); setDescription(task?.description || '');
|
|
setPriority(task?.priority || 'medium'); setStatus(task?.status || 'open');
|
|
setDueDate(task?.due_date ? task.due_date.slice(0, 10) : '');
|
|
}
|
|
}, [open, task]);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!title.trim()) return;
|
|
onSubmit({ title: title.trim(), description: description || null, priority: priority as any, status: status as any, due_date: dueDate ? new Date(dueDate).toISOString() : null });
|
|
};
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title={task ? t('tasks.edit') : t('tasks.create')} size="md">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<Input label={t('tasks.title_field')} value={title} onChange={(e) => setTitle(e.target.value)} required data-testid="task-title-input" />
|
|
<div><label className="block text-sm font-medium text-secondary-700 mb-1">{t('tasks.description')}</label><textarea value={description} onChange={(e) => setDescription(e.target.value)} className="w-full px-3 py-2 text-sm rounded-md border border-secondary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-20" /></div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Select label={t('tasks.status_field')} options={[{ value: 'open', label: 'Offen' }, { value: 'in_progress', label: 'In Bearbeitung' }, { value: 'done', label: 'Erledigt' }]} value={status} onChange={(e) => setStatus(e.target.value as any)} />
|
|
<Select label={t('tasks.priority_field')} options={[{ value: 'low', label: 'Niedrig' }, { value: 'medium', label: 'Mittel' }, { value: 'high', label: 'Hoch' }, { value: 'urgent', label: 'Dringend' }]} value={priority} onChange={(e) => setPriority(e.target.value as any)} />
|
|
</div>
|
|
<Input label={t('tasks.dueDate')} type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} />
|
|
<div className="flex justify-end gap-2 pt-2"><Button variant="secondary" onClick={onClose}>{t('common.cancel')}</Button><Button type="submit" data-testid="task-submit-btn">{t('common.save')}</Button></div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|