diff --git a/src/pages/master/brandDevice/AddBrandDevice.jsx b/src/pages/master/brandDevice/AddBrandDevice.jsx index 0cf4a91..ae5451a 100644 --- a/src/pages/master/brandDevice/AddBrandDevice.jsx +++ b/src/pages/master/brandDevice/AddBrandDevice.jsx @@ -49,16 +49,29 @@ const AddBrandDevice = () => { handleSolutionStatusChange, resetSolutionFields, checkFirstSolutionValid, - setSolutionsForExistingRecord + setSolutionsForExistingRecord, } = useErrorCodeLogic(errorCodeForm, fileList); useEffect(() => { setBreadcrumbItems([ { title: • Master }, { - title: navigate('/master/brand-device')}>Brand Device + title: ( + navigate('/master/brand-device')} + > + Brand Device + + ), + }, + { + title: ( + + Tambah Brand Device + + ), }, - { title: Tambah Brand Device } ]); }, [setBreadcrumbItems, navigate]); @@ -71,25 +84,29 @@ const AddBrandDevice = () => { await brandForm.validateFields(); setCurrentStep(1); } catch (error) { - NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' }); + NotifAlert({ + icon: 'warning', + title: 'Perhatian', + message: 'Harap isi semua kolom wajib untuk brand device!', + }); } }; const handleFinish = async () => { setConfirmLoading(true); try { - const transformedErrorCodes = errorCodes.map(ec => ({ + const transformedErrorCodes = errorCodes.map((ec) => ({ error_code: ec.error_code, error_code_name: ec.error_code_name || '', error_code_description: ec.error_code_description || '', is_active: ec.status !== undefined ? ec.status : true, - solution: (ec.solution || []).map(sol => ({ + solution: (ec.solution || []).map((sol) => ({ solution_name: sol.solution_name, type_solution: sol.type_solution, text_solution: sol.text_solution || '', path_solution: sol.path_solution || '', - is_active: sol.is_active !== false - })) + is_active: sol.is_active !== false, + })), })); const finalFormData = { @@ -98,23 +115,26 @@ const AddBrandDevice = () => { brand_model: formData.brand_model || '', brand_manufacture: formData.brand_manufacture, is_active: formData.is_active, - error_code: transformedErrorCodes.length > 0 ? transformedErrorCodes : [ - { - error_code: "DEFAULT", - error_code_name: "Default Error Code", - error_code_description: "Default error description", - is_active: true, - solution: [ - { - solution_name: "Default Solution", - type_solution: "text", - text_solution: "Default solution text", - path_solution: "", - is_active: true - } - ] - } - ] + error_code: + transformedErrorCodes.length > 0 + ? transformedErrorCodes + : [ + { + error_code: 'DEFAULT', + error_code_name: 'Default Error Code', + error_code_description: 'Default error description', + is_active: true, + solution: [ + { + solution_name: 'Default Solution', + type_solution: 'text', + text_solution: 'Default solution text', + path_solution: '', + is_active: true, + }, + ], + }, + ], }; const response = await createBrand(finalFormData); @@ -135,9 +155,9 @@ const AddBrandDevice = () => { } } catch (error) { NotifAlert({ - icon: "error", - title: "Gagal", - message: error.message || "Gagal menyimpan data. Silakan coba lagi.", + icon: 'error', + title: 'Gagal', + message: error.message || 'Gagal menyimpan data. Silakan coba lagi.', }); } finally { setConfirmLoading(false); @@ -178,12 +198,14 @@ const AddBrandDevice = () => { const handleAddErrorCode = async (newErrorCode) => { if (editingErrorCodeKey) { - const updatedCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item); + const updatedCodes = errorCodes.map((item) => + item.key === editingErrorCodeKey ? newErrorCode : item + ); setErrorCodes(updatedCodes); NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil diupdate!' + message: 'Error code berhasil diupdate!', }); } else { const updatedCodes = [...errorCodes, newErrorCode]; @@ -191,7 +213,7 @@ const AddBrandDevice = () => { NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil ditambahkan!' + message: 'Error code berhasil ditambahkan!', }); } @@ -203,7 +225,7 @@ const AddBrandDevice = () => { errorCodeForm.setFieldsValue({ status: true, solution_status_0: true, - solution_type_0: 'text' + solution_type_0: 'text', }); setFileList([]); resetSolutionFields(); @@ -220,16 +242,16 @@ const AddBrandDevice = () => { NotifAlert({ icon: 'warning', title: 'Perhatian', - message: 'Setiap brand harus memiliki minimal 1 error code!' + message: 'Setiap brand harus memiliki minimal 1 error code!', }); return; } - setErrorCodes(errorCodes.filter(item => item.key !== key)); + setErrorCodes(errorCodes.filter((item) => item.key !== key)); NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil dihapus!' + message: 'Error code berhasil dihapus!', }); }; @@ -248,12 +270,17 @@ const AddBrandDevice = () => { const handleSolutionFileUpload = async (file) => { try { - const isAllowedType = ['application/pdf', 'image/jpeg', 'image/png', 'image/gif'].includes(file.type); + const isAllowedType = [ + 'application/pdf', + 'image/jpeg', + 'image/png', + 'image/gif', + ].includes(file.type); if (!isAllowedType) { NotifAlert({ icon: 'error', title: 'Error', - message: `${file.name} bukan file PDF atau gambar yang diizinkan.` + message: `${file.name} bukan file PDF atau gambar yang diizinkan.`, }); return; } @@ -271,17 +298,17 @@ const AddBrandDevice = () => { file.solution_name = file.name; file.solutionId = solutionFields[0]; file.type_solution = fileType; - setFileList(prevList => [...prevList, file]); + setFileList((prevList) => [...prevList, file]); NotifOk({ icon: 'success', title: 'Berhasil', - message: `${file.name} berhasil diupload!` + message: `${file.name} berhasil diupload!`, }); } else { NotifAlert({ icon: 'error', title: 'Gagal', - message: `Gagal mengupload ${file.name}` + message: `Gagal mengupload ${file.name}`, }); } } catch (error) { @@ -289,13 +316,13 @@ const AddBrandDevice = () => { NotifAlert({ icon: 'error', title: 'Error', - message: `Gagal mengupload ${file.name}. Silakan coba lagi.` + message: `Gagal mengupload ${file.name}. Silakan coba lagi.`, }); } }; const handleFileRemove = (file) => { - const newFileList = fileList.filter(item => item.uid !== file.uid); + const newFileList = fileList.filter((item) => item.uid !== file.uid); setFileList(newFileList); }; @@ -305,7 +332,9 @@ const AddBrandDevice = () => { setFormData(prev => ({...prev, ...allValues}))} + onValuesChange={(changedValues, allValues) => + setFormData((prev) => ({ ...prev, ...allValues })) + } isEdit={false} /> ); @@ -314,17 +343,22 @@ const AddBrandDevice = () => { if (currentStep === 1) { return ( - + {isErrorCodeFormReadOnly ? 'View Error Code' - : (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code') - } + : editingErrorCodeKey + ? 'Edit Error Code' + : 'Tambah Error Code'}
{ /> - + { return ( - Tambah Brand Device + + Tambah Brand Device + -
- {renderStepContent()} -
+
{renderStepContent()}
{ ); }; -export default AddBrandDevice; \ No newline at end of file +export default AddBrandDevice; diff --git a/src/pages/master/brandDevice/EditBrandDevice.jsx b/src/pages/master/brandDevice/EditBrandDevice.jsx index 105193e..7cf4e38 100644 --- a/src/pages/master/brandDevice/EditBrandDevice.jsx +++ b/src/pages/master/brandDevice/EditBrandDevice.jsx @@ -50,7 +50,7 @@ const EditBrandDevice = () => { handleSolutionStatusChange, resetSolutionFields, checkFirstSolutionValid, - setSolutionsForExistingRecord + setSolutionsForExistingRecord, } = useErrorCodeLogic(errorCodeForm, fileList); useEffect(() => { @@ -61,7 +61,8 @@ const EditBrandDevice = () => { return; } - const savedPhase = location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`); + const savedPhase = + location.state?.phase || localStorage.getItem(`brand_device_edit_${id}_last_phase`); if (savedPhase) { setCurrentStep(parseInt(savedPhase)); localStorage.removeItem(`brand_device_edit_${id}_last_phase`); @@ -70,9 +71,22 @@ const EditBrandDevice = () => { setBreadcrumbItems([ { title: • Master }, { - title: navigate('/master/brand-device')}>Brand Device + title: ( + navigate('/master/brand-device')} + > + Brand Device + + ), + }, + { + title: ( + + Edit Brand Device + + ), }, - { title: Edit Brand Device } ]); try { @@ -90,20 +104,21 @@ const EditBrandDevice = () => { brand_code: brandData.brand_code, }; - const existingErrorCodes = brandData.error_code ? brandData.error_code.map((ec, index) => ({ - key: `existing-${ec.error_code_id}`, - error_code_id: ec.error_code_id, - error_code: ec.error_code, - error_code_name: ec.error_code_name || '', - error_code_description: ec.error_code_description || '', - status: ec.is_active, - solution: ec.solution || [] - })) : []; + const existingErrorCodes = brandData.error_code + ? brandData.error_code.map((ec, index) => ({ + key: `existing-${ec.error_code_id}`, + error_code_id: ec.error_code_id, + error_code: ec.error_code, + error_code_name: ec.error_code_name || '', + error_code_description: ec.error_code_description || '', + status: ec.is_active, + solution: ec.solution || [], + })) + : []; setFormData(newFormData); brandForm.setFieldsValue(newFormData); setErrorCodes(existingErrorCodes); - } else { NotifAlert({ icon: 'error', @@ -135,7 +150,11 @@ const EditBrandDevice = () => { await brandForm.validateFields(); setCurrentStep(1); } catch (error) { - NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' }); + NotifAlert({ + icon: 'warning', + title: 'Perhatian', + message: 'Harap isi semua kolom wajib untuk brand device!', + }); } }; @@ -148,19 +167,19 @@ const EditBrandDevice = () => { brand_model: formData.brand_model || '', brand_manufacture: formData.brand_manufacture, is_active: formData.is_active, - error_code: errorCodes.map(ec => ({ + error_code: errorCodes.map((ec) => ({ error_code: ec.error_code, error_code_name: ec.error_code_name || '', error_code_description: ec.error_code_description || '', is_active: ec.status !== undefined ? ec.status : true, - solution: (ec.solution || []).map(sol => ({ + solution: (ec.solution || []).map((sol) => ({ solution_name: sol.solution_name, type_solution: sol.type_solution, text_solution: sol.text_solution || '', path_solution: sol.path_solution || '', - is_active: sol.is_active !== false - })) - })) + is_active: sol.is_active !== false, + })), + })), }; const response = await updateBrand(id, finalFormData); @@ -182,9 +201,9 @@ const EditBrandDevice = () => { } } catch (error) { NotifAlert({ - icon: "error", - title: "Gagal", - message: error.message || "Gagal mengupdate data. Silakan coba lagi.", + icon: 'error', + title: 'Gagal', + message: error.message || 'Gagal mengupdate data. Silakan coba lagi.', }); } finally { setConfirmLoading(false); @@ -226,22 +245,23 @@ const EditBrandDevice = () => { } }; - const handleAddErrorCode = (newErrorCode) => { let updatedErrorCodes; if (editingErrorCodeKey) { - updatedErrorCodes = errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item); + updatedErrorCodes = errorCodes.map((item) => + item.key === editingErrorCodeKey ? newErrorCode : item + ); NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil diupdate!' + message: 'Error code berhasil diupdate!', }); } else { updatedErrorCodes = [...errorCodes, newErrorCode]; NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil ditambahkan!' + message: 'Error code berhasil ditambahkan!', }); } @@ -254,7 +274,7 @@ const EditBrandDevice = () => { errorCodeForm.setFieldsValue({ status: true, solution_status_0: true, - solution_type_0: 'text' + solution_type_0: 'text', }); setFileList([]); resetSolutionFields(); @@ -267,17 +287,17 @@ const EditBrandDevice = () => { NotifAlert({ icon: 'warning', title: 'Perhatian', - message: 'Setiap brand harus memiliki minimal 1 error code!' + message: 'Setiap brand harus memiliki minimal 1 error code!', }); return; } - const updatedErrorCodes = errorCodes.filter(item => item.key !== key); + const updatedErrorCodes = errorCodes.filter((item) => item.key !== key); setErrorCodes(updatedErrorCodes); NotifOk({ icon: 'success', title: 'Berhasil', - message: 'Error code berhasil dihapus!' + message: 'Error code berhasil dihapus!', }); }; @@ -297,7 +317,7 @@ const EditBrandDevice = () => { editingErrorCodeKey: editingErrorCodeKey, isErrorCodeFormReadOnly: isErrorCodeFormReadOnly, solutionsToDelete: Array.from(solutionsToDelete), - currentSolutionData: window.currentSolutionData || {} + currentSolutionData: window.currentSolutionData || {}, }; localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData)); @@ -314,11 +334,11 @@ const EditBrandDevice = () => { }; const handleSolutionFileUpload = (file) => { - setFileList(prevList => [...prevList, file]); + setFileList((prevList) => [...prevList, file]); }; const handleFileRemove = (file) => { - const newFileList = fileList.filter(item => item.uid !== file.uid); + const newFileList = fileList.filter((item) => item.uid !== file.uid); setFileList(newFileList); }; @@ -328,7 +348,9 @@ const EditBrandDevice = () => { setFormData(prev => ({...prev, ...allValues}))} + onValuesChange={(changedValues, allValues) => + setFormData((prev) => ({ ...prev, ...allValues })) + } isEdit={true} /> ); @@ -337,17 +359,24 @@ const EditBrandDevice = () => { if (currentStep === 1) { return ( - + {isErrorCodeFormReadOnly - ? (editingErrorCodeKey ? 'View Error Code' : 'Error Code Form') - : (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code') - } + ? editingErrorCodeKey + ? 'View Error Code' + : 'Error Code Form' + : editingErrorCodeKey + ? 'Edit Error Code' + : 'Tambah Error Code'}
{ /> - + ({ - key: `loading-${index}`, - error_code: 'Loading...', - error_code_name: 'Loading...', - solution: [] - })) : - errorCodes + errorCodes={ + loading + ? Array.from({ length: 3 }, (_, index) => ({ + key: `loading-${index}`, + error_code: 'Loading...', + error_code_name: 'Loading...', + solution: [], + })) + : errorCodes } loading={loading} onPreview={handlePreviewErrorCode} @@ -399,32 +429,41 @@ const EditBrandDevice = () => { return ( - Edit Brand Device + + Edit Brand Device +
{loading && ( -
+
)} -
+
{renderStepContent()}
@@ -442,4 +481,4 @@ const EditBrandDevice = () => { ); }; -export default EditBrandDevice; \ No newline at end of file +export default EditBrandDevice;