@moontra/moonui-pro 2.0.22 → 2.1.0

package/src/components/calendar/event-dialog.tsx

@@ -0,0 +1,372 @@
+"use client"
+
+import React, { useState, useEffect } from 'react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { Textarea } from '../ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '../ui/dialog'
+import { CalendarEvent } from './index'
+import { Calendar, Clock, MapPin, Palette, Type } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+interface EventDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  event?: CalendarEvent | null
+  selectedDate?: Date | null
+  onSave: (event: Omit<CalendarEvent, 'id'> & { id?: string }) => void
+  onDelete?: (eventId: string) => void
+  mode?: 'create' | 'edit'
+}
+
+const EVENT_TYPES = [
+  { value: 'meeting', label: 'Meeting', color: '#3b82f6' },
+  { value: 'task', label: 'Task', color: '#10b981' },
+  { value: 'reminder', label: 'Reminder', color: '#f59e0b' },
+  { value: 'event', label: 'Event', color: '#8b5cf6' },
+] as const
+
+const PRESET_COLORS = [
+  '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444',
+  '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1',
+  '#14b8a6', '#eab308', '#f43f5e', '#a855f7', '#22c55e',
+]
+
+export function EventDialog({
+  open,
+  onOpenChange,
+  event,
+  selectedDate,
+  onSave,
+  onDelete,
+  mode = 'create'
+}: EventDialogProps) {
+  const [formData, setFormData] = useState<{
+    title: string
+    description: string
+    date: string
+    startTime: string
+    endTime: string
+    location: string
+    type: 'meeting' | 'task' | 'reminder' | 'event'
+    color: string
+    attendees: string
+  }>({
+    title: '',
+    description: '',
+    date: '',
+    startTime: '',
+    endTime: '',
+    location: '',
+    type: 'meeting',
+    color: '#3b82f6',
+    attendees: ''
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  // Initialize form data
+  useEffect(() => {
+    if (mode === 'edit' && event) {
+      setFormData({
+        title: event.title || '',
+        description: event.description || '',
+        date: event.date.toISOString().split('T')[0],
+        startTime: event.startTime || '',
+        endTime: event.endTime || '',
+        location: event.location || '',
+        type: event.type || 'meeting',
+        color: event.color || '#3b82f6',
+        attendees: event.attendees?.join(', ') || ''
+      })
+    } else if (mode === 'create') {
+      const dateStr = selectedDate ? selectedDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0]
+      setFormData({
+        title: '',
+        description: '',
+        date: dateStr,
+        startTime: '',
+        endTime: '',
+        location: '',
+        type: 'meeting',
+        color: '#3b82f6',
+        attendees: ''
+      })
+    }
+    setErrors({})
+  }, [event, selectedDate, mode, open])
+
+  const validateForm = () => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required'
+    }
+
+    if (!formData.date) {
+      newErrors.date = 'Date is required'
+    }
+
+    if (formData.startTime && formData.endTime) {
+      if (formData.startTime >= formData.endTime) {
+        newErrors.endTime = 'End time must be after start time'
+      }
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    if (!validateForm()) {
+      return
+    }
+
+    setIsSubmitting(true)
+
+    try {
+      const eventData = {
+        ...(mode === 'edit' && event ? { id: event.id } : {}),
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        date: new Date(formData.date + 'T00:00:00'),
+        startTime: formData.startTime || undefined,
+        endTime: formData.endTime || undefined,
+        location: formData.location.trim() || undefined,
+        type: formData.type,
+        color: formData.color,
+        attendees: formData.attendees 
+          ? formData.attendees.split(',').map(a => a.trim()).filter(Boolean)
+          : undefined
+      }
+
+      await onSave(eventData)
+      onOpenChange(false)
+    } catch (error) {
+      console.error('Error saving event:', error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleDelete = () => {
+    if (event && onDelete) {
+      onDelete(event.id)
+      onOpenChange(false)
+    }
+  }
+
+  const handleTypeChange = (type: string) => {
+    const selectedType = EVENT_TYPES.find(t => t.value === type)
+    setFormData(prev => ({
+      ...prev,
+      type: type as typeof formData.type,
+      color: selectedType?.color || prev.color
+    }))
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Calendar className="w-5 h-5" />
+            {mode === 'create' ? 'Create Event' : 'Edit Event'}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === 'create' 
+              ? 'Add a new event to your calendar.' 
+              : 'Edit the event details.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Title */}
+          <div className="space-y-2">
+            <Label htmlFor="title">Title *</Label>
+            <Input
+              id="title"
+              value={formData.title}
+              onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+              placeholder="Event title"
+              className={cn(errors.title && "border-red-500")}
+            />
+            {errors.title && <p className="text-sm text-red-500">{errors.title}</p>}
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+              placeholder="Event description (optional)"
+              rows={3}
+            />
+          </div>
+
+          {/* Date and Time */}
+          <div className="grid grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="date">Date *</Label>
+              <Input
+                id="date"
+                type="date"
+                value={formData.date}
+                onChange={(e) => setFormData(prev => ({ ...prev, date: e.target.value }))}
+                className={cn(errors.date && "border-red-500")}
+              />
+              {errors.date && <p className="text-sm text-red-500">{errors.date}</p>}
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="startTime">Start Time</Label>
+              <Input
+                id="startTime"
+                type="time"
+                value={formData.startTime}
+                onChange={(e) => setFormData(prev => ({ ...prev, startTime: e.target.value }))}
+                placeholder="09:00"
+              />
+            </div>
+            
+            <div className="space-y-2">
+              <Label htmlFor="endTime">End Time</Label>
+              <Input
+                id="endTime"
+                type="time"
+                value={formData.endTime}
+                onChange={(e) => setFormData(prev => ({ ...prev, endTime: e.target.value }))}
+                placeholder="10:00"
+                className={cn(errors.endTime && "border-red-500")}
+              />
+              {errors.endTime && <p className="text-sm text-red-500">{errors.endTime}</p>}
+            </div>
+          </div>
+
+          {/* Location */}
+          <div className="space-y-2">
+            <Label htmlFor="location" className="flex items-center gap-2">
+              <MapPin className="w-4 h-4" />
+              Location
+            </Label>
+            <Input
+              id="location"
+              value={formData.location}
+              onChange={(e) => setFormData(prev => ({ ...prev, location: e.target.value }))}
+              placeholder="Meeting room, address, or link"
+            />
+          </div>
+
+          {/* Type and Color */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label className="flex items-center gap-2">
+                <Type className="w-4 h-4" />
+                Type
+              </Label>
+              <Select value={formData.type} onValueChange={handleTypeChange}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {EVENT_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      <div className="flex items-center gap-2">
+                        <div 
+                          className="w-3 h-3 rounded-full" 
+                          style={{ backgroundColor: type.color }}
+                        />
+                        {type.label}
+                      </div>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="flex items-center gap-2">
+                <Palette className="w-4 h-4" />
+                Color
+              </Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="color"
+                  value={formData.color}
+                  onChange={(e) => setFormData(prev => ({ ...prev, color: e.target.value }))}
+                  className="w-8 h-8 rounded border cursor-pointer"
+                />
+                <div className="flex gap-1">
+                  {PRESET_COLORS.map((color) => (
+                    <button
+                      key={color}
+                      type="button"
+                      onClick={() => setFormData(prev => ({ ...prev, color }))}
+                      className={cn(
+                        "w-6 h-6 rounded border-2 hover:scale-110 transition-transform",
+                        formData.color === color ? "border-foreground" : "border-transparent"
+                      )}
+                      style={{ backgroundColor: color }}
+                    />
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Attendees */}
+          <div className="space-y-2">
+            <Label htmlFor="attendees">Attendees</Label>
+            <Input
+              id="attendees"
+              value={formData.attendees}
+              onChange={(e) => setFormData(prev => ({ ...prev, attendees: e.target.value }))}
+              placeholder="John Doe, Jane Smith (comma-separated)"
+            />
+          </div>
+
+          <DialogFooter className="gap-2">
+            {mode === 'edit' && onDelete && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={handleDelete}
+                className="mr-auto"
+              >
+                Delete Event
+              </Button>
+            )}
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting 
+                ? (mode === 'create' ? 'Creating...' : 'Saving...')
+                : (mode === 'create' ? 'Create Event' : 'Save Changes')
+              }
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}