Entity export and stuff

src/components/view/TaskView.tsx

@@ -6,6 +6,22 @@ import BoardView from "./board/BoardView";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { TableView } from "./table/TableView";
 import EditView from "./edit/EditView";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { FileDown } from "lucide-react";
+import {
+  downloadFile,
+  exportTodoAsJson,
+  exportTodoAsCsv,
+  exportTodoAsMarkdown,
+} from "@/lib/export";
+import { useEffect, useState } from "react";
 
 export type TaskViewProps = {
   tags: Record<TagId, Tag>;
@@ -25,6 +41,9 @@ export type TaskViewProps = {
 
   /** Create a new task with a status */
   createTask: (statusId: string) => void;
+
+  /** Entity name for export */
+  entityName?: string;
 };
 
 export default function TaskView({
@@ -35,9 +54,66 @@ export default function TaskView({
   setTags,
   setStatuses,
   createTask,
+  entityName = "Tasks",
 }: TaskViewProps) {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const handleExport = (format: "json" | "csv" | "markdown") => {
+    const todoEntity = {
+      id: "",
+      type: "todo" as const,
+      name: entityName,
+      config: { statuses },
+      tags,
+      tasks,
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    };
+
+    let content = "";
+    let filename = `${entityName.replace(/\s+/g, "_")}_${Date.now()}`;
+
+    switch (format) {
+      case "json":
+        content = exportTodoAsJson(todoEntity);
+        filename += ".json";
+        break;
+      case "csv":
+        content = exportTodoAsCsv(todoEntity);
+        filename += ".csv";
+        break;
+      case "markdown":
+        content = exportTodoAsMarkdown(todoEntity);
+        filename += ".md";
+        break;
+    }
+
+    downloadFile(content, filename, "text/plain");
+  };
   return (
-    <div className="px-6 pt-4">
+    <div className="px-6 pt-4 flex flex-col gap-4">
+      <div className="flex items-center justify-end">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm" disabled={isExporting}>
+              <FileDown className="h-4 w-4 mr-2" />
+              Export
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => handleExport("csv")}>
+              Export as CSV
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => handleExport("markdown")}>
+              Export as Markdown
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => handleExport("json")}>
+              Export as JSON
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
       <Tabs defaultValue="board" className="w-full">
         <TabsList className="mb-4">
           <TabsTrigger value="board">Board</TabsTrigger>