integration api brandDevice, file upload in brand device
This commit is contained in:
@@ -1,22 +1,26 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Input, Divider, Typography, Switch, Button, Steps, Form, message, Table, Row, Col, Modal, Card, Tag, Upload, ConfigProvider, Space } from 'antd';
|
||||
import { PlusOutlined, UploadOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { Divider, Typography, Button, Steps, Form, Row, Col, Card } 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 ErrorCodeForm from './component/ErrorCodeForm';
|
||||
import ErrorCodeTable from './component/ListErrorCode';
|
||||
import FormActions from './component/FormActions';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { uploadFile, getFolderFromFileType } from '../../../api/file-uploads';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
|
||||
// Mock API for Error Codes (can be moved to a separate file later)
|
||||
const mockErrorCodeApi = {
|
||||
errorCodes: [],
|
||||
createErrorCode: async (data) => {
|
||||
const newId = mockErrorCodeApi.errorCodes.length > 0 ? Math.max(...mockErrorCodeApi.errorCodes.map(ec => ec.error_code_id)) + 1 : 1;
|
||||
const newErrorCode = { ...data, error_code_id: newId };
|
||||
mockErrorCodeApi.errorCodes.push(newErrorCode);
|
||||
return { statusCode: 201, data: newErrorCode };
|
||||
},
|
||||
const defaultData = {
|
||||
brand_name: '',
|
||||
brand_type: '',
|
||||
brand_model: '',
|
||||
brand_manufacture: '',
|
||||
is_active: true,
|
||||
brand_code: '',
|
||||
};
|
||||
|
||||
const AddBrandDevice = () => {
|
||||
@@ -27,29 +31,37 @@ const AddBrandDevice = () => {
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [fileList, setFileList] = useState([]);
|
||||
const [isErrorCodeFormReadOnly, setIsErrorCodeFormReadOnly] = useState(false); // State untuk mengontrol form read-only
|
||||
const [editingErrorCodeKey, setEditingErrorCodeKey] = useState(null); // State untuk melacak item yang sedang diedit
|
||||
// State untuk preview file
|
||||
const [previewOpen, setPreviewOpen] = useState(false);
|
||||
const [previewImage, setPreviewImage] = useState('');
|
||||
const [previewTitle, setPreviewTitle] = useState('');
|
||||
|
||||
// Watch for form values changes to update the switch color
|
||||
const statusValue = Form.useWatch('status', errorCodeForm);
|
||||
|
||||
const defaultData = {
|
||||
brandName: '',
|
||||
brandType: '',
|
||||
model: '',
|
||||
manufacturer: '',
|
||||
status: true,
|
||||
brand_code: '',
|
||||
description: '',
|
||||
};
|
||||
|
||||
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 {
|
||||
solutionFields,
|
||||
solutionTypes,
|
||||
solutionStatuses,
|
||||
firstSolutionValid,
|
||||
solutionsToDelete,
|
||||
handleAddSolutionField,
|
||||
handleRemoveSolutionField,
|
||||
handleSolutionTypeChange,
|
||||
handleSolutionStatusChange,
|
||||
resetSolutionFields,
|
||||
checkFirstSolutionValid,
|
||||
setSolutionsForExistingRecord
|
||||
} = useErrorCodeLogic(errorCodeForm, fileList);
|
||||
|
||||
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');
|
||||
};
|
||||
@@ -59,290 +71,294 @@ const AddBrandDevice = () => {
|
||||
await brandForm.validateFields();
|
||||
setCurrentStep(1);
|
||||
} catch (error) {
|
||||
console.log('Validate Failed:', error);
|
||||
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk brand device!' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleFinish = async () => {
|
||||
if (errorCodes.length === 0) {
|
||||
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Silakan tambahkan minimal satu error code.' });
|
||||
return;
|
||||
}
|
||||
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
const finalFormData = { ...formData, status: formData.status ? 'Active' : 'Inactive' };
|
||||
console.log("Saving brand device:", finalFormData);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
const newBrandDeviceId = Date.now();
|
||||
console.log("Brand device saved with ID:", newBrandDeviceId);
|
||||
const transformedErrorCodes = errorCodes.map(ec => ({
|
||||
error_code: ec.error_code,
|
||||
error_code_name: ec.error_code_name || '',
|
||||
error_code_description: ec.error_code_description || '',
|
||||
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
|
||||
}))
|
||||
}));
|
||||
|
||||
console.log("Saving error codes:", errorCodes);
|
||||
for (const errorCode of errorCodes) {
|
||||
if (errorCode.another_solution === 'image' && errorCode.image) {
|
||||
console.log(`Uploading image for error code ${errorCode.error_code}:`, errorCode.image.name);
|
||||
}
|
||||
await mockErrorCodeApi.createErrorCode({
|
||||
...errorCode,
|
||||
brand_device_id: newBrandDeviceId
|
||||
const finalFormData = {
|
||||
brand_name: formData.brand_name,
|
||||
brand_type: formData.brand_type || '',
|
||||
brand_model: formData.brand_model || '',
|
||||
brand_manufacture: formData.brand_manufacture,
|
||||
is_active: formData.is_active,
|
||||
error_code: transformedErrorCodes.length > 0 ? transformedErrorCodes : [
|
||||
{
|
||||
error_code: "DEFAULT",
|
||||
error_code_name: "Default Error Code",
|
||||
error_code_description: "Default error description",
|
||||
is_active: true,
|
||||
solution: [
|
||||
{
|
||||
solution_name: "Default Solution",
|
||||
type_solution: "text",
|
||||
text_solution: "Default solution text",
|
||||
path_solution: "",
|
||||
is_active: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
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',
|
||||
});
|
||||
console.log("Saved error code:", errorCode.error_code);
|
||||
}
|
||||
|
||||
setConfirmLoading(false);
|
||||
NotifOk({ icon: 'success', title: 'Berhasil', message: 'Brand Device dan Error Code berhasil disimpan.' });
|
||||
navigate('/master/brand-device');
|
||||
} catch (error) {
|
||||
setConfirmLoading(false);
|
||||
console.error("Failed to save data:", error);
|
||||
NotifAlert({
|
||||
icon: "error",
|
||||
title: "Gagal",
|
||||
message: "Gagal menyimpan data. Silakan coba lagi.",
|
||||
message: error.message || "Gagal menyimpan data. Silakan coba lagi.",
|
||||
});
|
||||
} finally {
|
||||
setConfirmLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviewErrorCode = (record) => {
|
||||
errorCodeForm.setFieldsValue(record); // Isi form dengan data record
|
||||
setFileList(record.fileList || []); // Muat file jika ada
|
||||
setIsErrorCodeFormReadOnly(true); // Jadikan form read-only
|
||||
setEditingErrorCodeKey(null); // Bukan dalam mode edit
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
status: record.status,
|
||||
});
|
||||
setFileList(record.fileList || []);
|
||||
setIsErrorCodeFormReadOnly(true);
|
||||
setEditingErrorCodeKey(null);
|
||||
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, errorCodeForm);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditErrorCode = (record) => {
|
||||
errorCodeForm.setFieldsValue(record); // Isi form dengan data record
|
||||
setFileList(record.fileList || []); // Muat file jika ada
|
||||
setIsErrorCodeFormReadOnly(false); // Aktifkan form untuk diedit
|
||||
setEditingErrorCodeKey(record.key); // Tandai item ini sebagai yang sedang diedit
|
||||
errorCodeForm.setFieldsValue({
|
||||
error_code: record.error_code,
|
||||
error_code_name: record.error_code_name,
|
||||
error_code_description: record.error_code_description,
|
||||
status: record.status,
|
||||
});
|
||||
setFileList(record.fileList || []);
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(record.key);
|
||||
|
||||
if (record.solution && record.solution.length > 0) {
|
||||
setSolutionsForExistingRecord(record.solution, errorCodeForm);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddErrorCode = async () => {
|
||||
try {
|
||||
const values = await errorCodeForm.validateFields();
|
||||
const newErrorCode = {
|
||||
...values,
|
||||
status: values.status === undefined ? true : values.status,
|
||||
fileList: fileList,
|
||||
key: editingErrorCodeKey || `temp-${Date.now()}` // Gunakan key yang ada jika edit, jika tidak buat baru
|
||||
};
|
||||
|
||||
if (editingErrorCodeKey) {
|
||||
setErrorCodes(errorCodes.map(item => item.key === editingErrorCodeKey ? newErrorCode : item));
|
||||
message.success('Error code berhasil diupdate');
|
||||
} else {
|
||||
setErrorCodes([...errorCodes, newErrorCode]);
|
||||
message.success('Error code berhasil ditambahkan');
|
||||
}
|
||||
errorCodeForm.resetFields();
|
||||
setFileList([]);
|
||||
} catch (error) {
|
||||
console.log('Validate Failed:', error);
|
||||
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk error code!' });
|
||||
const handleAddErrorCode = async (newErrorCode) => {
|
||||
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!'
|
||||
});
|
||||
}
|
||||
setIsErrorCodeFormReadOnly(false); // Reset status read-only
|
||||
setEditingErrorCodeKey(null); // Reset key item yang diedit
|
||||
|
||||
resetErrorCodeForm();
|
||||
};
|
||||
|
||||
const resetErrorCodeForm = () => {
|
||||
errorCodeForm.resetFields();
|
||||
errorCodeForm.setFieldsValue({
|
||||
status: true,
|
||||
solution_status_0: true,
|
||||
solution_type_0: 'text'
|
||||
});
|
||||
setFileList([]);
|
||||
resetSolutionFields();
|
||||
setIsErrorCodeFormReadOnly(false);
|
||||
setEditingErrorCodeKey(null);
|
||||
};
|
||||
|
||||
const handleCreateNewErrorCode = () => {
|
||||
resetErrorCodeForm();
|
||||
};
|
||||
|
||||
const handleDeleteErrorCode = (key) => {
|
||||
setErrorCodes(errorCodes.filter(item => item.key !== key));
|
||||
message.success('Error code berhasil dihapus');
|
||||
};
|
||||
|
||||
// Fungsi untuk mengubah file menjadi base64 untuk preview gambar
|
||||
const getBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
|
||||
// Fungsi untuk menangani preview file dari komponen Upload
|
||||
const handleUploadPreview = async (file) => {
|
||||
// Jika file bukan gambar, buka di tab baru
|
||||
if (!file.type.startsWith('image/')) {
|
||||
const url = URL.createObjectURL(file.originFileObj || file);
|
||||
window.open(url, '_blank');
|
||||
if (errorCodes.length <= 1) {
|
||||
NotifAlert({
|
||||
icon: 'warning',
|
||||
title: 'Perhatian',
|
||||
message: 'Setiap brand harus memiliki minimal 1 error code!'
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Jika file adalah gambar, tampilkan di modal
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj || file);
|
||||
}
|
||||
setPreviewImage(file.url || file.preview);
|
||||
setPreviewOpen(true);
|
||||
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
|
||||
|
||||
setErrorCodes(errorCodes.filter(item => item.key !== key));
|
||||
NotifOk({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
message: 'Error code berhasil dihapus!'
|
||||
});
|
||||
};
|
||||
|
||||
const uploadProps = {
|
||||
multiple: true,
|
||||
accept: '.pdf,.jpg,.jpeg,.png,.gif',
|
||||
onRemove: (file) => {
|
||||
const newFileList = fileList.filter(item => item.uid !== file.uid);
|
||||
setFileList(newFileList);
|
||||
},
|
||||
beforeUpload: (file) => {
|
||||
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) {
|
||||
message.error(`${file.name} bukan file PDF atau gambar yang diizinkan.`);
|
||||
return Upload.LIST_IGNORE;
|
||||
NotifAlert({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
message: `${file.name} bukan file PDF atau gambar yang diizinkan.`
|
||||
});
|
||||
return;
|
||||
}
|
||||
setFileList(prevList => [...prevList, file]);
|
||||
return false; // Prevent auto-upload
|
||||
},
|
||||
fileList,
|
||||
onPreview: handleUploadPreview, // Tambahkan handler onPreview
|
||||
|
||||
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 errorCodeColumns = [
|
||||
{ title: 'Error Code', dataIndex: 'error_code', key: 'error_code' },
|
||||
{ title: 'Trouble Description', dataIndex: 'description', key: 'description' },
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
render: (status) => (
|
||||
<Tag color={status ? '#23A55A' : 'red'}>
|
||||
{status ? 'Active' : 'Inactive'}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button type="text" icon={<EyeOutlined />} onClick={() => handlePreviewErrorCode(record)} style={{ color: '#1890ff', borderColor: '#1890ff' }} />
|
||||
<Button type="text" icon={<EditOutlined />} onClick={() => handleEditErrorCode(record)} style={{ color: '#faad14', borderColor: '#faad14' }} />
|
||||
<Button danger type="text" icon={<DeleteOutlined />} onClick={() => handleDeleteErrorCode(record.key)} style={{ borderColor: '#ff4d4f' }} />
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
brandForm.setFieldsValue(formData);
|
||||
}, [formData, brandForm]);
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbItems([
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>• Master</Text> },
|
||||
{ title: <Text strong style={{ fontSize: '14px' }} onClick={() => navigate('/master/brand-device')}>Brand Device</Text> },
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>Tambah Brand Device</Text> }
|
||||
]);
|
||||
}, [setBreadcrumbItems, navigate]);
|
||||
const handleFileRemove = (file) => {
|
||||
const newFileList = fileList.filter(item => item.uid !== file.uid);
|
||||
setFileList(newFileList);
|
||||
};
|
||||
|
||||
const renderStepContent = () => {
|
||||
if (currentStep === 0) {
|
||||
return (
|
||||
<Form layout="vertical" form={brandForm} onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} initialValues={formData}>
|
||||
<Form.Item label="Status">
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
checked={formData.status}
|
||||
style={{ backgroundColor: formData.status ? '#23A55A' : '#bfbfbf' }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>{formData.status ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item label="Brand Code" name="brand_code">
|
||||
<Input placeholder={'Brand Code Auto Fill'} disabled style={{ backgroundColor: '#f5f5f5', cursor: 'not-allowed' }} />
|
||||
</Form.Item>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Brand Name" name="brandName" rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Manufacturer" name="manufacturer" rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}>
|
||||
<Input placeholder="Enter Manufacturer" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Brand Type" name="brandType">
|
||||
<Input placeholder="Enter Brand Type (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item label="Model" name="model">
|
||||
<Input placeholder="Enter Model (Optional)" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Form.Item label="Description" name="description">
|
||||
<Input.TextArea rows={4} placeholder="Enter Description (Optional)" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<BrandForm
|
||||
form={brandForm}
|
||||
formData={formData}
|
||||
onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))}
|
||||
isEdit={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (currentStep === 1) {
|
||||
return (
|
||||
<Row gutter={24}>
|
||||
<Col span={12}>
|
||||
<Title level={5} style={{ marginBottom: 16 }}>Tambah Error Code</Title>
|
||||
<Form form={errorCodeForm} layout="vertical" initialValues={{ status: true }}>
|
||||
<Form.Item label="Status">
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Form.Item name="status" valuePropName="checked" noStyle>
|
||||
<Switch
|
||||
style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
|
||||
disabled={isErrorCodeFormReadOnly}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Text style={{ marginLeft: 8 }}>{statusValue ? 'Active' : 'Inactive'}</Text>
|
||||
</div>
|
||||
</Form.Item>
|
||||
<Form.Item name="error_code" label="Error Code" rules={[{ required: true, message: 'Error Code wajib diisi' }]}>
|
||||
<Input disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="Trouble Description" rules={[{ required: true, message: 'Trouble Description wajib diisi' }]}>
|
||||
<Input.TextArea disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
<Form.Item name="what_action_to_take" label="What Action to Take">
|
||||
<Input.TextArea placeholder="Enter action to take (Optional)" disabled={isErrorCodeFormReadOnly} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Upload File (Opsional)">
|
||||
<Upload {...uploadProps} disabled={isErrorCodeFormReadOnly}>
|
||||
<Button icon={<UploadOutlined />} disabled={isErrorCodeFormReadOnly}>
|
||||
Click to Upload (File or Image)
|
||||
</Button>
|
||||
</Upload>
|
||||
</Form.Item>
|
||||
<Form.Item style={{ textAlign: 'right', marginTop: 24 }}>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAddErrorCode}
|
||||
>
|
||||
{editingErrorCodeKey ? 'Update Error Code' : 'Tambah Error Code'}
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
</Form.Item>
|
||||
<Title level={5} style={{ marginBottom: 16 }}>
|
||||
{isErrorCodeFormReadOnly
|
||||
? 'View Error Code'
|
||||
: (editingErrorCodeKey ? 'Edit Error Code' : 'Tambah Error Code')
|
||||
}
|
||||
</Title>
|
||||
<Form
|
||||
form={errorCodeForm}
|
||||
layout="vertical"
|
||||
initialValues={{ status: true, solution_status_0: true, solution_type_0: 'text' }}
|
||||
onValuesChange={checkFirstSolutionValid}
|
||||
>
|
||||
<ErrorCodeForm
|
||||
errorCodeForm={errorCodeForm}
|
||||
isErrorCodeFormReadOnly={isErrorCodeFormReadOnly}
|
||||
editingErrorCodeKey={editingErrorCodeKey}
|
||||
solutionFields={solutionFields}
|
||||
solutionTypes={solutionTypes}
|
||||
solutionStatuses={solutionStatuses}
|
||||
fileList={fileList}
|
||||
solutionsToDelete={solutionsToDelete}
|
||||
firstSolutionValid={firstSolutionValid}
|
||||
onAddErrorCode={handleAddErrorCode}
|
||||
onAddSolutionField={handleAddSolutionField}
|
||||
onRemoveSolutionField={handleRemoveSolutionField}
|
||||
onSolutionTypeChange={handleSolutionTypeChange}
|
||||
onSolutionStatusChange={handleSolutionStatusChange}
|
||||
onSolutionFileUpload={handleSolutionFileUpload}
|
||||
onFileView={handleFileView}
|
||||
onCreateNewErrorCode={handleCreateNewErrorCode}
|
||||
onResetForm={resetErrorCodeForm}
|
||||
errorCodes={errorCodes}
|
||||
/>
|
||||
</Form>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Title level={5}>Daftar Error Code ({errorCodes.length})</Title>
|
||||
<Table columns={errorCodeColumns} dataSource={errorCodes} rowKey="key" pagination={false} />
|
||||
<ErrorCodeTable
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onFileView={handleFileView}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
@@ -352,8 +368,7 @@ const AddBrandDevice = () => {
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4}>Tambah Brand Device</Title>
|
||||
<Divider />
|
||||
<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" />
|
||||
@@ -362,57 +377,15 @@ const AddBrandDevice = () => {
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
<Divider />
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#E9F6EF' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: 'white',
|
||||
defaultColor: '#23A55A',
|
||||
defaultBorderColor: '#23A55A',
|
||||
defaultHoverColor: '#23A55A',
|
||||
defaultHoverBorderColor: '#23A55A',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button onClick={handleCancel}>Batal</Button>
|
||||
{currentStep > 0 && (
|
||||
<Button onClick={() => setCurrentStep(currentStep - 1)} style={{ marginRight: 8 }}>Kembali</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652', // A slightly darker shade for hover
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{currentStep < 1 && (
|
||||
<Button loading={confirmLoading} onClick={handleNextStep}>Lanjut</Button>
|
||||
)}
|
||||
{currentStep === 1 && (
|
||||
<Button loading={confirmLoading} onClick={handleFinish}>Simpan</Button>
|
||||
)}
|
||||
</ConfigProvider>
|
||||
</div>
|
||||
{/* Modal untuk preview gambar */}
|
||||
<Modal
|
||||
open={previewOpen}
|
||||
title={previewTitle}
|
||||
footer={null}
|
||||
onCancel={() => setPreviewOpen(false)}
|
||||
>
|
||||
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
||||
</Modal>
|
||||
<FormActions
|
||||
currentStep={currentStep}
|
||||
onPreviousStep={() => setCurrentStep(currentStep - 1)}
|
||||
onNextStep={handleNextStep}
|
||||
onSave={handleFinish}
|
||||
onCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
isEditMode={false}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user