completed task addition

Precipicee · Precipicee · commit 076bd0c59ff0 · 2026-01-02T22:44:59.000+08:00
diff --git a/client/src/components/task_form.tsx b/client/src/components/task_form.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect,useState } from "react";
 
 import { TimeInput } from "@/components/time_input";
+import { TopicInput } from "@/components/topic_input";
 
 interface Time {
   id: number;
@@ -16,6 +17,10 @@ interface Topic {
   color_hex: number;
 }
 
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
 interface Item {
   id: number;
   name: string;
@@ -34,12 +39,26 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
   const [taskName, setTaskName] = useState("");
   const [description, setDescription] = useState("");
   const [times, setTimes] = useState<Time[]>([]);
-  //const [existingTopicIds, setExistingTopicIds] = useState<number[]>([]);
-  //const [newTopics, setNewTopics] = useState<{ name: string; color_hex: string }[]>([]);
+  const [topics, setTopics] = useState<TopicSelection[]>([]);
+  const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
+
+  useEffect(() => {
+    fetch("http://localhost:8000/api/planner/topic/")
+      .then((res) => res.json())
+      .then((data) => setAvailableTopics(data))
+      .catch((err) => console.error("Failed to load topics:", err));
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
+      const existing_topic_ids = topics
+        .filter((t) => t.type === "existing")
+        .map((t) => t.id);
+
+      const new_topics = topics
+        .filter((t) => t.type === "new")
+        .map((t) => ({ name: t.name, color_hex: t.color_hex }));
       const response = await fetch("http://localhost:8000/api/planner/tasks/", {
         method: "POST",
         headers: {
@@ -51,8 +70,8 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
           completed: false,
           user_id: userId,
           times: times,
-          //existing_topic_ids: existingTopicIds,
-          //new_topics: newTopics,
+          existing_topic_ids: existing_topic_ids,
+          new_topics: new_topics,
         }),
       });
 
@@ -64,6 +83,8 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
       onTaskCreated(newTask);
       setTaskName("");
       setDescription("");
+      setTimes([]);
+      setTopics([]);
     } catch (error) {
       console.error("Error creating task:", error);
     }
@@ -89,6 +110,12 @@ export function TaskForm({ userId, onTaskCreated }: TaskFormProps) {
         className="h-32 w-full resize-none rounded border-2 bg-zinc-700 p-2 text-zinc-200"
       />
       <TimeInput times={times} setTimes={setTimes} />
+      <TopicInput
+        availableTopics={availableTopics}
+        topics={topics}
+        setTopics={setTopics}
+      />
+
       <button
         type="submit"
         className="rounded border-2 border-zinc-200 bg-blue-600 px-4 py-2 text-zinc-200 hover:bg-blue-700"
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
@@ -46,7 +46,7 @@ export function TaskItem({ item, onToggle }: ItemProps) {
           </span>
         </div>
         <div className="flex flex-col items-end text-sm text-zinc-300">
-          {item.times.length > 0
+          {item.times?.length > 0
             ? item.times.map((t) => (
                 <span key={t.id}>
                   {formatDay(t.day)} {t.start_time.slice(0, 5)} -{" "}
@@ -58,7 +58,7 @@ export function TaskItem({ item, onToggle }: ItemProps) {
       </div>
 
       <div className="flex flex-wrap gap-1 text-sm text-zinc-300">
-        {item.topics.length > 0
+        {item.topics?.length > 0
           ? item.topics.map((topic) => (
               <span
                 key={topic.id}
diff --git a/client/src/components/topic_input.tsx b/client/src/components/topic_input.tsx
@@ -21,6 +21,7 @@ export function TopicInput({
 }: TopicInputProps) {
   return (
     <div className="mb-4">
+      {/* Existing Topic Selection */}
       <select
         className="w-full rounded border-2 bg-zinc-700 p-2 text-zinc-200"
         onChange={(e) => {
@@ -39,6 +40,71 @@ export function TopicInput({
           </option>
         ))}
       </select>
+
+      {/* Selected Topics Display */}
+      {topics.map((topic, index) => {
+        if (topic.type === "existing") {
+          const topicData = availableTopics.find((t) => t.id === topic.id);
+          if (!topicData) return null;
+          return (
+            <div
+              key={index}
+              className="mt-2 flex items-center justify-between rounded bg-zinc-600 p-2 text-zinc-200"
+            >
+              <span>{topicData.name}</span>
+              <button
+                type="button"
+                onClick={() => setTopics(topics.filter((_, i) => i !== index))}
+                className="text-red-500 hover:text-red-700"
+              >
+                Remove
+              </button>
+            </div>
+          );
+        }
+
+        return (
+          <div key={index} className="mt-2 flex items-center gap-2">
+            <input
+              type="text"
+              placeholder="New Topic Name"
+              value={topic.name}
+              onChange={(e) => {
+                const newTopics = [...topics];
+                newTopics[index] = { ...topic, name: e.target.value };
+                setTopics(newTopics);
+              }}
+            />
+            <input
+              type="color"
+              value={`#${topic.color_hex.toString(16).padStart(6, "0")}`}
+              onChange={(e) => {
+                const hex = parseInt(e.target.value.replace("#", ""), 16);
+                const copy = [...topics];
+                copy[index] = { ...topic, color_hex: hex };
+                setTopics(copy);
+              }}
+            />
+            <button
+              type="button"
+              onClick={() => setTopics(topics.filter((_, i) => i !== index))}
+              className="text-red-500 hover:text-red-700"
+            >
+              Remove
+            </button>
+          </div>
+        );
+      })}
+
+      <button
+        type="button"
+        className="mt-3 rounded bg-green-700 px-2 py-1 text-zinc-200"
+        onClick={() =>
+          setTopics([...topics, { type: "new", name: "", color_hex: 0xffffff }])
+        }
+      >
+        + Create New Topic
+      </button>
     </div>
   );
 }
diff --git a/client/src/pages/[id]/tasks.tsx b/client/src/pages/[id]/tasks.tsx
@@ -61,12 +61,34 @@ export default function TasksPage() {
     setItems((prev) => [...prev, task]);
   };
 
-  function handleToggleTask(id: number) {
-    setItems((prevItems) =>
-      prevItems.map((item) =>
-        item.id === id ? { ...item, completed: !item.completed } : item,
-      ),
-    );
+  async function handleToggleTask(id: number) {
+    const task = items.find((t) => t.id === id);
+    if (!task) return;
+
+    try {
+      const response = await fetch(
+        `http://localhost:8000/api/planner/tasks/${id}/`,
+        {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ completed: !task.completed }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to update task");
+      }
+
+      const updatedTask = await response.json();
+
+      setItems((prevItems) =>
+        prevItems.map((item) => (item.id === id ? updatedTask : item)),
+      );
+    } catch (error) {
+      console.error("Error updating task:", error);
+    }
   }
 
   return (
diff --git a/server/task_planner/serializers.py b/server/task_planner/serializers.py
@@ -46,26 +46,25 @@ class Meta:
 
     @transaction.atomic
     def create(self, validated_data):
+        user_id = validated_data.pop("user_id", None)
         existing_topics = validated_data.pop("existing_topic_ids", [])
         new_topics_data = validated_data.pop("new_topics", [])
         times_data = validated_data.pop("times", [])
 
-        task = Task.objects.create(**validated_data)
-        user = task.user
-
-        if not user:
-            raise serializers.ValidationError("Task user is required to create topics.")
+        task = Task.objects.create(**validated_data, user_id=user_id)
 
         for topic in existing_topics:
             task.topics.add(topic)
 
         for topic_data in new_topics_data:
-            topic = Topic.objects.create(**topic_data, user=task.user)
+            topic = Topic.objects.create(**topic_data, user_id=user_id)
             task.topics.add(topic)
 
         Time.objects.bulk_create([
             Time(task=task, **time_data)
             for time_data in times_data
         ])
 
-        return task
+        task.save()
+        task.refresh_from_db()
+        return Task.objects.get(id=task.id)
diff --git a/server/task_planner/urls.py b/server/task_planner/urls.py
@@ -7,5 +7,5 @@
     path("topic/", views.TopicList.as_view(), name="topic-list"),
     path("time/", views.TimeList.as_view(), name="time-list"),
     path("tasks/", views.TaskViewSet.as_view({'get': 'list', 'post': 'create'}), name="task-viewset"),
-    path("tasks/<int:pk>/", views.TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'delete': 'destroy'}), name="task-detail"),
+    path("tasks/<int:pk>/", views.TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'patch': 'partial_update', 'delete': 'destroy'}), name="task-detail"),
 ]
diff --git a/server/task_planner/views.py b/server/task_planner/views.py
@@ -5,6 +5,7 @@
 from rest_framework.response import Response
 from rest_framework.views import APIView
 from rest_framework.viewsets import ModelViewSet
+from rest_framework import status
 #from rest_framework.permissions import IsAuthenticated
 
 from .models import Task, Topic, Time
@@ -54,4 +55,21 @@ def perform_create(self, serializer):
         if self.request.user and self.request.user.is_authenticated:
             serializer.save(user=self.request.user)
             return
-        raise ValidationError({"user_id": "Provide user_id or authenticate."})
+        raise ValidationError({"user_id": "Provide user_id or authenticate."})
+    
+    def create(self, request, *args, **kwargs):
+        write_serializer = TaskWriteSerializer(data=request.data)
+        write_serializer.is_valid(raise_exception=True)
+
+        # 👇 THIS is what perform_create used to do
+        user_id = request.data.get("user_id")
+        if user_id:
+            task = write_serializer.save(user_id=user_id)
+        elif request.user and request.user.is_authenticated:
+            task = write_serializer.save(user=request.user)
+        else:
+            raise ValidationError({"user_id": "Provide user_id or authenticate."})
+
+        # Return READ shape
+        read_serializer = TaskReadSerializer(task)
+        return Response(read_serializer.data, status=status.HTTP_201_CREATED)

Original file line number	Diff line number	Diff line change
`@@ -7,5 +7,5 @@`
`7`	`7`	`path("topic/", views.TopicList.as_view(), name="topic-list"),`
`8`	`8`	`path("time/", views.TimeList.as_view(), name="time-list"),`
`9`	`9`	`path("tasks/", views.TaskViewSet.as_view({'get': 'list', 'post': 'create'}), name="task-viewset"),`
`10`		`- path("tasks/<int:pk>/", views.TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'delete': 'destroy'}), name="task-detail"),`
	`10`	`+ path("tasks/<int:pk>/", views.TaskViewSet.as_view({'get': 'retrieve', 'put': 'update', 'patch': 'partial_update', 'delete': 'destroy'}), name="task-detail"),`
`11`	`11`	`]`