richer editing
This commit is contained in:
140
src/app/page.tsx
140
src/app/page.tsx
@@ -5,20 +5,26 @@ import { nanoid } from 'nanoid'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { type CalendarEvent } from '@/lib/types'
|
||||
|
||||
import { addEvent, deleteEvent, getAllEvents, clearEvents, getDB } from '@/lib/db'
|
||||
import { parseICS, generateICS } from '@/lib/ical'
|
||||
import type { CalendarEvent } from '@/lib/types'
|
||||
|
||||
export default function HomePage() {
|
||||
const [events, setEvents] = useState<CalendarEvent[]>([])
|
||||
const [dialogOpen, setDialogOpen] = useState(false)
|
||||
const [title, setTitle] = useState('')
|
||||
const [start, setStart] = useState('')
|
||||
const [editingId, setEditingId] = useState<string | null>(null)
|
||||
const [isDragOver, setIsDragOver] = useState(false)
|
||||
|
||||
// Load events only in the browser
|
||||
// Form fields
|
||||
const [title, setTitle] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [location, setLocation] = useState('')
|
||||
const [url, setUrl] = useState('')
|
||||
const [start, setStart] = useState('')
|
||||
const [end, setEnd] = useState('')
|
||||
const [allDay, setAllDay] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const stored = await getAllEvents()
|
||||
@@ -28,24 +34,40 @@ export default function HomePage() {
|
||||
|
||||
const resetForm = () => {
|
||||
setTitle('')
|
||||
setDescription('')
|
||||
setLocation('')
|
||||
setUrl('')
|
||||
setStart('')
|
||||
setEnd('')
|
||||
setAllDay(false)
|
||||
setEditingId(null)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
const eventData: CalendarEvent = {
|
||||
id: editingId || nanoid(),
|
||||
title,
|
||||
description,
|
||||
location,
|
||||
url,
|
||||
start,
|
||||
end: end || undefined,
|
||||
allDay,
|
||||
createdAt: editingId
|
||||
? events.find(e => e.id === editingId)?.createdAt
|
||||
: new Date().toISOString(),
|
||||
lastModified: new Date().toISOString(),
|
||||
}
|
||||
|
||||
if (editingId) {
|
||||
// EDIT EXISTING
|
||||
const updatedEvent = { id: editingId, title, start }
|
||||
const db = await getDB()
|
||||
if (db) {
|
||||
await db.put('events', updatedEvent)
|
||||
setEvents(prev => prev.map(e => (e.id === editingId ? updatedEvent : e)))
|
||||
await db.put('events', eventData)
|
||||
setEvents(prev => prev.map(e => (e.id === editingId ? eventData : e)))
|
||||
}
|
||||
} else {
|
||||
// ADD NEW
|
||||
const newEvent = { id: nanoid(), title, start }
|
||||
await addEvent(newEvent)
|
||||
setEvents(prev => [...prev, newEvent])
|
||||
await addEvent(eventData)
|
||||
setEvents(prev => [...prev, eventData])
|
||||
}
|
||||
resetForm()
|
||||
setDialogOpen(false)
|
||||
@@ -61,11 +83,9 @@ export default function HomePage() {
|
||||
setEvents([])
|
||||
}
|
||||
|
||||
// --- IMPORT ---
|
||||
const handleImport = async (file: File) => {
|
||||
const text = await file.text()
|
||||
const parsed = parseICS(text)
|
||||
|
||||
for (const ev of parsed) {
|
||||
await addEvent(ev)
|
||||
}
|
||||
@@ -73,7 +93,6 @@ export default function HomePage() {
|
||||
setEvents(stored)
|
||||
}
|
||||
|
||||
// --- EXPORT ---
|
||||
const handleExport = () => {
|
||||
const icsData = generateICS(events)
|
||||
const blob = new Blob([icsData], { type: 'text/calendar' })
|
||||
@@ -87,17 +106,15 @@ export default function HomePage() {
|
||||
URL.revokeObjectURL(url)
|
||||
}
|
||||
|
||||
// --- DRAG & DROP ---
|
||||
// Drag & drop
|
||||
const handleDragOver = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setIsDragOver(true)
|
||||
}
|
||||
|
||||
const handleDragLeave = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setIsDragOver(false)
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
setIsDragOver(false)
|
||||
@@ -123,8 +140,12 @@ export default function HomePage() {
|
||||
<Button onClick={() => setDialogOpen(true)}>Add Event</Button>
|
||||
{events.length > 0 && (
|
||||
<>
|
||||
<Button variant="secondary" onClick={handleExport}>Export .ics</Button>
|
||||
<Button variant="destructive" onClick={handleClearAll}>Clear All</Button>
|
||||
<Button variant="secondary" onClick={handleExport}>
|
||||
Export .ics
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleClearAll}>
|
||||
Clear All
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<label className="cursor-pointer">
|
||||
@@ -153,15 +174,28 @@ export default function HomePage() {
|
||||
className="border p-2 rounded bg-white shadow-sm flex justify-between items-center"
|
||||
>
|
||||
<div>
|
||||
<strong>{ev.title}</strong> — {ev.start}
|
||||
<strong>{ev.title}</strong> — {ev.allDay
|
||||
? ev.start.split('T')[0]
|
||||
: new Date(ev.start).toLocaleString()}
|
||||
{ev.location && <div className="text-sm text-gray-500">{ev.location}</div>}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => {
|
||||
setTitle(ev.title)
|
||||
setStart(ev.start)
|
||||
setEditingId(ev.id)
|
||||
setDialogOpen(true)
|
||||
}}>Edit</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setTitle(ev.title)
|
||||
setDescription(ev.description || '')
|
||||
setLocation(ev.location || '')
|
||||
setUrl(ev.url || '')
|
||||
setStart(ev.start)
|
||||
setEnd(ev.end || '')
|
||||
setAllDay(ev.allDay || false)
|
||||
setEditingId(ev.id)
|
||||
setDialogOpen(true)
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => handleDelete(ev.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
@@ -170,16 +204,56 @@ export default function HomePage() {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={(val) => {
|
||||
if (!val) resetForm()
|
||||
setDialogOpen(val)
|
||||
}}>
|
||||
<DialogContent>
|
||||
<Dialog
|
||||
open={dialogOpen}
|
||||
onOpenChange={val => {
|
||||
if (!val) resetForm()
|
||||
setDialogOpen(val)
|
||||
}}
|
||||
>
|
||||
<DialogContent className="space-y-2">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingId ? 'Edit Event' : 'Add Event'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||
<Input type="date" value={start} onChange={e => setStart(e.target.value)} />
|
||||
<textarea
|
||||
className="border p-2 rounded w-full"
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
></textarea>
|
||||
<Input placeholder="Location" value={location} onChange={e => setLocation(e.target.value)} />
|
||||
<Input placeholder="URL" value={url} onChange={e => setUrl(e.target.value)} />
|
||||
<label className="flex items-center gap-2 mt-2">
|
||||
<input type="checkbox" checked={allDay} onChange={e => setAllDay(e.target.checked)} />
|
||||
All day event
|
||||
</label>
|
||||
|
||||
{!allDay && (
|
||||
<>
|
||||
<label>Start date & time</label>
|
||||
<Input type="datetime-local" value={start} onChange={e => setStart(e.target.value)} />
|
||||
<label>End date & time</label>
|
||||
<Input type="datetime-local" value={end} onChange={e => setEnd(e.target.value)} />
|
||||
</>
|
||||
)}
|
||||
{allDay && (
|
||||
<>
|
||||
<label>Start date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={start ? start.split('T')[0] : ''}
|
||||
onChange={e => setStart(e.target.value)}
|
||||
/>
|
||||
<label>End date</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={end ? end.split('T')[0] : ''}
|
||||
onChange={e => setEnd(e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={handleSave}>{editingId ? 'Update' : 'Save'}</Button>
|
||||
</DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user