Upload 3 files

kanban_v2/index.html

@@ -16,12 +16,15 @@
           <p class="subtitle">&#x73FE;&#x5834;&#x306E;&#x8996;&#x70B9;&#x3067;&#x78E8;&#x304D;&#x4E0A;&#x3052;&#x305F;&#x30BF;&#x30B9;&#x30AF;&#x30D5;&#x30ED;&#x30FC;</p>
         </div>
       </div>
-      <div class="primary-controls">
-        <button class="btn primary" id="btn-new-task">&#x65B0;&#x898F;&#x30BF;&#x30B9;&#x30AF;</button>
-        <button class="btn ghost" id="btn-toggle-group">&#x89AA;&#x5B50;&#x30D3;&#x30E5;&#x30FC;</button>
-        <button class="btn ghost" id="btn-toggle-selection">&#x4E00;&#x62EC;&#x64CD;&#x4F5C;</button>
-      </div>
-    </header>
+      <div class="primary-controls">
+        <button class="btn primary" id="btn-new-task">&#x65B0;&#x898F;&#x30BF;&#x30B9;&#x30AF;</button>
+        <button class="btn ghost" id="btn-toggle-group">&#x89AA;&#x5B50;&#x30D3;&#x30E5;&#x30FC;</button>
+        <button class="btn ghost" id="btn-toggle-selection">&#x4E00;&#x62EC;&#x64CD;&#x4F5C;</button>
+        <button class="btn ghost" id="btn-export-tasks">&#x30A8;&#x30AF;&#x30B9;&#x30DD;&#x30FC;&#x30C8;</button>
+        <button class="btn ghost" id="btn-import-tasks">&#x30A4;&#x30F3;&#x30DD;&#x30FC;&#x30C8;</button>
+        <input type="file" id="input-import-tasks" accept="application/json" hidden>
+      </div>
+    </header>
 
     <section class="filters">
       <div class="search-box">

kanban_v2/script.js

@@ -64,14 +64,17 @@ function cacheDom() {
   dom.selectAllBtn = document.getElementById("btn-select-all");
   dom.clearSelectionBtn = document.getElementById("btn-clear-selection");
   dom.dialog = document.getElementById("task-dialog");
-  dom.dialogTitle = document.getElementById("dialog-title");
-  dom.dialogClose = document.getElementById("dialog-close");
-  dom.taskForm = document.getElementById("task-form");
-  dom.taskDeleteBtn = document.getElementById("task-delete-button");
-  dom.taskStatusSelect = document.getElementById("task-status");
-  dom.taskParentSelect = document.getElementById("task-parent");
-  dom.taskCardTemplate = document.getElementById("task-card-template");
-}
+  dom.dialogTitle = document.getElementById("dialog-title");
+  dom.dialogClose = document.getElementById("dialog-close");
+  dom.taskForm = document.getElementById("task-form");
+  dom.taskDeleteBtn = document.getElementById("task-delete-button");
+  dom.taskStatusSelect = document.getElementById("task-status");
+  dom.taskParentSelect = document.getElementById("task-parent");
+  dom.taskCardTemplate = document.getElementById("task-card-template");
+  dom.exportTasksBtn = document.getElementById("btn-export-tasks");
+  dom.importTasksBtn = document.getElementById("btn-import-tasks");
+  dom.importTasksInput = document.getElementById("input-import-tasks");
+}
 
 function bindGlobalEvents() {
   dom.newTaskBtn.addEventListener("click", () => openTaskDialog());
@@ -120,20 +123,30 @@ function bindGlobalEvents() {
       renderParentClusters();
     });
   }
