All files / src/views/devices DeviceList.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useRef, useState, useEffect } from 'react'
import { CButton, CContainer, CSpinner, CAlert } from '@coreui/react'
import { DynamicTable, DynamicPopup } from '@components/Dynamic'
import DeviceAdd from './DeviceAdd'
import { getPageData } from '@hooks'
import { apiService } from '@services'
import { AuthCheck } from '@components'
 
import CIcon from '@coreui/icons-react'
import { cilInfo } from '@coreui/icons'
 
const devicesApi = apiService('devices');
 
const DeviceList = () => {
	const addDevicePopup = useRef(null);
 
	const columns = [
		{ label: 'Device Name', value: 'name' },
		{ label: 'Device Type', value: 'type' },
		{ label: 'Address', value: 'macAddress' },
	]
 
	const { loading, error, data } = getPageData(devicesApi.get, {}); 
 
	// Local state for devices, initially empty
	const [dbAllDevices, setDbAllDevices] = useState([]);
 
	// When data comes in, update local state
	useEffect(() => {
		if (data) setDbAllDevices(data);
	}, [data]);
 
	if (loading) return <CSpinner />;
	if (error) return <p>Error: {error.message}</p>;
 
	return (
		<CContainer>
			<AuthCheck rights="admin">
				<div className="d-flex justify-content-between align-items-center mb-3">
					<CButton color="primary" onClick={() => addDevicePopup.current.open()}>+ Add Device</CButton>
				</div>
 
				<DynamicPopup ref={addDevicePopup} title="Add Device">
					<CAlert color="primary" className="d-flex align-items-center">
						<CIcon icon={cilInfo} className="flex-shrink-0 me-2" width={24} height={24} />
						<div>To add the location of a device double click on a map and select it</div>
					</CAlert>
 
					<DeviceAdd
						popupStatus={addDevicePopup}
						dbAllDevices={dbAllDevices}
						setDbAllDevices={setDbAllDevices}
					/>
				</DynamicPopup>
			</AuthCheck>
			
			<DynamicTable
				title="Device List"
				columns={columns}
				data={dbAllDevices}
				enableFilters={true}
				onRowClickPath="/device/DeviceDetails"
				rowIdField="macAddress"
			/>
		</CContainer>
	)
}
 
export default DeviceList