added editing functionality for description and topics

Precipicee · Precipicee · commit 02e5e79345d8 · 2026-01-06T21:22:00.000+08:00
diff --git a/client/src/components/task_item.tsx b/client/src/components/task_item.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
 
+import { TopicInput } from "@/components/topic_input";
+
 interface Time {
   id: number;
   day: number;
@@ -27,35 +29,71 @@ type ItemProps = {
   item: Item;
   onToggle?: (id: number) => void;
   onUpdate: (item: Item) => void;
+  availableTopics: Topic[];
 };
 
-export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
+type TopicSelection =
+  | { type: "existing"; id: number }
+  | { type: "new"; name: string; color_hex: number };
+
+export function TaskItem({
+  item,
+  onToggle,
+  onUpdate,
+  availableTopics,
+}: ItemProps) {
+  {
+    /* Editing Functionality */
+  }
   const [isEditing, setIsEditing] = useState(false);
   const [draftName, setDraftName] = useState(item.name);
+  const [draftDescription, setDraftDescription] = useState(item.description);
+  const [draftTopics, setDraftTopics] = useState<TopicSelection[]>([]);
   const [saving, setSaving] = useState(false);
 
   function startEdit() {
     setDraftName(item.name);
+    setDraftDescription(item.description);
+    setDraftTopics(
+      item.topics.map((t) => ({
+        type: "existing",
+        id: t.id,
+      })),
+    );
     setIsEditing(true);
   }
 
   function cancelEdit() {
-    setIsEditing(false);
     setDraftName(item.name);
+    setDraftDescription(item.description);
+    setDraftTopics(item.topics.map((t) => ({ type: "existing", id: t.id })));
+    setIsEditing(false);
   }
 
   async function saveEdit() {
     setSaving(true);
     try {
+      const existing_topic_ids = draftTopics
+        .filter((t) => t.type === "existing")
+        .map((t) => t.id);
+
+      const new_topics = draftTopics
+        .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/${item.id}/`,
         {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             name: draftName,
-            description: item.description,
+            description: draftDescription,
             completed: item.completed,
+            existing_topic_ids: existing_topic_ids,
+            new_topics: new_topics,
           }),
         },
       );
@@ -72,9 +110,13 @@ export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
     }
   }
 
+  {
+    /* Item Display */
+  }
   return (
-    <label className="m-1 flex w-96 flex-col rounded-md border-2 border-zinc-200 bg-zinc-700 p-2">
+    <div className="m-1 flex w-96 flex-col rounded-md border-2 border-zinc-200 bg-zinc-700 p-2">
       <div className="flex items-center justify-between">
+        {/* Task Name and Completion */}
         <div className="flex items-center space-x-2">
           <input
             type="checkbox"
@@ -98,6 +140,8 @@ export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
             </span>
           )}
         </div>
+
+        {/* Task Times */}
         <div className="flex flex-col items-end text-sm text-zinc-300">
           {item.times?.length > 0
             ? item.times.map((t) => (
@@ -110,26 +154,45 @@ export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
         </div>
       </div>
 
+      {/* Task Topics */}
       <div className="flex flex-wrap gap-1 text-sm text-zinc-300">
-        {item.topics?.length > 0
-          ? item.topics.map((topic) => (
+        {isEditing ? (
+          <TopicInput
+            availableTopics={availableTopics}
+            topics={draftTopics}
+            setTopics={setDraftTopics}
+          />
+        ) : item.topics.length > 0 ? (
+          item.topics.map((topic) => (
+            <span
+              key={topic.id}
+              className="flex items-center gap-1 rounded-lg border-2 border-zinc-500 px-2 py-0.5 text-zinc-100"
+            >
               <span
-                key={topic.id}
-                className="flex items-center gap-1 rounded-lg border-2 border-zinc-500 px-2 py-0.5 text-zinc-100"
-              >
-                <span
-                  className="h-2 w-2 rounded-full"
-                  style={{
-                    backgroundColor: `#${topic.color_hex.toString(16).padStart(6, "0")}`,
-                  }}
-                />
-                {topic.name}
-              </span>
-            ))
-          : "No topics"}
+                className="h-2 w-2 rounded-full"
+                style={{
+                  backgroundColor: `#${topic.color_hex
+                    .toString(16)
+                    .padStart(6, "0")}`,
+                }}
+              />
+              {topic.name}
+            </span>
+          ))
+        ) : (
+          "No topics"
+        )}
       </div>
