feat: add brand device management with error code handling and navigation
This commit is contained in:
151
src/pages/master/brand/ErrorCode.jsx
Normal file
151
src/pages/master/brand/ErrorCode.jsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Card, Typography, Button, Modal, Form, Input, message } from 'antd';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
// import { getAllErrorCodesByBrand, createErrorCode, updateErrorCode, deleteErrorCode } from '../../api/master-errorcode'; // Mock this later
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
// Mock API functions for now
|
||||
const mockApi = {
|
||||
errorCodes: [
|
||||
{ error_code_id: 1, brand_id: 1, error_code: 'E-001', description: 'Paper Jam' },
|
||||
{ error_code_id: 2, brand_id: 1, error_code: 'E-002', description: 'Low Ink' },
|
||||
],
|
||||
getAllErrorCodesByBrand: async (brandId) => {
|
||||
return { status: 200, data: { data: mockApi.errorCodes.filter(ec => ec.brand_id == brandId) } };
|
||||
},
|
||||
createErrorCode: async (data) => {
|
||||
const newId = Math.max(...mockApi.errorCodes.map(ec => ec.error_code_id)) + 1;
|
||||
const newErrorCode = { ...data, error_code_id: newId };
|
||||
mockApi.errorCodes.push(newErrorCode);
|
||||
return { statusCode: 201, data: newErrorCode };
|
||||
},
|
||||
updateErrorCode: async (id, data) => {
|
||||
const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
|
||||
if (index !== -1) {
|
||||
mockApi.errorCodes[index] = { ...mockApi.errorCodes[index], ...data };
|
||||
return { statusCode: 200, data: mockApi.errorCodes[index] };
|
||||
}
|
||||
return { statusCode: 404, message: 'Not Found' };
|
||||
},
|
||||
deleteErrorCode: async (id) => {
|
||||
const index = mockApi.errorCodes.findIndex(ec => ec.error_code_id === id);
|
||||
if (index !== -1) {
|
||||
mockApi.errorCodes.splice(index, 1);
|
||||
return { statusCode: 200 };
|
||||
}
|
||||
return { statusCode: 404, message: 'Not Found' };
|
||||
}
|
||||
};
|
||||
|
||||
const ErrorCodePage = () => {
|
||||
const { brandId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [editingErrorCode, setEditingErrorCode] = useState(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
const response = await mockApi.getAllErrorCodesByBrand(brandId);
|
||||
if (response.status === 200) {
|
||||
setErrorCodes(response.data.data);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [brandId]);
|
||||
|
||||
const columns = [
|
||||
{ title: 'Error Code', dataIndex: 'error_code', key: 'error_code' },
|
||||
{ title: 'Description', dataIndex: 'description', key: 'description' },
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<Button type="link" onClick={() => handleEdit(record)}>Edit</Button>
|
||||
<Button type="link" danger onClick={() => handleDelete(record.error_code_id)}>Delete</Button>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingErrorCode(null);
|
||||
form.resetFields();
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (errorCode) => {
|
||||
setEditingErrorCode(errorCode);
|
||||
form.setFieldsValue(errorCode);
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
await mockApi.deleteErrorCode(id);
|
||||
message.success('Error code deleted successfully');
|
||||
fetchData();
|
||||
};
|
||||
|
||||
const handleModalOk = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
if (editingErrorCode) {
|
||||
await mockApi.updateErrorCode(editingErrorCode.error_code_id, values);
|
||||
message.success('Error code updated successfully');
|
||||
} else {
|
||||
await mockApi.createErrorCode({ ...values, brand_id: brandId });
|
||||
message.success('Error code created successfully');
|
||||
}
|
||||
setIsModalVisible(false);
|
||||
fetchData();
|
||||
} catch (error) {
|
||||
console.log('Validate Failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4}>Manage Error Codes for Brand ID: {brandId}</Title>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={handleAdd}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
Add Error Code
|
||||
</Button>
|
||||
<TableList
|
||||
columns={columns}
|
||||
getData={async () => ({ data: { data: errorCodes } })}
|
||||
triger={brandId}
|
||||
/>
|
||||
<Modal
|
||||
title={editingErrorCode ? 'Edit Error Code' : 'Add Error Code'}
|
||||
visible={isModalVisible}
|
||||
onOk={handleModalOk}
|
||||
onCancel={() => setIsModalVisible(false)}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item name="error_code" label="Error Code" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="description" label="Description" rules={[{ required: true }]}>
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorCodePage;
|
||||
59
src/pages/master/brand/FormBrand.jsx
Normal file
59
src/pages/master/brand/FormBrand.jsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Form, Input, Button, Typography, Card, message } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { createBrand } from '../../api/master-brand';
|
||||
|
||||
const { Title } = Typography;
|
||||
|
||||
const FormBrand = () => {
|
||||
const [form] = Form.useForm();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const onFinish = async (values) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await createBrand(values);
|
||||
if (response.statusCode === 200 || response.statusCode === 201) {
|
||||
message.success('Brand created successfully!');
|
||||
const newBrandId = response.data.brand_id;
|
||||
// Redirect to the error code page for the new brand
|
||||
navigate(`/master/brand/${newBrandId}/error-codes`);
|
||||
} else {
|
||||
message.error(response.message || 'Failed to create brand.');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('An error occurred while creating the brand.');
|
||||
console.error(error);
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<Title level={4}>Add New Brand</Title>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={onFinish}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
name="brand_name"
|
||||
label="Brand Name"
|
||||
rules={[{ required: true, message: 'Please input the brand name!' }]}
|
||||
>
|
||||
<Input placeholder="Enter brand name" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={loading}>
|
||||
Lanjut ke Error Code
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormBrand;
|
||||
Reference in New Issue
Block a user