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

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

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

2
src/utils.js
View File

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