676 lines
27 KiB
JavaScript
676 lines
27 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Divider,
|
|
Typography,
|
|
Button,
|
|
Steps,
|
|
Form,
|
|
Row,
|
|
Col,
|
|
Card,
|
|
ConfigProvider,
|
|
Table,
|
|
Tag,
|
|
Space,
|
|
} from 'antd';
|
|
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
|
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
|
import { createBrand } from '../../../api/master-brand';
|
|
import BrandForm from './component/BrandForm';
|
|
import ErrorCodeSimpleForm from './component/ErrorCodeSimpleForm';
|
|
import ErrorCodeListModal from './component/ErrorCodeListModal';
|
|
import FormActions from './component/FormActions';
|
|
import SolutionForm from './component/SolutionForm';
|
|
import SparepartForm from './component/SparepartForm';
|
|
import { useSolutionLogic } from './hooks/solution';
|
|
import { useSparepartLogic } from './hooks/sparepart';
|
|
import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
|
|
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
|
|
|
const { Title } = Typography;
|
|
const { Step } = Steps;
|
|
|
|
const defaultData = {
|
|
brand_name: '',
|
|
brand_type: '',
|
|
brand_model: '',
|
|
brand_manufacture: '',
|
|
is_active: true,
|
|
brand_code: '',
|
|
};
|
|
|
|
const AddBrandDevice = () => {
|
|
const navigate = useNavigate();
|
|
const { setBreadcrumbItems } = useBreadcrumb();
|
|
const [brandForm] = Form.useForm();
|
|
const [errorCodeForm] = Form.useForm();
|
|
const [solutionForm] = Form.useForm();
|
|
const [sparepartForm] = 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(false);
|
|
const [formData, setFormData] = useState(defaultData);
|
|
const [errorCodes, setErrorCodes] = useState([]);
|
|
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
|
const [selectedSparepartIds, setSelectedSparepartIds] = useState([]);
|
|
|
|
const {
|
|
solutionFields,
|
|
solutionTypes,
|
|
solutionStatuses,
|
|
solutionsToDelete,
|
|
firstSolutionValid,
|
|
handleAddSolutionField,
|
|
handleRemoveSolutionField,
|
|
handleSolutionTypeChange,
|
|
handleSolutionStatusChange,
|
|
resetSolutionFields,
|
|
checkFirstSolutionValid,
|
|
getSolutionData,
|
|
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(() => {
|
|
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' }}>
|
|
Tambah Brand Device
|
|
</span>
|
|
),
|
|
},
|
|
]);
|
|
}, [setBreadcrumbItems, navigate]);
|
|
|
|
const handleCancel = () => {
|
|
navigate('/master/brand-device');
|
|
};
|
|
|
|
const handleNextStep = async () => {
|
|
try {
|
|
await brandForm.validateFields();
|
|
setCurrentStep(1);
|
|
} catch (error) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Harap isi semua kolom wajib untuk brand device!',
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleFinish = async () => {
|
|
setConfirmLoading(true);
|
|
try {
|
|
// Validation: Ensure at least one error code
|
|
if (errorCodes.length === 0) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Setidaknya tambahkan 1 error code!',
|
|
});
|
|
setConfirmLoading(false);
|
|
return;
|
|
}
|
|
|
|
const transformedErrorCodes = errorCodes.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,
|
|
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 sparepartData = getSparepartData();
|
|
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,
|
|
spareparts: sparepartData,
|
|
error_code: transformedErrorCodes,
|
|
};
|
|
|
|
console.log('Final form data:', finalFormData); // Debug log
|
|
|
|
const response = await createBrand(finalFormData);
|
|
|
|
if (response && (response.statusCode === 200 || response.statusCode === 201)) {
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: response.message || 'Brand Device berhasil ditambahkan.',
|
|
});
|
|
navigate('/master/brand-device');
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: response?.message || 'Gagal menambahkan Brand Device',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Finish Error:', error);
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: error.message || 'Gagal menyimpan data. Silakan coba lagi.',
|
|
});
|
|
} finally {
|
|
setConfirmLoading(false);
|
|
}
|
|
};
|
|
|
|
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,
|
|
});
|
|
setFileList(record.fileList || []);
|
|
setErrorCodeIcon(record.errorCodeIcon || null);
|
|
setIsErrorCodeFormReadOnly(true);
|
|
setEditingErrorCodeKey(null);
|
|
|
|
if (record.solution && record.solution.length > 0) {
|
|
setSolutionsForExistingRecord(record.solution, solutionForm);
|
|
}
|
|
|
|
if (record.sparepart && record.sparepart.length > 0) {
|
|
setSparepartsForExistingRecord(record.sparepart);
|
|
}
|
|
};
|
|
|
|
const handleEditErrorCode = (record) => {
|
|
// Prevent infinite loop
|
|
if (editingErrorCodeKey === record.key) {
|
|
return;
|
|
}
|
|
|
|
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 || '#000000',
|
|
status: record.status !== false,
|
|
});
|
|
setFileList(record.fileList || []);
|
|
setErrorCodeIcon(record.errorCodeIcon || null);
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(record.key);
|
|
|
|
if (record.solution && record.solution.length > 0) {
|
|
// Reset solution fields first
|
|
resetSolutionFields();
|
|
// Then load new solutions
|
|
setTimeout(() => {
|
|
setSolutionsForExistingRecord(record.solution, solutionForm);
|
|
}, 0);
|
|
} else {
|
|
resetSolutionFields();
|
|
}
|
|
|
|
if (record.sparepart && record.sparepart.length > 0) {
|
|
setSparepartsForExistingRecord(record.sparepart);
|
|
}
|
|
};
|
|
|
|
const handleAddErrorCode = async () => {
|
|
try {
|
|
const formValues = errorCodeForm.getFieldsValue();
|
|
|
|
// Validation
|
|
if (!formValues.error_code || !formValues.error_code_name) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Error code dan error name wajib diisi!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Validate at least 1 solution
|
|
const solutions = getSolutionData();
|
|
|
|
if (solutions.length === 0) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Setiap error code harus memiliki minimal 1 solution!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
const newErrorCode = {
|
|
key: Date.now(),
|
|
error_code: formValues.error_code,
|
|
error_code_name: formValues.error_code_name || '',
|
|
error_code_description: formValues.error_code_description || '',
|
|
error_code_color: formValues.error_code_color || '#000000',
|
|
path_icon: errorCodeIcon?.uploadPath || '',
|
|
status: formValues.status !== false,
|
|
errorCodeIcon: errorCodeIcon,
|
|
solution: solutions,
|
|
};
|
|
|
|
if (editingErrorCodeKey) {
|
|
const updatedCodes = errorCodes.map((item) =>
|
|
item.key === editingErrorCodeKey ? newErrorCode : item
|
|
);
|
|
setErrorCodes(updatedCodes);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil diupdate!',
|
|
});
|
|
} else {
|
|
const updatedCodes = [...errorCodes, newErrorCode];
|
|
setErrorCodes(updatedCodes);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil ditambahkan!',
|
|
});
|
|
}
|
|
|
|
// Reset all forms
|
|
resetErrorCodeForm();
|
|
resetSolutionFields();
|
|
} catch (error) {
|
|
console.error('Error adding error code:', error);
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: 'Gagal menambahkan error code',
|
|
});
|
|
}
|
|
};
|
|
|
|
const resetErrorCodeForm = () => {
|
|
errorCodeForm.resetFields();
|
|
errorCodeForm.setFieldsValue({
|
|
status: true,
|
|
solution_status_0: true,
|
|
solution_type_0: 'text',
|
|
});
|
|
setFileList([]);
|
|
setErrorCodeIcon(null);
|
|
resetSolutionFields();
|
|
resetSparepartFields();
|
|
setIsErrorCodeFormReadOnly(false);
|
|
setEditingErrorCodeKey(null);
|
|
};
|
|
|
|
const handleCreateNewErrorCode = () => {
|
|
resetErrorCodeForm();
|
|
};
|
|
|
|
const handleDeleteErrorCode = (key) => {
|
|
if (errorCodes.length <= 1) {
|
|
NotifAlert({
|
|
icon: 'warning',
|
|
title: 'Perhatian',
|
|
message: 'Setiap brand harus memiliki minimal 1 error code!',
|
|
});
|
|
return;
|
|
}
|
|
|
|
setErrorCodes(errorCodes.filter((item) => item.key !== key));
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: 'Error code berhasil dihapus!',
|
|
});
|
|
};
|
|
|
|
const handleFileView = (pathSolution, fileType) => {
|
|
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/view/temp/files/${folder}/${encodedFileName}`;
|
|
navigate(navigationPath);
|
|
};
|
|
|
|
const handleSolutionFileUpload = async (file) => {
|
|
try {
|
|
const isAllowedType = [
|
|
'application/pdf',
|
|
'image/jpeg',
|
|
'image/png',
|
|
'image/gif',
|
|
].includes(file.type);
|
|
if (!isAllowedType) {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`,
|
|
});
|
|
return;
|
|
}
|
|
|
|
const fileExtension = file.name.split('.').pop().toLowerCase();
|
|
const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExtension);
|
|
const fileType = isImage ? 'image' : 'pdf';
|
|
const folder = getFolderFromFileType(fileType);
|
|
|
|
const uploadResponse = await uploadFile(file, folder);
|
|
const actualPath = uploadResponse.data?.path_solution || '';
|
|
|
|
if (actualPath) {
|
|
file.uploadPath = actualPath;
|
|
file.solution_name = file.name;
|
|
file.solutionId = solutionFields[0];
|
|
file.type_solution = fileType;
|
|
setFileList((prevList) => [...prevList, file]);
|
|
NotifOk({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
message: `${file.name} berhasil diupload!`,
|
|
});
|
|
} else {
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Gagal',
|
|
message: `Gagal mengupload ${file.name}`,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error uploading file:', error);
|
|
NotifAlert({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
message: `Gagal mengupload ${file.name}. Silakan coba lagi.`,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleFileRemove = (file) => {
|
|
const newFileList = fileList.filter((item) => item.uid !== file.uid);
|
|
setFileList(newFileList);
|
|
};
|
|
|
|
const handleErrorCodeIconUpload = (iconData) => {
|
|
setErrorCodeIcon(iconData);
|
|
};
|
|
|
|
const handleErrorCodeIconRemove = () => {
|
|
setErrorCodeIcon(null);
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
if (currentStep === 0) {
|
|
return (
|
|
<BrandForm
|
|
form={brandForm}
|
|
formData={formData}
|
|
onValuesChange={(changedValues, allValues) =>
|
|
setFormData((prev) => ({ ...prev, ...allValues }))
|
|
}
|
|
isEdit={false}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (currentStep === 1) {
|
|
return (
|
|
<>
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
|
{/* Error Code Form Column */}
|
|
<Col span={8}>
|
|
<Card size="small" title="Error Code">
|
|
<Form
|
|
form={errorCodeForm}
|
|
layout="vertical"
|
|
initialValues={{
|
|
status: true,
|
|
}}
|
|
>
|
|
<ErrorCodeSimpleForm
|
|
errorCodeForm={errorCodeForm}
|
|
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
|
errorCodeIcon={errorCodeIcon}
|
|
onErrorCodeIconUpload={handleErrorCodeIconUpload}
|
|
onErrorCodeIconRemove={handleErrorCodeIconRemove}
|
|
onAddErrorCode={handleAddErrorCode}
|
|
/>
|
|
</Form>
|
|
</Card>
|
|
</Col>
|
|
|
|
{/* Solution Form Column */}
|
|
<Col span={8}>
|
|
<Card size="small" title="Solutions">
|
|
<Form
|
|
form={solutionForm}
|
|
layout="vertical"
|
|
initialValues={{
|
|
solution_status_0: true,
|
|
solution_type_0: 'text',
|
|
}}
|
|
onValuesChange={checkFirstSolutionValid}
|
|
>
|
|
<SolutionForm
|
|
solutionForm={solutionForm}
|
|
solutionFields={solutionFields}
|
|
solutionTypes={solutionTypes}
|
|
solutionStatuses={solutionStatuses}
|
|
fileList={fileList}
|
|
solutionsToDelete={solutionsToDelete}
|
|
firstSolutionValid={firstSolutionValid}
|
|
onAddSolutionField={handleAddSolutionField}
|
|
onRemoveSolutionField={handleRemoveSolutionField}
|
|
onSolutionTypeChange={handleSolutionTypeChange}
|
|
onSolutionStatusChange={handleSolutionStatusChange}
|
|
onSolutionFileUpload={handleSolutionFileUpload}
|
|
onFileView={handleFileView}
|
|
isReadOnly={isErrorCodeFormReadOnly}
|
|
/>
|
|
</Form>
|
|
</Card>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Card size="small" title="Spareparts">
|
|
<Form
|
|
form={sparepartForm}
|
|
layout="vertical"
|
|
>
|
|
<SparepartForm
|
|
sparepartForm={sparepartForm}
|
|
selectedSparepartIds={selectedSparepartIds}
|
|
onSparepartChange={handleSparepartChange}
|
|
isReadOnly={isErrorCodeFormReadOnly}
|
|
/>
|
|
</Form>
|
|
</Card>
|
|
</Col>
|
|
|
|
{/* Error Codes Table Column */}
|
|
<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 }}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<Title level={4} style={{ margin: '0 0 24px 0' }}>
|
|
Tambah Brand Device
|
|
</Title>
|
|
<Steps current={currentStep} style={{ marginBottom: 24 }}>
|
|
<Step title="Brand Device Details" />
|
|
<Step title="Error Codes & Solutions" />
|
|
</Steps>
|
|
<div style={{ marginTop: 24 }}>{renderStepContent()}</div>
|
|
<Divider />
|
|
<FormActions
|
|
currentStep={currentStep}
|
|
onPreviousStep={() => setCurrentStep(currentStep - 1)}
|
|
onNextStep={handleNextStep}
|
|
onSave={handleFinish}
|
|
onCancel={handleCancel}
|
|
confirmLoading={confirmLoading}
|
|
isEditMode={false}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default AddBrandDevice;
|