+
+      {/* Task Description */}
       <div>
-        {item.description ? (
+        {isEditing ? (
+          <textarea
+            value={draftDescription}
+            onChange={(e) => setDraftDescription(e.target.value)}
+            className="mt-2 w-full rounded border-2 bg-zinc-600 p-1 text-zinc-200"
+          />
+        ) : item.description ? (
           <span className="mt-2 block text-zinc-300">{item.description}</span>
         ) : (
           <span className="mt-2 block italic text-zinc-500">
@@ -149,7 +212,7 @@ export function TaskItem({ item, onToggle, onUpdate }: ItemProps) {
           <button onClick={startEdit}>Edit</button>
         )}
       </div>
-    </label>
+    </div>
   );
 }
 
diff --git a/client/src/components/task_list.tsx b/client/src/components/task_list.tsx
@@ -27,9 +27,15 @@ type ListProps = {
   items: Item[];
   onToggleTask?: (id: number) => void;
   onUpdate: (item: Item) => void;
+  availableTopics: Topic[];
 };
 
-export function TaskList({ items, onToggleTask, onUpdate }: ListProps) {
+export function TaskList({
+  items,
+  onToggleTask,
+  onUpdate,
+  availableTopics,
+}: ListProps) {
   if (items.length === 0) {
     return (
       <div>
@@ -42,7 +48,12 @@ export function TaskList({ items, onToggleTask, onUpdate }: ListProps) {
       <ul className="space-y-2">
         {items.map((item) => (
           <li key={item.id}>
-            <TaskItem item={item} onToggle={onToggleTask} onUpdate={onUpdate} />
+            <TaskItem
+              item={item}
+              onToggle={onToggleTask}
+              onUpdate={onUpdate}
+              availableTopics={availableTopics}
+            />
           </li>
         ))}
       </ul>
diff --git a/client/src/pages/[id]/tasks.tsx b/client/src/pages/[id]/tasks.tsx
@@ -32,6 +32,7 @@ export default function TasksPage() {
   const { id } = router.query;
   const [items, setItems] = useState<Item[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const [availableTopics, setAvailableTopics] = useState<Topic[]>([]);
 
   useEffect(() => {
     if (!id) return;
@@ -53,6 +54,13 @@ export default function TasksPage() {
     fetchTasks();
   }, [id]);
 
+  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));
+  }, []);
+
   if (loading) {
     return <p>Loading tasks...</p>;
   }
@@ -103,6 +111,7 @@ export default function TasksPage() {
           items={items}
           onToggleTask={handleToggleTask}
           onUpdate={handleTaskUpdated}
+          availableTopics={availableTopics}
         />
       </div>
       <div className="m-4 h-fit w-fit rounded-xl bg-zinc-700 p-4 text-center">
diff --git a/server/task_planner/serializers.py b/server/task_planner/serializers.py
@@ -68,6 +68,36 @@ def create(self, validated_data):
         task.save()
         task.refresh_from_db()
         return Task.objects.get(id=task.id)
+    
+    @transaction.atomic
+    def update(self, instance, validated_data):
+        existing_topics = validated_data.pop("existing_topic_ids", [])
+        new_topics_data = validated_data.pop("new_topics", [])
+        #times_data = validated_data.pop("times", [])
+
+        for attr, value in validated_data.items():
+            setattr(instance, attr, value)
+        instance.save()
+
+        if existing_topics or new_topics_data:
+            instance.topics.clear()
+            for topic in existing_topics:
+                instance.topics.add(topic)
+            for topic_data in new_topics_data:
+                topic = Topic.objects.create(**topic_data, user_id=instance.user_id)
+                instance.topics.add(topic)
+        """
+        if times_data is not None:
+            instance.times.all().delete()
+            Time.objects.bulk_create([
+                Time(task=instance, **time_data)
+                for time_data in times_data
+            ])
+        """
+
+        instance.save()
+        instance.refresh_from_db()
+        return Task.objects.get(id=instance.id)
 
 class TaskCompleteSerializer(serializers.ModelSerializer):
     class Meta:
