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

feat: add buttom for Daftar Error Code

Browse Source
This commit is contained in:
zain94rif
2026-02-24 15:41:31 +07:00
parent 66a9a4e57e
commit a60dcd104b
1 changed files with 91 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/pages/master/brandDevice/component/ListErrorCode.jsx
View File

@@ -1,6 +1,12 @@
import React, { useState, useEffect, useMemo } from 'react';
import { Card, Input, Button, Row, Col, Empty } from 'antd';
import { PlusOutlined, SearchOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import {
PlusOutlined,
SearchOutlined,
DeleteOutlined,
LeftOutlined,
RightOutlined,
} from '@ant-design/icons';
import { getErrorCodesByBrandId, deleteErrorCode } from '../../../../api/master-brand';
import { NotifAlert, NotifOk, NotifConfirmDialog } from '../../../../components/Global/ToastNotif';
@@ -16,7 +22,7 @@ const ListErrorCode = ({
onSearch,
onSearchClear,
isReadOnly = false,
errorCodes: propErrorCodes = null
errorCodes: propErrorCodes = null,
}) => {
const [errorCodes, setErrorCodes] = useState([]);
const [loading, setLoading] = useState(false);
@@ -52,12 +58,12 @@ const ListErrorCode = ({
if (response && response.statusCode === 200) {
const apiErrorData = response.data || [];
const allErrorCodes = [
...apiErrorData.map(ec => ({
...apiErrorData.map((ec) => ({
...ec,
tempId: `existing_${ec.error_code_id}`,
status: 'existing'
status: 'existing',
})),
...tempErrorCodes.filter(ec => ec.status !== 'deleted')
...tempErrorCodes.filter((ec) => ec.status !== 'deleted'),
];
setErrorCodes(allErrorCodes);
@@ -82,11 +88,9 @@ const ListErrorCode = ({
useEffect(() => {
if (isReadOnly && propErrorCodes) {
setErrorCodes(propErrorCodes);
setLoading(false);
} else {
fetchErrorCodes();
}
}, [brandId, queryParams, tempErrorCodes, trigerFilter, isReadOnly, propErrorCodes]);
@@ -126,20 +130,19 @@ const ListErrorCode = ({
title: 'Hapus Error Code',
message: `Apakah Anda yakin ingin menghapus error code ${item.error_code}?`,
onConfirm: () => performDelete(item),
onCancel: () => { },
confirmButtonText: 'Hapus'
onCancel: () => {},
confirmButtonText: 'Hapus',
});
}
};
const performDelete = async (item) => {
try {
if (!item.error_code_id || item.error_code_id === 'undefined') {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Error code ID tidak valid'
message: 'Error code ID tidak valid',
});
return;
}
@@ -148,7 +151,7 @@ const ListErrorCode = ({
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Brand ID tidak valid'
message: 'Brand ID tidak valid',
});
return;
}
@@ -159,30 +162,61 @@ const ListErrorCode = ({
NotifOk({
icon: 'success',
title: 'Berhasil',
message: 'Error code berhasil dihapus'
message: 'Error code berhasil dihapus',
});
fetchErrorCodes();
} else {
NotifAlert({
icon: 'error',
title: 'Gagal',
message: 'Gagal menghapus error code'
message: 'Gagal menghapus error code',
});
}
} catch (error) {
NotifAlert({
icon: 'error',
title: 'Error',
message: 'Terjadi kesalahan saat menghapus error code'
message: 'Terjadi kesalahan saat menghapus error code',
});
}
};
const handleAddNew = () => {
if (onAddNew) {
onAddNew();
}
};
return (
<Card
title="Daftar Error Code"
style={{ width: '100%', minWidth: '472px' }}
styles={{ body: { padding: '12px' } }}
title={
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<span>Daftar Error Code</span>
<Button
icon={<PlusOutlined />}
onClick={handleAddNew}
size="medium"
type="default"
style={{
color: '#23A55A',
borderColor: '#23A55A',
fontWeight: '500',
borderRadius: '6px',
padding: '0 16px',
}}
>
Add Data
</Button>
</div>
}
style={{ width: '100%', minWidth: '300px' }}
bodyStyle={{ padding: '12px' }}
>
<Input.Search
placeholder="Cari error code..."
@@ -203,7 +237,7 @@ const ListErrorCode = ({
style={{
backgroundColor: '#23A55A',
borderColor: '#23A55A',
height: '32px'
height: '32px',
}}
>
Search
@@ -217,19 +251,18 @@ const ListErrorCode = ({
}}
/>
<div style={{
height: '90vh',
border: '1px solid #d9d9d9',
borderRadius: '6px',
overflow: 'auto',
marginBottom: 12,
backgroundColor: '#fafafa'
}}>
<div
style={{
height: '90vh',
border: '1px solid #d9d9d9',
borderRadius: '6px',
overflow: 'auto',
marginBottom: 12,
backgroundColor: '#fafafa',
}}
>
{errorCodes.length === 0 ? (
<Empty
description="Belum ada error code"
style={{ marginTop: 50 }}
/>
<Empty description="Belum ada error code" style={{ marginTop: 50 }} />
) : (
<div style={{ padding: '8px' }}>
{errorCodes.map((item) => (
@@ -240,13 +273,25 @@ const ListErrorCode = ({
padding: '8px 12px',
borderRadius: '6px',
marginBottom: '4px',
border: selectedErrorCode?.tempId === item.tempId ? '2px solid #23A55A' : '1px solid #d9d9d9',
backgroundColor: selectedErrorCode?.tempId === item.tempId ? '#f6ffed' : '#fff',
transition: 'all 0.2s ease'
border:
selectedErrorCode?.tempId === item.tempId
? '2px solid #23A55A'
: '1px solid #d9d9d9',
backgroundColor:
selectedErrorCode?.tempId === item.tempId
? '#f6ffed'
: '#fff',
transition: 'all 0.2s ease',
}}
onClick={() => onErrorCodeSelect(item)}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 'bold', fontSize: '12px' }}>
{item.error_code}
@@ -266,7 +311,7 @@ const ListErrorCode = ({
padding: '2px 6px',
height: '24px',
fontSize: '11px',
border: '1px solid #ff4d4f'
border: '1px solid #ff4d4f',
}}
/>
)}
@@ -292,9 +337,15 @@ const ListErrorCode = ({
onClick={handlePrevious}
disabled={pagination.current_page <= 1}
size="small"
></Button>
<span
style={{
fontSize: '12px',
color: '#666',
minWidth: '60px',
textAlign: 'center',
}}
>
</Button>
<span style={{ fontSize: '12px', color: '#666', minWidth: '60px', textAlign: 'center' }}>
{pagination.current_page} / {pagination.total_page}
</span>
<Button
@@ -302,8 +353,7 @@ const ListErrorCode = ({
onClick={handleNext}
disabled={pagination.current_page >= pagination.total_page}
size="small"
>
</Button>
></Button>
</div>
</Col>
</Row>
@@ -312,4 +362,4 @@ const ListErrorCode = ({
);
};
export default ListErrorCode;
export default ListErrorCode;