feat(UI-Overhaul-Phase4): Tasks UI 3-Spalten Layout
- Complete rebuild of Tasks.tsx with 3-column explorer layout - Left: TaskTree with status/priority grouping, expandable sections - Middle: List view or Kanban board (switchable via toolbar) - Right: TaskDetail panel with status selector, edit/delete actions - PluginToolbar registration with new-task button and view-mode selector - ResizablePanel for tree and detail columns - Mobile responsive with single-pane view switching - Search bar in list view - Kanban board with 4 status columns (Offen, In Bearbeitung, Blockiert, Erledigt) tsc clean
This commit is contained in:
Agent Zero
+318
-273
@@ -1,10 +1,12 @@
|
||||
/**
|
||||
* Tasks page — list with filter, create modal, detail.
|
||||
* Tasks page — 3-column explorer layout (tree + list + detail).
|
||||
* Rebuilt for UI-Overhaul Phase 4.
|
||||
*/
|
||||
|
||||
import { asError } from '@/utils/errorTypes';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
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';
|
||||
@@ -12,7 +14,8 @@ 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 { Loader2, Plus, CheckSquare, Clock, AlertCircle } from 'lucide-react';
|
||||
import { usePluginToolbarStore } from '@/store/pluginToolbarStore';
|
||||
import { Loader2, Plus, CheckSquare, Clock, AlertCircle, ChevronDown, ChevronRight, List, LayoutGrid } from 'lucide-react';
|
||||
import {
|
||||
useTasks,
|
||||
useCreateTask,
|
||||
@@ -24,10 +27,13 @@ import {
|
||||
type TaskStatus,
|
||||
} from '@/api/tasks';
|
||||
|
||||
const STATUS_COLORS: Record<string, 'secondary' | 'info' | 'success'> = {
|
||||
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'> = {
|
||||
@@ -37,27 +43,184 @@ const PRIORITY_COLORS: Record<string, 'secondary' | 'info' | 'warning' | 'danger
|
||||
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;
|
||||
}
|
||||
try { return new Date(dateStr).toLocaleDateString(); } catch { return dateStr; }
|
||||
}
|
||||
|
||||
function isOverdue(dateStr: string | null, status: string): boolean {
|
||||
if (!dateStr || status === 'done') return false;
|
||||
try {
|
||||
return new Date(dateStr) < new Date();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
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'}`}
|
||||
>Nach Status</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'}`}
|
||||
>Nach Prioritä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'}`}
|
||||
>Alle Tasks ({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">In Bearbeitung</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, unregisterPlugin } = usePluginToolbarStore();
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [filter, setFilter] = useState<TaskFilter>({});
|
||||
@@ -66,26 +229,31 @@ export function TasksPage() {
|
||||
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');
|
||||
|
||||
// Debounce search
|
||||
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, 25, effectiveFilter);
|
||||
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({
|
||||
@@ -94,13 +262,10 @@ export function TasksPage() {
|
||||
priority: formData.priority || 'medium',
|
||||
status: formData.status || 'open',
|
||||
due_date: formData.due_date || null,
|
||||
contact_id: formData.contact_id || null,
|
||||
});
|
||||
toast.success(t('tasks.created'));
|
||||
setCreateModalOpen(false);
|
||||
} catch (err: unknown) { const errObj = asError(err);
|
||||
toast.error(errObj.message || t('common.error'));
|
||||
}
|
||||
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
||||
};
|
||||
|
||||
const handleUpdate = async (formData: Partial<Task>) => {
|
||||
@@ -109,9 +274,7 @@ export function TasksPage() {
|
||||
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'));
|
||||
}
|
||||
} catch (err: unknown) { const errObj = asError(err); toast.error(errObj.message || t('common.error')); }
|
||||
};
|
||||
|
||||
const handleDelete = async (task: Task) => {
|
||||
@@ -120,232 +283,160 @@ export function TasksPage() {
|
||||
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'));
|
||||
}
|
||||
} 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'));
|
||||
} catch (err: unknown) { const errObj = asError(err);
|
||||
toast.error(errObj.message || t('common.error'));
|
||||
}
|
||||
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 flex-col h-full" data-testid="tasks-page">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-secondary-200 bg-white">
|
||||
<h1 className="text-lg font-semibold text-secondary-900 flex items-center gap-2">
|
||||
<CheckSquare className="w-5 h-5" />
|
||||
{t('tasks.title')}
|
||||
</h1>
|
||||
<Button size="sm" onClick={() => { setEditingTask(null); setCreateModalOpen(true); }}>
|
||||
<Plus className="w-4 h-4 mr-1" />
|
||||
{t('tasks.create')}
|
||||
</Button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 border-b border-secondary-200 bg-white flex-wrap">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t('common.search')}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="w-48"
|
||||
/>
|
||||
<Select
|
||||
options={[
|
||||
{ value: '', label: t('common.all') },
|
||||
{ value: 'open', label: t('tasks.statusOpen') },
|
||||
{ value: 'in_progress', label: t('tasks.statusInProgress') },
|
||||
{ value: 'done', label: t('tasks.statusDone') },
|
||||
]}
|
||||
value={filter.status || ''}
|
||||
onChange={(e) => { setFilter(f => ({ ...f, status: (e.target.value || undefined) as TaskStatus | undefined })); setPage(1); }}
|
||||
className="w-40"
|
||||
/>
|
||||
<Select
|
||||
options={[
|
||||
{ value: '', label: t('common.all') },
|
||||
{ value: 'low', label: t('tasks.priorityLow') },
|
||||
{ value: 'medium', label: t('tasks.priorityMedium') },
|
||||
{ value: 'high', label: t('tasks.priorityHigh') },
|
||||
{ value: 'urgent', label: t('tasks.priorityUrgent') },
|
||||
]}
|
||||
value={filter.priority || ''}
|
||||
onChange={(e) => { setFilter(f => ({ ...f, priority: e.target.value || undefined })); setPage(1); }}
|
||||
className="w-40"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
{/* List */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{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')} />
|
||||
) : (
|
||||
<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={() => setSelectedTask(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" />
|
||||
{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>
|
||||
{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>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{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>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setEditingTask(task); }}
|
||||
className="text-xs text-primary-600 hover:text-primary-700 px-2 py-1 min-h-touch"
|
||||
>
|
||||
{t('common.edit')}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleDelete(task); }}
|
||||
className="text-xs text-danger-600 hover:text-danger-700 px-2 py-1 min-h-touch"
|
||||
>
|
||||
{t('common.delete')}
|
||||
</button>
|
||||
</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">Keine Tasks</p>}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{data && data.total > 25 && (
|
||||
<div className="flex items-center justify-between px-4 py-2 border-t border-secondary-200">
|
||||
<span className="text-xs text-secondary-500">
|
||||
{((page - 1) * 25) + 1}–{Math.min(page * 25, data.total)} / {data.total}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
|
||||
{t('common.back')}
|
||||
</Button>
|
||||
<Button size="sm" variant="secondary" disabled={page * 25 >= data.total} onClick={() => setPage(p => p + 1)}>
|
||||
{t('common.next')}
|
||||
</Button>
|
||||
{/* 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}
|
||||
/>
|
||||
|
||||
{/* Detail Modal */}
|
||||
{selectedTask && (
|
||||
<Modal open={!!selectedTask} onClose={() => setSelectedTask(null)} title={selectedTask.title} size="lg">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={STATUS_COLORS[selectedTask.status] || 'secondary'}>
|
||||
{t(`tasks.status${selectedTask.status.charAt(0).toUpperCase() + selectedTask.status.slice(1).replace('_', '')}`)}
|
||||
</Badge>
|
||||
<Badge variant={PRIORITY_COLORS[selectedTask.priority] || 'secondary'}>
|
||||
{t(`tasks.priority${selectedTask.priority.charAt(0).toUpperCase() + selectedTask.priority.slice(1)}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
{selectedTask.description && (
|
||||
<p className="text-sm text-secondary-700">{selectedTask.description}</p>
|
||||
)}
|
||||
<div className="text-xs text-secondary-500">
|
||||
<span className="font-medium">{t('tasks.dueDate')}:</span> {formatDate(selectedTask.due_date)}
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
{selectedTask.status !== 'done' && (
|
||||
<Button size="sm" onClick={() => { handleStatusChange(selectedTask, 'done'); setSelectedTask(null); }}>
|
||||
{t('tasks.markDone')}
|
||||
</Button>
|
||||
)}
|
||||
<Button size="sm" variant="secondary" onClick={() => { setEditingTask(selectedTask); setSelectedTask(null); }}>
|
||||
{t('common.edit')}
|
||||
</Button>
|
||||
<Button size="sm" variant="danger" onClick={() => handleDelete(selectedTask)}>
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
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<string>(task?.priority || 'medium');
|
||||
const [status, setStatus] = useState<string>(task?.status || 'open');
|
||||
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');
|
||||
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]);
|
||||
@@ -353,66 +444,20 @@ function TaskModal({
|
||||
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,
|
||||
});
|
||||
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>
|
||||
<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: t('tasks.statusOpen') },
|
||||
{ value: 'in_progress', label: t('tasks.statusInProgress') },
|
||||
{ value: 'done', label: t('tasks.statusDone') },
|
||||
]}
|
||||
value={status}
|
||||
onChange={(e) => setStatus(e.target.value)}
|
||||
/>
|
||||
<Select
|
||||
label={t('tasks.priority_field')}
|
||||
options={[
|
||||
{ value: 'low', label: t('tasks.priorityLow') },
|
||||
{ value: 'medium', label: t('tasks.priorityMedium') },
|
||||
{ value: 'high', label: t('tasks.priorityHigh') },
|
||||
{ value: 'urgent', label: t('tasks.priorityUrgent') },
|
||||
]}
|
||||
value={priority}
|
||||
onChange={(e) => setPriority(e.target.value)}
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user