カテゴリ名の追加と削除をサポート

46nori · 46nori · commit 261789985cf0 · 2025-06-22T00:19:17.000+09:00
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 - **パーツ検索**: カテゴリ別検索・キーワード検索
 - **在庫管理**: 在庫数の表示・編集（ローカルモード）
 - **パーツ管理**: 詳細表示・編集・追加・削除
-- **カテゴリ編集**: カテゴリ名編集・表示順序変更
+- **カテゴリ管理**: カテゴリ名編集・表示順序変更・追加・削除
 - **データ同期**: 編集内容のダウンロード・バックアップ
 
 ### 🛠 技術スタック
@@ -31,8 +31,8 @@
 
 ### 📊 プロジェクト統計
 
-- **総コード行数**: 2,738行（TypeScript/React）
-- **プロジェクト全体**: 11,680行（設定・ドキュメント含む）
+- **総コード行数**: 2,730行（TypeScript/React）
+- **プロジェクト全体**: 8,384行（設定・ドキュメント含む）
 - **コンポーネント数**: 9個（React TSX）
 - **対応ブラウザ**: Chrome, Safari, Firefox, Edge
 
@@ -90,7 +90,7 @@ npm run dev
 - **パーツ編集**: パーツ行の編集ボタンをクリック→情報を編集→保存
 - **パーツ追加**: 「パーツの追加」ボタン→必要な情報を入力→保存
 - **パーツ削除**: パーツ行の削除ボタン→確認ダイアログで実行
-- **カテゴリ編集**: 「カテゴリ編集」ボタン→名前編集・順序変更→保存
+- **カテゴリ管理**: 「カテゴリ編集」ボタン→名前編集・順序変更・追加・削除→保存
 
 ## 👤 個人運用
 
@@ -264,16 +264,13 @@ npm run preview  # ビルド結果をプレビュー
 - ✅ パーツ新規追加
 - ✅ パーツ削除
 - ✅ カテゴリ編集（名前・表示順序変更）
+- ✅ カテゴリ新規追加
+- ✅ カテゴリ削除
 - ✅ データベース同期（ダウンロード）
 - ✅ 環境自動判別
 - ✅ レスポンシブUI
 - ✅ ブラウザ別ダウンロード対応
 
-### 🚧 未実装機能
-
-- ⏳ **カテゴリ追加**: eparts.dbを直接編集すれば可能
-- ⏳ **カテゴリ削除**: 関連のあるパーツを削除する実装が必要
-
 ### 🎯 品質指標
 
 - ✅ TypeScript型安全性
diff --git a/src/App.tsx b/src/App.tsx
@@ -181,9 +181,9 @@ function App() {
     setIsCategoryEditModalOpen(true);
   };
 
