Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pagination handling

main
alex 2023-10-16 19:56:00 +02:00
parent 87d25c0555
commit b6343e55c6
3 changed files with 136 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.js
View File

@ -14,7 +14,6 @@ import { UserProfileProvider } from "./Contexts/UserProfileContext";
import { UsersProvider } from "./Contexts/UsersContext"; import { UsersProvider } from "./Contexts/UsersContext";
import HeaderProvider from "./Contexts/HeaderContext"; import HeaderProvider from "./Contexts/HeaderContext";
import ConsolesProvider from "./Contexts/ConsolesContext"; import ConsolesProvider from "./Contexts/ConsolesContext";
import { RoboticsRobotProvider } from "./Contexts/RoboticsRobot";
export default function App() { export default function App() {
const [notificationApi, notificationContextHolder] = const [notificationApi, notificationContextHolder] =
@ -45,24 +44,20 @@ export default function App() {
<UserProfileProvider> <UserProfileProvider>
<UsersProvider> <UsersProvider>
<ConsolesProvider> <ConsolesProvider>
<RoboticsRobotProvider> <WebSocketProvider
<WebSocketProvider userSession={userSession}
setUserSession={setUserSession}
isWebSocketReady={isWebSocketReady}
setIsWebSocketReady={setIsWebSocketReady}
notificationApi={notificationApi}
>
<ReconnectingView isWebSocketReady={isWebSocketReady} />
<DashboardLayout
userSession={userSession} userSession={userSession}
setUserSession={setUserSession} setUserSession={setUserSession}
isWebSocketReady={isWebSocketReady} />
setIsWebSocketReady={setIsWebSocketReady} </WebSocketProvider>
notificationApi={notificationApi}
>
<ReconnectingView
isWebSocketReady={isWebSocketReady}
/>
<DashboardLayout
userSession={userSession}
setUserSession={setUserSession}
/>
</WebSocketProvider>
</RoboticsRobotProvider>
</ConsolesProvider> </ConsolesProvider>
</UsersProvider> </UsersProvider>
</UserProfileProvider> </UserProfileProvider>

178
src/Pages/Robotics/Robots/index.js
View File

@ -11,7 +11,6 @@ import {
notification, notification,
} from "antd"; } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useRoboticsRobotContext } from "../../../Contexts/RoboticsRobot";
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { import {
Constants, Constants,
@ -22,8 +21,6 @@ import {
import MyPagination from "../../../Components/MyPagination"; import MyPagination from "../../../Components/MyPagination";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
EyeInvisibleOutlined,
EyeOutlined,
FileTextOutlined, FileTextOutlined,
LoadingOutlined, LoadingOutlined,
PlusOutlined, PlusOutlined,
@ -54,16 +51,24 @@ function getRobotTypeString(type) {
} }
export default function Robots() { export default function Robots() {
const robotsContext = useRoboticsRobotContext();
const { t } = useTranslation(); const { t } = useTranslation();
const [notificationApi, notificationContextHolder] = const [notificationApi, notificationContextHolder] =
notification.useNotification(); notification.useNotification();
const [robots, setRobots] = useState([]);
const [robotsTotalPages, setRobotsTotalPages] = useState(0);
const [robotsPaginationPage, setRobotsPaginationPage] = useState(1); const [robotsPaginationPage, setRobotsPaginationPage] = useState(1);
const robotsPaginationPageRef = useRef(1);
const [unauthorizedRobots, setUnauthorizedRobots] = useState([]);
const [unauthorizedRobotsTotalPages, setUnauthorizedRobotsTotalPages] =
useState(0);
const [ const [
unauthorizedRobotsPaginationPage, unauthorizedRobotsPaginationPage,
setUnauthorizedRobotsPaginationPage, setUnauthorizedRobotsPaginationPage,
] = useState(1); ] = useState(1);
const unauthorizedRobotsPaginationPageRef = useRef(1);
const [selectedRobotName, setSelectedRobotName] = useState(""); const [selectedRobotName, setSelectedRobotName] = useState("");
const [permitJoinEnabled, setPermitJoinEnabled] = useState(false); const [permitJoinEnabled, setPermitJoinEnabled] = useState(false);
const [showAddress, setShowAddress] = useState(false); const [showAddress, setShowAddress] = useState(false);
@ -416,23 +421,26 @@ export default function Robots() {
Constants.ROBOTICS_API_ADDRESS Constants.ROBOTICS_API_ADDRESS
).then((data) => { ).then((data) => {
if (type === 1) { if (type === 1) {
robotsContext.setUnauthorizedRobots( setUnauthorizedRobots(
data.UnauthorizedRobots === null ? [] : data.UnauthorizedRobots data.UnauthorizedRobots === null ? [] : data.UnauthorizedRobots
); );
robotsContext.setUnauthorizedRobotsTotalPages(data.TotalPages); setUnauthorizedRobotsTotalPages(data.TotalPages);
} else { } else {
robotsContext.setRobots(data.Robots === null ? [] : data.Robots); setRobots(data.Robots === null ? [] : data.Robots);
robotsContext.setRobotsTotalPages(data.TotalPages); setRobotsTotalPages(data.TotalPages);
} }
}); });
}; };
useEffect(() => fetchRobots(0, robotsPaginationPage), [robotsPaginationPage]);
useEffect(
() => fetchRobots(1, unauthorizedRobotsPaginationPage),
[unauthorizedRobotsPaginationPage]
);
useEffect(() => { useEffect(() => {
fetchRobots(0);
fetchRobots(1);
myFetch( myFetch(
"/permitjoin", "/permitjoin",
"GET", "GET",
@ -456,7 +464,7 @@ export default function Robots() {
switch (cmd) { switch (cmd) {
case ReceivedSSECommands.UpdateRobotStatus: case ReceivedSSECommands.UpdateRobotStatus:
robotsContext.setRobots((arr) => { setRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.RobotId); const index = arr.findIndex((x) => x.Id === body.RobotId);
@ -469,40 +477,64 @@ export default function Robots() {
}); });
break; break;
case ReceivedSSECommands.AddUnauthorizedRobot: case ReceivedSSECommands.AddUnauthorizedRobot:
robotsContext.setUnauthorizedRobots((arr) => { if (unauthorizedRobotsPaginationPageRef.current === 1) {
const newArr = [...arr]; setUnauthorizedRobots((arr) => {
const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.Id); const index = arr.findIndex(
(x) => x.Id === body.UnauthorizedRobot.Id
);
if (index !== -1) { if (index !== -1) {
newArr[index] = body; newArr[index] = body.UnauthorizedRobot;
} else { } else {
newArr.push(body); if (
} newArr.length ===
Constants.GLOBALS.ROBOTICS_UNAUTHORIZED_PAGINATION_LIMIT
) {
newArr.pop();
}
return newArr; newArr.unshift(body.UnauthorizedRobot);
}); }
return newArr;
});
}
setUnauthorizedRobotsTotalPages(body.TotalPages);
break; break;
case ReceivedSSECommands.AddRobot: case ReceivedSSECommands.AddRobot:
robotsContext.setRobots((arr) => { if (robotsPaginationPageRef.current === 1) {
const newArr = [...arr]; setRobots((arr) => {
const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.Id); const index = arr.findIndex((x) => x.Id === body.Robot.Id);
if (index !== -1) { if (index !== -1) {
newArr[index] = body; newArr[index] = body.Robot;
} else { } else {
newArr.push(body); if (
} newArr.length ===
Constants.GLOBALS.ROBOTICS_ROBOTS_PAGINATION_LIMIT
) {
newArr.pop();
}
return newArr; newArr.unshift(body.Robot);
}); }
return newArr;
});
}
setRobotsTotalPages(body.TotalPages);
// remove from unauthorized robots // remove from unauthorized robots
robotsContext.setUnauthorizedRobots((arr) => { setUnauthorizedRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.Id); const index = arr.findIndex((x) => x.Id === body.Robot.Id);
if (index !== -1) { if (index !== -1) {
newArr.splice(index, 1); newArr.splice(index, 1);
@ -510,12 +542,27 @@ export default function Robots() {
return newArr; return newArr;
}); });
setUnauthorizedRobotsTotalPages(body.UnauthorizedRobotsTotalPages);
// if user is on the last page and the last item is removed, we need to go back one page
if (
unauthorizedRobotsPaginationPageRef.current >
body.UnauthorizedRobotsTotalPages
) {
unauthorizedRobotsPaginationPageRef.current--;
setUnauthorizedRobotsPaginationPage(
unauthorizedRobotsPaginationPageRef.current
);
}
break; break;
case ReceivedSSECommands.RemoveUnauthorizedRobot: case ReceivedSSECommands.RemoveUnauthorizedRobot:
robotsContext.setUnauthorizedRobots((arr) => { setUnauthorizedRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body); const index = arr.findIndex(
(x) => x.Id === body.UnauthorizedRobotId
);
if (index !== -1) { if (index !== -1) {
newArr.splice(index, 1); newArr.splice(index, 1);
@ -523,12 +570,22 @@ export default function Robots() {
return newArr; return newArr;
}); });
setUnauthorizedRobotsTotalPages(body.TotalPages);
// if user is on the last page and the last item is removed, we need to go back one page
if (unauthorizedRobotsPaginationPageRef.current > body.TotalPages) {
unauthorizedRobotsPaginationPageRef.current--;
setUnauthorizedRobotsPaginationPage(
unauthorizedRobotsPaginationPageRef.current
);
}
break; break;
case ReceivedSSECommands.RemoveRobot: case ReceivedSSECommands.RemoveRobot:
robotsContext.setRobots((arr) => { setRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body); const index = arr.findIndex((x) => x.Id === body.RobotId);
if (index !== -1) { if (index !== -1) {
newArr.splice(index, 1); newArr.splice(index, 1);
@ -536,9 +593,17 @@ export default function Robots() {
return newArr; return newArr;
}); });
setRobotsTotalPages(body.TotalPages);
// if user is on the last page and the last item is removed, we need to go back one page
if (robotsPaginationPageRef.current > body.TotalPages) {
robotsPaginationPageRef.current--;
setRobotsPaginationPage(robotsPaginationPageRef.current);
}
break; break;
case ReceivedSSECommands.RobotUpdated: case ReceivedSSECommands.RobotUpdated:
robotsContext.setRobots((arr) => { setRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.RobotId); const index = arr.findIndex((x) => x.Id === body.RobotId);
@ -551,7 +616,7 @@ export default function Robots() {
}); });
break; break;
case ReceivedSSECommands.UpdateRobotCurrentJob: case ReceivedSSECommands.UpdateRobotCurrentJob:
robotsContext.setRobots((arr) => { setRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.RobotId); const index = arr.findIndex((x) => x.Id === body.RobotId);
@ -565,7 +630,7 @@ export default function Robots() {
}); });
break; break;
case ReceivedSSECommands.UpdateRobotJobsWaitingCount: case ReceivedSSECommands.UpdateRobotJobsWaitingCount:
robotsContext.setRobots((arr) => { setRobots((arr) => {
const newArr = [...arr]; const newArr = [...arr];
const index = arr.findIndex((x) => x.Id === body.RobotId); const index = arr.findIndex((x) => x.Id === body.RobotId);
@ -606,7 +671,7 @@ export default function Robots() {
}} }}
> >
<Typography.Title level={4}> <Typography.Title level={4}>
{t("robotics.robots.header")} ({robotsContext.robots.length}){" "} {t("robotics.robots.header")}{" "}
<Tooltip title={t("robotics.robots.viewApiDoc")}> <Tooltip title={t("robotics.robots.viewApiDoc")}>
<Link target="_blank" to={Constants.ROBOTICS_SWAGGER_ADDRESS}> <Link target="_blank" to={Constants.ROBOTICS_SWAGGER_ADDRESS}>
<FileTextOutlined style={{ fontSize: 16 }} /> <FileTextOutlined style={{ fontSize: 16 }} />
@ -637,38 +702,39 @@ export default function Robots() {
<Table <Table
scroll={{ x: "max-content" }} scroll={{ x: "max-content" }}
columns={getRobotsTableContent()} columns={getRobotsTableContent()}
dataSource={getRobotsTableItems(robotsContext.robots)} dataSource={getRobotsTableItems(robots)}
pagination={false} pagination={false}
/> />
<MyPagination <MyPagination
paginationPage={robotsPaginationPage} paginationPage={robotsPaginationPage}
setPaginationPage={(page) => setRobotsPaginationPage(page)} setPaginationPage={(page) => {
totalPages={robotsContext.robotsTotalPages} setRobotsPaginationPage(page);
robotsPaginationPageRef.current = page;
}}
totalPages={robotsTotalPages}
/> />
{robotsContext.unauthorizedRobots.length > 0 && ( {unauthorizedRobots.length > 0 && (
<> <>
<Typography.Title level={4}> <Typography.Title level={4}>
{t("robotics.unauthorizedRobots.header")} ( {t("robotics.unauthorizedRobots.header")}
{robotsContext.unauthorizedRobots.length})
</Typography.Title> </Typography.Title>
<Table <Table
scroll={{ x: "max-content" }} scroll={{ x: "max-content" }}
columns={getUnauthorizedTableContent()} columns={getUnauthorizedTableContent()}
dataSource={getUnauthorizedTableItems( dataSource={getUnauthorizedTableItems(unauthorizedRobots)}
robotsContext.unauthorizedRobots
)}
pagination={false} pagination={false}
/> />
<MyPagination <MyPagination
paginationPage={unauthorizedRobotsPaginationPage} paginationPage={unauthorizedRobotsPaginationPage}
setPaginationPage={(page) => setPaginationPage={(page) => {
setUnauthorizedRobotsPaginationPage(page) setUnauthorizedRobotsPaginationPage(page);
} unauthorizedRobotsPaginationPageRef.current = page;
totalPages={robotsContext.unauthorizedRobotsTotalPages} }}
totalPages={unauthorizedRobotsTotalPages}
/> />
</> </>
)} )}

2
src/utils.js
View File

@ -111,6 +111,8 @@ export const Constants = {
MAX_ROBOTICS_ROBOT_NAME_LENGTH: 30, MAX_ROBOTICS_ROBOT_NAME_LENGTH: 30,
MIN_USER_API_KEY_NAME_LENGTH: 2, MIN_USER_API_KEY_NAME_LENGTH: 2,
MAX_USER_API_KEY_NAME_LENGTH: 30, MAX_USER_API_KEY_NAME_LENGTH: 30,
ROBOTICS_ROBOTS_PAGINATION_LIMIT: 10,
ROBOTICS_UNAUTHORIZED_PAGINATION_LIMIT: 10,
}, },
MAX_AVATAR_SIZE: 5 * 1024 * 1024, MAX_AVATAR_SIZE: 5 * 1024 * 1024,
ACCEPTED_AVATAR_FILE_TYPES: [ ACCEPTED_AVATAR_FILE_TYPES: [