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

repair: add edit brand device

Browse Source
This commit is contained in:
Antony Kurniawan
2025-12-08 16:45:49 +07:00
parent 03be3a6a99
commit 5703ff0e8d
16 changed files with 1194 additions and 2198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,16 +19,13 @@ import TableList from '../../../components/Global/TableList';
import { ConfigProvider } from 'antd';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { getBrandById, updateBrand, getErrorCodesByBrandId } from '../../../api/master-brand';
import { getBrandById, getErrorCodesByBrandId } from '../../../api/master-brand';
import { getFileUrl } from '../../../api/file-uploads';
import BrandForm from './component/BrandForm';
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
import SolutionForm from './component/SolutionForm';
import FormActions from './component/FormActions';
import ListErrorCode from './component/ListErrorCode';
import { useSolutionLogic } from './hooks/solution';
import { useBrandDeviceLogic } from './hooks/useBrandDeviceLogic';
import { useBrandForm } from '../../../context/BrandFormContext';
import SingleSparepartSelect from './component/SingleSparepartSelect';
const { Title } = Typography;
@@ -46,19 +43,9 @@ const EditBrandDevice = () => {
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
const [loading, setLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
// Context integration
const {
routeBrandId,
setRouteBrandId,
initializeFromRoute,
navigateToErrorCodes,
editErrorCode,
isLoading: contextLoading
} = useBrandForm();
// Use step from query parameter or context
// Use step from query parameter
const tab = searchParams.get('tab');
const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : 0);
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
@@ -67,22 +54,9 @@ const EditBrandDevice = () => {
const [apiErrorCodes, setApiErrorCodes] = useState([]);
const [trigerFilter, setTrigerFilter] = useState(false);
const [searchValue, setSearchValue] = useState('');
const {
brandId,
brandInfo,
setBrandInfo,
setBrandId,
tempErrorCodes,
existingErrorCodes,
addErrorCode,
updateErrorCode,
deleteErrorCode,
setExistingErrorCodes,
prepareSubmissionData,
validateForm,
resetForm,
} = useBrandForm();
const [brandInfo, setBrandInfo] = useState({});
const [tempErrorCodes, setTempErrorCodes] = useState([]);
const [existingErrorCodes, setExistingErrorCodes] = useState([]);
const {
solutionFields,
@@ -141,6 +115,7 @@ const EditBrandDevice = () => {
const brandData = response.data;
const brandInfoData = {
brand_code: brandData.brand_code,
brand_name: brandData.brand_name,
brand_type: brandData.brand_type || '',
brand_manufacture: brandData.brand_manufacture || '',
@@ -149,12 +124,11 @@ const EditBrandDevice = () => {
};
setBrandInfo(brandInfoData);
setBrandId(brandData.brand_id);
brandForm.setFieldsValue(brandInfoData);
if (brandData.brand_id) {
try {
const errorCodesResponse = await getErrorCodesByBrandId(brandId || brandData.brand_id);
const errorCodesResponse = await getErrorCodesByBrandId(id || brandData.brand_id);
if (errorCodesResponse && errorCodesResponse.statusCode === 200) {
const apiErrorData = errorCodesResponse.data || [];
const existingCodes = apiErrorData.map(ec => ({
@@ -199,26 +173,59 @@ const EditBrandDevice = () => {
setCurrentStep(tab === 'brand' ? 0 : 1);
}, [searchParams]);
// Initialize context with route parameters
useEffect(() => {
if (id) {
initializeFromRoute(id);
setBrandId(id);
}
}, [id, initializeFromRoute, setBrandId]);
useEffect(() => {
if (currentStep === 1 && brandId) {
if (currentStep === 1 && id) {
setTrigerFilter(prev => !prev);
}
}, [currentStep, brandId]);
}, [currentStep, id]);
// Local functions to replace context methods
const addErrorCode = (newErrorCode) => {
const errorCodeWithId = {
...newErrorCode,
tempId: Date.now().toString(),
status: 'new'
};
setTempErrorCodes(prev => [...prev, errorCodeWithId]);
};
const updateErrorCode = (tempId, updatedData) => {
setTempErrorCodes(prev =>
prev.map(ec => ec.tempId === tempId ? { ...ec, ...updatedData, status: 'modified' } : ec)
);
setExistingErrorCodes(prev =>
prev.map(ec => ec.tempId === tempId ? { ...ec, ...updatedData, status: 'modified' } : ec)
);
};
const deleteErrorCode = (tempId, permanent = false) => {
if (permanent) {
setTempErrorCodes(prev => prev.filter(ec => ec.tempId !== tempId));
setExistingErrorCodes(prev => prev.filter(ec => ec.tempId !== tempId));
} else {
setTempErrorCodes(prev =>
prev.map(ec => ec.tempId === tempId ? { ...ec, status: 'deleted' } : ec)
);
setExistingErrorCodes(prev =>
prev.map(ec => ec.tempId === tempId ? { ...ec, status: 'deleted' } : ec)
);
}
};
const getErrorCodeById = (tempId) => {
const inTemp = tempErrorCodes.find(ec => ec.tempId === tempId);
if (inTemp) return inTemp;
const inExisting = existingErrorCodes.find(ec => ec.tempId === tempId);
return inExisting;
};
const handleNextStep = async () => {
try {
await brandForm.validateFields();
const currentBrandId = brandId || id;
const currentBrandId = id;
if (currentBrandId) {
navigateToErrorCodes(currentBrandId);
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
}
} catch (error) {
@@ -234,45 +241,7 @@ const EditBrandDevice = () => {
navigate('/master/brand-device');
};
const handleFinish = async () => {
const validation = validateForm();
if (!validation.isValid) {
return;
}
setConfirmLoading(true);
try {
const userId = JSON.parse(localStorage.getItem('user') || '{}').user_id || 1;
const submissionData = prepareSubmissionData(userId);
const response = await updateBrand(id, submissionData);
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
NotifOk({
icon: 'success',
title: 'Berhasil',
message: response.message || 'Brand Device dan Error Codes berhasil diupdate.',
});
resetForm();
navigate('/master/brand-device');
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: response?.message || 'Gagal mengupdate Brand Device',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: error.message || 'Gagal mengupdate data. Silakan coba lagi.',
});
} finally {
setConfirmLoading(false);
}
};
const handleErrorCodeIconUpload = (iconData) => {
setErrorCodeIcon(iconData);
};
@@ -415,7 +384,7 @@ const EditBrandDevice = () => {
const handleEditErrorCodeNavigate = (record) => {
const errorCodeId = record.status === 'existing' ? record.error_code_id : record.tempId;
const currentBrandId = brandId || id;
const currentBrandId = id;
if (errorCodeId && currentBrandId) {
navigate(`/master/brand-device/${currentBrandId}/error-code/edit/${errorCodeId}`);
}
@@ -473,8 +442,6 @@ const EditBrandDevice = () => {
render: (text, record) => (
<Space>
{text}
{record.status === 'new' && <Tag color="green">New</Tag>}
{record.status === 'modified' && <Tag color="orange">Modified</Tag>}
</Space>
),
},
@@ -484,24 +451,6 @@ const EditBrandDevice = () => {
key: 'error_code_name',
width: '25%',
},
{
title: 'Description',
dataIndex: 'error_code_description',
key: 'error_code_description',
width: '25%',
render: (text) => text || '-',
},
{
title: 'Solutions',
dataIndex: 'solution',
key: 'solutions',
width: '10%',
align: 'center',
render: (solutions) => {
const count = Array.isArray(solutions) ? solutions.length : 0;
return count;
},
},
{
title: 'Status',
dataIndex: 'is_active',
@@ -570,7 +519,7 @@ const EditBrandDevice = () => {
const search = params.get('search') || '';
const page = parseInt(params.get('page')) || 1;
const limit = parseInt(params.get('limit')) || 10;
const currentBrandId = brandId || id;
const currentBrandId = id;
if (!currentBrandId) {
console.warn('Brand ID is not available');
@@ -767,7 +716,7 @@ const EditBrandDevice = () => {
>
<Button
icon={<PlusOutlined />}
onClick={() => navigate(`/master/brand-device/${brandId || id}/error-code/add`)}
onClick={() => navigate(`/master/brand-device/${id}/error-code/add`)}
size="large"
>
Add Error Code
@@ -811,12 +760,9 @@ const EditBrandDevice = () => {
<Divider />
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
<Button onClick={handleCancel}>
Cancel
</Button>
{currentStep === 1 && (
<Button
onClick={() => navigate(`/master/brand-device/edit/${brandId || id}?tab=brand`)}
onClick={() => navigate(`/master/brand-device/edit/${id}?tab=brand`)}
style={{ marginLeft: 8 }}
>
Back to Brand Info
@@ -833,20 +779,19 @@ const EditBrandDevice = () => {
borderColor: '#23A55A',
}}
>
Next to Error Codes
Error Code
</Button>
)}
{currentStep === 1 && (
<Button
type="primary"
onClick={handleFinish}
loading={confirmLoading}
onClick={handleCancel}
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
}}
>
Update Brand Device
Kembali
</Button>
)}
</div>