feat: implement sparepart selection functionality and refactor related components

src/pages/master/brandDevice/EditBrandDevice.jsx

@@ -61,6 +61,7 @@ const EditBrandDevice = () => {
     const [errorCodeIcon, setErrorCodeIcon] = useState(null);
     const [solutionForm] = Form.useForm();
     const [sparepartForm] = Form.useForm();
+    const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
 
     const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
         errorCodeForm,
@@ -80,19 +81,33 @@ const EditBrandDevice = () => {
         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(() => {
         const fetchBrandData = async () => {
@@ -176,6 +191,14 @@ const EditBrandDevice = () => {
                     setFormData(newFormData);
                     brandForm.setFieldsValue(newFormData);
                     setErrorCodes(existingErrorCodes);
+
+                    // Set the selected sparepart IDs if available in the response
+                    if (response.data.spareparts) {
+                        // Extract the IDs from the spareparts objects
+                        const sparepartIds = response.data.spareparts.map(sp => sp.sparepart_id);
+                        setSelectedSparepartIds(sparepartIds);
+                        setSparepartsForExistingRecord(sparepartIds);
+                    }
                 } else {
                     NotifAlert({
                         icon: 'error',
@@ -244,12 +267,6 @@ const EditBrandDevice = () => {
                                 path_solution: sol.path_solution || '',
                                 is_active: sol.is_active !== false,
                             })),
-                            sparepart: (ec.sparepart || []).map((sp) => ({
-                                sparepart_name: sp.sparepart_name || sp.name || sp.label || '',
-                                brand_sparepart_description: sp.brand_sparepart_description || sp.description || sp.brand_sparepart_description || '',
-                                is_active: sp.is_active !== false,
-                                path_foto: sp.path_foto || '',
-                            })),
                         };
                     }
 
@@ -268,19 +285,17 @@ const EditBrandDevice = () => {
                             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.brand_sparepart_description || '',
-                                is_active: sp.is_active !== false,
-                                path_foto: sp.path_foto || '',
-                            })),
-                        }),
                     };
                 }),
             };
 
-            const response = await updateBrand(id, finalFormData);
+            const sparepartData = getSparepartData();
+            const updatedFinalFormData = {
+                ...finalFormData,
+                spareparts: sparepartData,
+            };
+
+            const response = await updateBrand(id, updatedFinalFormData);
 
             if (response && (response.statusCode === 200 || response.statusCode === 201)) {
                 localStorage.removeItem(`brand_device_edit_${id}_temp_data`);
@@ -329,7 +344,7 @@ const EditBrandDevice = () => {
 
         // Load spareparts to sparepart form
         if (record.sparepart && record.sparepart.length > 0) {
-            setSparepartsForExistingRecord(record.sparepart, sparepartForm);
+            setSparepartsForExistingRecord(record.sparepart);
         } else {
             resetSparepartFields();
         }
@@ -354,7 +369,7 @@ const EditBrandDevice = () => {
 
         // Load spareparts to sparepart form
         if (record.sparepart && record.sparepart.length > 0) {
-            setSparepartsForExistingRecord(record.sparepart, sparepartForm);
+            setSparepartsForExistingRecord(record.sparepart);
         }
 
         const formElement = document.querySelector('.ant-form');
@@ -624,15 +639,11 @@ const EditBrandDevice = () => {
                                 <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>