added time editing capabilities

Author: Precipicee

client/src/components/task_item.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { TimeInput } from "@/components/time_input";
 import { TopicInput } from "@/components/topic_input";
 
 interface Time {
@@ -49,6 +50,7 @@ export function TaskItem({
   const [draftName, setDraftName] = useState(item.name);
   const [draftDescription, setDraftDescription] = useState(item.description);
   const [draftTopics, setDraftTopics] = useState<TopicSelection[]>([]);
+  const [draftTimes, setDraftTimes] = useState<Time[]>([]);
   const [saving, setSaving] = useState(false);
 
   function startEdit() {
@@ -60,13 +62,15 @@ export function TaskItem({
         id: t.id,
       })),
     );
+    setDraftTimes(item.times.map((t) => ({ ...t })));
     setIsEditing(true);
   }
 
   function cancelEdit() {
     setDraftName(item.name);
     setDraftDescription(item.description);
     setDraftTopics(item.topics.map((t) => ({ type: "existing", id: t.id })));
+    setDraftTimes(item.times.map((t) => ({ ...t })));
     setIsEditing(false);
   }
 
@@ -83,6 +87,7 @@ export function TaskItem({
           name: t.name,
           color_hex: t.color_hex,
         }));
+
       const response = await fetch(
         `http://localhost:8000/api/planner/tasks/${item.id}/`,
         {
@@ -94,6 +99,7 @@ export function TaskItem({
             completed: item.completed,
             existing_topic_ids: existing_topic_ids,
             new_topics: new_topics,
+            times: draftTimes,
           }),
         },
       );
@@ -143,14 +149,18 @@ export function TaskItem({
 
         {/* Task Times */}
         <div className="flex flex-col items-end text-sm text-zinc-300">
-          {item.times?.length > 0
-            ? item.times.map((t) => (
-                <span key={t.id}>
-                  {formatDay(t.day)} {t.start_time.slice(0, 5)} -{" "}
-                  {t.end_time.slice(0, 5)}
-                </span>
-              ))
-            : "No time set"}
+          {isEditing ? (
+            <TimeInput times={draftTimes} setTimes={setDraftTimes} />
+          ) : item.times?.length > 0 ? (
+            item.times.map((t) => (
+              <span key={t.id}>
+                {formatDay(t.day)} {t.start_time.slice(0, 5)} -{" "}
+                {t.end_time.slice(0, 5)}
+              </span>
+            ))
+          ) : (
+            "No time set"
+          )}
         </div>
       </div>
 

server/task_planner/serializers.py

@@ -73,7 +73,7 @@ def create(self, validated_data):
     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", [])
+        times_data = validated_data.pop("times", [])
 
         for attr, value in validated_data.items():
             setattr(instance, attr, value)
@@ -86,14 +86,14 @@ def update(self, instance, validated_data):
             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()