feat: implement sparepart selection functionality and refactor related components

src/pages/master/brandDevice/AddBrandDevice.jsx

@@ -56,6 +56,7 @@ const AddBrandDevice = () => {
     const [formData, setFormData] = useState(defaultData);
     const [errorCodes, setErrorCodes] = useState([]);
     const [errorCodeIcon, setErrorCodeIcon] = useState(null);
+    const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
 
     const {
         solutionFields,
@@ -73,19 +74,33 @@ const AddBrandDevice = () => {
         setSolutionsForExistingRecord,
     } = useSolutionLogic(solutionForm);
 
-    const {
-        sparepartFields,
-        sparepartTypes,
-        sparepartStatuses,
-        sparepartsToDelete,
-        handleAddSparepartField,
-        handleRemoveSparepartField,
-        handleSparepartTypeChange,
-        handleSparepartStatusChange,
-        resetSparepartFields,
-        getSparepartData,
-        setSparepartsForExistingRecord,
-    } = useSparepartLogic(sparepartForm);
+    // For spareparts, we'll use the local state directly since it's just an array of IDs
+    const handleSparepartChange = (values) => {
+        setSelectedSparepartIds(values || []);
+    };
+
+    const resetSparepartFields = () => {
+        setSelectedSparepartIds([]);
+    };
+
+    const getSparepartData = () => {
+        return selectedSparepartIds;
+    };
+
+    const setSparepartsForExistingRecord = (sparepartData) => {
+        if (!sparepartData) {
+            setSelectedSparepartIds([]);
+            return;
+        }
+
+        if (Array.isArray(sparepartData)) {
+            setSelectedSparepartIds(sparepartData);
+        } else if (typeof sparepartData === 'object' && sparepartData.spareparts) {
+            setSelectedSparepartIds(sparepartData.spareparts || []);
+        } else {
+            setSelectedSparepartIds(sparepartData.map(sp => sp.sparepart_id || sp.brand_sparepart_id || sp.id).filter(id => id));
+        }
+    };
 
     useEffect(() => {
         setBreadcrumbItems([
@@ -155,22 +170,16 @@ const AddBrandDevice = () => {
                     path_solution: sol.path_solution || '',
                     is_active: sol.is_active !== false,
                 })),
-                ...(ec.sparepart && ec.sparepart.length > 0 && {
-                    sparepart: ec.sparepart.map((sp) => ({
-                        sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
-                        brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.sparepart_description || '',
-                        is_active: sp.is_active !== false,
-                        path_foto: sp.path_foto || '',
-                    })),
-                }),
             }));
 
+            const sparepartData = getSparepartData();
             const finalFormData = {
                 brand_name: formData.brand_name,
                 brand_type: formData.brand_type || '',
                 brand_model: formData.brand_model || '',
                 brand_manufacture: formData.brand_manufacture,
                 is_active: formData.is_active,
+                spareparts: sparepartData,
                 error_code: transformedErrorCodes,
             };
 
@@ -222,7 +231,7 @@ const AddBrandDevice = () => {
         }
 
         if (record.sparepart && record.sparepart.length > 0) {
-            setSparepartsForExistingRecord(record.sparepart, sparepartForm);
+            setSparepartsForExistingRecord(record.sparepart);
         }
     };
 
@@ -254,6 +263,10 @@ const AddBrandDevice = () => {
         } else {
             resetSolutionFields();
         }
+
+        if (record.sparepart && record.sparepart.length > 0) {
+            setSparepartsForExistingRecord(record.sparepart);
+        }
     };
 
     const handleAddErrorCode = async () => {
@@ -282,7 +295,6 @@ const AddBrandDevice = () => {
                 return;
             }
 
-            const sparepartData = getSparepartData();
             const newErrorCode = {
                 key: Date.now(),
                 error_code: formValues.error_code,
@@ -293,7 +305,6 @@ const AddBrandDevice = () => {
                 status: formValues.status !== false,
                 errorCodeIcon: errorCodeIcon,
                 solution: solutions,
-                ...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }),  // Only add sparepart if there are spareparts
             };
 
             if (editingErrorCodeKey) {
@@ -516,22 +527,16 @@ const AddBrandDevice = () => {
                                 </Form>
                             </Card>
                         </Col>
-
-                        {/* Sparepart Form Column */}
                         <Col span={8}>
                             <Card size="small" title="Spareparts">
                                 <Form
                                     form={sparepartForm}
                                     layout="vertical"
-                                    initialValues={{
-                                        sparepart_status_0: true,
-                                    }}
                                 >
                                     <SparepartForm
                                         sparepartForm={sparepartForm}
-                                        sparepartFields={sparepartFields}
-                                        onAddSparepartField={handleAddSparepartField}
-                                        onRemoveSparepartField={handleRemoveSparepartField}
+                                        selectedSparepartIds={selectedSparepartIds}
+                                        onSparepartChange={handleSparepartChange}
                                         isReadOnly={isErrorCodeFormReadOnly}
                                     />
                                 </Form>