1313 lines
55 KiB
JavaScript
1313 lines
55 KiB
JavaScript
import { useEffect, useState, useCallback, useMemo } from 'react';
|
|
import { useNavigate, useParams, useSearchParams, useLocation } from 'react-router-dom';
|
|
import {
|
|
Divider,
|
|
Typography,
|
|
Button,
|
|
Steps,
|
|
Form,
|
|
Row,
|
|
Col,
|
|
Card,
|
|
Spin,
|
|
Tag,
|
|
Space,
|
|
Input,
|
|
ConfigProvider
|
|
} from 'antd';
|
|
import { EyeOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
|
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../components/Global/ToastNotif';
|
|
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
|
import { getBrandById, updateBrand, getErrorCodesByBrandId, getErrorCodeById, deleteErrorCode, updateErrorCode as updateErrorCodeAPI, createErrorCode as createErrorCodeAPI } from '../../../api/master-brand';
|
|
import { getFileUrl } from '../../../api/file-uploads';
|
|
import { SendRequest } from '../../../components/Global/ApiRequest';
|
|
import BrandForm from './component/BrandForm';
|
|
import ErrorCodeForm from './component/ErrorCodeForm';
|
|
import SolutionForm from './component/SolutionForm';
|
|
import SparepartSelect from './component/SparepartSelect';
|
|
import ListErrorCode from './component/ListErrorCode';
|
|
|
|
const { Title } = Typography;
|
|
const { Step } = Steps;
|
|
|
|
const EditBrandDevice = () => {
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
const [searchParams] = useSearchParams();
|
|
const location = useLocation();
|
|
const { setBreadcrumbItems } = useBreadcrumb();
|
|
const [brandForm] = Form.useForm();
|
|
const [errorCodeForm] = Form.useForm();
|
|
const [solutionForm] = Form.useForm();
|
|
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
|
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const tab = searchParams.get('tab');
|
|
const [currentStep, setCurrentStep] = useState(tab === 'error-codes' ? 1 : 0);
|
|
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null);
|
|
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false);
|
|
const [searchText, setSearchText] = useState('');
|
|
const [apiErrorCodes, setApiErrorCodes] = useState([]);
|
|
const [trigerFilter, setTrigerFilter] = useState(false);
|
|
const [brandInfo, setBrandInfo] = useState({});
|
|
const [tempErrorCodes, setTempErrorCodes] = useState([]);
|
|
const [existingErrorCodes, setExistingErrorCodes] = useState([]);
|
|
const [selectedErrorCode, setSelectedErrorCode] = useState(null);
|
|
const [solutionFields, setSolutionFields] = useState([0]);
|
|
const [solutionTypes, setSolutionTypes] = useState({ 0: 'text' });
|
|
const [solutionStatuses, setSolutionStatuses] = useState({ 0: true });
|
|
const [currentSolutionData, setCurrentSolutionData] = useState([]);
|
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
|
|
|
const getSolutionData = () => {
|
|
if (!solutionForm) return [];
|
|
try {
|
|
const values = solutionForm.getFieldsValue(true);
|
|
|
|
let solutions = [];
|
|
|
|
if (values.solution_items) {
|
|
if (Array.isArray(values.solution_items)) {
|
|
solutions = values.solution_items.filter(Boolean);
|
|
} else if (typeof values.solution_items === 'object') {
|
|
solutions = Object.values(values.solution_items).filter(Boolean);
|
|
}
|
|
}
|
|
|
|
return solutions;
|
|
} catch (error) {
|
|
return [];
|
|
}
|
|
};
|
|
|
|
const resetSolutionFields = () => {
|
|
if (solutionForm && solutionForm.resetFields) {
|
|
solutionForm.resetFields();
|
|
solutionForm.setFieldsValue({
|
|
solution_items: {
|
|
0: {
|
|
name: '',
|
|
type: 'text',
|
|
text: '',
|
|
status: true
|
|
}
|
|
}
|
|
});
|
|
}
|
|
setCurrentSolutionData([]);
|
|
};
|
|
|
|
const setSolutionsForExistingRecord = (solutions, targetForm) => {
|
|
|
|
if (!targetForm || !solutions || solutions.length === 0) {
|
|
return;
|
|
}
|
|
|
|
targetForm.resetFields();
|
|
|
|
const solutionItems = {};
|
|
const newSolutionFields = [];
|
|
const newSolutionTypes = {};
|
|
const newSolutionStatuses = {};
|
|
|
|
solutions.forEach((solution, index) => {
|
|
const fieldKey = index;
|
|
newSolutionFields.push(fieldKey);
|
|
|
|
const isFileType = solution.type_solution && solution.type_solution !== 'text';
|
|
newSolutionTypes[fieldKey] = isFileType ? 'file' : 'text';
|
|
newSolutionStatuses[fieldKey] = solution.is_active;
|
|
|
|
let fileObject = null;
|
|
if (isFileType && (solution.path_solution || solution.path_document)) {
|
|
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',
|
|
type_solution: solution.type_solution,
|
|
isExisting: true,
|
|
size: 0,
|
|
url: solution.path_solution || solution.path_document
|
|
};
|
|
}
|
|
|
|
solutionItems[fieldKey] = {
|
|
brand_code_solution_id: solution.brand_code_solution_id,
|
|
name: solution.solution_name || '',
|
|
type: isFileType ? 'file' : 'text',
|
|
text: solution.text_solution || '',
|
|
status: solution.is_active,
|
|
file: fileObject,
|
|
fileUpload: fileObject,
|
|
path_solution: solution.path_solution || solution.path_document || null,
|
|
fileName: solution.file_upload_name || null
|
|
};
|
|
});
|
|
|
|
setSolutionFields(newSolutionFields);
|
|
|
|
setSolutionTypes(newSolutionTypes);
|
|
|
|
setSolutionStatuses(newSolutionStatuses);
|
|
|
|
|
|
targetForm.resetFields();
|
|
|
|
setTimeout(() => {
|
|
targetForm.setFieldsValue({
|
|
solution_items: solutionItems
|
|
});
|
|
|
|
setTimeout(() => {
|
|
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, 'status'], solution.status);
|
|
targetForm.setFieldValue(['solution_items', key, 'path_solution'], solution.path_solution);
|
|
targetForm.setFieldValue(['solution_items', key, 'fileName'], solution.fileName);
|
|
});
|
|
|
|
|
|
const finalValues = targetForm.getFieldsValue();
|
|
}, 100);
|
|
}, 100);
|
|
};
|
|
|
|
const handleAddSolutionField = () => {
|
|
const newKey = Math.max(...solutionFields, 0) + 1;
|
|
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));
|
|
const newTypes = { ...solutionTypes };
|
|
const newStatuses = { ...solutionStatuses };
|
|
delete newTypes[fieldKey];
|
|
delete newStatuses[fieldKey];
|
|
setSolutionTypes(newTypes);
|
|
setSolutionStatuses(newStatuses);
|
|
|
|
const currentValues = solutionForm.getFieldsValue();
|
|
if (currentValues.solution_items && currentValues.solution_items[fieldKey]) {
|
|
delete currentValues.solution_items[fieldKey];
|
|
solutionForm.setFieldsValue(currentValues);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSolutionTypeChange = (fieldKey, type) => {
|
|
setSolutionTypes(prev => ({ ...prev, [fieldKey]: type }));
|
|
|
|
if (type === 'file') {
|
|
solutionForm.setFieldValue(['solution_items', fieldKey, 'text'], '');
|
|
}
|
|
|
|
if (type === 'text') {
|
|
solutionForm.setFieldValue(['solution_items', fieldKey, 'file'], null);
|
|
solutionForm.setFieldValue(['solution_items', fieldKey, 'fileUpload'], null);
|
|
}
|
|
};
|
|
|
|
const handleSolutionStatusChange = (fieldKey, status) => {
|
|
setSolutionStatuses(prev => ({ ...prev, [fieldKey]: status }));
|
|
};
|
|
|
|
useEffect(() => {
|
|
errorCodeForm.setFieldsValue({
|
|
status: true,
|
|
});
|
|
|
|
const fetchBrandData = async () => {
|
|
const token = localStorage.getItem('token');
|
|
if (!token) {
|
|
navigate('/signin');
|
|
return;
|
|
}
|
|
|
|
const tab = searchParams.get('tab') || 'brand';
|
|
|
|
setBreadcrumbItems([
|
|
{
|
|
title: <span style={{ fontSize: '14px', fontWeight: 'bold' }}>• Master</span>
|
|
},
|
|
{
|
|
title: (
|
|
<span
|
|
style={{ fontSize: '14px', fontWeight: 'bold', cursor: 'pointer' }}
|
|
onClick={() => navigate('/master/brand-device')}
|
|
>
|
|
Brand Device
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
title: (
|
|
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
|
|
Edit Brand Device
|
|
</span>
|
|
),
|
|
},
|
|
]);
|
|
|
|
try {
|
|
setLoading(true);
|
|
const response = await getBrandById(id);
|
|
|
|
if (response && response.statusCode === 200) {
|
|
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 || '',
|
|
brand_model: brandData.brand_model || '',
|
|
is_active: brandData.is_active
|
|
};
|
|
|
|
setBrandInfo(brandInfoData);
|
|
brandForm.setFieldsValue(brandInfoData);
|
|
|
|
if (brandData.brand_id) {
|
|
try {
|
|
const errorCodesResponse = await getErrorCodesByBrandId(id || brandData.brand_id);
|
|
if (errorCodesResponse && errorCodesResponse.statusCode === 200) {
|
|
const apiErrorData = errorCodesResponse.data || [];
|
|
const existingCodes = apiErrorData.map(ec => ({
|
|
...ec,
|
|
tempId: `existing_${ec.error_code_id}`,
|
|
status: 'existing',
|
|
solution: ec.solution || [],
|
|
spareparts: ec.spareparts || []
|
|
}));
|
|
setExistingErrorCodes(existingCodes);
|
|
setApiErrorCodes(existingCodes);
|
|
}
|
|
} catch (error) {
|
|
}
|
|
}
|
|
|
|
setCurrentStep(tab === 'brand' ? 0 : 1);
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: response?.message || 'Failed to fetch brand device data',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: error.message || 'Failed to fetch brand device data',
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchBrandData();
|
|
}, [id, navigate]);
|
|
|
|
useEffect(() => {
|
|
const tab = searchParams.get('tab') || 'brand';
|
|
setCurrentStep(tab === 'brand' ? 0 : 1);
|
|
}, [searchParams]);
|
|
|
|
|
|
useEffect(() => {
|
|
if (currentStep === 1 && id) {
|
|
setTrigerFilter(prev => !prev);
|
|
}
|
|
}, [currentStep, id]);
|
|
|
|
// Auto refresh error codes when returning from add/edit error code
|
|
useEffect(() => {
|
|
if (location.state?.refreshErrorCodes) {
|
|
// Trigger refresh of error codes list
|
|
setTrigerFilter(prev => !prev);
|
|
|
|
// Clear the state to prevent infinite refresh
|
|
const state = { ...location.state };
|
|
delete state.refreshErrorCodes;
|
|
navigate(location.pathname + location.search, {
|
|
replace: true,
|
|
state
|
|
});
|
|
}
|
|
}, [location, navigate]);
|
|
|
|
const addErrorCode = (newErrorCode) => {
|
|
// Generate unique tempId with timestamp and random number
|
|
const uniqueId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
const errorCodeWithId = {
|
|
...newErrorCode,
|
|
tempId: uniqueId,
|
|
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 deleteLocalErrorCode = (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 {
|
|
setConfirmLoading(true);
|
|
|
|
const brandValues = brandForm.getFieldsValue();
|
|
|
|
if (!brandValues.brand_name || brandValues.brand_name.trim() === '') {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Brand Name wajib diisi!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!brandValues.brand_manufacture || brandValues.brand_manufacture.trim() === '') {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Manufacturer wajib diisi!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const brandApiData = {
|
|
brand_name: brandValues.brand_name.trim(),
|
|
brand_type: brandValues.brand_type || '',
|
|
brand_manufacture: brandValues.brand_manufacture.trim(),
|
|
brand_model: brandValues.brand_model || '',
|
|
is_active: brandValues.is_active !== undefined ? brandValues.is_active : true
|
|
};
|
|
|
|
const response = await updateBrand(id, brandApiData);
|
|
|
|
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Brand device berhasil diupdate.',
|
|
});
|
|
|
|
const currentBrandId = id;
|
|
if (currentBrandId) {
|
|
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
|
|
}
|
|
} 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 brand device',
|
|
});
|
|
} finally {
|
|
setConfirmLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
navigate('/master/brand-device');
|
|
};
|
|
|
|
|
|
const handleErrorCodeIconUpload = (iconData) => {
|
|
setErrorCodeIcon(iconData);
|
|
};
|
|
|
|
const handleErrorCodeIconRemove = () => {
|
|
setErrorCodeIcon(null);
|
|
};
|
|
|
|
const resetErrorCodeForm = () => {
|
|
errorCodeForm.resetFields();
|
|
errorCodeForm.setFieldsValue({
|
|
status: true,
|
|
});
|
|
setErrorCodeIcon(null);
|
|
resetSolutionFields();
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(null);
|
|
setSelectedSparepartIds([]);
|
|
};
|
|
|
|
const handleCreateNewErrorCode = () => {
|
|
resetErrorCodeForm();
|
|
setCurrentSolutionData([]);
|
|
};
|
|
|
|
const handleSaveErrorCode = async () => {
|
|
try {
|
|
setConfirmLoading(true);
|
|
const errorCodeValues = await errorCodeForm.validateFields();
|
|
const solutionData = getSolutionData();
|
|
|
|
if (!errorCodeValues.error_code || !errorCodeValues.error_code_name) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Error code dan error name wajib diisi!',
|
|
});
|
|
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 solutionType = solution.type || 'text';
|
|
|
|
let typeSolution = solutionType === 'text' ? 'text' : 'image';
|
|
if (solution.file && solution.file.type_solution) {
|
|
typeSolution = solution.file.type_solution;
|
|
} else if (solution.fileUpload && solution.fileUpload.type_solution) {
|
|
typeSolution = solution.fileUpload.type_solution;
|
|
}
|
|
|
|
const formattedSolution = {
|
|
solution_name: solution.name,
|
|
type_solution: typeSolution,
|
|
is_active: solution.status !== false,
|
|
};
|
|
|
|
if (typeSolution === 'text') {
|
|
formattedSolution.text_solution = solution.text || '';
|
|
formattedSolution.path_solution = '';
|
|
} else {
|
|
formattedSolution.text_solution = '';
|
|
|
|
formattedSolution.path_solution = solution.path_solution || solution.file?.uploadPath || solution.fileUpload?.uploadPath || '';
|
|
}
|
|
|
|
if (formattedSolution.brand_code_solution_id) {
|
|
delete formattedSolution.brand_code_solution_id;
|
|
}
|
|
|
|
return formattedSolution;
|
|
});
|
|
|
|
const payload = {
|
|
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 || '',
|
|
is_active: errorCodeValues.status === undefined ? true : errorCodeValues.status,
|
|
solution: formattedSolutions,
|
|
spareparts: selectedSparepartIds || []
|
|
};
|
|
|
|
if (!editingErrorCodeKey || !editingErrorCodeKey.startsWith('existing_')) {
|
|
payload.error_code = errorCodeValues.error_code;
|
|
}
|
|
|
|
let response;
|
|
|
|
if (editingErrorCodeKey && editingErrorCodeKey.startsWith('existing_')) {
|
|
const errorCodeId = editingErrorCodeKey.replace('existing_', '');
|
|
response = await updateErrorCodeAPI(id, errorCodeId, payload);
|
|
} else {
|
|
response = await createErrorCodeAPI(id, payload);
|
|
}
|
|
|
|
|
|
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: editingErrorCodeKey ? 'Error code berhasil diupdate!' : 'Error code berhasil ditambahkan!',
|
|
});
|
|
|
|
// Clear temp error codes after successful save to prevent duplication
|
|
setTempErrorCodes(prev => prev.filter(ec => {
|
|
// Keep existing error codes that weren't just saved
|
|
if (ec.status === 'existing' || ec.tempId.startsWith('existing_')) {
|
|
return true;
|
|
}
|
|
// Remove the newly saved error code to prevent duplication
|
|
return ec.tempId !== editingErrorCodeKey;
|
|
}));
|
|
|
|
setTrigerFilter(prev => !prev);
|
|
resetErrorCodeForm();
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: response?.message || 'Gagal menyimpan error code',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: error.message || 'Harap isi semua kolom wajib!',
|
|
});
|
|
} finally {
|
|
setConfirmLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadErrorCodeData = (errorCode, isPreview = false) => {
|
|
if (errorCode) {
|
|
|
|
const formValues = {
|
|
error_code: errorCode.error_code,
|
|
error_code_name: errorCode.error_code_name,
|
|
error_code_description: errorCode.error_code_description || '',
|
|
error_code_color: errorCode.error_code_color && errorCode.error_code_color !== '' ? errorCode.error_code_color : '#000000',
|
|
status: errorCode.is_active,
|
|
};
|
|
|
|
errorCodeForm.setFieldsValue(formValues);
|
|
|
|
if (errorCode.path_icon && errorCode.path_icon !== '') {
|
|
const iconData = {
|
|
name: errorCode.path_icon.split('/').pop(),
|
|
uploadPath: errorCode.path_icon,
|
|
};
|
|
setErrorCodeIcon(iconData);
|
|
} else {
|
|
setErrorCodeIcon(null);
|
|
}
|
|
|
|
setIsErrorCodeFormReadOnly(isPreview);
|
|
|
|
const editingKey = errorCode.tempId || `existing_${errorCode.error_code_id}`;
|
|
setEditingErrorCodeKey(editingKey);
|
|
|
|
}
|
|
};
|
|
|
|
const handlePreviewErrorCode = (record) => {
|
|
const errorCode = getErrorCodeById(record.tempId || record.error_code_id);
|
|
loadErrorCodeData(errorCode, true);
|
|
};
|
|
|
|
const handleEditErrorCode = (record) => {
|
|
const errorCode = getErrorCodeById(record.tempId || record.error_code_id);
|
|
loadErrorCodeData(errorCode, false);
|
|
};
|
|
|
|
|
|
const handleDeleteErrorCode = async (record) => {
|
|
NotifConfirmDialog({
|
|
icon: 'question',
|
|
title: 'Konfirmasi Hapus',
|
|
message: `Apakah Anda yakin ingin menghapus error code "${record.error_code}"?`,
|
|
onConfirm: async () => {
|
|
try {
|
|
if (record.status === 'existing' && record.error_code_id) {
|
|
const response = await deleteErrorCode(id, record.error_code_id);
|
|
if (response && response.statusCode === 200) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil dihapus!',
|
|
});
|
|
setTrigerFilter(prev => !prev);
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: response?.message || 'Failed to delete error code',
|
|
});
|
|
}
|
|
} else {
|
|
const tempId = record.tempId;
|
|
deleteLocalErrorCode(tempId, true);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil dihapus!',
|
|
});
|
|
setTrigerFilter(prev => !prev);
|
|
}
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: error.message || 'Failed to delete error code',
|
|
});
|
|
}
|
|
},
|
|
onCancel: () => { }
|
|
});
|
|
};
|
|
|
|
const mergedErrorCodes = useMemo(() => {
|
|
const allErrorCodes = [
|
|
...existingErrorCodes.map(ec => ({ ...ec, status: 'existing' })),
|
|
...tempErrorCodes
|
|
];
|
|
|
|
const activeErrorCodes = allErrorCodes.filter(ec => ec.status !== 'deleted');
|
|
|
|
if (searchText) {
|
|
return activeErrorCodes.filter(ec =>
|
|
ec.error_code.toLowerCase().includes(searchText.toLowerCase()) ||
|
|
ec.error_code_name.toLowerCase().includes(searchText.toLowerCase())
|
|
);
|
|
}
|
|
|
|
return activeErrorCodes;
|
|
}, [existingErrorCodes, tempErrorCodes, searchText]);
|
|
|
|
const errorCodeColumns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
|
{
|
|
title: 'No',
|
|
key: 'no',
|
|
width: '5%',
|
|
align: 'center',
|
|
render: (_, __, index) => index + 1,
|
|
},
|
|
{
|
|
title: 'Error Code',
|
|
dataIndex: 'error_code',
|
|
key: 'error_code',
|
|
width: '20%',
|
|
render: (text, record) => (
|
|
<Space>
|
|
{text}
|
|
</Space>
|
|
),
|
|
},
|
|
{
|
|
title: 'Error Name',
|
|
dataIndex: 'error_code_name',
|
|
key: 'error_code_name',
|
|
width: '25%',
|
|
},
|
|
{
|
|
title: 'Status',
|
|
dataIndex: 'is_active',
|
|
key: 'is_active',
|
|
width: '10%',
|
|
align: 'center',
|
|
render: (_, { is_active }) => (
|
|
<Tag color={is_active ? 'green' : 'red'}>
|
|
{is_active ? 'Active' : 'Inactive'}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: 'Action',
|
|
key: 'action',
|
|
align: 'center',
|
|
width: '15%',
|
|
render: (_, record) => (
|
|
<Space>
|
|
<Button
|
|
icon={<EyeOutlined />}
|
|
onClick={() => showPreviewModal(record)}
|
|
style={{
|
|
color: '#1890ff',
|
|
borderColor: '#1890ff',
|
|
}}
|
|
/>
|
|
<Button
|
|
icon={<EditOutlined />}
|
|
onClick={() => showEditModal(record)}
|
|
style={{
|
|
color: '#faad14',
|
|
borderColor: '#faad14',
|
|
}}
|
|
/>
|
|
<Button
|
|
danger
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => showDeleteDialog(record)}
|
|
style={{
|
|
borderColor: '#ff4d4f',
|
|
}}
|
|
/>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleBrandFormValuesChange = useCallback((changedValues, allValues) => {
|
|
setBrandInfo(allValues);
|
|
}, [setBrandInfo]);
|
|
|
|
const handleSearch = () => {
|
|
setTrigerFilter((prev) => !prev);
|
|
};
|
|
|
|
const handleSearchClear = () => {
|
|
setSearchText('');
|
|
setTrigerFilter((prev) => !prev);
|
|
};
|
|
|
|
const getErrorCodesData = async (params) => {
|
|
try {
|
|
const criteria = params.get('criteria') || '';
|
|
const page = parseInt(params.get('page')) || 1;
|
|
const limit = parseInt(params.get('limit')) || 10;
|
|
const currentBrandId = id;
|
|
|
|
if (!currentBrandId) {
|
|
return {
|
|
data: [],
|
|
pagination: {
|
|
current_page: page,
|
|
current_limit: limit,
|
|
total_limit: 0,
|
|
total_page: 0,
|
|
}
|
|
};
|
|
}
|
|
|
|
const queryParams = new URLSearchParams({
|
|
page: page.toString(),
|
|
limit: limit.toString(),
|
|
...(criteria && { criteria })
|
|
});
|
|
|
|
const response = await getErrorCodesByBrandId(currentBrandId, queryParams);
|
|
|
|
if (response && response.statusCode === 200) {
|
|
const apiData = response.data || [];
|
|
|
|
const contextExistingMap = new Map();
|
|
existingErrorCodes.forEach(ec => {
|
|
if (ec.status === 'modified' || ec.status === 'deleted') {
|
|
contextExistingMap.set(ec.error_code_id, ec);
|
|
}
|
|
});
|
|
|
|
const existingCodes = apiData.map(ec => {
|
|
const contextModified = contextExistingMap.get(ec.error_code_id);
|
|
if (contextModified) {
|
|
return {
|
|
...contextModified,
|
|
tempId: `existing_${ec.error_code_id}`,
|
|
solution: contextModified.solution || ec.solution || [],
|
|
spareparts: contextModified.spareparts || ec.spareparts || []
|
|
};
|
|
} else {
|
|
return {
|
|
...ec,
|
|
tempId: `existing_${ec.error_code_id}`,
|
|
status: 'existing',
|
|
solution: ec.solution || [],
|
|
spareparts: ec.spareparts || []
|
|
};
|
|
}
|
|
});
|
|
|
|
const activeExistingCodes = existingCodes.filter(ec => ec.status !== 'deleted');
|
|
|
|
const allErrorCodes = [...activeExistingCodes, ...tempErrorCodes.filter(ec => ec.status !== 'deleted')];
|
|
|
|
let filteredData = allErrorCodes;
|
|
|
|
if (search) {
|
|
filteredData = allErrorCodes.filter(ec =>
|
|
ec.error_code.toLowerCase().includes(search.toLowerCase()) ||
|
|
ec.error_code_name.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
}
|
|
|
|
const startIndex = 0;
|
|
const endIndex = startIndex + limit;
|
|
const paginatedData = filteredData.slice(startIndex, endIndex);
|
|
|
|
return {
|
|
data: paginatedData,
|
|
pagination: {
|
|
current_page: page,
|
|
current_limit: limit,
|
|
total_limit: filteredData.length,
|
|
total_page: Math.ceil(filteredData.length / limit),
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
data: [],
|
|
pagination: {
|
|
current_page: page,
|
|
current_limit: limit,
|
|
total_limit: 0,
|
|
total_page: 0,
|
|
}
|
|
};
|
|
} catch (error) {
|
|
return {
|
|
data: [],
|
|
pagination: {
|
|
current_page: 1,
|
|
current_limit: 10,
|
|
total_limit: 0,
|
|
total_page: 0,
|
|
}
|
|
};
|
|
}
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
if (currentStep === 0) {
|
|
return (
|
|
<div style={{ position: 'relative' }}>
|
|
{loading && (
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: 'rgba(255, 255, 255, 0.7)',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 10,
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<Spin size="large" />
|
|
</div>
|
|
)}
|
|
<BrandForm
|
|
form={brandForm}
|
|
onValuesChange={handleBrandFormValuesChange}
|
|
isEdit={true}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (currentStep === 1) {
|
|
const handleErrorCodeSelect = async (errorCode) => {
|
|
|
|
setSelectedErrorCode(errorCode);
|
|
|
|
try {
|
|
|
|
|
|
|
|
const directResponse = await SendRequest({
|
|
method: 'get',
|
|
prefix: `error-code/${errorCode.error_code_id}`,
|
|
});
|
|
|
|
|
|
const apiResponse = directResponse.data;
|
|
|
|
|
|
if (apiResponse && apiResponse.statusCode === 200 && apiResponse.data) {
|
|
const fullErrorCodeData = {
|
|
...apiResponse.data,
|
|
tempId: `existing_${apiResponse.data.error_code_id}`
|
|
};
|
|
loadErrorCodeData(fullErrorCodeData, false);
|
|
|
|
if (apiResponse.data.solution && apiResponse.data.solution.length > 0) {
|
|
setCurrentSolutionData(apiResponse.data.solution);
|
|
setSolutionsForExistingRecord(apiResponse.data.solution, solutionForm);
|
|
}
|
|
|
|
if (apiResponse.data.spareparts && apiResponse.data.spareparts.length > 0) {
|
|
setSelectedSparepartIds(apiResponse.data.spareparts.map(sp => sp.sparepart_id));
|
|
} else {
|
|
setSelectedSparepartIds([]);
|
|
}
|
|
} else {
|
|
const basicErrorCodeData = {
|
|
...errorCode,
|
|
tempId: `existing_${errorCode.error_code_id}`
|
|
};
|
|
loadErrorCodeData(basicErrorCodeData, false);
|
|
resetSolutionFields();
|
|
setSelectedSparepartIds([]);
|
|
}
|
|
} catch (error) {
|
|
const basicErrorCodeData = {
|
|
...errorCode,
|
|
tempId: `existing_${errorCode.error_code_id}`
|
|
};
|
|
loadErrorCodeData(basicErrorCodeData, false);
|
|
}
|
|
};
|
|
|
|
const handleAddNew = () => {
|
|
setSelectedErrorCode(null);
|
|
resetErrorCodeForm();
|
|
};
|
|
|
|
return (
|
|
<Row gutter={[16, 8]} style={{ minHeight: '70vh' }}>
|
|
<Col xs={24} md={8} lg={8}>
|
|
<ListErrorCode
|
|
brandId={id}
|
|
selectedErrorCode={selectedErrorCode}
|
|
onErrorCodeSelect={handleErrorCodeSelect}
|
|
tempErrorCodes={tempErrorCodes}
|
|
trigerFilter={trigerFilter}
|
|
searchText={searchText}
|
|
onSearchChange={(value) => {
|
|
setSearchText(value);
|
|
if (value === '') {
|
|
setTrigerFilter((prev) => !prev);
|
|
}
|
|
}}
|
|
onSearch={handleSearch}
|
|
onSearchClear={handleSearchClear}
|
|
/>
|
|
</Col>
|
|
|
|
<Col xs={24} md={16} lg={16}>
|
|
<div style={{
|
|
paddingLeft: '12px'
|
|
}}>
|
|
<Card
|
|
title={
|
|
<span style={{
|
|
fontSize: '16px',
|
|
fontWeight: '600',
|
|
color: '#262626',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px'
|
|
}}>
|
|
<span style={{
|
|
width: '4px',
|
|
height: '20px',
|
|
backgroundColor: '#23A55A',
|
|
borderRadius: '2px'
|
|
}}></span>
|
|
Error Code Form
|
|
</span>
|
|
}
|
|
style={{
|
|
width: '100%',
|
|
boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
|
|
borderRadius: '12px'
|
|
}}
|
|
styles={{
|
|
body: { padding: '16px 24px 12px 24px' },
|
|
header: {
|
|
padding: '16px 24px',
|
|
borderBottom: '1px solid #f0f0f0',
|
|
backgroundColor: '#fafafa'
|
|
}
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
<div style={{
|
|
padding: '16px',
|
|
border: '1px solid #f0f0f0',
|
|
borderRadius: '10px',
|
|
backgroundColor: '#ffffff',
|
|
marginBottom: '0',
|
|
transition: 'all 0.3s ease',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
|
}}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '12px',
|
|
paddingBottom: '8px',
|
|
borderBottom: '1px solid #f5f5f5'
|
|
}}>
|
|
<div style={{
|
|
width: '3px',
|
|
height: '16px',
|
|
backgroundColor: '#23A55A',
|
|
borderRadius: '2px'
|
|
}}></div>
|
|
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
|
|
Error Code Details
|
|
</h4>
|
|
</div>
|
|
<ErrorCodeForm
|
|
errorCodeForm={errorCodeForm}
|
|
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
|
errorCodeIcon={errorCodeIcon}
|
|
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
|
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
|
isEdit={editingErrorCodeKey !== null}
|
|
/>
|
|
</div>
|
|
|
|
<Row gutter={[20, 0]} style={{ marginTop: '0' }}>
|
|
<Col xs={24} md={12} lg={12}>
|
|
<div style={{
|
|
padding: '16px',
|
|
border: '1px solid #f0f0f0',
|
|
borderRadius: '10px',
|
|
backgroundColor: '#ffffff',
|
|
transition: 'all 0.3s ease',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
|
}}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '12px',
|
|
paddingBottom: '8px',
|
|
borderBottom: '1px solid #f5f5f5'
|
|
}}>
|
|
<div style={{
|
|
width: '3px',
|
|
height: '16px',
|
|
backgroundColor: '#1890ff',
|
|
borderRadius: '2px'
|
|
}}></div>
|
|
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
|
|
Solution
|
|
</h4>
|
|
</div>
|
|
<SolutionForm
|
|
solutionForm={solutionForm}
|
|
solutionFields={solutionFields}
|
|
solutionTypes={solutionTypes}
|
|
solutionStatuses={solutionStatuses}
|
|
onAddSolutionField={handleAddSolutionField}
|
|
onRemoveSolutionField={handleRemoveSolutionField}
|
|
onSolutionTypeChange={handleSolutionTypeChange}
|
|
onSolutionStatusChange={handleSolutionStatusChange}
|
|
onSolutionFileUpload={(fileData) => {
|
|
}}
|
|
onFileView={(fileData) => {
|
|
if (fileData && (fileData.url || fileData.uploadPath)) {
|
|
window.open(fileData.url || fileData.uploadPath, '_blank');
|
|
}
|
|
}}
|
|
isReadOnly={false}
|
|
solutionData={currentSolutionData}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
<Col xs={24} md={12} lg={12}>
|
|
<div style={{
|
|
padding: '16px',
|
|
border: '1px solid #f0f0f0',
|
|
borderRadius: '10px',
|
|
backgroundColor: '#ffffff',
|
|
transition: 'all 0.3s ease',
|
|
boxShadow: '0 1px 3px rgba(0,0,0,0.04)'
|
|
}}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px',
|
|
marginBottom: '12px',
|
|
paddingBottom: '8px',
|
|
borderBottom: '1px solid #f5f5f5'
|
|
}}>
|
|
<div style={{
|
|
width: '3px',
|
|
height: '16px',
|
|
backgroundColor: '#faad14',
|
|
borderRadius: '2px'
|
|
}}></div>
|
|
<h4 style={{ margin: 0, color: '#262626', fontSize: '14px', fontWeight: '600' }}>
|
|
Sparepart Selection
|
|
</h4>
|
|
</div>
|
|
<div style={{
|
|
maxHeight: '45vh',
|
|
overflow: 'auto',
|
|
border: '1px solid #e8e8e8',
|
|
borderRadius: '8px',
|
|
padding: '12px',
|
|
backgroundColor: '#fafafa'
|
|
}}>
|
|
<SparepartSelect
|
|
selectedSparepartIds={selectedSparepartIds}
|
|
onSparepartChange={setSelectedSparepartIds}
|
|
isReadOnly={isErrorCodeFormReadOnly}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
padding: '16px 0 0 0',
|
|
borderTop: '1px solid #f0f0f0',
|
|
marginTop: '12px'
|
|
}}>
|
|
{/* Cancel Button - Only show when editing existing error code */}
|
|
{editingErrorCodeKey && (
|
|
<Button
|
|
size="large"
|
|
onClick={handleCreateNewErrorCode}
|
|
style={{
|
|
backgroundColor: '#fff',
|
|
borderColor: '#d9d9d9',
|
|
color: '#666',
|
|
borderRadius: '8px',
|
|
height: '40px',
|
|
padding: '0 24px',
|
|
fontWeight: '500',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.borderColor = '#ff4d4f';
|
|
e.target.style.color = '#ff4d4f';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.borderColor = '#d9d9d9';
|
|
e.target.style.color = '#666';
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
)}
|
|
|
|
{/* Save Button - Always show on right */}
|
|
<div style={{ marginLeft: editingErrorCodeKey ? '0' : 'auto' }}>
|
|
<Button
|
|
type="primary"
|
|
size="large"
|
|
onClick={handleSaveErrorCode}
|
|
loading={confirmLoading}
|
|
style={{
|
|
backgroundColor: '#23A55A',
|
|
borderColor: '#23A55A',
|
|
borderRadius: '8px',
|
|
height: '40px',
|
|
padding: '0 24px',
|
|
fontWeight: '500',
|
|
boxShadow: '0 2px 4px rgba(35, 165, 90, 0.2)',
|
|
transition: 'all 0.3s ease'
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
e.target.style.boxShadow = '0 4px 8px rgba(35, 165, 90, 0.3)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
e.target.style.boxShadow = '0 2px 4px rgba(35, 165, 90, 0.2)';
|
|
}}
|
|
>
|
|
{editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Switch: {
|
|
colorPrimary: '#23A55A',
|
|
colorPrimaryHover: '#23A55A',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Card>
|
|
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
|
<Step title="Brand Device Details" />
|
|
<Step title="Error Codes & Solutions" />
|
|
</Steps>
|
|
{renderStepContent()}
|
|
<Divider />
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<div>
|
|
{currentStep === 1 && (
|
|
<Button
|
|
onClick={() => navigate(`/master/brand-device/edit/${id}?tab=brand`)}
|
|
style={{ marginLeft: 8 }}
|
|
>
|
|
Back to Brand Info
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div>
|
|
{currentStep === 0 && (
|
|
<Button
|
|
type="primary"
|
|
onClick={handleNextStep}
|
|
loading={confirmLoading}
|
|
style={{
|
|
backgroundColor: '#23A55A',
|
|
borderColor: '#23A55A',
|
|
}}
|
|
>
|
|
Error Code
|
|
</Button>
|
|
)}
|
|
{currentStep === 1 && (
|
|
<Button
|
|
type="primary"
|
|
onClick={handleCancel}
|
|
style={{
|
|
backgroundColor: '#23A55A',
|
|
borderColor: '#23A55A',
|
|
}}
|
|
>
|
|
Selesai
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|
|
export default EditBrandDevice; |