-  const handleCategorySave = (updatedCategories: Category[]) => {
+  const handleCategorySave = (updatedCategories: Category[], deletedCategoryIds: number[]) => {
     if (environment === 'local') {
-      const success = dbManager.updateCategories(updatedCategories);
+      const success = dbManager.updateCategories(updatedCategories, deletedCategoryIds);
       if (success) {
         setCategories(dbManager.getCategories());
         refreshSearchResults();
diff --git a/src/components/CategoryEditModal.tsx b/src/components/CategoryEditModal.tsx
@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { Category } from '../types';
-import { X, ChevronUp, ChevronDown } from 'lucide-react';
+import { X, ChevronUp, ChevronDown, Plus, Trash2 } from 'lucide-react';
 
 interface CategoryEditModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (categories: Category[]) => void;
+  onSave: (categories: Category[], deletedCategoryIds: number[]) => void;
   categories: Category[];
 }
 
@@ -16,12 +16,19 @@ export const CategoryEditModal: React.FC<CategoryEditModalProps> = ({
   categories
 }) => {
   const [editedCategories, setEditedCategories] = useState<Category[]>([]);
+  const [newCategoryName, setNewCategoryName] = useState<string>('');
+  const [nextTempId, setNextTempId] = useState<number>(-1); // 一時的なIDは負の値を使用
+  const [deletedCategoryIds, setDeletedCategoryIds] = useState<number[]>([]); // 削除対象の既存カテゴリID
 
   useEffect(() => {
     if (isOpen) {
       // カテゴリをdisplay_orderで昇順ソート
       const sortedCategories = [...categories].sort((a, b) => a.display_order - b.display_order);
       setEditedCategories(sortedCategories);
+      setNewCategoryName('');
+      setDeletedCategoryIds([]); // 削除対象IDをリセット
+      // 一時的なIDの初期値を設定（既存のIDと重複しないように負の値から開始）
+      setNextTempId(-1);
     }
   }, [isOpen, categories]);
 
@@ -49,6 +56,38 @@ export const CategoryEditModal: React.FC<CategoryEditModalProps> = ({
     setEditedCategories(newCategories);
   };
 
+  const addNewCategory = () => {
+    if (!newCategoryName.trim()) {
+      return; // 空欄の場合は何もしない
+    }
+
+    const newCategory: Category = {
+      id: nextTempId, // 一時的なID（負の値）
+      name: newCategoryName.trim(),
+      parent_id: undefined,
+      display_order: 1 // 先頭に表示されるように小さい値
+    };
+
+    // カテゴリ一覧の先頭に追加
+    setEditedCategories([newCategory, ...editedCategories]);
+    setNewCategoryName(''); // 入力欄をクリア
+    setNextTempId(nextTempId - 1); // 次の一時的IDを準備
+  };
+
+  const deleteCategory = (index: number) => {
+    const categoryToDelete = editedCategories[index];
+    
+    if (categoryToDelete.id >= 0) {
+      // 既存カテゴリの場合は削除対象IDに追加
+      setDeletedCategoryIds([...deletedCategoryIds, categoryToDelete.id]);
+    }
+    // 新規追加カテゴリ（負のID）の場合は単に一覧から削除
+
+    // 表示一覧から削除
+    const newCategories = editedCategories.filter((_, i) => i !== index);
+    setEditedCategories(newCategories);
+  };
+
   const handleSave = () => {
     // 空欄チェック
     const hasEmptyName = editedCategories.some(category => !category.name.trim());
@@ -63,7 +102,14 @@ export const CategoryEditModal: React.FC<CategoryEditModalProps> = ({
       display_order: (index + 1) * 100 // 100, 200, 300... のように設定
     }));
 
-    onSave(updatedCategories);
+    // デバッグログ
+    console.log('CategoryEditModal - handleSave:', {
+      updatedCategories: updatedCategories.length,
+      deletedCategoryIds,
+      categories: updatedCategories.map(c => ({ id: c.id, name: c.name }))
+    });
+
+    onSave(updatedCategories, deletedCategoryIds);
     onClose();
   };
 
@@ -88,9 +134,45 @@ export const CategoryEditModal: React.FC<CategoryEditModalProps> = ({
             </p>
           </div>
           
+          {/* 新しいカテゴリ追加フォーム */}
+          <div className="mb-4 p-3 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+            <div className="flex items-center gap-2">
+              <div className="flex-1">
+                <input
+                  type="text"
+                  value={newCategoryName}
+                  onChange={(e) => setNewCategoryName(e.target.value)}
+                  placeholder="新しいカテゴリ名を入力"
+                  className="w-full px-3 py-2 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={addNewCategory}
+                disabled={!newCategoryName.trim()}
+                className={`px-3 py-2 rounded text-sm font-medium transition-colors flex items-center gap-1 ${
+                  newCategoryName.trim()
+                    ? 'bg-green-500 hover:bg-green-600 text-white'
+                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                }`}
+                title="カテゴリを追加"
+              >
+                <Plus className="w-4 h-4" />
+                追加
+              </button>
+            </div>
+          </div>
+          
           <div className="space-y-1">
             {editedCategories.map((category, index) => (
-              <div key={category.id} className="flex items-center gap-2 py-1 px-2 border border-gray-200 rounded">
+              <div 
+                key={category.id} 
+                className={`flex items-center gap-2 py-1 px-2 border rounded ${
+                  category.id < 0 
+                    ? 'border-green-200 bg-green-50' // 新規追加カテゴリ
+                    : 'border-gray-200'               // 既存カテゴリ
+                }`}
+              >
                 <button
                   type="button"
                   onClick={() => moveUp(index)}
@@ -130,9 +212,22 @@ export const CategoryEditModal: React.FC<CategoryEditModalProps> = ({
                   />
                 </div>
                 
-                <div className="text-xs text-gray-400 w-12 text-right">
-                  {category.id}
+                <div className={`text-xs w-12 text-right ${
+                  category.id < 0 
+                    ? 'text-green-600 font-medium' // 新規追加カテゴリ
+                    : 'text-gray-400'              // 既存カテゴリ
+                }`}>
+                  {category.id < 0 ? 'NEW' : category.id}
                 </div>
+                
+                <button
+                  type="button"
+                  onClick={() => deleteCategory(index)}
+                  className="p-1 text-red-500 hover:bg-red-50 rounded transition-colors"
+                  title="カテゴリを削除"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
               </div>
             ))}
           </div>
diff --git a/src/utils/database.ts b/src/utils/database.ts
@@ -889,15 +889,39 @@ export class DatabaseManager {
   }
 
   /**
-   * カテゴリ情報を更新する
+   * カテゴリ情報を更新する（新規追加と削除も含む）
    */
-  updateCategories(updatedCategories: Category[]): boolean {
+  updateCategories(updatedCategories: Category[], deletedCategoryIds: number[] = []): boolean {
     if (this.useSampleData) {
       // サンプルデータモードでもカテゴリ更新をサポート
       if (this.sampleData) {
-        this.sampleData.categories = updatedCategories.map(category => ({ ...category }));
+        // 削除対象カテゴリに関連するパーツとインベントリを削除
+        for (const deletedId of deletedCategoryIds) {
+          // 関連するパーツを削除
+          this.sampleData.parts = this.sampleData.parts.filter(part => part.category_id !== deletedId);
+        }
+
+        // 削除対象カテゴリを現在のカテゴリリストから除外
+        const remainingCategories = this.sampleData.categories.filter(
+          category => !deletedCategoryIds.includes(category.id)
+        );
+
+        // 新規カテゴリ（負のID）に正のIDを割り当て
+        let maxId = Math.max(...remainingCategories.map(c => c.id), 0);
+        const processedCategories = updatedCategories.map(category => {
+          if (category.id < 0) {
+            // 新規カテゴリの場合、正のIDを割り当て
+            return { ...category, id: ++maxId };
+          }
+          return { ...category };
+        });
+        
+        this.sampleData.categories = processedCategories;
         this.hasChanges = true;
-        devLog('サンプルデータのカテゴリを更新');
+        devLog('サンプルデータのカテゴリを更新（新規追加・削除含む）', {
+          updated: processedCategories.length,
+          deleted: deletedCategoryIds.length
+        });
         return true;
       }
       return false;
@@ -913,30 +937,78 @@ export class DatabaseManager {
       // トランザクション開始
       db.exec('BEGIN TRANSACTION');
 
-      // 各カテゴリを更新
-      for (const category of updatedCategories) {
-        const updateStmt = db.prepare(`
-          UPDATE categories SET
-            name = ?,
-            display_order = ?
-          WHERE id = ?
+      // 削除対象カテゴリの関連データを削除
+      for (const deletedId of deletedCategoryIds) {
+        // 関連するインベントリを削除（parts経由）
+        const deleteInventoryStmt = db.prepare(`
+          DELETE FROM inventory 
+          WHERE part_id IN (
+            SELECT id FROM parts WHERE category_id = ?
+          )
         `);
-        
-        updateStmt.bind([
-          category.name,
-          category.display_order,
-          category.id
-        ]);
-        
-        updateStmt.step();
-        updateStmt.free();
+        deleteInventoryStmt.bind([deletedId]);
+        deleteInventoryStmt.step();
+        deleteInventoryStmt.free();
+
+        // 関連するパーツを削除
+        const deletePartsStmt = db.prepare(`
+          DELETE FROM parts WHERE category_id = ?
+        `);
+        deletePartsStmt.bind([deletedId]);
+        deletePartsStmt.step();
+        deletePartsStmt.free();
+
+        // カテゴリを削除
+        const deleteCategoryStmt = db.prepare(`
+          DELETE FROM categories WHERE id = ?
+        `);
+        deleteCategoryStmt.bind([deletedId]);
+        deleteCategoryStmt.step();
+        deleteCategoryStmt.free();
+      }
+
+      // 各カテゴリを処理
+      for (const category of updatedCategories) {
+        if (category.id < 0) {
+          // 新規カテゴリの場合はINSERT
+          const insertStmt = db.prepare(`
+            INSERT INTO categories (name, parent_id, display_order)
+            VALUES (?, ?, ?)
+          `);
+          
+          insertStmt.bind([
+            category.name,
+            category.parent_id || null,
+            category.display_order
+          ]);
+          
+          insertStmt.step();
+          insertStmt.free();
+        } else {
+          // 既存カテゴリの場合はUPDATE
+          const updateStmt = db.prepare(`
+            UPDATE categories SET
+              name = ?,
+              display_order = ?
+            WHERE id = ?
+          `);
+          
+          updateStmt.bind([
+            category.name,
+            category.display_order,
+            category.id
+          ]);
+          
+          updateStmt.step();
+          updateStmt.free();
+        }
       }
 
       // トランザクション完了
       db.exec('COMMIT');
 
       this.hasChanges = true;
-      devLog('データベースのカテゴリを更新');
+      devLog('データベースのカテゴリを更新（新規追加・削除含む）');
       return true;
     } catch (error) {
       // エラー時はロールバック
