Merge pull request #56 from nannany/copilot/add-move-task-button

feat: タスクを今日に移動するボタンを追加

Author: nannany

ui/src/components/task/SortableTask.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Button } from "@/components/ui/button";
-import { GripVertical, Trash2 } from "lucide-react";
+import { GripVertical, Trash2, CalendarCheck } from "lucide-react";
 import React from "react";
 import { TaskTimerButton } from "./TaskTimerButton";
 import { TaskTitleField } from "./TaskTitleField";
@@ -12,6 +12,7 @@ import { TaskCategoryField } from "./TaskCategoryField";
 import { TaskMetaInfo } from "./TaskMetaInfo";
 import { Task } from "@/types/task";
 import { useTaskContext } from "@/contexts/TaskContext";
+import { getTodayDateString } from "@/lib/utils";
 
 interface SortableTaskProps {
   task: Task;
@@ -96,6 +97,15 @@ const SortableTask = ({ task }: SortableTaskProps) => {
   );
   const categoryColor = selectedCategory?.color || "#6b7280";
 
+  // 今日の日付を取得（JST）
+  const todayFormatted = getTodayDateString();
+
+  // タスクが今日のものかどうか
+  const isToday = task.task_date === todayFormatted;
+
+  // タスクが完了しているかどうか
+  const isCompleted = !!task.end_time;
+
   return (
     <div
       ref={setNodeRef}
@@ -138,6 +148,18 @@ const SortableTask = ({ task }: SortableTaskProps) => {
       </div>
 
       <div className="flex gap-2 items-center">
+        {/* 今日に移動ボタン：完了していない＆今日以外のタスクに表示 */}
+        {!isCompleted && !isToday && (
+          <Button
+            size="icon"
+            variant="outline"
+            onClick={() => taskActions.handleMoveToToday(task.id)}
+            className="h-8 w-8 text-blue-500 hover:text-blue-700 hover:bg-blue-50"
+            title="今日に移動"
+          >
+            <CalendarCheck className="h-4 w-4" />
+          </Button>
+        )}
         <Button
           size="icon"
           variant="outline"

ui/src/contexts/TaskContext.tsx

@@ -31,6 +31,7 @@ export interface TaskActions {
     action: "start" | "stop" | "complete",
   ) => void;
   handleRepeatTask: (task: Task) => void;
+  handleMoveToToday: (taskId: string) => void;
 }
 
 // タスクコンテキストの型定義

ui/src/hooks/useTaskActions.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { createClient } from "@/lib/supabase/client";
 import { useToast } from "@/components/ui/use-toast";
 import { TaskAction } from "@/types/task";
+import { getTodayDateString } from "@/lib/utils";
 
 const supabase = createClient();
 
@@ -55,8 +56,38 @@ export const useTaskActions = (dispatch: React.Dispatch<TaskAction>) => {
     }
   };
 
+  // タスクを今日に移動
+  const handleMoveToToday = async (taskId: string) => {
+    const taskDate = getTodayDateString();
+
+    const { error } = await supabase
+      .from("tasks")
+      .update({ task_date: taskDate })
+      .eq("id", taskId);
+
+    if (error) {
+      toast({
+        title: "Error",
+        description: "Failed to move task to today",
+        variant: "destructive",
+      });
+      console.error("Error moving task to today:", error);
+    } else {
+      // ローカル状態から削除（画面から消す）
+      // 注：タスクは別の日付に移動しただけなので、データベースからは削除されていません。
+      // 現在表示している日付から消すため、DELETE_TASkアクションを使用します。
+      dispatch({ type: "DELETE_TASK", payload: taskId });
+
+      toast({
+        title: "Success",
+        description: "タスクを今日に移動しました",
+      });
+    }
+  };
+
   return {
     handleDelete,
     handleTaskTimer,
+    handleMoveToToday,
   };
 };

ui/src/lib/utils.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from "vitest";
-import { parseTimeInputToISOString } from "./utils";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { parseTimeInputToISOString, getTodayDateString } from "./utils";
 
 describe("parseTimeInputToISOString", () => {
   const baseDate = "2024-07-31"; // This will be treated as YYYY-MM-DD 00:00:00 in the local timezone by new Date()
@@ -121,3 +121,52 @@ describe("parseTimeInputToISOString", () => {
     );
   });
 });
+
+describe("getTodayDateString", () => {
+  beforeEach(() => {
+    // Mock Date.prototype.toLocaleString
+    vi.spyOn(Date.prototype, "toLocaleString").mockImplementation(
+      // @ts-expect-error - Mocking Date.prototype.toLocaleString with simplified signature
+      function (
+        this: Date,
+        locales?: string | string[],
+        options?: Intl.DateTimeFormatOptions,
+      ) {
+        if (locales === "ja-JP" && options?.timeZone === "Asia/Tokyo") {
+          // Mock a specific date for testing
+          return "2024/12/31 12:00:00";
+        }
+        return "";
+      },
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should return today's date in YYYY-MM-DD format", () => {
+    const result = getTodayDateString();
+    expect(result).toBe("2024-12-31");
+  });
+
+  it("should pad single-digit month and day with zero", () => {
+    // Mock a date with single-digit month and day
+    vi.spyOn(Date.prototype, "toLocaleString").mockImplementation(
+      // @ts-expect-error - Mocking Date.prototype.toLocaleString with simplified signature
+      function (
+        this: Date,
+        locales?: string | string[],
+        options?: Intl.DateTimeFormatOptions,
+      ) {
+        if (locales === "ja-JP" && options?.timeZone === "Asia/Tokyo") {
+          return "2024/1/5 12:00:00";
+        }
+        return "";
+      },
+    );
+
+    const result = getTodayDateString();
+    expect(result).toBe("2024-01-05");
+  });
+});

ui/src/lib/utils.ts

@@ -38,3 +38,14 @@ export const parseTimeInputToISOString = (
     return null;
   }
 };
+
+/**
+ * 現在の日付を YYYY-MM-DD 形式で取得（JST）
+ */
+export const getTodayDateString = (): string => {
+  const today = new Date()
+    .toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" })
+    .split(" ")[0];
+  const [year, month, day] = today.split("/");
+  return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+};