add event alarm management with list and detail views
This commit is contained in:
@@ -1,29 +1,71 @@
|
||||
import React, { memo, useEffect } from 'react';
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useBreadcrumb } from '../../layout/LayoutBreadcrumb';
|
||||
import { Typography } from 'antd';
|
||||
import { Form, Typography } from 'antd';
|
||||
import ListEventAlarm from './component/ListEventAlarm';
|
||||
import DetailEventAlarm from './component/DetailEventAlarm';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const IndexEventAlarm = memo(function IndexEventAlarm() {
|
||||
const navigate = useNavigate();
|
||||
const { setBreadcrumbItems } = useBreadcrumb();
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const [actionMode, setActionMode] = useState('list');
|
||||
const [selectedData, setSelectedData] = useState(null);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
setBreadcrumbItems([
|
||||
{ title: <Text strong style={{ fontSize: '14px' }}>• Event Alarm</Text> }
|
||||
{
|
||||
title: (
|
||||
<Text strong style={{ fontSize: '14px' }}>
|
||||
• Event Alarm
|
||||
</Text>
|
||||
),
|
||||
},
|
||||
]);
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, []);
|
||||
}, [navigate, setBreadcrumbItems]);
|
||||
|
||||
useEffect(() => {
|
||||
if (actionMode === 'preview') {
|
||||
setIsModalVisible(true);
|
||||
if (selectedData) {
|
||||
form.setFieldsValue(selectedData);
|
||||
}
|
||||
} else {
|
||||
setIsModalVisible(false);
|
||||
form.resetFields();
|
||||
}
|
||||
}, [actionMode, selectedData, form]);
|
||||
|
||||
const handleCancel = () => {
|
||||
setActionMode('list');
|
||||
setSelectedData(null);
|
||||
form.resetFields();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Event Alarm Page</h1>
|
||||
</div>
|
||||
<React.Fragment>
|
||||
<ListEventAlarm
|
||||
actionMode={actionMode}
|
||||
setActionMode={setActionMode}
|
||||
selectedData={selectedData}
|
||||
setSelectedData={setSelectedData}
|
||||
/>
|
||||
<DetailEventAlarm
|
||||
visible={isModalVisible}
|
||||
onCancel={handleCancel}
|
||||
form={form}
|
||||
selectedData={selectedData}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
247
src/pages/eventAlarm/component/DetailEventAlarm.jsx
Normal file
247
src/pages/eventAlarm/component/DetailEventAlarm.jsx
Normal file
@@ -0,0 +1,247 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
|
||||
// Dummy data untuk riwayat alarm
|
||||
const initialAlarmsData = [
|
||||
{
|
||||
alarm_id: 1,
|
||||
tanggal: '2025-01-15 08:30:00',
|
||||
plant_sub_section: 'Plant A - Section 1',
|
||||
device: 'Device 001',
|
||||
tag: 'TEMP-001',
|
||||
engineer: 'Pras',
|
||||
},
|
||||
{
|
||||
alarm_id: 2,
|
||||
tanggal: '2025-01-15 09:15:00',
|
||||
plant_sub_section: 'Plant B - Section 2',
|
||||
device: 'Device 002',
|
||||
tag: 'PRESS-002',
|
||||
engineer: 'Bagus',
|
||||
},
|
||||
{
|
||||
alarm_id: 3,
|
||||
tanggal: '2025-01-15 10:00:00',
|
||||
plant_sub_section: 'Plant A - Section 3',
|
||||
device: 'Device 003',
|
||||
tag: 'FLOW-003',
|
||||
engineer: 'iqbal',
|
||||
},
|
||||
{
|
||||
alarm_id: 4,
|
||||
tanggal: '2025-01-15 11:45:00',
|
||||
plant_sub_section: 'Plant C - Section 1',
|
||||
device: 'Device 004',
|
||||
tag: 'LEVEL-004',
|
||||
engineer: 'riski',
|
||||
},
|
||||
{
|
||||
alarm_id: 5,
|
||||
tanggal: '2025-01-15 13:20:00',
|
||||
plant_sub_section: 'Plant B - Section 3',
|
||||
device: 'Device 005',
|
||||
tag: 'TEMP-005',
|
||||
engineer: 'anton',
|
||||
},
|
||||
{
|
||||
alarm_id: 6,
|
||||
tanggal: '2025-01-15 14:00:00',
|
||||
plant_sub_section: 'Plant A - Section 2',
|
||||
device: 'Device 006',
|
||||
tag: 'PRESS-006',
|
||||
engineer: 'kurniawan',
|
||||
},
|
||||
{
|
||||
alarm_id: 7,
|
||||
tanggal: '2025-01-15 15:30:00',
|
||||
plant_sub_section: 'Plant C - Section 2',
|
||||
device: 'Device 007',
|
||||
tag: 'FLOW-007',
|
||||
engineer: 'wawan',
|
||||
},
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Tanggal',
|
||||
dataIndex: 'tanggal',
|
||||
key: 'tanggal',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'plant_sub_section',
|
||||
key: 'plant_sub_section',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Device',
|
||||
dataIndex: 'device',
|
||||
key: 'device',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Tag',
|
||||
dataIndex: 'tag',
|
||||
key: 'tag',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Engineer',
|
||||
dataIndex: 'engineer',
|
||||
key: 'engineer',
|
||||
width: '15%',
|
||||
},
|
||||
];
|
||||
|
||||
const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [alarmsData] = useState(initialAlarmsData);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Dummy data function to simulate API call
|
||||
const getAllEventAlarm = async (params) => {
|
||||
// Simulate API delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
|
||||
// Extract URLSearchParams
|
||||
const searchParam = params.get('search') || '';
|
||||
const page = parseInt(params.get('page')) || 1;
|
||||
const limit = parseInt(params.get('limit')) || 10;
|
||||
|
||||
console.log('getAllEventAlarm called with:', { searchParam, page, limit });
|
||||
|
||||
// Filter by search
|
||||
let filteredAlarms = alarmsData;
|
||||
if (searchParam) {
|
||||
const searchLower = searchParam.toLowerCase();
|
||||
filteredAlarms = alarmsData.filter(
|
||||
(alarm) =>
|
||||
alarm.tanggal.toLowerCase().includes(searchLower) ||
|
||||
alarm.plant_sub_section.toLowerCase().includes(searchLower) ||
|
||||
alarm.device.toLowerCase().includes(searchLower) ||
|
||||
alarm.tag.toLowerCase().includes(searchLower) ||
|
||||
alarm.engineer.toLowerCase().includes(searchLower)
|
||||
);
|
||||
}
|
||||
|
||||
// Pagination logic
|
||||
const totalData = filteredAlarms.length;
|
||||
const totalPages = Math.ceil(totalData / limit);
|
||||
const startIndex = (page - 1) * limit;
|
||||
const endIndex = startIndex + limit;
|
||||
const paginatedData = filteredAlarms.slice(startIndex, endIndex);
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
statusCode: 200,
|
||||
data: {
|
||||
data: paginatedData,
|
||||
total: totalData,
|
||||
paging: {
|
||||
page: page,
|
||||
limit: limit,
|
||||
total: totalData,
|
||||
page_total: totalPages,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode == 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode, alarmsData]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
// Auto search when clearing by backspace/delete
|
||||
if (value === '') {
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
getData={getAllEventAlarm}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListEventAlarm;
|
||||
247
src/pages/eventAlarm/component/ListEventAlarm.jsx
Normal file
247
src/pages/eventAlarm/component/ListEventAlarm.jsx
Normal file
@@ -0,0 +1,247 @@
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import { Button, Row, Col, Card, Input } from 'antd';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import TableList from '../../../components/Global/TableList';
|
||||
|
||||
// Dummy data untuk riwayat alarm
|
||||
const initialAlarmsData = [
|
||||
{
|
||||
alarm_id: 1,
|
||||
tanggal: '2025-01-15 08:30:00',
|
||||
plant_sub_section: 'Plant A - Section 1',
|
||||
device: 'Device 001',
|
||||
tag: 'TEMP-001',
|
||||
engineer: 'Pras',
|
||||
},
|
||||
{
|
||||
alarm_id: 2,
|
||||
tanggal: '2025-01-15 09:15:00',
|
||||
plant_sub_section: 'Plant B - Section 2',
|
||||
device: 'Device 002',
|
||||
tag: 'PRESS-002',
|
||||
engineer: 'Bagus',
|
||||
},
|
||||
{
|
||||
alarm_id: 3,
|
||||
tanggal: '2025-01-15 10:00:00',
|
||||
plant_sub_section: 'Plant A - Section 3',
|
||||
device: 'Device 003',
|
||||
tag: 'FLOW-003',
|
||||
engineer: 'iqbal',
|
||||
},
|
||||
{
|
||||
alarm_id: 4,
|
||||
tanggal: '2025-01-15 11:45:00',
|
||||
plant_sub_section: 'Plant C - Section 1',
|
||||
device: 'Device 004',
|
||||
tag: 'LEVEL-004',
|
||||
engineer: 'riski',
|
||||
},
|
||||
{
|
||||
alarm_id: 5,
|
||||
tanggal: '2025-01-15 13:20:00',
|
||||
plant_sub_section: 'Plant B - Section 3',
|
||||
device: 'Device 005',
|
||||
tag: 'TEMP-005',
|
||||
engineer: 'anton',
|
||||
},
|
||||
{
|
||||
alarm_id: 6,
|
||||
tanggal: '2025-01-15 14:00:00',
|
||||
plant_sub_section: 'Plant A - Section 2',
|
||||
device: 'Device 006',
|
||||
tag: 'PRESS-006',
|
||||
engineer: 'kurniawan',
|
||||
},
|
||||
{
|
||||
alarm_id: 7,
|
||||
tanggal: '2025-01-15 15:30:00',
|
||||
plant_sub_section: 'Plant C - Section 2',
|
||||
device: 'Device 007',
|
||||
tag: 'FLOW-007',
|
||||
engineer: 'wawan',
|
||||
},
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'No',
|
||||
key: 'no',
|
||||
width: '5%',
|
||||
align: 'center',
|
||||
render: (_, __, index) => index + 1,
|
||||
},
|
||||
{
|
||||
title: 'Tanggal',
|
||||
dataIndex: 'tanggal',
|
||||
key: 'tanggal',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Plant Sub Section',
|
||||
dataIndex: 'plant_sub_section',
|
||||
key: 'plant_sub_section',
|
||||
width: '20%',
|
||||
},
|
||||
{
|
||||
title: 'Device',
|
||||
dataIndex: 'device',
|
||||
key: 'device',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Tag',
|
||||
dataIndex: 'tag',
|
||||
key: 'tag',
|
||||
width: '15%',
|
||||
},
|
||||
{
|
||||
title: 'Engineer',
|
||||
dataIndex: 'engineer',
|
||||
key: 'engineer',
|
||||
width: '15%',
|
||||
},
|
||||
];
|
||||
|
||||
const ListEventAlarm = memo(function ListEventAlarm(props) {
|
||||
const [trigerFilter, setTrigerFilter] = useState(false);
|
||||
const [alarmsData] = useState(initialAlarmsData);
|
||||
|
||||
const defaultFilter = { search: '' };
|
||||
const [formDataFilter, setFormDataFilter] = useState(defaultFilter);
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Dummy data function to simulate API call
|
||||
const getAllEventAlarm = async (params) => {
|
||||
// Simulate API delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
|
||||
// Extract URLSearchParams
|
||||
const searchParam = params.get('search') || '';
|
||||
const page = parseInt(params.get('page')) || 1;
|
||||
const limit = parseInt(params.get('limit')) || 10;
|
||||
|
||||
console.log('getAllEventAlarm called with:', { searchParam, page, limit });
|
||||
|
||||
// Filter by search
|
||||
let filteredAlarms = alarmsData;
|
||||
if (searchParam) {
|
||||
const searchLower = searchParam.toLowerCase();
|
||||
filteredAlarms = alarmsData.filter(
|
||||
(alarm) =>
|
||||
alarm.tanggal.toLowerCase().includes(searchLower) ||
|
||||
alarm.plant_sub_section.toLowerCase().includes(searchLower) ||
|
||||
alarm.device.toLowerCase().includes(searchLower) ||
|
||||
alarm.tag.toLowerCase().includes(searchLower) ||
|
||||
alarm.engineer.toLowerCase().includes(searchLower)
|
||||
);
|
||||
}
|
||||
|
||||
// Pagination logic
|
||||
const totalData = filteredAlarms.length;
|
||||
const totalPages = Math.ceil(totalData / limit);
|
||||
const startIndex = (page - 1) * limit;
|
||||
const endIndex = startIndex + limit;
|
||||
const paginatedData = filteredAlarms.slice(startIndex, endIndex);
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
statusCode: 200,
|
||||
data: {
|
||||
data: paginatedData,
|
||||
total: totalData,
|
||||
paging: {
|
||||
page: page,
|
||||
limit: limit,
|
||||
total: totalData,
|
||||
page_total: totalPages,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
if (props.actionMode == 'list') {
|
||||
setFormDataFilter(defaultFilter);
|
||||
doFilter();
|
||||
}
|
||||
} else {
|
||||
navigate('/signin');
|
||||
}
|
||||
}, [props.actionMode, alarmsData]);
|
||||
|
||||
const doFilter = () => {
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
setFormDataFilter({ search: searchValue });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
const handleSearchClear = () => {
|
||||
setSearchValue('');
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Card>
|
||||
<Row>
|
||||
<Col xs={24}>
|
||||
<Row justify="space-between" align="middle" gutter={[8, 8]}>
|
||||
<Col xs={24} sm={24} md={12} lg={12}>
|
||||
<Input.Search
|
||||
placeholder="Search alarm by tanggal, plant, device, tag, engineer..."
|
||||
value={searchValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
setSearchValue(value);
|
||||
// Auto search when clearing by backspace/delete
|
||||
if (value === '') {
|
||||
setFormDataFilter({ search: '' });
|
||||
setTrigerFilter((prev) => !prev);
|
||||
}
|
||||
}}
|
||||
onSearch={handleSearch}
|
||||
allowClear={{
|
||||
clearIcon: <span onClick={handleSearchClear}>✕</span>,
|
||||
}}
|
||||
enterButton={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SearchOutlined />}
|
||||
style={{
|
||||
backgroundColor: '#23A55A',
|
||||
borderColor: '#23A55A',
|
||||
}}
|
||||
>
|
||||
Search
|
||||
</Button>
|
||||
}
|
||||
size="large"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
|
||||
<TableList
|
||||
getData={getAllEventAlarm}
|
||||
queryParams={formDataFilter}
|
||||
columns={columns}
|
||||
triger={trigerFilter}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
||||
export default ListEventAlarm;
|
||||
Reference in New Issue
Block a user