diff --git a/src/pages/eventAlarm/IndexEventAlarm.jsx b/src/pages/eventAlarm/IndexEventAlarm.jsx index 554ad55..c33939a 100644 --- a/src/pages/eventAlarm/IndexEventAlarm.jsx +++ b/src/pages/eventAlarm/IndexEventAlarm.jsx @@ -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: • Event Alarm } + { + title: ( + + • Event Alarm + + ), + }, ]); } 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 ( -
-

Event Alarm Page

-
+ + + + ); }); diff --git a/src/pages/eventAlarm/component/DetailEventAlarm.jsx b/src/pages/eventAlarm/component/DetailEventAlarm.jsx new file mode 100644 index 0000000..5506f2d --- /dev/null +++ b/src/pages/eventAlarm/component/DetailEventAlarm.jsx @@ -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 ( + + + + + + + { + 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: ✕, + }} + enterButton={ + + } + size="large" + /> + + + + + + + + + + ); +}); + +export default ListEventAlarm; diff --git a/src/pages/eventAlarm/component/ListEventAlarm.jsx b/src/pages/eventAlarm/component/ListEventAlarm.jsx new file mode 100644 index 0000000..5506f2d --- /dev/null +++ b/src/pages/eventAlarm/component/ListEventAlarm.jsx @@ -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 ( + + + + + + + { + 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: ✕, + }} + enterButton={ + + } + size="large" + /> + + + + + + + + + + ); +}); + +export default ListEventAlarm;