feat: implement log history fetching and display in ListNotification component
This commit is contained in:
@@ -38,7 +38,7 @@ import {
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useNavigate, Link as RouterLink } from 'react-router-dom';
|
||||
import { getAllNotification } from '../../../api/notification';
|
||||
import { getAllNotification, getNotificationLogByNotificationId } from '../../../api/notification';
|
||||
|
||||
const { Text, Paragraph, Link: AntdLink } = Typography;
|
||||
|
||||
@@ -47,17 +47,18 @@ const transformNotificationData = (apiData) => {
|
||||
return apiData.map((item, index) => ({
|
||||
id: `notification-${item.notification_error_id}-${index}`, // Unique key prefix with array index
|
||||
type: item.is_read ? 'resolved' : item.is_delivered ? 'warning' : 'critical',
|
||||
title: item.error_code?.error_code_name || item.device_name || 'Unknown Error',
|
||||
title: item.device_name || 'Unknown Device',
|
||||
issue: item.error_code || item.error_code_name || 'Unknown Error',
|
||||
description: `${item.error_code} - ${item.error_code_name || ''}`,
|
||||
timestamp:
|
||||
item.created_at ? new Date(item.created_at).toLocaleString('id-ID', {
|
||||
timestamp: item.created_at
|
||||
? new Date(item.created_at).toLocaleString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}) + ' WIB' : 'N/A',
|
||||
}) + ' WIB'
|
||||
: 'N/A',
|
||||
location: item.plant_sub_section_name || item.device_location || 'Location not specified',
|
||||
details: item.message_error_issue || 'No details available',
|
||||
link: `/verification-sparepart/${item.notification_error_id}`, // Dummy URL untuk verifikasi spare part
|
||||
@@ -68,7 +69,10 @@ const transformNotificationData = (apiData) => {
|
||||
errorCode: item.error_code,
|
||||
solutionName: item.error_code?.solution?.[0]?.solution_name || 'N/A',
|
||||
typeSolution: item.error_code?.solution?.[0]?.type_solution || 'N/A',
|
||||
pathSolution: item.error_code?.solution?.[0]?.path_document || item.error_code?.solution?.[0]?.path_solution || 'N/A',
|
||||
pathSolution:
|
||||
item.error_code?.solution?.[0]?.path_document ||
|
||||
item.error_code?.solution?.[0]?.path_solution ||
|
||||
'N/A',
|
||||
error_code: item.error_code,
|
||||
}));
|
||||
};
|
||||
@@ -98,37 +102,6 @@ const userHistoryData = [
|
||||
},
|
||||
];
|
||||
|
||||
// Dummy data untuk log history
|
||||
const logHistoryData = [
|
||||
{
|
||||
id: 1,
|
||||
timestamp: '04-11-2025 11:55 WIB',
|
||||
addedBy: {
|
||||
name: 'Budi Santoso',
|
||||
phone: '081122334455',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
timestamp: '04-11-2025 11:45 WIB',
|
||||
addedBy: {
|
||||
name: 'John Doe',
|
||||
phone: '081234567890',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
timestamp: '04-11-2025 11:40 WIB',
|
||||
addedBy: {
|
||||
name: 'Jane Smith',
|
||||
phone: '087654321098',
|
||||
},
|
||||
description: 'Suhu sudah coba diturunkan, namun masih belum mencapai treshold aman.',
|
||||
},
|
||||
];
|
||||
|
||||
const ListNotification = memo(function ListNotification(props) {
|
||||
const [notifications, setNotifications] = useState([]);
|
||||
const [activeTab, setActiveTab] = useState('all');
|
||||
@@ -138,6 +111,8 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
const [modalContent, setModalContent] = useState(null); // 'user', 'log', 'details', or null
|
||||
const [isAddingLog, setIsAddingLog] = useState(false);
|
||||
const [selectedNotification, setSelectedNotification] = useState(null);
|
||||
const [logHistoryData, setLogHistoryData] = useState([]);
|
||||
const [logLoading, setLogLoading] = useState(false);
|
||||
const [pagination, setPagination] = useState({
|
||||
current_page: 1,
|
||||
current_limit: 10,
|
||||
@@ -281,6 +256,40 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
});
|
||||
};
|
||||
|
||||
// Fetch log history from API
|
||||
const fetchLogHistory = async (notificationId) => {
|
||||
try {
|
||||
setLogLoading(true);
|
||||
const response = await getNotificationLogByNotificationId(notificationId);
|
||||
if (response && response.data) {
|
||||
// Transform API data to component format
|
||||
const transformedLogs = response.data.map((log) => ({
|
||||
id: log.notification_error_log_id,
|
||||
timestamp: log.created_at
|
||||
? new Date(log.created_at).toLocaleString('id-ID', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}) + ' WIB'
|
||||
: 'N/A',
|
||||
addedBy: {
|
||||
name: log.contact_name || 'Unknown',
|
||||
phone: log.contact_phone || 'N/A',
|
||||
},
|
||||
description: log.notification_error_log_description || '',
|
||||
}));
|
||||
setLogHistoryData(transformedLogs);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching log history:', err);
|
||||
setLogHistoryData([]); // Set empty array on error
|
||||
} finally {
|
||||
setLogLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const tabButtonStyle = (isActive) => ({
|
||||
padding: '12px 16px',
|
||||
border: 'none',
|
||||
@@ -500,6 +509,15 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Set the selected notification for the log history
|
||||
const notificationId =
|
||||
notification.id.split('-')[1];
|
||||
setSelectedNotification(notification);
|
||||
|
||||
// Fetch log history for the selected notification
|
||||
fetchLogHistory(notificationId);
|
||||
|
||||
setModalContent('log');
|
||||
}}
|
||||
/>
|
||||
@@ -554,6 +572,15 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
|
||||
const renderLogHistory = () => (
|
||||
<>
|
||||
{logLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '24px' }}>
|
||||
<Spin size="large" />
|
||||
</div>
|
||||
) : logHistoryData.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '24px', color: '#8c8c8c' }}>
|
||||
Tidak ada log history
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ padding: '0 16px', position: 'relative' }}>
|
||||
{/* Garis vertikal yang menyambung */}
|
||||
<div
|
||||
@@ -605,7 +632,10 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
<Space direction="vertical" size={4}>
|
||||
<Space>
|
||||
<ClockCircleOutlined />
|
||||
<Text type="secondary" style={{ fontSize: '12px' }}>
|
||||
<Text
|
||||
type="secondary"
|
||||
style={{ fontSize: '12px' }}
|
||||
>
|
||||
Added at {log.timestamp}
|
||||
</Text>
|
||||
</Space>
|
||||
@@ -643,6 +673,7 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</Row>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -813,7 +844,16 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
bodyStyle={{ padding: '12px' }}
|
||||
onClick={() => setModalContent('log')}
|
||||
onClick={() => {
|
||||
// Set the selected notification for the log history if not already set
|
||||
if (selectedNotification) {
|
||||
const notificationId =
|
||||
selectedNotification.id.split('-')[1];
|
||||
// Fetch log history for the selected notification
|
||||
fetchLogHistory(notificationId);
|
||||
}
|
||||
setModalContent('log');
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<HistoryOutlined
|
||||
@@ -838,7 +878,8 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
<Text type="secondary" style={{ fontSize: '10px' }}>
|
||||
PDF
|
||||
</Text>
|
||||
} >
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -1129,7 +1170,22 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
{logHistoryData.map((log) => (
|
||||
{logLoading ? (
|
||||
<div style={{ textAlign: 'center', padding: '12px' }}>
|
||||
<Spin size="small" />
|
||||
</div>
|
||||
) : logHistoryData.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
padding: '12px',
|
||||
color: '#8c8c8c',
|
||||
}}
|
||||
>
|
||||
Tidak ada log history
|
||||
</div>
|
||||
) : (
|
||||
logHistoryData.map((log) => (
|
||||
<Card
|
||||
key={log.id}
|
||||
size="small"
|
||||
@@ -1146,7 +1202,8 @@ const ListNotification = memo(function ListNotification(props) {
|
||||
{log.timestamp}
|
||||
</Text>
|
||||
</Card>
|
||||
))}
|
||||
))
|
||||
)}
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
Reference in New Issue
Block a user