yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Improve code readability and structure in EditBrandDevice component

Browse Source
This commit is contained in:
vinix
2025-11-18 11:34:03 +07:00
parent 0e8078c29f
commit ecf59fa9c6
1 changed files with 117 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/pages/master/brandDevice/EditBrandDevice.jsx
View File

@@ -1,6 +1,18 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { Divider, Typography, Button, Steps, Form, Row, Col, Card, Spin, Modal, ConfigProvider } from 'antd';
import {
Divider,
Typography,
Button,
Steps,
Form,
Row,
Col,
Card,
Spin,
Modal,
ConfigProvider,
} from 'antd';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { getBrandById, updateBrand } from '../../../api/master-brand';
@@ -48,12 +60,10 @@ const EditBrandDevice = () => {
const [solutionForm] = Form.useForm();
const [sparepartForm] = Form.useForm();
const {
errorCodeFields,
addErrorCode,
removeErrorCode,
editErrorCode,
} = useErrorCodeLogic(errorCodeForm, fileList);
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
errorCodeForm,
fileList
);
const {
solutionFields,
@@ -83,14 +93,14 @@ const EditBrandDevice = () => {
// Handlers for sparepart image upload
const handleSparepartImageUpload = (fieldKey, imageData) => {
setSparepartImages(prev => ({
setSparepartImages((prev) => ({
...prev,
[fieldKey]: imageData
[fieldKey]: imageData,
}));
};
const handleSparepartImageRemove = (fieldKey) => {
setSparepartImages(prev => {
setSparepartImages((prev) => {
const newImages = { ...prev };
delete newImages[fieldKey];
return newImages;
@@ -159,7 +169,8 @@ const EditBrandDevice = () => {
path_icon: ec.path_icon || '',
status: ec.is_active,
solution: ec.solution || [],
errorCodeIcon: ec.path_icon ? {
errorCodeIcon: ec.path_icon
? {
name: 'icon',
uploadPath: ec.path_icon,
url: (() => {
@@ -168,8 +179,9 @@ const EditBrandDevice = () => {
const filename = pathParts.slice(1).join('/');
return getFileUrl(folder, filename);
})(),
type_solution: 'image'
} : null,
type_solution: 'image',
}
: null,
}))
: [];
@@ -332,7 +344,7 @@ const EditBrandDevice = () => {
// Load sparepart images
const newSparepartImages = {};
record.sparepart.forEach(sparepart => {
record.sparepart.forEach((sparepart) => {
if (sparepart.sparepart_image) {
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
}
@@ -367,7 +379,7 @@ const EditBrandDevice = () => {
// Load sparepart images
const newSparepartImages = {};
record.sparepart.forEach(sparepart => {
record.sparepart.forEach((sparepart) => {
if (sparepart.sparepart_image) {
newSparepartImages[sparepart.id || sparepart.key] = sparepart.sparepart_image;
}
@@ -381,25 +393,61 @@ const EditBrandDevice = () => {
}
};
const handleAddErrorCode = (newErrorCode) => {
// Include the current icon in the error code
const errorCodeWithIcon = {
...newErrorCode,
errorCodeIcon: errorCodeIcon
const handleAddErrorCode = async () => {
try {
// Validate error code form
const errorCodeValues = await errorCodeForm.validateFields();
// 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',
title: 'Perhatian',
message: 'Setiap error code harus memiliki minimal 1 solution!',
});
return;
}
// Create complete error code object
const newErrorCode = {
error_code: errorCodeValues.error_code,
error_code_name: errorCodeValues.error_code_name,
error_code_description: errorCodeValues.error_code_description,
error_code_color: errorCodeValues.error_code_color || '#000000',
path_icon: errorCodeIcon?.uploadPath || '',
status: errorCodeValues.status === undefined ? true : errorCodeValues.status,
solution: solutionData,
sparepart: sparepartData,
errorCodeIcon: errorCodeIcon,
key: editingErrorCodeKey || `temp-${Date.now()}`,
};
let updatedErrorCodes;
if (editingErrorCodeKey) {
updatedErrorCodes = errorCodes.map((item) =>
item.key === editingErrorCodeKey ? errorCodeWithIcon : item
);
// Update existing error code
updatedErrorCodes = errorCodes.map((item) => {
if (item.key === editingErrorCodeKey) {
return {
...item,
...newErrorCode,
error_code_id: item.error_code_id || newErrorCode.error_code_id,
};
}
return item;
});
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil diupdate!',
});
} else {
updatedErrorCodes = [...errorCodes, errorCodeWithIcon];
// Add new error code
updatedErrorCodes = [...errorCodes, newErrorCode];
NotifOk({
icon: 'success',
title: 'Berhasil',
@@ -408,7 +456,18 @@ const EditBrandDevice = () => {
}
setErrorCodes(updatedErrorCodes);
// Delay form reset to prevent data loss
setTimeout(() => {
resetErrorCodeForm();
}, 100);
} catch (error) {
NotifAlert({
icon: 'warning',
title: 'Perhatian',
message: 'Harap isi semua kolom wajib (error code + minimal 1 solution)!',
});
}
};
const resetErrorCodeForm = () => {
@@ -552,7 +611,11 @@ const EditBrandDevice = () => {
</Col>
<Col span={8}>
<Card
title={<Title level={5} style={{ margin: 0 }}>Solutions</Title>}
title={
<Title level={5} style={{ margin: 0 }}>
Solutions
</Title>
}
size="small"
>
<Form
@@ -581,7 +644,11 @@ const EditBrandDevice = () => {
</Col>
<Col span={8}>
<Card
title={<Title level={5} style={{ margin: 0 }}>Spareparts</Title>}
title={
<Title level={5} style={{ margin: 0 }}>
Spareparts
</Title>
}
size="small"
>
<Form