feat: enhance error code management with table display and action buttons
This commit is contained in:
@@ -12,6 +12,9 @@ import {
|
||||
Spin,
|
||||
Modal,
|
||||
ConfigProvider,
|
||||
Table,
|
||||
Tag,
|
||||
Space,
|
||||
} from 'antd';
|
||||
import { NotifAlert, NotifOk } from '../../../components/Global/ToastNotif';
|
||||
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
|
||||
@@ -24,6 +27,7 @@ import ErrorCodeListModal from './component/ErrorCodeListModal';
|
||||
import FormActions from './component/FormActions';
|
||||
import { useErrorCodeLogic } from './hooks/errorCode';
|
||||
import { useSolutionLogic } from './hooks/solution';
|
||||
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Step } = Steps;
|
||||
@@ -53,7 +57,6 @@ const EditBrandDevice = () => {
|
||||
const [formData, setFormData] = useState(defaultData);
|
||||
const [errorCodes, setErrorCodes] = useState([]);
|
||||
const [errorCodeIcon, setErrorCodeIcon] = useState(null);
|
||||
const [showErrorCodeModal, setShowErrorCodeModal] = useState(false);
|
||||
const [solutionForm] = Form.useForm();
|
||||
|
||||
const { errorCodeFields, addErrorCode, removeErrorCode, editErrorCode } = useErrorCodeLogic(
|
||||
@@ -493,7 +496,7 @@ const EditBrandDevice = () => {
|
||||
return (
|
||||
<>
|
||||
<Row gutter={24}>
|
||||
<Col span={12}>
|
||||
<Col span={6}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -503,7 +506,7 @@ const EditBrandDevice = () => {
|
||||
: 'Error Code Form'
|
||||
: editingErrorCodeKey
|
||||
? 'Edit Error Code'
|
||||
: 'Tambah Error Code'}
|
||||
: 'Error Code'}
|
||||
</Title>
|
||||
}
|
||||
size="small"
|
||||
@@ -526,7 +529,7 @@ const EditBrandDevice = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Col span={8}>
|
||||
<Card
|
||||
title={
|
||||
<Title level={5} style={{ margin: 0 }}>
|
||||
@@ -559,49 +562,104 @@ const EditBrandDevice = () => {
|
||||
</Form>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* Error Codes List Button */}
|
||||
<Row justify="center">
|
||||
<Col>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: { colorBgContainer: '#23a55ade' },
|
||||
components: {
|
||||
Button: {
|
||||
defaultBg: '#23a55a',
|
||||
defaultColor: '#FFFFFF',
|
||||
defaultBorderColor: '#23a55a',
|
||||
defaultHoverBg: '#209652',
|
||||
defaultHoverColor: '#FFFFFF',
|
||||
defaultHoverBorderColor: '#23a55a',
|
||||
<Col span={10}>
|
||||
<Card size="small" title={`Error Codes (${errorCodes.length})`}>
|
||||
<Table
|
||||
dataSource={errorCodes}
|
||||
columns={[
|
||||
{
|
||||
title: 'Error Code',
|
||||
dataIndex: 'error_code',
|
||||
key: 'error_code',
|
||||
width: '25%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={() => setShowErrorCodeModal(true)}
|
||||
style={{ minWidth: '200px' }}
|
||||
>
|
||||
View All Error Codes ({errorCodes.length})
|
||||
</Button>
|
||||
</ConfigProvider>
|
||||
{
|
||||
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>
|
||||
|
||||
{/* Error Codes List Modal */}
|
||||
<ErrorCodeListModal
|
||||
visible={showErrorCodeModal}
|
||||
onClose={() => setShowErrorCodeModal(false)}
|
||||
errorCodes={errorCodes}
|
||||
loading={loading}
|
||||
onPreview={handlePreviewErrorCode}
|
||||
onEdit={handleEditErrorCode}
|
||||
onDelete={handleDeleteErrorCode}
|
||||
onAddNew={handleCreateNewErrorCode}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user