louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): get device per id + init pagination

Browse Source
This commit is contained in:
leandrofars 2023-12-27 21:48:50 -03:00
parent 318720d9fa
commit 763fe6efa2
1 changed files with 129 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
frontend/src/pages/devices.js
View File

@ -1,6 +1,17 @@
import React, { useState, useEffect } from 'react';
import Head from 'next/head';
import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material';
import {
Box,
Container,
Unstable_Grid2 as Grid,
Card,
OutlinedInput,
InputAdornment,
SvgIcon,
Stack,
Pagination
} from '@mui/material';
import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders';
import { useAuth } from 'src/hooks/use-auth';
@ -10,6 +21,10 @@ const Page = () => {
const router = useRouter()
const auth = useAuth();
const [devices, setDevices] = useState([]);
const [deviceFound, setDeviceFound] = useState(false)
const [pages, setPages] = useState(0);
const [page, setPage] = useState(null);
useEffect(() => {
@ -36,13 +51,70 @@ const Page = () => {
return response.json()
})
.then(json => {
return setDevices(json)
setPages(json.pages + 1)
setPage(json.page)
setDevices(json.devices)
return setDeviceFound(true)
})
.catch(error => {
return console.error('Error:', error)
});
}, [auth.user]);
const handleChangePage = (e) => {
console.log("new page: ", e.target.value)
//TODO: Handle page change
}
const fetchDevicePerId = async (id) => {
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", auth.user.token);
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
}
if (id == ""){
fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device', requestOptions)
.then(response => {
if (response.status === 401)
router.push("/auth/login")
return response.json()
})
.then(json => {
setPages(json.pages + 1)
setPage(json.page)
setDevices(json.devices)
return setDeviceFound(true)
})
.catch(error => {
return console.error('Error:', error)
});
}
let response = await fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device?id='+id, requestOptions)
if (response.status === 401)
router.push("/auth/login")
let json = await response.json()
if (json.device != undefined){
setDevices({"devices":[
json.device
]})
setPages(1)
setPage(1)
}else{
setDeviceFound(false)
setDevices([])
setPages(1)
setPage(1)
}
}
return (
<>
<Head>
@ -50,6 +122,7 @@ const Page = () => {
Oktopus | TR-369
</title>
</Head>
<Box
component="main"
sx={{
@ -58,15 +131,66 @@ const Page = () => {
}}
>
<Container maxWidth="xl" >
<Stack spacing={3}>
<Grid
container
spacing={3}
>
<Grid xs={8}>
</Grid>
<OutlinedInput
xs={4}
defaultValue=""
fullWidth
placeholder="Search Device"
onKeyDownCapture={(e) => {
if (e.key === 'Enter') {
console.log("Fetch devices per id: ", e.target.value)
fetchDevicePerId(e.target.value)
}
}}
startAdornment={(
<InputAdornment position="start">
<SvgIcon
color="action"
fontSize="small"
>
<MagnifyingGlassIcon />
</SvgIcon>
</InputAdornment>
)}
sx={{ maxWidth: 500 }}
/>
</Grid>
{deviceFound ?
<OverviewLatestOrders
orders={devices}
sx={{ height: '100%' }}
/>
:
<Box
sx={{
display: 'flex',
justifyContent: 'center'
}}
>
<p>Device Not Found</p>
</Box>
}
<Box
sx={{
display: 'flex',
justifyContent: 'center'
}}
>
{pages ? <Pagination
count={pages}
size="small"
page={page}
onChange={handleChangePage}
/>: null}
{/* //TODO: show loading */}
</Box>
</Stack>
</Container>
</Box>
</>