Add ErrorCodeListModal component for managing error codes with enhanced UI and functionality
This commit is contained in:
212
src/pages/master/brandDevice/component/ErrorCodeListModal.jsx
Normal file
212
src/pages/master/brandDevice/component/ErrorCodeListModal.jsx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Modal, Table, Button, Space, message, Tag, ConfigProvider } from 'antd';
|
||||||
|
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||||
|
import { NotifConfirmDialog, NotifOk, NotifAlert } from '../../../../components/Global/ToastNotif';
|
||||||
|
|
||||||
|
const ErrorCodeListModal = ({
|
||||||
|
visible,
|
||||||
|
onClose,
|
||||||
|
errorCodes,
|
||||||
|
loading,
|
||||||
|
onPreview,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onAddNew,
|
||||||
|
}) => {
|
||||||
|
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'No',
|
||||||
|
key: 'no',
|
||||||
|
width: '5%',
|
||||||
|
align: 'center',
|
||||||
|
render: (_, __, index) => index + 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Error Code',
|
||||||
|
dataIndex: 'error_code',
|
||||||
|
key: 'error_code',
|
||||||
|
width: '15%',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Error Name',
|
||||||
|
dataIndex: 'error_code_name',
|
||||||
|
key: 'error_code_name',
|
||||||
|
width: '25%',
|
||||||
|
render: (text) => text || '-',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Description',
|
||||||
|
dataIndex: 'error_code_description',
|
||||||
|
key: 'error_code_description',
|
||||||
|
width: '30%',
|
||||||
|
render: (text) => text || '-',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Solutions',
|
||||||
|
key: 'solutions',
|
||||||
|
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: 'Spareparts',
|
||||||
|
key: 'spareparts',
|
||||||
|
width: '10%',
|
||||||
|
align: 'center',
|
||||||
|
render: (_, record) => {
|
||||||
|
const sparepartCount = record.sparepart ? record.sparepart.length : 0;
|
||||||
|
return (
|
||||||
|
<Tag color={sparepartCount > 0 ? 'blue' : 'default'}>{sparepartCount} SP</Tag>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Status',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
width: '10%',
|
||||||
|
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"
|
||||||
|
icon={<EyeOutlined />}
|
||||||
|
onClick={() => onPreview(record)}
|
||||||
|
style={{
|
||||||
|
color: '#23A55A',
|
||||||
|
borderColor: '#23A55A',
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<EditOutlined />}
|
||||||
|
onClick={() => onEdit(record)}
|
||||||
|
style={{
|
||||||
|
color: '#faad14',
|
||||||
|
borderColor: '#faad14',
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
danger
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
onClick={() => handleDelete(record)}
|
||||||
|
style={{
|
||||||
|
borderColor: '#ff4d4f',
|
||||||
|
color: '#ff4d4f',
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Space>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleDelete = (record) => {
|
||||||
|
if (errorCodes.length <= 1) {
|
||||||
|
NotifAlert({
|
||||||
|
icon: 'warning',
|
||||||
|
title: 'Perhatian',
|
||||||
|
message: 'Setiap brand harus memiliki minimal 1 error code!',
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
NotifConfirmDialog({
|
||||||
|
icon: 'question',
|
||||||
|
title: 'Konfirmasi',
|
||||||
|
message: `Apakah anda yakin hapus error code "${
|
||||||
|
record.error_code_name || record.error_code
|
||||||
|
}" ?`,
|
||||||
|
onConfirm: () => {
|
||||||
|
setConfirmLoading(true);
|
||||||
|
onDelete(record.key);
|
||||||
|
setConfirmLoading(false);
|
||||||
|
},
|
||||||
|
onCancel: () => {},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
title={
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>Daftar Error Codes</span>
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
token: { colorBgContainer: '#23a55ade' },
|
||||||
|
components: {
|
||||||
|
Button: {
|
||||||
|
defaultBg: '#23a55a',
|
||||||
|
defaultColor: '#FFFFFF',
|
||||||
|
defaultBorderColor: '#23a55a',
|
||||||
|
defaultHoverBg: '#209652',
|
||||||
|
defaultHoverColor: '#FFFFFF',
|
||||||
|
defaultHoverBorderColor: '#23a55a',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
icon={<PlusOutlined />}
|
||||||
|
onClick={onAddNew}
|
||||||
|
>
|
||||||
|
Add New Error Code
|
||||||
|
</Button>
|
||||||
|
</ConfigProvider>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
open={visible}
|
||||||
|
onCancel={onClose}
|
||||||
|
closable={false}
|
||||||
|
maskClosable={false}
|
||||||
|
width={1200}
|
||||||
|
footer={[
|
||||||
|
<Button key="close" onClick={onClose}>
|
||||||
|
Close
|
||||||
|
</Button>,
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={errorCodes}
|
||||||
|
loading={loading || confirmLoading}
|
||||||
|
rowKey="key"
|
||||||
|
pagination={{
|
||||||
|
pageSize: 10,
|
||||||
|
showSizeChanger: true,
|
||||||
|
showQuickJumper: true,
|
||||||
|
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
|
||||||
|
}}
|
||||||
|
scroll={{ x: 1000 }}
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorCodeListModal;
|
||||||
Reference in New Issue
Block a user