T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker
- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
This commit is contained in:
Hermes
@@ -0,0 +1,633 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Calendar, Loader2, Play, Square } from 'lucide-react';
|
||||
|
||||
interface TaskDetail {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
status: 'todo' | 'in_progress' | 'done' | 'cancelled';
|
||||
priority: 'low' | 'medium' | 'high' | 'urgent';
|
||||
domainId: string;
|
||||
projectId?: string | null;
|
||||
sectionId?: string | null;
|
||||
parentId?: string | null;
|
||||
dueDate?: string | null;
|
||||
completedAt?: string | null;
|
||||
estimatedMinutes?: number | null;
|
||||
trackedMinutes?: number | null;
|
||||
order: number;
|
||||
recurrenceRule?: string | null;
|
||||
customFields?: Record<string, unknown> | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
subtasks: any[];
|
||||
tags: { id: string; name: string; color: string | null }[];
|
||||
dependencies: { id: string; title: string; status: string }[];
|
||||
dependents: { id: string; title: string; status: string }[];
|
||||
}
|
||||
|
||||
interface TaskDetailPanelProps {
|
||||
taskId: string;
|
||||
domainId: string;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
const RECURRENCE_OPTIONS = [
|
||||
{ label: 'None', value: '' },
|
||||
{ label: 'Daily', value: 'FREQ=DAILY' },
|
||||
{ label: 'Weekly', value: 'FREQ=WEEKLY' },
|
||||
{ label: 'Monthly', value: 'FREQ=MONTHLY' },
|
||||
{ label: 'Custom (rrule)', value: 'custom' },
|
||||
] as const;
|
||||
|
||||
export function TaskDetailPanel({
|
||||
taskId,
|
||||
domainId,
|
||||
open,
|
||||
onOpenChange,
|
||||
onUpdate,
|
||||
}: TaskDetailPanelProps) {
|
||||
const [task, setTask] = useState<TaskDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [status, setStatus] = useState<'todo' | 'in_progress' | 'done' | 'cancelled'>('todo');
|
||||
const [priority, setPriority] = useState<'low' | 'medium' | 'high' | 'urgent'>('medium');
|
||||
const [dueDate, setDueDate] = useState('');
|
||||
const [estimatedMinutes, setEstimatedMinutes] = useState('');
|
||||
const [recurrenceType, setRecurrenceType] = useState('');
|
||||
const [customRrule, setCustomRrule] = useState('');
|
||||
const [customFieldValues, setCustomFieldValues] = useState<Record<string, unknown>>({});
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [timerRunning, setTimerRunning] = useState(false);
|
||||
const [timerStartedAt, setTimerStartedAt] = useState<Date | null>(null);
|
||||
const [elapsedSeconds, setElapsedSeconds] = useState(0);
|
||||
|
||||
// Fetch task details when panel opens
|
||||
useEffect(() => {
|
||||
if (!open || !taskId || !domainId) return;
|
||||
setLoading(true);
|
||||
fetch(`/api/domains/${domainId}/tasks/${taskId}`)
|
||||
.then((res) => {
|
||||
if (!res.ok) throw new Error('Unable to load task');
|
||||
return res.json();
|
||||
})
|
||||
.then((data: TaskDetail) => {
|
||||
setTask(data);
|
||||
setTitle(data.title);
|
||||
setDescription(data.description || '');
|
||||
setStatus(data.status);
|
||||
setPriority(data.priority);
|
||||
setDueDate(data.dueDate ? data.dueDate.split('T')[0] : '');
|
||||
setEstimatedMinutes(data.estimatedMinutes?.toString() || '');
|
||||
|
||||
// Recurrence
|
||||
if (data.recurrenceRule) {
|
||||
const isPreset = RECURRENCE_OPTIONS.some(
|
||||
(o) => o.value !== 'custom' && o.value !== '' && o.value === data.recurrenceRule
|
||||
);
|
||||
if (isPreset) {
|
||||
setRecurrenceType(data.recurrenceRule);
|
||||
setCustomRrule('');
|
||||
} else {
|
||||
setRecurrenceType('custom');
|
||||
setCustomRrule(data.recurrenceRule);
|
||||
}
|
||||
} else {
|
||||
setRecurrenceType('');
|
||||
setCustomRrule('');
|
||||
}
|
||||
|
||||
// Custom fields
|
||||
setCustomFieldValues(data.customFields || {});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed to load task:', err);
|
||||
toast.error('Unable to load task details');
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
}, [open, taskId, domainId]);
|
||||
|
||||
function getRecurrenceRule(): string | null {
|
||||
if (!recurrenceType) return null;
|
||||
if (recurrenceType === 'custom') return customRrule || null;
|
||||
return recurrenceType;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!task || !domainId) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const body: Record<string, unknown> = {
|
||||
title,
|
||||
status,
|
||||
priority,
|
||||
};
|
||||
if (description !== (task.description || '')) body.description = description || null;
|
||||
if (dueDate !== (task.dueDate ? task.dueDate.split('T')[0] : '')) {
|
||||
body.dueDate = dueDate ? new Date(dueDate).toISOString() : null;
|
||||
}
|
||||
if (estimatedMinutes !== (task.estimatedMinutes?.toString() || '')) {
|
||||
body.estimatedMinutes = estimatedMinutes ? parseInt(estimatedMinutes, 10) : null;
|
||||
}
|
||||
const recurrenceRule = getRecurrenceRule();
|
||||
if (recurrenceRule !== (task.recurrenceRule || null)) {
|
||||
body.recurrenceRule = recurrenceRule;
|
||||
}
|
||||
|
||||
// Include custom fields if changed
|
||||
const currentCustomFields = task.customFields || {};
|
||||
if (JSON.stringify(customFieldValues) !== JSON.stringify(currentCustomFields)) {
|
||||
body.customFields = customFieldValues;
|
||||
}
|
||||
|
||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save task');
|
||||
onUpdate();
|
||||
onOpenChange(false);
|
||||
toast.success('Task saved');
|
||||
} catch (error) {
|
||||
console.error('Failed to update task:', error);
|
||||
toast.error('Unable to save task');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!task || !domainId) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to delete task');
|
||||
onUpdate();
|
||||
setDeleteOpen(false);
|
||||
onOpenChange(false);
|
||||
toast.success('Task deleted');
|
||||
} catch (error) {
|
||||
console.error('Failed to delete task:', error);
|
||||
toast.error('Unable to delete task');
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Timer tick effect
|
||||
useEffect(() => {
|
||||
if (!timerRunning || !timerStartedAt) {
|
||||
setElapsedSeconds(0);
|
||||
return;
|
||||
}
|
||||
const interval = setInterval(() => {
|
||||
setElapsedSeconds(Math.floor((Date.now() - timerStartedAt.getTime()) / 1000));
|
||||
}, 1000);
|
||||
return () => clearInterval(interval);
|
||||
}, [timerRunning, timerStartedAt]);
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
const s = seconds % 60;
|
||||
if (h > 0) return `${h}h ${m}m`;
|
||||
if (m > 0) return `${m}m ${s}s`;
|
||||
return `${s}s`;
|
||||
}
|
||||
|
||||
async function handleStartTimer() {
|
||||
setTimerRunning(true);
|
||||
setTimerStartedAt(new Date());
|
||||
}
|
||||
|
||||
async function handleStopTimer() {
|
||||
if (!timerStartedAt || !task) return;
|
||||
const deltaMinutes = Math.round((Date.now() - timerStartedAt.getTime()) / 60000);
|
||||
if (deltaMinutes < 1) {
|
||||
setTimerRunning(false);
|
||||
setTimerStartedAt(null);
|
||||
return;
|
||||
}
|
||||
const newTracked = (task.trackedMinutes || 0) + deltaMinutes;
|
||||
try {
|
||||
const response = await fetch(`/api/domains/${domainId}/tasks/${task.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ trackedMinutes: newTracked }),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save tracked time');
|
||||
setTask({ ...task, trackedMinutes: newTracked });
|
||||
onUpdate();
|
||||
toast.success(`Tracked ${deltaMinutes}m`);
|
||||
} catch (error) {
|
||||
console.error('Failed to save tracked time:', error);
|
||||
toast.error('Unable to save tracked time');
|
||||
} finally {
|
||||
setTimerRunning(false);
|
||||
setTimerStartedAt(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="w-[500px] sm:w-[600px] overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>Task Details</SheetTitle>
|
||||
</SheetHeader>
|
||||
|
||||
{loading ? (
|
||||
<div className="mt-12 flex justify-center">
|
||||
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : !task ? (
|
||||
<div className="mt-12 text-center text-muted-foreground">
|
||||
<p>Task not found</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-6 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title">Title</Label>
|
||||
<Input
|
||||
id="title"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Task title"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Add a description..."
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-status">Status</Label>
|
||||
<Select
|
||||
value={status}
|
||||
onValueChange={(v) => setStatus(v as any)}
|
||||
>
|
||||
<SelectTrigger id="task-status">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="todo">To Do</SelectItem>
|
||||
<SelectItem value="in_progress">In Progress</SelectItem>
|
||||
<SelectItem value="done">Done</SelectItem>
|
||||
<SelectItem value="cancelled">Cancelled</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-priority">Priority</Label>
|
||||
<Select
|
||||
value={priority}
|
||||
onValueChange={(v) => setPriority(v as any)}
|
||||
>
|
||||
<SelectTrigger id="task-priority">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="low">Low</SelectItem>
|
||||
<SelectItem value="medium">Medium</SelectItem>
|
||||
<SelectItem value="high">High</SelectItem>
|
||||
<SelectItem value="urgent">Urgent</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-due-date">Due Date</Label>
|
||||
<Input
|
||||
id="task-due-date"
|
||||
type="date"
|
||||
value={dueDate}
|
||||
onChange={(e) => setDueDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-estimate">Est. Minutes</Label>
|
||||
<Input
|
||||
id="task-estimate"
|
||||
type="number"
|
||||
min={1}
|
||||
value={estimatedMinutes}
|
||||
onChange={(e) => setEstimatedMinutes(e.target.value)}
|
||||
placeholder="e.g. 30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recurrence */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="task-recurrence">Recurrence</Label>
|
||||
<Select value={recurrenceType} onValueChange={setRecurrenceType}>
|
||||
<SelectTrigger id="task-recurrence">
|
||||
<SelectValue placeholder="None" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{RECURRENCE_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{recurrenceType === 'custom' && (
|
||||
<Input
|
||||
id="task-custom-rrule"
|
||||
value={customRrule}
|
||||
onChange={(e) => setCustomRrule(e.target.value)}
|
||||
placeholder="e.g. FREQ=WEEKLY;BYDAY=MO,WE,FR"
|
||||
className="mt-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Custom fields */}
|
||||
{(() => {
|
||||
const schemas = (() => {
|
||||
try {
|
||||
if (typeof window === 'undefined') return [];
|
||||
const raw = localStorage.getItem('pe_custom_field_schemas');
|
||||
return raw ? JSON.parse(raw) : [];
|
||||
} catch { return []; }
|
||||
})();
|
||||
const taskSchemas = schemas.filter((s: any) => s.scope === 'task');
|
||||
if (taskSchemas.length === 0) return null;
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<Label>Custom fields</Label>
|
||||
{taskSchemas.map((field: any) => (
|
||||
<div key={field.id} className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">{field.name}</Label>
|
||||
{field.type === 'checkbox' ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!customFieldValues[field.name]}
|
||||
onChange={(e) =>
|
||||
setCustomFieldValues((prev) => ({
|
||||
...prev,
|
||||
[field.name]: e.target.checked,
|
||||
}))
|
||||
}
|
||||
className="h-4 w-4 rounded border-gray-300"
|
||||
/>
|
||||
<span className="text-sm">{field.name}</span>
|
||||
</div>
|
||||
) : field.type === 'select' ? (
|
||||
<Select
|
||||
value={(customFieldValues[field.name] as string) || ''}
|
||||
onValueChange={(v) =>
|
||||
setCustomFieldValues((prev) => ({ ...prev, [field.name]: v }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(field.options || []).map((opt: string) => (
|
||||
<SelectItem key={opt} value={opt}>
|
||||
{opt}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : field.type === 'number' ? (
|
||||
<Input
|
||||
type="number"
|
||||
value={(customFieldValues[field.name] as string) || ''}
|
||||
onChange={(e) =>
|
||||
setCustomFieldValues((prev) => ({
|
||||
...prev,
|
||||
[field.name]: e.target.value ? Number(e.target.value) : '',
|
||||
}))
|
||||
}
|
||||
placeholder={`Enter ${field.name}...`}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
value={(customFieldValues[field.name] as string) || ''}
|
||||
onChange={(e) =>
|
||||
setCustomFieldValues((prev) => ({ ...prev, [field.name]: e.target.value }))
|
||||
}
|
||||
placeholder={`Enter ${field.name}...`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* Time Tracking */}
|
||||
<div className="space-y-3">
|
||||
<Label>Time Tracking</Label>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
Tracked: {task.trackedMinutes || 0}m / {task.estimatedMinutes || 0}m
|
||||
</span>
|
||||
{task.estimatedMinutes && task.estimatedMinutes > 0 && (
|
||||
<span className="text-muted-foreground">
|
||||
{Math.min(100, Math.round(((task.trackedMinutes || 0) / task.estimatedMinutes) * 100))}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{task.estimatedMinutes && task.estimatedMinutes > 0 && (
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-all"
|
||||
style={{
|
||||
width: `${Math.min(100, Math.round(((task.trackedMinutes || 0) / task.estimatedMinutes) * 100))}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
{timerRunning ? (
|
||||
<>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={handleStopTimer}
|
||||
className="gap-1"
|
||||
>
|
||||
<Square className="h-4 w-4" />
|
||||
Stop timer
|
||||
</Button>
|
||||
<span className="text-sm font-mono text-primary">
|
||||
{formatDuration(elapsedSeconds)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleStartTimer}
|
||||
className="gap-1"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
Start timer
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Tags */}
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Tags</Label>
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{task.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag.id}
|
||||
variant="outline"
|
||||
style={tag.color ? { borderColor: tag.color, color: tag.color } : {}}
|
||||
>
|
||||
{tag.name}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dependencies */}
|
||||
{task.dependencies && task.dependencies.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Depends on</Label>
|
||||
<div className="space-y-1">
|
||||
{task.dependencies.map((dep) => (
|
||||
<div key={dep.id} className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span>{dep.title}</span>
|
||||
<Badge variant="outline" className="text-xs capitalize">{dep.status}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subtasks */}
|
||||
{task.subtasks && task.subtasks.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<Label>Subtasks ({task.subtasks.length})</Label>
|
||||
<div className="space-y-1">
|
||||
{task.subtasks.map((sub: any) => (
|
||||
<div key={sub.id} className="flex items-center gap-2 text-sm">
|
||||
<span className="text-muted-foreground">•</span>
|
||||
<span className={sub.status === 'done' ? 'line-through text-muted-foreground' : ''}>
|
||||
{sub.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Metadata */}
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
<p>Created: {new Date(task.createdAt).toLocaleString()}</p>
|
||||
<p>Updated: {new Date(task.updatedAt).toLocaleString()}</p>
|
||||
{task.completedAt && (
|
||||
<p>Completed: {new Date(task.completedAt).toLocaleString()}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => setDeleteOpen(true)}
|
||||
className="ml-auto"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete task?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This permanently deletes "{task?.title}".
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleDelete();
|
||||
}}
|
||||
disabled={deleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{deleting ? 'Deleting...' : 'Delete'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user