update: brand device
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -10,13 +10,13 @@ import {
|
||||
Spin,
|
||||
Upload,
|
||||
} from 'antd';
|
||||
import { ArrowLeftOutlined, UploadOutlined } from '@ant-design/icons';
|
||||
import { getBrandById, getErrorCodeById, updateBrand, getErrorCodesByBrandId, createErrorCode, updateErrorCode } from '../../../api/master-brand';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { getErrorCodeById, createErrorCode, updateErrorCode } from '../../../api/master-brand';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import SingleSparepartSelect from './component/SingleSparepartSelect';
|
||||
import SparepartSelect from './component/SparepartSelect';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
|
||||
const { Title } = Typography;
|
||||
@@ -29,10 +29,9 @@ const AddEditErrorCode = () => {
|
||||
|
||||
const currentBrandId = routeBrandId;
|
||||
|
||||
const isFromAddBrand = location.pathname.includes('/master/brand-device/') && location.pathname.includes('/error-code/') &&
|
||||
(location.pathname.includes('/add') || (location.pathname.includes('/edit/') && !location.pathname.includes('/edit/')));
|
||||
const isFromAddBrand = location.pathname.includes('/master/brand-device/') && location.pathname.includes('/error-code/') &&
|
||||
(location.pathname.includes('/add') || (location.pathname.includes('/edit/') && !location.pathname.includes('/edit/')));
|
||||
|
||||
// Forms
|
||||
const [errorCodeForm] = Form.useForm();
|
||||
const [solutionForm] = Form.useForm();
|
||||
|
||||
@@ -62,7 +61,6 @@ const AddEditErrorCode = () => {
|
||||
const isEditMode = errorCodeId && errorCodeId !== 'add';
|
||||
setIsEdit(isEditMode);
|
||||
|
||||
// Initialize solution form with proper structure
|
||||
if (!isEditMode) {
|
||||
resetSolutionFields();
|
||||
}
|
||||
@@ -172,13 +170,13 @@ const AddEditErrorCode = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
await errorCodeForm.validateFields();
|
||||
|
||||
const solutionData = getSolutionData();
|
||||
|
||||
// Validate that at least one solution exists and is valid
|
||||
|
||||
if (!solutionData || solutionData.length === 0) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
@@ -188,16 +186,16 @@ const AddEditErrorCode = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate solutions based on their type
|
||||
const invalidSolutions = solutionData.filter(solution => {
|
||||
if (solution.type_solution === 'text') {
|
||||
return !solution.text_solution || solution.text_solution.trim() === '';
|
||||
} else if (solution.type_solution === 'file') {
|
||||
} else if (solution.type_solution !== 'text') {
|
||||
return !solution.path_solution || solution.path_solution.trim() === '';
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
if (invalidSolutions.length > 0) {
|
||||
const invalidNames = invalidSolutions.map(s => s.solution_name).join(', ');
|
||||
NotifAlert({
|
||||
@@ -229,14 +227,20 @@ const AddEditErrorCode = () => {
|
||||
payload.error_code = errorCodeValues.error_code;
|
||||
}
|
||||
|
||||
|
||||
let response;
|
||||
|
||||
if (isEdit && errorCodeId) {
|
||||
response = await updateErrorCode(currentBrandId, errorCodeId, payload);
|
||||
let cleanErrorCodeId = errorCodeId;
|
||||
if (errorCodeId.startsWith('existing_')) {
|
||||
cleanErrorCodeId = errorCodeId.replace('existing_', '');
|
||||
}
|
||||
response = await updateErrorCode(currentBrandId, cleanErrorCodeId, payload);
|
||||
} else {
|
||||
response = await createErrorCode(currentBrandId, payload);
|
||||
}
|
||||
|
||||
|
||||
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
@@ -247,7 +251,9 @@ const AddEditErrorCode = () => {
|
||||
if (isFromAddBrand) {
|
||||
navigate(`/master/brand-device/add`);
|
||||
} else {
|
||||
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`);
|
||||
navigate(`/master/brand-device/edit/${currentBrandId}?tab=error-codes`, {
|
||||
state: { refreshErrorCodes: true }
|
||||
});
|
||||
}
|
||||
} else {
|
||||
NotifAlert({
|
||||
@@ -303,7 +309,6 @@ const AddEditErrorCode = () => {
|
||||
};
|
||||
|
||||
const handleSolutionFileUpload = (fileObject) => {
|
||||
// Handle solution file upload if needed
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
@@ -373,7 +378,7 @@ const AddEditErrorCode = () => {
|
||||
error_code_color: '#000000',
|
||||
}}
|
||||
>
|
||||
<ErrorCodeSimpleForm
|
||||
<ErrorCodeForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={false}
|
||||
errorCodeIcon={errorCodeIcon}
|
||||
@@ -404,9 +409,8 @@ const AddEditErrorCode = () => {
|
||||
solutionStatuses={solutionStatuses}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
checkFirstSolutionValid={() => {
|
||||
// console.log('🔍 checkFirstSolutionValid function:', typeof checkFirstSolutionValid);
|
||||
return checkFirstSolutionValid();
|
||||
}}
|
||||
return checkFirstSolutionValid();
|
||||
}}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
@@ -430,7 +434,7 @@ const AddEditErrorCode = () => {
|
||||
size="small"
|
||||
style={{ height: 'fit-content' }}
|
||||
>
|
||||
<SingleSparepartSelect
|
||||
<SparepartSelect
|
||||
selectedSparepartIds={selectedSparepartIds}
|
||||
onSparepartChange={setSelectedSparepartIds}
|
||||
isReadOnly={false}
|
||||
@@ -456,7 +460,7 @@ const AddEditErrorCode = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -15,18 +15,17 @@ import {
|
||||
Input,
|
||||
} from 'antd';
|
||||
import { EyeOutlined, EditOutlined, DeleteOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons';
|
||||
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, getErrorCodesByBrandId, deleteErrorCode } from '../../../api/master-brand';
|
||||
import { getBrandById, 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 ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
||||
import ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import SolutionForm from './component/SolutionForm';
|
||||
import FormActions from './component/FormActions';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import SingleSparepartSelect from './component/SingleSparepartSelect';
|
||||
import SparepartSelect from './component/SparepartSelect';
|
||||
import ListErrorCode from './component/ListErrorCode';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -50,18 +49,180 @@ const EditBrandDevice = () => {
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [apiErrorCodes, setApiErrorCodes] = useState([]);
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
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 {
|
||||
resetSolutionFields,
|
||||
getSolutionData,
|
||||
setSolutionsForExistingRecord,
|
||||
} = useSolutionLogic(solutionForm);
|
||||
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 !== false;
|
||||
|
||||
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 !== false,
|
||||
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) {
|
||||
@@ -129,7 +290,6 @@ const EditBrandDevice = () => {
|
||||
setApiErrorCodes(existingCodes);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching error codes:', error);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,18 +320,35 @@ const EditBrandDevice = () => {
|
||||
setCurrentStep(tab === 'brand' ? 0 : 1);
|
||||
}, [searchParams]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (currentStep === 1 && id) {
|
||||
setTrigerFilter(prev => !prev);
|
||||
}
|
||||
}, [currentStep, id]);
|
||||
|
||||
// Local functions to replace context methods
|
||||
// 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: Date.now().toString(),
|
||||
tempId: uniqueId,
|
||||
status: 'new'
|
||||
};
|
||||
setTempErrorCodes(prev => [...prev, errorCodeWithId]);
|
||||
@@ -228,7 +405,7 @@ const EditBrandDevice = () => {
|
||||
navigate('/master/brand-device');
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleErrorCodeIconUpload = (iconData) => {
|
||||
setErrorCodeIcon(iconData);
|
||||
};
|
||||
@@ -251,6 +428,7 @@ const EditBrandDevice = () => {
|
||||
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
setCurrentSolutionData([]);
|
||||
};
|
||||
|
||||
const handleSaveErrorCode = async () => {
|
||||
@@ -276,106 +454,138 @@ const EditBrandDevice = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const newErrorCode = {
|
||||
error_code: errorCodeValues.error_code,
|
||||
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_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: solutionData,
|
||||
spareparts: selectedSparepartIds
|
||||
solution: formattedSolutions,
|
||||
spareparts: selectedSparepartIds || []
|
||||
};
|
||||
|
||||
if (editingErrorCodeKey) {
|
||||
updateErrorCode(editingErrorCodeKey, newErrorCode);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil diupdate!',
|
||||
});
|
||||
} else {
|
||||
addErrorCode(newErrorCode);
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil ditambahkan!',
|
||||
});
|
||||
if (!editingErrorCodeKey || !editingErrorCodeKey.startsWith('existing_')) {
|
||||
payload.error_code = errorCodeValues.error_code;
|
||||
}
|
||||
|
||||
resetErrorCodeForm();
|
||||
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: 'Harap isi semua kolom wajib!',
|
||||
message: error.message || 'Harap isi semua kolom wajib!',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
if (errorCode) {
|
||||
errorCodeForm.setFieldsValue({
|
||||
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,
|
||||
status: errorCode.is_active,
|
||||
});
|
||||
setErrorCodeIcon(errorCode.path_icon ? {
|
||||
name: errorCode.path_icon.split('/').pop(),
|
||||
uploadPath: errorCode.path_icon,
|
||||
} : null);
|
||||
setIsErrorCodeFormReadOnly(true);
|
||||
setEditingErrorCodeKey(errorCode.tempId);
|
||||
|
||||
if (errorCode.solution && errorCode.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(errorCode.solution, solutionForm);
|
||||
} else {
|
||||
resetSolutionFields();
|
||||
}
|
||||
|
||||
if (errorCode.spareparts && errorCode.spareparts.length > 0) {
|
||||
setSelectedSparepartIds(errorCode.spareparts);
|
||||
}
|
||||
}
|
||||
loadErrorCodeData(errorCode, true);
|
||||
};
|
||||
|
||||
const handleEditErrorCode = (record) => {
|
||||
const errorCode = getErrorCodeById(record.tempId || record.error_code_id);
|
||||
if (errorCode) {
|
||||
errorCodeForm.setFieldsValue({
|
||||
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,
|
||||
status: errorCode.is_active,
|
||||
});
|
||||
setErrorCodeIcon(errorCode.path_icon ? {
|
||||
name: errorCode.path_icon.split('/').pop(),
|
||||
uploadPath: errorCode.path_icon,
|
||||
} : null);
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(errorCode.tempId);
|
||||
|
||||
if (errorCode.solution && errorCode.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(errorCode.solution, solutionForm);
|
||||
}
|
||||
|
||||
if (errorCode.spareparts && errorCode.spareparts.length > 0) {
|
||||
setSelectedSparepartIds(errorCode.spareparts);
|
||||
}
|
||||
}
|
||||
loadErrorCodeData(errorCode, false);
|
||||
};
|
||||
|
||||
const handleEditErrorCodeNavigate = (record) => {
|
||||
const errorCodeId = record.status === 'existing' ? record.error_code_id : record.tempId;
|
||||
const currentBrandId = id;
|
||||
if (errorCodeId && currentBrandId) {
|
||||
navigate(`/master/brand-device/${currentBrandId}/error-code/edit/${errorCodeId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteErrorCode = async (record) => {
|
||||
NotifConfirmDialog({
|
||||
@@ -418,7 +628,7 @@ const EditBrandDevice = () => {
|
||||
});
|
||||
}
|
||||
},
|
||||
onCancel: () => {}
|
||||
onCancel: () => { }
|
||||
});
|
||||
};
|
||||
|
||||
@@ -518,25 +728,22 @@ const EditBrandDevice = () => {
|
||||
}, [setBrandInfo]);
|
||||
|
||||
const handleSearch = () => {
|
||||
setSearchText(searchValue);
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setSearchText('');
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const getErrorCodesData = async (params) => {
|
||||
try {
|
||||
const search = params.get('search') || '';
|
||||
const criteria = params.get('criteria') || '';
|
||||
const page = parseInt(params.get('page')) || 1;
|
||||
const limit = parseInt(params.get('limit')) || 10;
|
||||
const currentBrandId = id;
|
||||
|
||||
if (!currentBrandId) {
|
||||
console.warn('Brand ID is not available');
|
||||
return {
|
||||
data: [],
|
||||
pagination: {
|
||||
@@ -551,7 +758,7 @@ const EditBrandDevice = () => {
|
||||
const queryParams = new URLSearchParams({
|
||||
page: page.toString(),
|
||||
limit: limit.toString(),
|
||||
...(search && { search })
|
||||
...(criteria && { criteria })
|
||||
});
|
||||
|
||||
const response = await getErrorCodesByBrandId(currentBrandId, queryParams);
|
||||
@@ -576,7 +783,6 @@ const EditBrandDevice = () => {
|
||||
spareparts: contextModified.spareparts || ec.spareparts || []
|
||||
};
|
||||
} else {
|
||||
// Use original API data
|
||||
return {
|
||||
...ec,
|
||||
tempId: `existing_${ec.error_code_id}`,
|
||||
@@ -587,7 +793,6 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
});
|
||||
|
||||
// Filter out deleted error codes
|
||||
const activeExistingCodes = existingCodes.filter(ec => ec.status !== 'deleted');
|
||||
|
||||
const allErrorCodes = [...activeExistingCodes, ...tempErrorCodes.filter(ec => ec.status !== 'deleted')];
|
||||
@@ -626,7 +831,6 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error fetching error codes:', error);
|
||||
return {
|
||||
data: [],
|
||||
pagination: {
|
||||
@@ -672,90 +876,321 @@ const EditBrandDevice = () => {
|
||||
}
|
||||
|
||||
if (currentStep === 1) {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (searchText) {
|
||||
queryParams.set('search', searchText);
|
||||
}
|
||||
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 (
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search error codes..."
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchText(value);
|
||||
if (value === '') {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<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"
|
||||
icon={<SearchOutlined />}
|
||||
size="large"
|
||||
onClick={handleSaveErrorCode}
|
||||
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)';
|
||||
}}
|
||||
>
|
||||
Search
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Simpan Error Code'}
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Space wrap size="small">
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => navigate(`/master/brand-device/${id}/error-code/add`)}
|
||||
size="large"
|
||||
>
|
||||
Add Error Code
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
mobile
|
||||
cardColor={'#42AAFF'}
|
||||
header={'error_code'}
|
||||
showPreviewModal={handlePreviewErrorCode}
|
||||
showEditModal={handleEditErrorCodeNavigate}
|
||||
showDeleteDialog={handleDeleteErrorCode}
|
||||
getData={getErrorCodesData}
|
||||
queryParams={queryParams}
|
||||
columns={errorCodeColumns(handlePreviewErrorCode, handleEditErrorCodeNavigate, handleDeleteErrorCode)}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
@@ -763,9 +1198,6 @@ const EditBrandDevice = () => {
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4} style={{ margin: '0 0 24px 0' }}>
|
||||
Edit Brand Device
|
||||
</Title>
|
||||
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
||||
<Step title="Brand Device Details" />
|
||||
<Step title="Error Codes & Solutions" />
|
||||
@@ -788,6 +1220,7 @@ const EditBrandDevice = () => {
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={handleNextStep}
|
||||
loading={loading}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
@@ -805,7 +1238,7 @@ const EditBrandDevice = () => {
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Kembali
|
||||
Selesai
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -138,12 +138,6 @@ const ViewFilePage = () => {
|
||||
|
||||
const targetPhase = savedPhase ? parseInt(savedPhase) : 1;
|
||||
|
||||
console.log({
|
||||
savedPhase,
|
||||
targetPhase,
|
||||
id: fallbackId || id
|
||||
});
|
||||
|
||||
navigate(`/master/brand-device/edit/${fallbackId || id}`, {
|
||||
state: { phase: targetPhase, fromFileViewer: true },
|
||||
replace: true
|
||||
@@ -174,9 +168,7 @@ const ViewFilePage = () => {
|
||||
const isImage = ['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension);
|
||||
const isPdf = fileExtension === 'pdf';
|
||||
|
||||
// const fileUrl = loading ? null : getFileUrl(getFolderFromFileType(fallbackFileType || fileType), actualFileName);
|
||||
|
||||
// Show placeholder when loading
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '50px' }}>
|
||||
@@ -318,7 +310,6 @@ const ViewFilePage = () => {
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// Retry loading PDF
|
||||
setPdfLoading(true);
|
||||
const folder = getFolderFromFileType('pdf');
|
||||
getFile(folder, actualFileName)
|
||||
|
||||
@@ -7,9 +7,18 @@ const BrandForm = ({
|
||||
form,
|
||||
onValuesChange,
|
||||
isEdit = false,
|
||||
brandInfo = null,
|
||||
}) => {
|
||||
const isActive = Form.useWatch('is_active', form) ?? true;
|
||||
|
||||
React.useEffect(() => {
|
||||
if (brandInfo && brandInfo.brand_code) {
|
||||
form.setFieldsValue({
|
||||
brand_code: brandInfo.brand_code
|
||||
});
|
||||
}
|
||||
}, [brandInfo, form]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Form
|
||||
|
||||
@@ -12,12 +12,13 @@ const FileUploadHandler = ({
|
||||
accept = '.pdf,.jpg,.jpeg,.png,.gif',
|
||||
disabled = false,
|
||||
|
||||
// File management
|
||||
fileList = [],
|
||||
onFileUpload,
|
||||
onFileRemove,
|
||||
|
||||
existingFile = null,
|
||||
clearSignal = null,
|
||||
debugProps = {},
|
||||
|
||||
uploadText = 'Click or drag file to this area to upload',
|
||||
uploadHint = 'Support for PDF and image files only',
|
||||
@@ -34,6 +35,12 @@ const FileUploadHandler = ({
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadedFile, setUploadedFile] = useState(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (clearSignal !== null && clearSignal > 0) {
|
||||
setUploadedFile(null);
|
||||
}
|
||||
}, [clearSignal, debugProps]);
|
||||
|
||||
const getBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
@@ -140,6 +147,7 @@ const FileUploadHandler = ({
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (actualPath) {
|
||||
let fileObject;
|
||||
|
||||
@@ -176,7 +184,6 @@ const FileUploadHandler = ({
|
||||
setIsUploading(false);
|
||||
return false;
|
||||
} else {
|
||||
console.error('Failed to extract file path from upload response:', uploadResponse);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Gagal',
|
||||
@@ -186,7 +193,6 @@ const FileUploadHandler = ({
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
@@ -204,16 +210,9 @@ const FileUploadHandler = ({
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
console.log('🗑️ FileUploadHandler handleRemove called:', {
|
||||
existingFile,
|
||||
onFileRemove: typeof onFileRemove,
|
||||
hasExistingFile: !!existingFile
|
||||
});
|
||||
|
||||
if (existingFile && onFileRemove) {
|
||||
onFileRemove(existingFile);
|
||||
} else if (onFileRemove) {
|
||||
// Call onFileRemove even without existingFile to trigger form cleanup
|
||||
onFileRemove(null);
|
||||
}
|
||||
};
|
||||
@@ -221,17 +220,9 @@ const FileUploadHandler = ({
|
||||
const renderExistingFile = () => {
|
||||
const fileToShow = existingFile || uploadedFile;
|
||||
if (!fileToShow) {
|
||||
console.log('❌ FileUploadHandler renderExistingFile: No file to render');
|
||||
return null;
|
||||
}
|
||||
|
||||
console.log('✅ FileUploadHandler renderExistingFile: File found', {
|
||||
existingFile: !!existingFile,
|
||||
uploadedFile: !!uploadedFile,
|
||||
fileName: fileToShow.name,
|
||||
shouldShowDeleteButton: true
|
||||
});
|
||||
|
||||
const filePath = fileToShow.uploadPath || fileToShow.url || fileToShow.path_icon || fileToShow.path_solution;
|
||||
const fileName = fileToShow.name || filePath?.split('/').pop() || 'Unknown file';
|
||||
const fileType = getFileType(fileName);
|
||||
@@ -257,7 +248,6 @@ const FileUploadHandler = ({
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// For PDFs and other files, open in new tab
|
||||
const folder = fileToShow.type_solution === 'pdf' ? 'pdf' : 'images';
|
||||
const filename = filePath.split('/').pop();
|
||||
const fileUrl = getFileUrl(folder, filename);
|
||||
@@ -404,7 +394,9 @@ const FileUploadHandler = ({
|
||||
</Upload>
|
||||
)}
|
||||
|
||||
{renderExistingFile()}
|
||||
{/* renderExistingFile() is disabled because SolutionField.jsx already handles file card rendering */}
|
||||
{/* This prevents duplicate card rendering */}
|
||||
{/* {renderExistingFile()} */}
|
||||
|
||||
{showPreview && (
|
||||
<Modal
|
||||
|
||||
@@ -91,9 +91,9 @@ const columns = (showPreviewModal, showEditModal, showDeleteDialog) => [
|
||||
const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const defaultFilter = { criteria: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -114,13 +114,13 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setFormDataFilter({ criteria: searchText });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setSearchText('');
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
@@ -182,12 +182,12 @@ const ListBrandDevice = memo(function ListBrandDevice(props) {
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search brand device..."
|
||||
value={searchValue}
|
||||
value={searchText}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
setSearchText(value);
|
||||
if (value === '') {
|
||||
setFormDataFilter({ search: '' });
|
||||
setFormDataFilter({ criteria: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user