yogiedigital/cod-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance AddBrandDevice component with error code management, improved UI, and file upload functionality

Browse Source
This commit is contained in:
Iqbal Rizqi Kurniawan
2025-10-22 16:45:03 +07:00
parent 98e5ed250c
commit 4079466deb
1 changed files with 178 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/pages/master/brandDevice/AddBrandDevice.jsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Input, Divider, Typography, Switch, Button, Steps, Form, message, Table, Row, Col, Radio, Card, Tag, Upload, ConfigProvider } from 'antd'; import { Input, Divider, Typography, Switch, Button, Steps, Form, message, Table, Row, Col, Modal, Card, Tag, Upload, ConfigProvider, Space } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons'; import { PlusOutlined, UploadOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif'; import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb'; import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
@@ -26,8 +26,13 @@ const AddBrandDevice = () => {
const [errorCodeForm] = Form.useForm(); const [errorCodeForm] = Form.useForm();
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [currentStep, setCurrentStep] = useState(0); const [currentStep, setCurrentStep] = useState(0);
const [anotherSolutionType, setAnotherSolutionType] = useState(null);
const [fileList, setFileList] = useState([]); 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 // Watch for form values changes to update the switch color
const statusValue = Form.useWatch('status', errorCodeForm); const statusValue = Form.useWatch('status', errorCodeForm);
@@ -35,11 +40,10 @@ const AddBrandDevice = () => {
const defaultData = { const defaultData = {
brandName: '', brandName: '',
brandType: '', brandType: '',
manufacturer: '',
model: '', model: '',
manufacturer: '',
status: true, status: true,
brand_code: '', brand_code: '',
country: '',
description: '', description: '',
}; };
@@ -100,24 +104,45 @@ const AddBrandDevice = () => {
} }
}; };
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
};
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
};
const handleAddErrorCode = async () => { const handleAddErrorCode = async () => {
try { try {
const values = await errorCodeForm.validateFields(); const values = await errorCodeForm.validateFields();
const newErrorCode = { const newErrorCode = {
...values, ...values,
status: values.status === undefined ? true : values.status, status: values.status === undefined ? true : values.status,
image: fileList.length > 0 ? fileList[0] : null, fileList: fileList,
key: `temp-${Date.now()}` 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]); setErrorCodes([...errorCodes, newErrorCode]);
message.success('Error code berhasil ditambahkan'); message.success('Error code berhasil ditambahkan');
}
errorCodeForm.resetFields(); errorCodeForm.resetFields();
setAnotherSolutionType(null);
setFileList([]); setFileList([]);
} catch (error) { } catch (error) {
console.log('Validate Failed:', error); console.log('Validate Failed:', error);
NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk error code!' }); NotifAlert({ icon: 'warning', title: 'Perhatian', message: 'Harap isi semua kolom wajib untuk error code!' });
} }
setIsErrorCodeFormReadOnly(false); // Reset status read-only
setEditingErrorCodeKey(null); // Reset key item yang diedit
}; };
const handleDeleteErrorCode = (key) => { const handleDeleteErrorCode = (key) => {
@@ -125,15 +150,50 @@ const AddBrandDevice = () => {
message.success('Error code berhasil dihapus'); 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');
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));
};
const uploadProps = { const uploadProps = {
multiple: true,
accept: '.pdf,.jpg,.jpeg,.png,.gif',
onRemove: (file) => { onRemove: (file) => {
setFileList([]); const newFileList = fileList.filter(item => item.uid !== file.uid);
setFileList(newFileList);
}, },
beforeUpload: (file) => { beforeUpload: (file) => {
setFileList([file]); 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;
}
setFileList(prevList => [...prevList, file]);
return false; // Prevent auto-upload return false; // Prevent auto-upload
}, },
fileList, fileList,
onPreview: handleUploadPreview, // Tambahkan handler onPreview
}; };
const errorCodeColumns = [ const errorCodeColumns = [
@@ -153,7 +213,11 @@ const AddBrandDevice = () => {
title: 'Action', title: 'Action',
key: 'action', key: 'action',
render: (_, record) => ( render: (_, record) => (
<Button type="link" danger onClick={() => handleDeleteErrorCode(record.key)}>Delete</Button> <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>
), ),
}, },
]; ];
@@ -174,30 +238,44 @@ const AddBrandDevice = () => {
if (currentStep === 0) { if (currentStep === 0) {
return ( return (
<Form layout="vertical" form={brandForm} onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} initialValues={formData}> <Form layout="vertical" form={brandForm} onValuesChange={(changedValues, allValues) => setFormData(prev => ({...prev, ...allValues}))} initialValues={formData}>
<Form.Item label="Status" name="status" valuePropName="checked"> <Form.Item label="Status">
<div style={{ display: 'flex', alignItems: 'center' }}>
<Form.Item name="status" valuePropName="checked" noStyle>
<Switch <Switch
checked={formData.status} checked={formData.status}
style={{ backgroundColor: formData.status ? '#23A55A' : '#bfbfbf' }} style={{ backgroundColor: formData.status ? '#23A55A' : '#bfbfbf' }}
/> />
</Form.Item> </Form.Item>
<Text style={{ marginLeft: 8 }}>{formData.status ? 'Active' : 'Inactive'}</Text>
</div>
</Form.Item>
<Form.Item label="Brand Code" name="brand_code"> <Form.Item label="Brand Code" name="brand_code">
<Input placeholder={'Brand Code Auto Fill'} disabled style={{ backgroundColor: '#f5f5f5', cursor: 'not-allowed' }} /> <Input placeholder={'Brand Code Auto Fill'} disabled style={{ backgroundColor: '#f5f5f5', cursor: 'not-allowed' }} />
</Form.Item> </Form.Item>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Brand Name" name="brandName" rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}> <Form.Item label="Brand Name" name="brandName" rules={[{ required: true, message: 'Brand Name wajib diisi!' }]}>
<Input /> <Input />
</Form.Item> </Form.Item>
<Form.Item label="Brand Type" name="brandType" rules={[{ required: true, message: 'Type wajib diisi!' }]}> </Col>
<Input /> <Col span={12}>
</Form.Item>
<Form.Item label="Model" name="model" rules={[{ required: true, message: 'Model wajib diisi!' }]}>
<Input />
</Form.Item>
<Form.Item label="Manufacturer" name="manufacturer" rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}> <Form.Item label="Manufacturer" name="manufacturer" rules={[{ required: true, message: 'Manufacturer wajib diisi!' }]}>
<Input /> <Input placeholder="Enter Manufacturer" />
</Form.Item> </Form.Item>
<Form.Item label="Country" name="country" rules={[{ required: true, message: 'Country wajib diisi!' }]}> </Col>
<Input /> </Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Brand Type" name="brandType">
<Input placeholder="Enter Brand Type (Optional)" />
</Form.Item> </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"> <Form.Item label="Description" name="description">
<Input.TextArea rows={4} placeholder="Enter Description (Optional)" /> <Input.TextArea rows={4} placeholder="Enter Description (Optional)" />
</Form.Item> </Form.Item>
@@ -206,71 +284,67 @@ const AddBrandDevice = () => {
} }
if (currentStep === 1) { if (currentStep === 1) {
return ( return (
<div> <Row gutter={24}>
<Title level={5}>Tambah Error Code {errorCodes.length + 1}</Title> <Col span={12}>
<Title level={5} style={{ marginBottom: 16 }}>Tambah Error Code</Title>
<Form form={errorCodeForm} layout="vertical" initialValues={{ status: true }}> <Form form={errorCodeForm} layout="vertical" initialValues={{ status: true }}>
<Form.Item label="Status" name="status" valuePropName="checked"> <Form.Item label="Status">
<div style={{ display: 'flex', alignItems: 'center' }}>
<Form.Item name="status" valuePropName="checked" noStyle>
<Switch <Switch
style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }} style={{ backgroundColor: statusValue ? '#23A55A' : '#bfbfbf' }}
disabled={isErrorCodeFormReadOnly}
/> />
</Form.Item> </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' }]}> <Form.Item name="error_code" label="Error Code" rules={[{ required: true, message: 'Error Code wajib diisi' }]}>
<Input /> <Input disabled={isErrorCodeFormReadOnly} />
</Form.Item> </Form.Item>
<Form.Item name="description" label="Trouble Description" rules={[{ required: true, message: 'Trouble Description wajib diisi' }]}> <Form.Item name="description" label="Trouble Description" rules={[{ required: true, message: 'Trouble Description wajib diisi' }]}>
<Input.TextArea /> <Input.TextArea disabled={isErrorCodeFormReadOnly} />
</Form.Item> </Form.Item>
<Form.Item name="detected_method" label="Detected Method" rules={[{ required: true, message: 'Detected Method wajib diisi' }]}> <Form.Item name="what_action_to_take" label="What Action to Take">
<Input /> <Input.TextArea placeholder="Enter action to take (Optional)" disabled={isErrorCodeFormReadOnly} />
</Form.Item> </Form.Item>
<Row gutter={16}> <Form.Item label="Upload File (Opsional)">
<Col span={8}> <Upload {...uploadProps} disabled={isErrorCodeFormReadOnly}>
<Form.Item name="indicator_light" label="Indicator Light"> <Button icon={<UploadOutlined />} disabled={isErrorCodeFormReadOnly}>
<Input /> Click to Upload (File or Image)
</Form.Item> </Button>
</Col>
<Col span={8}>
<Form.Item name="detector" label="Detector">
<Input />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name="auto_shutdown" label="Auto Shutdown">
<Input />
</Form.Item>
</Col>
</Row>
<Form.Item name="what_action_to_take" label="What Action to Take" rules={[{ required: true, message: 'What Action to Take wajib diisi' }]}>
<Input.TextArea />
</Form.Item>
<Form.Item name="another_solution" label="Another Solution (opsional)">
<Radio.Group onChange={(e) => setAnotherSolutionType(e.target.value)}>
<Radio value="image">Image</Radio>
<Radio value="other">Other</Radio>
</Radio.Group>
</Form.Item>
{anotherSolutionType === 'image' && (
<Form.Item label="Upload Image">
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
)} <Form.Item style={{ textAlign: 'right', marginTop: 24 }}>
{anotherSolutionType === 'other' && ( <ConfigProvider
<Form.Item name="another_solution_text" label="Enter Solution Text"> theme={{
<Input.TextArea rows={4} /> components: {
</Form.Item> Button: {
)} defaultBg: '#23a55a',
<Form.Item> defaultColor: '#FFFFFF',
<Button type="dashed" icon={<PlusOutlined />} onClick={handleAddErrorCode} style={{ width: '100%' }}> defaultBorderColor: '#23a55a',
Tambah Error Code Lain defaultHoverBg: '#209652',
defaultHoverColor: '#FFFFFF',
defaultHoverBorderColor: '#23a55a',
},
},
}}
>
<Button
icon={<PlusOutlined />}
onClick={handleAddErrorCode}
>
{editingErrorCodeKey ? 'Update Error Code' : 'Tambah Error Code'}
</Button> </Button>
</ConfigProvider>
</Form.Item> </Form.Item>
</Form> </Form>
<Divider /> </Col>
<Title level={5}>Daftar Error Code</Title> <Col span={12}>
<Title level={5}>Daftar Error Code ({errorCodes.length})</Title>
<Table columns={errorCodeColumns} dataSource={errorCodes} rowKey="key" pagination={false} /> <Table columns={errorCodeColumns} dataSource={errorCodes} rowKey="key" pagination={false} />
</div> </Col>
</Row>
); );
} }
return null; return null;
@@ -330,6 +404,15 @@ const AddBrandDevice = () => {
)} )}
</ConfigProvider> </ConfigProvider>
</div> </div>
{/* Modal untuk preview gambar */}
<Modal
open={previewOpen}
title={previewTitle}
footer={null}
onCancel={() => setPreviewOpen(false)}
>
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</Card> </Card>
); );
}; };