refactor: remove sparepart handling from AddBrandDevice and EditBrandDevice components
This commit is contained in:
@@ -5,15 +5,11 @@ import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import { createBrand } from '../../../api/master-brand';
|
||||
import BrandForm from './component/BrandForm';
|
||||
import ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import ErrorCodeTable from './component/ListErrorCode';
|
||||
import ErrorCodeListModal from './component/ErrorCodeListModal';
|
||||
import FormActions from './component/FormActions';
|
||||
import SparepartForm from './component/SparepartForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
|
||||
|
||||
const { Title } = Typography;
|
||||
@@ -34,7 +30,6 @@ const AddBrandDevice = () => {
|
||||
const [brandForm] = Form.useForm();
|
||||
const [errorCodeForm] = Form.useForm();
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [fileList, setFileList] = useState([]);
|
||||
@@ -45,7 +40,6 @@ const AddBrandDevice = () => {
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [sparepartImages, setSparepartImages] = useState({});
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
@@ -63,34 +57,6 @@ const AddBrandDevice = () => {
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
const {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
} = useSparepartLogic(sparepartForm);
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages(prev => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages(prev => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbItems([
|
||||
@@ -224,10 +190,6 @@ const AddBrandDevice = () => {
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditErrorCode = (record) => {
|
||||
@@ -258,17 +220,6 @@ const AddBrandDevice = () => {
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
// Reset sparepart fields first
|
||||
resetSparepartFields();
|
||||
// Then load new spareparts
|
||||
setTimeout(() => {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
}, 0);
|
||||
} else {
|
||||
resetSparepartFields();
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
@@ -297,9 +248,6 @@ const AddBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get sparepart data (optional, no backend yet)
|
||||
const spareparts = getSparepartData() || [];
|
||||
|
||||
const newErrorCode = {
|
||||
key: Date.now(),
|
||||
error_code: formValues.error_code,
|
||||
@@ -310,7 +258,6 @@ const AddBrandDevice = () => {
|
||||
status: formValues.status !== false,
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
solution: solutions,
|
||||
sparepart: spareparts,
|
||||
};
|
||||
|
||||
if (editingErrorCodeKey) {
|
||||
@@ -336,7 +283,6 @@ const AddBrandDevice = () => {
|
||||
// Reset all forms
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
} catch (error) {
|
||||
console.error('Error adding error code:', error);
|
||||
NotifAlert({
|
||||
@@ -481,7 +427,7 @@ const AddBrandDevice = () => {
|
||||
<>
|
||||
<Row gutter={16} style={{ marginBottom: 24 }}>
|
||||
{/* Error Code Form Column */}
|
||||
<Col span={8}>
|
||||
<Col span={12}>
|
||||
<Card size="small" title="Error Code">
|
||||
<Form
|
||||
form={errorCodeForm}
|
||||
@@ -503,7 +449,7 @@ const AddBrandDevice = () => {
|
||||
</Col>
|
||||
|
||||
{/* Solution Form Column */}
|
||||
<Col span={8}>
|
||||
<Col span={12}>
|
||||
<Card size="small" title="Solutions">
|
||||
<Form
|
||||
form={solutionForm}
|
||||
@@ -533,33 +479,6 @@ 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,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
<SparepartForm
|
||||
sparepartForm={sparepartForm}
|
||||
sparepartFields={sparepartFields}
|
||||
onAddSparepartField={handleAddSparepartField}
|
||||
onRemoveSparepartField={handleRemoveSparepartField}
|
||||
onSparepartTypeChange={handleSparepartTypeChange}
|
||||
onSparepartStatusChange={handleSparepartStatusChange}
|
||||
onSparepartImageUpload={handleSparepartImageUpload}
|
||||
onSparepartImageRemove={handleSparepartImageRemove}
|
||||
sparepartImages={sparepartImages}
|
||||
isReadOnly={false}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
@@ -616,7 +535,7 @@ const AddBrandDevice = () => {
|
||||
</Title>
|
||||
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
||||
<Step title="Brand Device Details" />
|
||||
<Step title="Error Codes, Solutions & Spareparts" />
|
||||
<Step title="Error Codes & Solutions" />
|
||||
</Steps>
|
||||
<div style={{ marginTop: 24 }}>{renderStepContent()}</div>
|
||||
<Divider />
|
||||
|
||||
@@ -20,12 +20,10 @@ import { getFileUrl } from '../../../api/file-uploads';
|
||||
import BrandForm from './component/BrandForm';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import SparepartForm from './component/SparepartForm';
|
||||
import ErrorCodeListModal from './component/ErrorCodeListModal';
|
||||
import FormActions from './component/FormActions';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -56,9 +54,7 @@ const EditBrandDevice = () => {
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [sparepartImages, setSparepartImages] = useState({});
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
|
||||
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
|
||||
errorCodeForm,
|
||||
@@ -78,35 +74,6 @@ const EditBrandDevice = () => {
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
const {
|
||||
sparepartFields,
|
||||
sparepartTypes,
|
||||
sparepartStatuses,
|
||||
handleAddSparepartField,
|
||||
handleRemoveSparepartField,
|
||||
handleSparepartTypeChange,
|
||||
handleSparepartStatusChange,
|
||||
resetSparepartFields,
|
||||
getSparepartData,
|
||||
setSparepartForExistingRecord,
|
||||
} = useSparepartLogic(sparepartForm);
|
||||
|
||||
// Handlers for sparepart image upload
|
||||
const handleSparepartImageUpload = (fieldKey, imageData) => {
|
||||
setSparepartImages((prev) => ({
|
||||
...prev,
|
||||
[fieldKey]: imageData,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSparepartImageRemove = (fieldKey) => {
|
||||
setSparepartImages((prev) => {
|
||||
const newImages = { ...prev };
|
||||
delete newImages[fieldKey];
|
||||
return newImages;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBrandData = async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
@@ -230,9 +197,8 @@ const EditBrandDevice = () => {
|
||||
const handleFinish = async () => {
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
// Get current solution and sparepart data from forms
|
||||
// Get current solution data from forms
|
||||
const currentSolutionData = getSolutionData();
|
||||
const currentSparepartData = getSparepartData();
|
||||
|
||||
const finalFormData = {
|
||||
brand_name: formData.brand_name,
|
||||
@@ -257,12 +223,6 @@ const EditBrandDevice = () => {
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: currentSparepartData.map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sparepartImages[sp.key || sp.id] || null,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -281,12 +241,6 @@ const EditBrandDevice = () => {
|
||||
path_solution: sol.path_solution || '',
|
||||
is_active: sol.is_active !== false,
|
||||
})),
|
||||
sparepart: (ec.sparepart || []).map((sp) => ({
|
||||
name: sp.name,
|
||||
description: sp.description || '',
|
||||
is_active: sp.is_active !== false,
|
||||
sparepart_image: sp.sparepart_image || null,
|
||||
})),
|
||||
};
|
||||
}),
|
||||
};
|
||||
@@ -337,23 +291,6 @@ const EditBrandDevice = () => {
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
});
|
||||
setSparepartImages(newSparepartImages);
|
||||
} else {
|
||||
resetSparepartFields();
|
||||
setSparepartImages({});
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditErrorCode = (record) => {
|
||||
@@ -373,20 +310,6 @@ const EditBrandDevice = () => {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartForExistingRecord(record.sparepart, sparepartForm);
|
||||
|
||||
// Load sparepart images
|
||||
const newSparepartImages = {};
|
||||
record.sparepart.forEach((sparepart) => {
|
||||
if (sparepart.sparepart_image) {
|
||||
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
|
||||
}
|
||||
});
|
||||
setSparepartImages(newSparepartImages);
|
||||
}
|
||||
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
if (formElement) {
|
||||
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
@@ -401,9 +324,6 @@ const EditBrandDevice = () => {
|
||||
// Get solution data from solution form
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Get sparepart data from sparepart form
|
||||
const sparepartData = getSparepartData();
|
||||
|
||||
if (solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
@@ -422,7 +342,6 @@ const EditBrandDevice = () => {
|
||||
path_icon: errorCodeIcon?.uploadPath || '',
|
||||
status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
||||
solution: solutionData,
|
||||
sparepart: sparepartData,
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
@@ -506,9 +425,7 @@ const EditBrandDevice = () => {
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setErrorCodeIcon(null);
|
||||
setSparepartImages({});
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
@@ -576,7 +493,7 @@ const EditBrandDevice = () => {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<Col span={8}>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -609,7 +526,7 @@ const EditBrandDevice = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -642,38 +559,6 @@ const EditBrandDevice = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Spareparts
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
form={sparepartForm}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
sparepart_status_0: true,
|
||||
sparepart_type_0: 'required',
|
||||
}}
|
||||
>
|
||||
<SparepartForm
|
||||
sparepartForm={sparepartForm}
|
||||
sparepartFields={sparepartFields}
|
||||
onAddSparepartField={handleAddSparepartField}
|
||||
onRemoveSparepartField={handleRemoveSparepartField}
|
||||
onSparepartTypeChange={handleSparepartTypeChange}
|
||||
onSparepartStatusChange={handleSparepartStatusChange}
|
||||
onSparepartImageUpload={handleSparepartImageUpload}
|
||||
onSparepartImageRemove={handleSparepartImageRemove}
|
||||
sparepartImages={sparepartImages}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
@@ -730,7 +615,7 @@ const EditBrandDevice = () => {
|
||||
</Title>
|
||||
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
||||
<Step title="Brand Device Details" />
|
||||
<Step title="Error Codes" />
|
||||
<Step title="Error Codes & Solutions" />
|
||||
</Steps>
|
||||
<div style={{ position: 'relative' }}>
|
||||
{loading && (
|
||||
|
||||
@@ -33,14 +33,14 @@ const ErrorCodeListModal = ({
|
||||
title: 'Error Name',
|
||||
dataIndex: 'error_code_name',
|
||||
key: 'error_code_name',
|
||||
width: '25%',
|
||||
width: '30%',
|
||||
render: (text) => text || '-',
|
||||
},
|
||||
{
|
||||
title: 'Description',
|
||||
dataIndex: 'error_code_description',
|
||||
key: 'error_code_description',
|
||||
width: '30%',
|
||||
width: '25%',
|
||||
render: (text) => text || '-',
|
||||
ellipsis: true,
|
||||
},
|
||||
@@ -54,18 +54,6 @@ const ErrorCodeListModal = ({
|
||||
return <Tag color={solutionCount > 0 ? 'green' : 'red'}>{solutionCount} Sol</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spareparts',
|
||||
key: 'spareparts',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const sparepartCount = record.sparepart ? record.sparepart.length : 0;
|
||||
return (
|
||||
<Tag color={sparepartCount > 0 ? 'blue' : 'default'}>{sparepartCount} SP</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
|
||||
Reference in New Issue
Block a user