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