-  if (dom.parentViewClear) {
-    dom.parentViewClear.addEventListener("click", () => {
-      state.parentViewSearch = "";
-      state.highlightParentId = "";
-      state.filters.parentId = "";
-      if (dom.parentViewSearch) dom.parentViewSearch.value = "";
-      renderAll();
-    });
-  }
-  dom.dialog.addEventListener("close", () => {
-    dom.taskForm.reset();
-    dom.taskDeleteBtn.hidden = true;
-    dom.taskForm.dataset.editingId = "";
-  });
+  if (dom.parentViewClear) {
+    dom.parentViewClear.addEventListener("click", () => {
+      state.parentViewSearch = "";
+      state.highlightParentId = "";
+      state.filters.parentId = "";
+      if (dom.parentViewSearch) dom.parentViewSearch.value = "";
+      renderAll();
+    });
+  }
+  if (dom.exportTasksBtn) {
+    dom.exportTasksBtn.addEventListener("click", handleExportTasks);
+  }
+  if (dom.importTasksBtn && dom.importTasksInput) {
+    dom.importTasksBtn.addEventListener("click", () => {
+      dom.importTasksInput.value = "";
+      dom.importTasksInput.click();
+    });
+    dom.importTasksInput.addEventListener("change", handleImportInputChange);
+  }
+  dom.dialog.addEventListener("close", () => {
+    dom.taskForm.reset();
+    dom.taskDeleteBtn.hidden = true;
+    dom.taskForm.dataset.editingId = "";
+  });
 }
 
 function hydrateStaticUi() {
@@ -163,9 +176,139 @@ function loadTasks() {
   saveTasks();
 }
 
-function saveTasks() {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(state.tasks));
-}
+function saveTasks() {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(state.tasks));
+}
+
+function handleExportTasks() {
+  try {
+    const payload = {
+      version: 1,
+      exportedAt: new Date().toISOString(),
+      tasks: state.tasks
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    const timestamp = new Date().toISOString().replace(/[:]/g, "-").replace(/\..+/, "");
+    anchor.href = url;
+    anchor.download = `kanban-tasks-${timestamp}.json`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Failed to export tasks", error);
+    window.alert("\u30A8\u30AF\u30B9\u30DD\u30FC\u30C8\u306B\u5931\u6557\u3057\u307E\u3057\u305F\u3002");
+  }
+}
+
+async function handleImportInputChange(event) {
+  const input = event.target;
+  if (!(input instanceof HTMLInputElement)) return;
+  const files = input.files;
+  const file = files && files[0];
+  if (!file) return;
+  try {
+    const text = await file.text();
+    const parsed = JSON.parse(text);
+    const tasksData = Array.isArray(parsed) ? parsed : parsed?.tasks;
+    if (!Array.isArray(tasksData)) {
+      throw new Error("Invalid import payload");
+    }
+    const normalized = normalizeImportedTasks(tasksData);
+    if (!window.confirm("\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u3068\u73fe\u5728\u306e\u30c7\u30fc\u30bf\u306f\u4e0a\u66f8\u304d\u3055\u308c\u307e\u3059\u3002\u5b9f\u884c\u3057\u307e\u3059\u304b\uff1f")) {
+      return;
+    }
+    state.tasks = normalized;
+    state.selectionMode = false;
+    state.selectedIds.clear();
+    state.highlightParentId = "";
+    state.filters.search = "";
+    state.filters.searchRaw = "";
+    state.filters.selectedTags = [];
+    state.filters.dateFrom = "";
+    state.filters.dateTo = "";
+    state.filters.parentId = "";
+    state.filters.parentSearch = "";
+    state.parentViewSearch = "";
+    state.showParentView = false;
+    state.activeStatus = STATUSES[0].id;
+    saveTasks();
+    renderAll();
+    window.alert(`\u30a4\u30f3\u30dd\u30fc\u30c8\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002\uff08${normalized.length}\u4ef6\uff09`);
+  } catch (error) {
+    console.error("Failed to import tasks", error);
+    window.alert("\u30a4\u30f3\u30dd\u30fc\u30c8\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u30d5\u30a1\u30a4\u30eb\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002");
+  } finally {
+    input.value = "";
+  }
+}
+
+function normalizeImportedTasks(tasks) {
+  const fallbackStatus = STATUSES[0]?.id ?? "backlog";
+  const normalized = [];
+  const seenIds = new Set();
+
+  tasks.forEach((item, index) => {
+    if (!item || typeof item !== "object") {
+      throw new Error(`Invalid task at index ${index}`);
+    }
+
+    const id = typeof item.id === "string" && item.id.trim() ? item.id.trim() : generateId();
+    if (seenIds.has(id)) {
+      throw new Error(`Duplicate task id found: ${id}`);
+    }
+    seenIds.add(id);
+
+    const rawTags = Array.isArray(item.tags)
+      ? item.tags
+      : typeof item.tags === "string"
+      ? item.tags.split(",").map((tag) => tag.trim())
+      : [];
+
+    const tags = rawTags.filter((tag) => typeof tag === "string" && tag.trim().length > 0);
+
+    normalized.push({
+      id,
+      title: typeof item.title === "string" ? item.title : "",
+      assignee: typeof item.assignee === "string" ? item.assignee : "",
+      dueDate: typeof item.dueDate === "string" ? item.dueDate : "",
+      link: typeof item.link === "string" ? item.link : "",
+      tags,
+      progress: typeof item.progress === "string" ? item.progress : "",
+      notes: typeof item.notes === "string" ? item.notes : "",
+      parentId: typeof item.parentId === "string" ? item.parentId : "",
+      status: typeof item.status === "string" && item.status ? item.status : fallbackStatus,
+      createdAt: coerceTimestamp(item.createdAt),
+      updatedAt: coerceTimestamp(item.updatedAt)
+    });
+  });
+
+  normalized.forEach((task) => {
+    if (!STATUSES.some((status) => status.id === task.status)) {
+      task.status = fallbackStatus;
+    }
+    if (task.parentId && !normalized.some((candidate) => candidate.id === task.parentId)) {
+      task.parentId = "";
+    }
+  });
+
+  return normalized;
+}
+
+function coerceTimestamp(value) {
+  if (typeof value === "number" && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    const parsed = Date.parse(value);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return Date.now();
+}
 
 function renderAll() {
   document.body.classList.toggle("selection-mode", state.selectionMode);