repair: brandDevice sparepart integration
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useParams, useLocation } from 'react-router-dom';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
Divider,
|
||||
Typography,
|
||||
@@ -10,11 +10,6 @@ import {
|
||||
Col,
|
||||
Card,
|
||||
Spin,
|
||||
Modal,
|
||||
ConfigProvider,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
@@ -23,55 +18,59 @@ 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 ListErrorCode from './component/ListErrorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { useSparepartLogic } from './hooks/sparepart';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
import { useBrandDeviceLogic } from './hooks/useBrandDeviceLogic';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
|
||||
const defaultData = {
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_model: '',
|
||||
brand_manufacture: '',
|
||||
is_active: true,
|
||||
brand_code: '',
|
||||
};
|
||||
|
||||
const EditBrandDevice = () => {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const location = useLocation();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [brandForm] = Form.useForm();
|
||||
const [errorCodeForm] = Form.useForm();
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [fileList, setFileList] = useState([]);
|
||||
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
|
||||
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [solutionForm] = Form.useForm();
|
||||
const [sparepartForm] = Form.useForm();
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
|
||||
const [formData, setFormData] = useState({
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_model: '',
|
||||
brand_manufacture: '',
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
|
||||
errorCodeForm,
|
||||
fileList
|
||||
);
|
||||
// Custom hooks for edit mode
|
||||
const {
|
||||
confirmLoading,
|
||||
setConfirmLoading,
|
||||
currentStep,
|
||||
setCurrentStep,
|
||||
loading,
|
||||
setLoading,
|
||||
errorCodes,
|
||||
setErrorCodes,
|
||||
pendingErrorCodes,
|
||||
setPendingErrorCodes,
|
||||
editingErrorCodeKey,
|
||||
setEditingErrorCodeKey,
|
||||
isErrorCodeFormReadOnly,
|
||||
setIsErrorCodeFormReadOnly,
|
||||
handleAddErrorCode,
|
||||
handleDeleteErrorCode,
|
||||
} = useBrandDeviceLogic(true, id);
|
||||
|
||||
|
||||
const {
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
solutionsToDelete,
|
||||
firstSolutionValid,
|
||||
checkFirstSolutionValid,
|
||||
handleAddSolutionField,
|
||||
handleRemoveSolutionField,
|
||||
handleSolutionTypeChange,
|
||||
@@ -81,34 +80,6 @@ const EditBrandDevice = () => {
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
|
||||
// For spareparts, we'll use the local state directly since it's just an array of IDs
|
||||
const handleSparepartChange = (values) => {
|
||||
setSelectedSparepartIds(values || []);
|
||||
};
|
||||
|
||||
const resetSparepartFields = () => {
|
||||
setSelectedSparepartIds([]);
|
||||
};
|
||||
|
||||
const getSparepartData = () => {
|
||||
return selectedSparepartIds;
|
||||
};
|
||||
|
||||
const setSparepartsForExistingRecord = (sparepartData) => {
|
||||
if (!sparepartData) {
|
||||
setSelectedSparepartIds([]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (Array.isArray(sparepartData)) {
|
||||
setSelectedSparepartIds(sparepartData);
|
||||
} else if (typeof sparepartData === 'object' && sparepartData.spareparts) {
|
||||
setSelectedSparepartIds(sparepartData.spareparts || []);
|
||||
} else {
|
||||
setSelectedSparepartIds(sparepartData.map(sp => sp.sparepart_id || sp.brand_sparepart_id || sp.id).filter(id => id));
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchBrandData = async () => {
|
||||
const token = localStorage.getItem('token');
|
||||
@@ -117,15 +88,10 @@ const EditBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
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`);
|
||||
}
|
||||
|
||||
setBreadcrumbItems([
|
||||
{ title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span> },
|
||||
{
|
||||
title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<span
|
||||
@@ -153,15 +119,14 @@ const EditBrandDevice = () => {
|
||||
const brandData = response.data;
|
||||
const newFormData = {
|
||||
brand_name: brandData.brand_name,
|
||||
brand_type: brandData.brand_type,
|
||||
brand_model: brandData.brand_model,
|
||||
brand_manufacture: brandData.brand_manufacture,
|
||||
brand_type: brandData.brand_type || '',
|
||||
brand_model: brandData.brand_model || '',
|
||||
brand_manufacture: brandData.brand_manufacture || '',
|
||||
is_active: brandData.is_active,
|
||||
brand_code: brandData.brand_code,
|
||||
};
|
||||
|
||||
const existingErrorCodes = brandData.error_code
|
||||
? brandData.error_code.map((ec, index) => ({
|
||||
? brandData.error_code.map((ec) => ({
|
||||
key: `existing-${ec.error_code_id}`,
|
||||
error_code_id: ec.error_code_id,
|
||||
error_code: ec.error_code,
|
||||
@@ -171,10 +136,9 @@ const EditBrandDevice = () => {
|
||||
path_icon: ec.path_icon || '',
|
||||
status: ec.is_active,
|
||||
solution: ec.solution || [],
|
||||
sparepart: ec.sparepart || [],
|
||||
errorCodeIcon: ec.path_icon
|
||||
? {
|
||||
name: ec.path_icon.split('/').pop(), // Ambil nama file dari path
|
||||
name: ec.path_icon.split('/').pop(),
|
||||
uploadPath: ec.path_icon,
|
||||
url: (() => {
|
||||
const pathParts = ec.path_icon.split('/');
|
||||
@@ -191,13 +155,13 @@ const EditBrandDevice = () => {
|
||||
setFormData(newFormData);
|
||||
brandForm.setFieldsValue(newFormData);
|
||||
setErrorCodes(existingErrorCodes);
|
||||
setPendingErrorCodes(existingErrorCodes);
|
||||
|
||||
// Set the selected sparepart IDs if available in the response
|
||||
if (response.data.spareparts) {
|
||||
// Extract the IDs from the spareparts objects
|
||||
const sparepartIds = response.data.spareparts.map(sp => sp.sparepart_id);
|
||||
if (brandData.spareparts && brandData.spareparts.length > 0) {
|
||||
const sparepartIds = brandData.spareparts.map(sp => sp.sparepart_id);
|
||||
setSelectedSparepartIds(sparepartIds);
|
||||
setSparepartsForExistingRecord(sparepartIds);
|
||||
} else {
|
||||
setSelectedSparepartIds([]);
|
||||
}
|
||||
} else {
|
||||
NotifAlert({
|
||||
@@ -218,16 +182,20 @@ const EditBrandDevice = () => {
|
||||
};
|
||||
|
||||
fetchBrandData();
|
||||
}, [id, setBreadcrumbItems, navigate, brandForm, location]);
|
||||
|
||||
const handleCancel = () => {
|
||||
localStorage.removeItem(`brand_device_edit_${id}_temp_data`);
|
||||
navigate('/master/brand-device');
|
||||
};
|
||||
}, [id, setBreadcrumbItems, navigate, brandForm]);
|
||||
|
||||
const handleNextStep = async () => {
|
||||
try {
|
||||
await brandForm.validateFields();
|
||||
const currentFormData = await brandForm.validateFields();
|
||||
|
||||
setFormData({
|
||||
brand_name: currentFormData.brand_name,
|
||||
brand_type: currentFormData.brand_type || '',
|
||||
brand_model: currentFormData.brand_model || '',
|
||||
brand_manufacture: currentFormData.brand_manufacture || '',
|
||||
is_active: currentFormData.is_active,
|
||||
});
|
||||
|
||||
setCurrentStep(1);
|
||||
} catch (error) {
|
||||
NotifAlert({
|
||||
@@ -238,67 +206,53 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
navigate('/master/brand-device');
|
||||
};
|
||||
|
||||
const handleFinish = async () => {
|
||||
const currentFormData = formData;
|
||||
|
||||
if (!currentFormData.brand_name || currentFormData.brand_name.trim() === '' ||
|
||||
!currentFormData.brand_manufacture || currentFormData.brand_manufacture.trim() === '') {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Harap lengkapi semua field wajib diisi (Brand Name dan Manufacturer)!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
// Get current solution data from forms
|
||||
const currentSolutionData = getSolutionData();
|
||||
|
||||
const finalFormData = {
|
||||
brand_name: formData.brand_name,
|
||||
brand_type: formData.brand_type || '',
|
||||
brand_model: formData.brand_model || '',
|
||||
brand_manufacture: formData.brand_manufacture,
|
||||
is_active: formData.is_active,
|
||||
error_code: errorCodes.map((ec) => {
|
||||
// If editing current error code, get latest data from forms
|
||||
if (ec.key === editingErrorCodeKey) {
|
||||
return {
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
solution: currentSolutionData.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,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
// Return existing data for other error codes
|
||||
return {
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.errorCodeIcon?.uploadPath || ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
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,
|
||||
})),
|
||||
};
|
||||
}),
|
||||
const brandUpdateData = {
|
||||
brand_name: currentFormData.brand_name,
|
||||
brand_type: currentFormData.brand_type || '',
|
||||
brand_model: currentFormData.brand_model || '',
|
||||
brand_manufacture: currentFormData.brand_manufacture || '',
|
||||
is_active: currentFormData.is_active,
|
||||
spareparts: selectedSparepartIds,
|
||||
error_code: pendingErrorCodes.length > 0 ? pendingErrorCodes.map(ec => ({
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name,
|
||||
error_code_description: ec.error_code_description || '',
|
||||
error_code_color: ec.error_code_color || '#000000',
|
||||
path_icon: ec.path_icon || '',
|
||||
is_active: ec.status !== undefined ? ec.status : true,
|
||||
what_action_to_take: ec.what_action_to_take || '',
|
||||
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
|
||||
}))
|
||||
})) : []
|
||||
};
|
||||
|
||||
const sparepartData = getSparepartData();
|
||||
const updatedFinalFormData = {
|
||||
...finalFormData,
|
||||
spareparts: sparepartData,
|
||||
};
|
||||
|
||||
const response = await updateBrand(id, updatedFinalFormData);
|
||||
const response = await updateBrand(id, brandUpdateData);
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
localStorage.removeItem(`brand_device_edit_${id}_temp_data`);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
@@ -323,70 +277,50 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviewErrorCode = (record) => {
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
error_code_color: record.error_code_color,
|
||||
status: record.status,
|
||||
});
|
||||
setErrorCodeIcon(record.errorCodeIcon || null);
|
||||
setIsErrorCodeFormReadOnly(true);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
// Load solutions to solution form
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartsForExistingRecord(record.sparepart);
|
||||
} else {
|
||||
resetSparepartFields();
|
||||
}
|
||||
const handleErrorCodeIconUpload = (iconData) => {
|
||||
setErrorCodeIcon(iconData);
|
||||
};
|
||||
|
||||
const handleEditErrorCode = (record) => {
|
||||
const handleErrorCodeIconRemove = () => {
|
||||
setErrorCodeIcon(null);
|
||||
};
|
||||
|
||||
const resetErrorCodeForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
error_code_color: record.error_code_color,
|
||||
status: record.status,
|
||||
status: true,
|
||||
});
|
||||
setErrorCodeIcon(record.errorCodeIcon || null);
|
||||
setErrorCodeIcon(null);
|
||||
resetSolutionFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
// Load solutions to solution form
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
// Load spareparts to sparepart form
|
||||
if (record.sparepart && record.sparepart.length > 0) {
|
||||
setSparepartsForExistingRecord(record.sparepart);
|
||||
}
|
||||
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
if (formElement) {
|
||||
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
try {
|
||||
// Validate error code form
|
||||
const errorCodeValues = await errorCodeForm.validateFields();
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
// Get solution data from solution form
|
||||
// Local wrapper for handleAddErrorCode from useBrandDeviceLogic
|
||||
const handleAddErrorCodeLocal = async () => {
|
||||
try {
|
||||
const errorCodeValues = await errorCodeForm.validateFields();
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
if (solutionData.length === 0) {
|
||||
// Validate error code fields
|
||||
if (!errorCodeValues.error_code || !errorCodeValues.error_code_name) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Error code dan error name wajib diisi!',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate solution data
|
||||
if (!solutionData || solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
@@ -395,27 +329,32 @@ const EditBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get sparepart data from sparepart form
|
||||
const sparepartData = getSparepartData();
|
||||
// Validate each solution has name
|
||||
const invalidSolution = solutionData.find(sol => !sol.solution_name || sol.solution_name.trim() === '');
|
||||
if (invalidSolution) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap solution harus memiliki nama!',
|
||||
});
|
||||
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,
|
||||
is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
||||
solution: solutionData,
|
||||
...(sparepartData && sparepartData.length > 0 && { sparepart: sparepartData }),
|
||||
errorCodeIcon: errorCodeIcon,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}`,
|
||||
};
|
||||
|
||||
let updatedErrorCodes;
|
||||
let updatedPendingErrorCodes;
|
||||
if (editingErrorCodeKey) {
|
||||
// Update existing error code
|
||||
updatedErrorCodes = errorCodes.map((item) => {
|
||||
updatedPendingErrorCodes = pendingErrorCodes.map((item) => {
|
||||
if (item.key === editingErrorCodeKey) {
|
||||
return {
|
||||
...item,
|
||||
@@ -431,8 +370,7 @@ const EditBrandDevice = () => {
|
||||
message: 'Error code berhasil diupdate!',
|
||||
});
|
||||
} else {
|
||||
// Add new error code
|
||||
updatedErrorCodes = [...errorCodes, newErrorCode];
|
||||
updatedPendingErrorCodes = [...pendingErrorCodes, newErrorCode];
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
@@ -440,9 +378,9 @@ const EditBrandDevice = () => {
|
||||
});
|
||||
}
|
||||
|
||||
setErrorCodes(updatedErrorCodes);
|
||||
setPendingErrorCodes(updatedPendingErrorCodes);
|
||||
setErrorCodes(updatedPendingErrorCodes);
|
||||
|
||||
// Delay form reset to prevent data loss
|
||||
setTimeout(() => {
|
||||
resetErrorCodeForm();
|
||||
}, 100);
|
||||
@@ -455,92 +393,45 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const resetErrorCodeForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
const handlePreviewErrorCode = (record) => {
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text',
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
error_code_color: record.error_code_color,
|
||||
status: record.status,
|
||||
});
|
||||
setFileList([]);
|
||||
setErrorCodeIcon(null);
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
setErrorCodeIcon(record.errorCodeIcon || null);
|
||||
setIsErrorCodeFormReadOnly(true);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteErrorCode = async (key) => {
|
||||
if (errorCodes.length <= 1) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap brand harus memiliki minimal 1 error code!',
|
||||
});
|
||||
return;
|
||||
const handleEditErrorCode = (record) => {
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
error_code_color: record.error_code_color,
|
||||
status: record.status,
|
||||
});
|
||||
setErrorCodeIcon(record.errorCodeIcon || null);
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, solutionForm);
|
||||
}
|
||||
|
||||
const updatedErrorCodes = errorCodes.filter((item) => item.key !== key);
|
||||
setErrorCodes(updatedErrorCodes);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil dihapus!',
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
resetSolutionFields();
|
||||
resetSparepartFields();
|
||||
setErrorCodeIcon(null);
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconUpload = (iconData) => {
|
||||
setErrorCodeIcon(iconData);
|
||||
};
|
||||
|
||||
const handleErrorCodeIconRemove = () => {
|
||||
setErrorCodeIcon(null);
|
||||
};
|
||||
|
||||
const handleFileView = (pathSolution, fileType) => {
|
||||
localStorage.setItem(`brand_device_edit_${id}_last_phase`, currentStep.toString());
|
||||
|
||||
const tempData = {
|
||||
errorCodes: errorCodes,
|
||||
fileList: fileList,
|
||||
solutionFields: solutionFields,
|
||||
solutionTypes: solutionTypes,
|
||||
solutionStatuses: solutionStatuses,
|
||||
editingErrorCodeKey: editingErrorCodeKey,
|
||||
isErrorCodeFormReadOnly: isErrorCodeFormReadOnly,
|
||||
solutionsToDelete: Array.from(solutionsToDelete),
|
||||
currentSolutionData: window.currentSolutionData || {},
|
||||
};
|
||||
localStorage.setItem(`brand_device_edit_${id}_temp_data`, JSON.stringify(tempData));
|
||||
|
||||
const filePath = pathSolution || '';
|
||||
if (!filePath) return;
|
||||
|
||||
const parts = filePath.split('/');
|
||||
if (parts.length < 2) return;
|
||||
|
||||
const [folder, filename] = parts;
|
||||
const encodedFileName = encodeURIComponent(filename);
|
||||
const navigationPath = `/master/brand-device/edit/${id}/files/${folder}/${encodedFileName}`;
|
||||
navigate(navigationPath);
|
||||
};
|
||||
|
||||
const handleSolutionFileUpload = (file) => {
|
||||
setFileList((prevList) => [...prevList, file]);
|
||||
};
|
||||
|
||||
const handleFileRemove = (file) => {
|
||||
const newFileList = fileList.filter((item) => item.uid !== file.uid);
|
||||
setFileList(newFileList);
|
||||
const formElement = document.querySelector('.ant-form');
|
||||
if (formElement) {
|
||||
formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
@@ -553,6 +444,9 @@ const EditBrandDevice = () => {
|
||||
setFormData((prev) => ({ ...prev, ...allValues }))
|
||||
}
|
||||
isEdit={true}
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={setSelectedSparepartIds}
|
||||
showSparepartSection={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -561,7 +455,7 @@ const EditBrandDevice = () => {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<Col span={8}>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -589,12 +483,12 @@ const EditBrandDevice = () => {
|
||||
errorCodeIcon={errorCodeIcon}
|
||||
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
||||
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
||||
onAddErrorCode={handleAddErrorCode}
|
||||
onAddErrorCode={handleAddErrorCodeLocal}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -610,140 +504,53 @@ const EditBrandDevice = () => {
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text',
|
||||
}}
|
||||
onValuesChange={checkFirstSolutionValid}
|
||||
>
|
||||
<SolutionForm
|
||||
solutionForm={solutionForm}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
checkFirstSolutionValid={checkFirstSolutionValid}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
onFileUpload={handleSolutionFileUpload}
|
||||
onFileView={handleFileView}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
Spareparts
|
||||
Error Codes ({errorCodes.length})
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
>
|
||||
<Form
|
||||
form={sparepartForm}
|
||||
layout="vertical"
|
||||
>
|
||||
<SparepartForm
|
||||
sparepartForm={sparepartForm}
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={handleSparepartChange}
|
||||
isReadOnly={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={24} style={{ marginTop: 16 }}>
|
||||
<Card size="small" title={`Error Codes (${errorCodes.length})`}>
|
||||
<Table
|
||||
dataSource={errorCodes}
|
||||
columns={[
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'error_code',
|
||||
key: 'error_code',
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
title: 'Sol',
|
||||
key: 'Sol',
|
||||
width: '10%',
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
const solutionCount = record.solution
|
||||
? record.solution.length
|
||||
: 0;
|
||||
return (
|
||||
<Tag
|
||||
color={solutionCount > 0 ? 'green' : 'red'}
|
||||
>
|
||||
{solutionCount} Sol
|
||||
</Tag>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: '20%',
|
||||
align: 'center',
|
||||
render: (_, { status }) => (
|
||||
<Tag color={status ? 'green' : 'red'}>
|
||||
{status ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#1890ff' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EyeOutlined
|
||||
style={{ color: '#1890ff' }}
|
||||
/>
|
||||
}
|
||||
onClick={() =>
|
||||
handlePreviewErrorCode(record)
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
style={{ borderColor: '#faad14' }}
|
||||
size="small"
|
||||
icon={
|
||||
<EditOutlined
|
||||
style={{ color: '#faad14' }}
|
||||
/>
|
||||
}
|
||||
onClick={() => handleEditErrorCode(record)}
|
||||
/>
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
style={{ borderColor: 'red' }}
|
||||
size="small"
|
||||
icon={<DeleteOutlined />}
|
||||
onClick={() =>
|
||||
handleDeleteErrorCode(record.key)
|
||||
}
|
||||
/>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]}
|
||||
rowKey="key"
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
hideOnSinglePage: true,
|
||||
}}
|
||||
size="small"
|
||||
scroll={{ y: 300 }}
|
||||
<ListErrorCode
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
/>
|
||||
<div style={{ marginTop: 16, textAlign: 'center' }}>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={handleCreateNewErrorCode}
|
||||
style={{
|
||||
width: '100%',
|
||||
borderColor: '#23A55A',
|
||||
color: '#23A55A'
|
||||
}}
|
||||
>
|
||||
+ Add New Error Code
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -807,4 +614,4 @@ const EditBrandDevice = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EditBrandDevice;
|
||||
export default EditBrandDevice;
|
||||
Reference in New Issue
Block a user