repair: brandDevice sparepart integration

src/pages/master/brandDevice/component/SparepartCardSelect.jsx

@@ -1,15 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { Card, Row, Col, Image, Typography, Tag, Space, Spin, Button, Empty } from 'antd';
+import { Card, Row, Col, Image, Typography, Tag, Space, Spin, Button, Empty, message } from 'antd';
 import { CheckCircleOutlined, CloseCircleOutlined, SearchOutlined } from '@ant-design/icons';
 import { getAllSparepart } from '../../../../api/sparepart';
+import { addSparepartToBrand, removeSparepartFromBrand } from '../../../../api/master-brand';
 
 const { Text, Title } = Typography;
 
-const SparepartCardSelect = ({ 
-    selectedSparepartIds = [], 
+const SparepartCardSelect = ({
+    selectedSparepartIds = [],
     onSparepartChange,
     isLoading: externalLoading = false,
-    isReadOnly = false
+    isReadOnly = false,
+    brandId = null
 }) => {
     const [spareparts, setSpareparts] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -62,7 +64,6 @@ const SparepartCardSelect = ({
                 ]);
             }
         } catch (error) {
-            console.error('Error loading spareparts:', error);
             // Default mock data
             setSpareparts([
                 { 
@@ -105,14 +106,45 @@ const SparepartCardSelect = ({
         sp.sparepart_model?.toLowerCase().includes(searchTerm.toLowerCase())
     );
 
-    const handleSparepartToggle = (sparepartId) => {
+    const handleSparepartToggle = async (sparepartId) => {
         if (isReadOnly) return;
-        
-        const newSelectedIds = selectedSparepartIds.includes(sparepartId)
-            ? selectedSparepartIds.filter(id => id !== sparepartId)
-            : [...selectedSparepartIds, sparepartId];
-        
-        onSparepartChange(newSelectedIds);
+
+        const isCurrentlySelected = selectedSparepartIds.includes(sparepartId);
+
+        // If brandId is provided, save immediately to database
+        if (brandId) {
+            try {
+                setLoading(true);
+
+                if (isCurrentlySelected) {
+                    // Remove from database
+                    await removeSparepartFromBrand(brandId, sparepartId);
+                    message.success('Sparepart removed from brand successfully');
+                } else {
+                    // Add to database
+                    await addSparepartToBrand(brandId, sparepartId);
+                    message.success('Sparepart added to brand successfully');
+                }
+
+                // Update local state
+                const newSelectedIds = isCurrentlySelected
+                    ? selectedSparepartIds.filter(id => id !== sparepartId)
+                    : [...selectedSparepartIds, sparepartId];
+
+                onSparepartChange(newSelectedIds);
+            } catch (error) {
+                message.error(error.message || 'Failed to update sparepart');
+            } finally {
+                setLoading(false);
+            }
+        } else {
+            // If no brandId (add mode), just update local state
+            const newSelectedIds = isCurrentlySelected
+                ? selectedSparepartIds.filter(id => id !== sparepartId)
+                : [...selectedSparepartIds, sparepartId];
+
+            onSparepartChange(newSelectedIds);
+        }
     };
 
     const isSelected = (sparepartId) => selectedSparepartIds.includes(sparepartId);