Index: frontend/index.html =================================================================== --- frontend/index.html (revision 42da64dc0d28f9380336816f6fb82c7572d0021d) +++ frontend/index.html (revision 447c39f7111f1415e8f44660911d00bb61568780) @@ -3,7 +3,7 @@ - + - frontend + Trekr Index: frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskFormModal.jsx =================================================================== --- frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskFormModal.jsx (revision 447c39f7111f1415e8f44660911d00bb61568780) +++ frontend/src/pages/Dashboard/pages/CustomCategory/components/TaskFormModal.jsx (revision 447c39f7111f1415e8f44660911d00bb61568780) @@ -0,0 +1,244 @@ +import React, { useEffect, useState } from "react"; +import { MdClose } from "react-icons/md"; + +export default function TaskFormModal({ + isOpen, + onClose, + onSubmit, + task = null, + isLoading = false, +}) { + const isEditing = !!task; + const [formData, setFormData] = useState({ + name: "", + description: "", + dueDate: "", + priority: "MEDIUM", + status: "NOT_STARTED", + }); + const [errors, setErrors] = useState({}); + + // Initialize form with task data when editing + useEffect(() => { + if (task) { + setFormData({ + name: task.name || "", + description: task.description || "", + dueDate: task.dueDate || "", + priority: task.priority || "MEDIUM", + status: task.status || "NOT_STARTED", + }); + } else { + setFormData({ + name: "", + description: "", + dueDate: "", + priority: "MEDIUM", + status: "NOT_STARTED", + }); + } + setErrors({}); + }, [task, isOpen]); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ ...prev, [name]: value })); + // Clear error for this field + if (errors[name]) { + setErrors((prev) => ({ ...prev, [name]: null })); + } + }; + + const validate = () => { + const newErrors = {}; + if (!formData.name.trim()) { + newErrors.name = "Task name is required"; + } + if (formData.name.length > 200) { + newErrors.name = "Task name must be 200 characters or less"; + } + if (formData.dueDate && new Date(formData.dueDate) < new Date()) { + const today = new Date().toISOString().split('T')[0]; + if (formData.dueDate < today) { + newErrors.dueDate = "Due date cannot be in the past"; + } + } + return newErrors; + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + const newErrors = validate(); + if (Object.keys(newErrors).length > 0) { + setErrors(newErrors); + return; + } + + const payload = { + name: formData.name.trim(), + description: formData.description.trim() || null, + dueDate: formData.dueDate || null, + priority: formData.priority, + }; + + // Only include status if editing + if (isEditing) { + payload.status = formData.status; + } + + try { + await onSubmit(payload); + onClose(); + } catch (error) { + console.error("Form submission error:", error); + } + }; + + if (!isOpen) return null; + + return ( +
+
+ {/* Header */} +
+

+ {isEditing ? "Edit Task" : "Create New Task"} +

+ +
+ + {/* Form */} +
+ {/* Name */} +
+ + + {errors.name && ( +

{errors.name}

+ )} +

+ {formData.name.length}/200 +

+
+ + {/* Description */} +
+ +