diff --git a/src/pages/master/brandDevice/AddBrandDevice.jsx b/src/pages/master/brandDevice/AddBrandDevice.jsx index dfa88e5..986977b 100644 --- a/src/pages/master/brandDevice/AddBrandDevice.jsx +++ b/src/pages/master/brandDevice/AddBrandDevice.jsx @@ -13,13 +13,18 @@ import { Space, ConfigProvider, } from 'antd'; -import { - EditOutlined, - DeleteOutlined -} from '@ant-design/icons'; +import { EditOutlined, DeleteOutlined } from '@ant-design/icons'; import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif'; import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb'; -import { getBrandById, createBrand, createErrorCode, getErrorCodesByBrandId, updateErrorCode, deleteErrorCode, deleteBrand } from '../../../api/master-brand'; +import { + getBrandById, + createBrand, + createErrorCode, + getErrorCodesByBrandId, + updateErrorCode, + deleteErrorCode, + deleteBrand, +} from '../../../api/master-brand'; import BrandForm from './component/BrandForm'; import ErrorCodeForm from './component/ErrorCodeForm'; import SolutionForm from './component/SolutionForm'; @@ -42,7 +47,9 @@ const AddBrandDevice = () => { const [selectedSparepartIds, setSelectedSparepartIds] = useState([]); const [loading, setLoading] = useState(false); const tab = searchParams.get('tab'); - const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : (location.state?.phase || 0)); + const [currentStep, setCurrentStep] = useState( + tab === 'error-codes' ? 1 : location.state?.phase || 0 + ); const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null); const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false); const [searchText, setSearchText] = useState(''); @@ -68,7 +75,7 @@ const AddBrandDevice = () => { const values = solutionForm.getFieldsValue(true); const solutions = []; - solutionFields.forEach(fieldKey => { + solutionFields.forEach((fieldKey) => { let solution = null; if (values.solution_items && values.solution_items[fieldKey]) { @@ -85,9 +92,16 @@ const AddBrandDevice = () => { if (solutionType === 'text') { isValid = solution.text && solution.text.trim() !== ''; } else if (solutionType === 'file') { - const hasPathSolution = solution.path_solution && solution.path_solution.trim() !== ''; - const hasFileUpload = (solution.fileUpload && typeof solution.fileUpload === 'object' && Object.keys(solution.fileUpload).length > 0); - const hasFile = (solution.file && typeof solution.file === 'object' && Object.keys(solution.file).length > 0); + const hasPathSolution = + solution.path_solution && solution.path_solution.trim() !== ''; + const hasFileUpload = + solution.fileUpload && + typeof solution.fileUpload === 'object' && + Object.keys(solution.fileUpload).length > 0; + const hasFile = + solution.file && + typeof solution.file === 'object' && + Object.keys(solution.file).length > 0; isValid = hasPathSolution || hasFileUpload || hasFile; } @@ -118,9 +132,9 @@ const AddBrandDevice = () => { text: '', status: true, file: null, - fileUpload: null - } - } + fileUpload: null, + }, + }, }); }, 100); } @@ -128,7 +142,6 @@ const AddBrandDevice = () => { }; const setSolutionsForExistingRecord = (solutions, targetForm) => { - if (!targetForm || !solutions || solutions.length === 0) { return; } @@ -153,11 +166,14 @@ const AddBrandDevice = () => { fileObject = { uploadPath: solution.path_solution || solution.path_document, path_solution: solution.path_solution || solution.path_document, - name: solution.file_upload_name || (solution.path_solution || solution.path_document).split('/').pop() || 'File', + name: + solution.file_upload_name || + (solution.path_solution || solution.path_document).split('/').pop() || + 'File', type_solution: solution.type_solution, isExisting: true, size: 0, - url: solution.path_solution || solution.path_document + url: solution.path_solution || solution.path_document, }; } @@ -170,7 +186,7 @@ const AddBrandDevice = () => { file: fileObject, fileUpload: fileObject, path_solution: solution.path_solution || solution.path_document || null, - fileName: solution.file_upload_name || null + fileName: solution.file_upload_name || null, }; }); @@ -180,28 +196,35 @@ const AddBrandDevice = () => { setSolutionStatuses(newSolutionStatuses); - targetForm.resetFields(); setTimeout(() => { targetForm.setFieldsValue({ - solution_items: solutionItems + solution_items: solutionItems, }); setTimeout(() => { - Object.keys(solutionItems).forEach(key => { + Object.keys(solutionItems).forEach((key) => { const solution = solutionItems[key]; targetForm.setFieldValue(['solution_items', key, 'name'], solution.name); targetForm.setFieldValue(['solution_items', key, 'type'], solution.type); targetForm.setFieldValue(['solution_items', key, 'text'], solution.text); targetForm.setFieldValue(['solution_items', key, 'file'], solution.file); - targetForm.setFieldValue(['solution_items', key, 'fileUpload'], solution.fileUpload); + targetForm.setFieldValue( + ['solution_items', key, 'fileUpload'], + solution.fileUpload + ); targetForm.setFieldValue(['solution_items', key, 'status'], solution.status); - targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution); - targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName); + targetForm.setFieldValue( + ['solution_items', key, 'path_solution'], + solution.path_solution + ); + targetForm.setFieldValue( + ['solution_items', key, 'fileName'], + solution.fileName + ); }); - const finalValues = targetForm.getFieldsValue(); }, 100); }, 100); @@ -209,14 +232,14 @@ const AddBrandDevice = () => { const handleAddSolutionField = () => { const newKey = Math.max(...solutionFields, 0) + 1; - setSolutionFields(prev => [...prev, newKey]); - setSolutionTypes(prev => ({ ...prev, [newKey]: 'text' })); - setSolutionStatuses(prev => ({ ...prev, [newKey]: true })); + setSolutionFields((prev) => [...prev, newKey]); + setSolutionTypes((prev) => ({ ...prev, [newKey]: 'text' })); + setSolutionStatuses((prev) => ({ ...prev, [newKey]: true })); }; const handleRemoveSolutionField = (fieldKey) => { if (solutionFields.length > 1) { - setSolutionFields(prev => prev.filter(key => key !== fieldKey)); + setSolutionFields((prev) => prev.filter((key) => key !== fieldKey)); const newTypes = { ...solutionTypes }; const newStatuses = { ...solutionStatuses }; delete newTypes[fieldKey]; @@ -233,7 +256,7 @@ const AddBrandDevice = () => { }; const handleSolutionTypeChange = (fieldKey, type) => { - setSolutionTypes(prev => ({ ...prev, [fieldKey]: type })); + setSolutionTypes((prev) => ({ ...prev, [fieldKey]: type })); if (type === 'file') { solutionForm.setFieldValue(['solution_items', fieldKey, 'text'], ''); @@ -246,7 +269,7 @@ const AddBrandDevice = () => { }; const handleSolutionStatusChange = (fieldKey, status) => { - setSolutionStatuses(prev => ({ ...prev, [fieldKey]: status })); + setSolutionStatuses((prev) => ({ ...prev, [fieldKey]: status })); }; const handleNextStep = async () => { @@ -259,7 +282,7 @@ const AddBrandDevice = () => { brand_type: brandValues.brand_type || '', brand_manufacture: brandValues.brand_manufacture || '', brand_model: brandValues.brand_model || '', - is_active: brandValues.is_active !== undefined ? brandValues.is_active : true + is_active: brandValues.is_active !== undefined ? brandValues.is_active : true, }; const response = await createBrand(brandApiData); @@ -268,7 +291,7 @@ const AddBrandDevice = () => { const newBrandInfo = { ...brandValues, brand_id: response.data.brand_id, - brand_code: response.data.brand_code + brand_code: response.data.brand_code, }; setBrandInfo(newBrandInfo); setTemporaryBrandId(response.data.brand_id); @@ -307,8 +330,7 @@ const AddBrandDevice = () => { if (isTemporaryBrand && temporaryBrandId) { try { await deleteBrand(temporaryBrandId); - } catch (error) { - } + } catch (error) {} } navigate('/master/brand-device'); }; @@ -360,8 +382,6 @@ const AddBrandDevice = () => { setTrigerFilter((prev) => !prev); }; - - const resetErrorCodeForm = () => { errorCodeForm.resetFields(); errorCodeForm.setFieldsValue({ @@ -391,16 +411,16 @@ const AddBrandDevice = () => { return; } - if (!solutionData || solutionData.length === 0) { - NotifAlert({ - icon: 'warning', - title: 'Perhatian', - message: 'Setiap error code harus memiliki minimal 1 solution!', - }); - return; - } + // if (!solutionData || solutionData.length === 0) { + // NotifAlert({ + // icon: 'warning', + // title: 'Perhatian', + // message: 'Setiap error code harus memiliki minimal 1 solution!', + // }); + // return; + // } - const formattedSolutions = solutionData.map(solution => { + const formattedSolutions = solutionData.map((solution) => { const solutionType = solution.type || 'text'; let typeSolution = solutionType === 'text' ? 'text' : 'image'; @@ -422,7 +442,11 @@ const AddBrandDevice = () => { } else { formattedSolution.text_solution = ''; - formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || ''; + formattedSolution.path_solution = + solution.path_solution || + solution.file?.uploadPath || + solution.fileUpload?.uploadPath || + ''; } if (formattedSolution.brand_code_solution_id) { @@ -440,7 +464,7 @@ const AddBrandDevice = () => { path_icon: errorCodeIcon?.uploadPath || '', is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status, solution: formattedSolutions, - spareparts: selectedSparepartIds || [] + spareparts: selectedSparepartIds || [], }; let response; @@ -456,11 +480,13 @@ const AddBrandDevice = () => { NotifOk({ icon: 'success', title: 'Berhasil', - message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!', + message: editingErrorCodeKey + ? 'Error code berhasil diupdate!' + : 'Error code berhasil ditambahkan!', }); resetErrorCodeForm(); - setTrigerFilter(prev => !prev); + setTrigerFilter((prev) => !prev); } else { NotifAlert({ icon: 'error', @@ -479,12 +505,10 @@ const AddBrandDevice = () => { } }; - const handleErrorCodeIconRemove = () => { setErrorCodeIcon(null); }; - const handleFinish = async () => { setConfirmLoading(true); try { @@ -506,10 +530,10 @@ const AddBrandDevice = () => { const response = await getErrorCodesByBrandId(brandInfo.brand_id, queryParams); if (response && response.statusCode === 200 && response.data) { - const freshErrorCodes = response.data.map(ec => ({ + const freshErrorCodes = response.data.map((ec) => ({ ...ec, tempId: `existing_${ec.error_code_id}`, - status: 'existing' + status: 'existing', })); setApiErrorCodes(freshErrorCodes); @@ -517,7 +541,8 @@ const AddBrandDevice = () => { NotifAlert({ icon: 'warning', title: 'Perhatian', - message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', + message: + 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', }); return; } @@ -526,7 +551,8 @@ const AddBrandDevice = () => { NotifAlert({ icon: 'warning', title: 'Perhatian', - message: 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', + message: + 'Harap tambahkan minimal 1 error code sebelum menyelesaikan.', }); return; } @@ -591,11 +617,7 @@ const AddBrandDevice = () => { )} - + ); } @@ -635,31 +657,39 @@ const AddBrandDevice = () => { -
+
- - + justifyContent: 'space-between', + width: '100%', + }} + > + + Error Code Form
} style={{ width: '100%', boxShadow: '0 2px 8px rgba(0,0,0,0.06)', - borderRadius: '12px' + borderRadius: '12px', }} styles={{ body: { padding: '16px 24px 12px 24px' }, header: { padding: '16px 24px', borderBottom: '1px solid #f0f0f0', - backgroundColor: '#fafafa' - } + backgroundColor: '#fafafa', + }, }} > -
-
+
+
{ -
-
-
-

+
+
+
+

Solution

@@ -756,14 +807,23 @@ const AddBrandDevice = () => { solutionTypes={solutionTypes} solutionStatuses={solutionStatuses} onAddSolutionField={handleAddSolutionField} - onRemoveSolutionField={handleRemoveSolutionField} + onRemoveSolutionField={ + handleRemoveSolutionField + } onSolutionTypeChange={handleSolutionTypeChange} - onSolutionStatusChange={handleSolutionStatusChange} - onSolutionFileUpload={(fileData) => { - }} + onSolutionStatusChange={ + handleSolutionStatusChange + } + onSolutionFileUpload={(fileData) => {}} onFileView={(fileData) => { - if (fileData && (fileData.url || fileData.uploadPath)) { - window.open(fileData.url || fileData.uploadPath, '_blank'); + if ( + fileData && + (fileData.url || fileData.uploadPath) + ) { + window.open( + fileData.url || fileData.uploadPath, + '_blank' + ); } }} isReadOnly={false} @@ -772,40 +832,55 @@ const AddBrandDevice = () => {
-
-
-
-

+
+
+
+

Sparepart Selection

-
+
{ -
- +
{editingErrorCodeKey && ( + {currentStep === 1 && ( - )} @@ -1034,4 +1101,4 @@ const AddBrandDevice = () => { ); }; -export default AddBrandDevice; \ No newline at end of file +export default AddBrandDevice;