admin-dashboard-web/src/Components/SideMenu/index.js

import {
  AppstoreOutlined,
  BookOutlined,
  ControlOutlined,
  DesktopOutlined,
  FileTextOutlined,
  HistoryOutlined,
  LogoutOutlined,
  ScanOutlined,
  SettingOutlined,
  SnippetsOutlined,
  UsergroupAddOutlined,
} from "@ant-design/icons";
import { Badge, Divider, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import {
  Constants,
  hasOnePermission,
  hasOneXYPermission,
  hasPermission,
} from "../../utils";
import { useTranslation } from "react-i18next";
import { MyUserAvatar } from "../MyAvatar";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import { useAppContext } from "../../Contexts/AppContext";
import { useWebSocketContext } from "../../Contexts/WebSocketContext";
import { SentMessagesCommands } from "../../Handlers/WebSocketMessageHandler";

export default function SideMenu({
  userSession,
  setUserSession,
  isSideMenuCollapsed,
  setIsSideMenuCollapsed,
}) {
  const appContext = useAppContext();
  const webSocketContext = useWebSocketContext();
  const sideBarContext = useSideBarContext();
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState("/");
  const { t } = useTranslation();
  const lastSubscribedTopic = useRef("");

  const navigate = useNavigate();

  const getCurrentUsedScannerName = () => {
    /*const scannerName = webSocketContext.Scanners.find(
      (scanner) => scanner.UsedByUserId === getUserId()
    )?.Name;

    return scannerName === undefined
      ? t("sideMenu.adminArea.noScannerSelected")
      : scannerName; */

    // TODO: handle scanner name

    return Constants.LOADING;
  };

  const getFirstMenuItems = () => {
    // dashboard
    let items = [
      {
        label: t("sideMenu.dashboard"),
        icon: <AppstoreOutlined />,
        key: "/",
      },
    ];

    // equipment documentation
    if (
      hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.EQUIPMENT_DOCUMENTATION.VIEW
      )
    ) {
      items.push({
        label: t("sideMenu.equipmentDocumentation"),
        icon: <BookOutlined />,
        key: Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION,
      });
    }

    // consoles
    if (
      hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.CONSOLES.VIEW
      )
    ) {
      items.push({
        label: t("sideMenu.consoles"),
        icon: <DesktopOutlined />,
        key: Constants.ROUTE_PATHS.CONSOLES,
      });
    }

    // group tasks
    let groupTasksGroup = {
      label: t("sideMenu.groupTasks.menuCategory"),
      type: "group",
      icon: <SnippetsOutlined />,
      children: [],
    };

    let groupTasks = {
      label: t("sideMenu.groupTasks.overview"),
      icon: <SnippetsOutlined />,
      key: "/group-tasks",
      children: [],
    };

    sideBarContext.availableCategories.forEach((category) => {
      if (
        hasOneXYPermission(
          appContext.userPermissions,
          category,
          Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYView,
          Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYNewTask,
          Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYInstallPythonPackages,
          Constants.PERMISSIONS.GROUP_TASKS.OVERVIEW.XYReloadGroupConfig
        )
      ) {
        groupTasks.children.push({
          label: category,
          icon: <SnippetsOutlined />,
          key: `/group-tasks/${category}`,
        });
      }
    });

    groupTasksGroup.children.push(groupTasks);

    if (
      hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.GROUP_TASKS.HISTORY
      )
    ) {
      groupTasksGroup.children.push({
        label: t("sideMenu.groupTasks.history"),
        icon: <HistoryOutlined />,
        key: Constants.ROUTE_PATHS.GROUP_TASKS_HISTORY,
      });
    }

    items.push(groupTasksGroup);

    // admin area
    if (
      hasOnePermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.CREATE_NEW_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.UPDATE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE,
        Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN,
        Constants.PERMISSIONS.ADMIN_AREA.LOGS,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
          .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
          .ADD_LOG_MANAGER_SERVER_CONNECTION,
        Constants.PERMISSIONS.ADMIN_AREA.MANAGE
          .REMOVE_LOG_MANAGER_SERVER_CONNECTION
      )
    ) {
      items.push({
        type: "divider",
      });

      let adminArea = {
        label: t("sideMenu.adminArea.menuCategory"),
        icon: <SettingOutlined />,
        key: "/admin-area",
        children: [],
      };

      if (
        hasOnePermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.CREATE_NEW_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.UPDATE_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.DELETE_ROLE,
          Constants.PERMISSIONS.ADMIN_AREA.ROLES.MOVE_ROLE_UP_DOWN
        )
      ) {
        adminArea.children.push({
          label: t("sideMenu.adminArea.roles"),
          icon: <UsergroupAddOutlined />,
          key: Constants.ROUTE_PATHS.ADMIN_AREA_ROLES,
        });
      }

      if (
        hasPermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ADMIN_AREA.LOGS
        )
      ) {
        adminArea.children.push({
          label: t("sideMenu.adminArea.logs"),
          icon: <FileTextOutlined />,
          key: Constants.ROUTE_PATHS.ADMIN_AREA_LOGS,
        });
      }

      if (
        hasOnePermission(
          appContext.userPermissions,
          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
            .CHECK_WHICH_CATEGORIES_ARE_AVAILABLE,
          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
            .ADD_LOG_MANAGER_SERVER_CONNECTION,
          Constants.PERMISSIONS.ADMIN_AREA.MANAGE
            .REMOVE_LOG_MANAGER_SERVER_CONNECTION
        )
      ) {
        adminArea.children.push({
          label: t("sideMenu.adminArea.manage"),
          icon: <ControlOutlined />,
          key: Constants.ROUTE_PATHS.ADMIN_AREA_MANAGE,
        });
      }

      items.push(adminArea);
    }

    return items;
  };

  const getSecondMenuItems = () => {
    let items = [];

    // scanner
    if (
      hasPermission(
        appContext.userPermissions,
        Constants.PERMISSIONS.SCANNER.USE_SCANNERS
      )
    ) {
      items.push({
        icon: <ScanOutlined />,
        label: getCurrentUsedScannerName(),
        key: Constants.ROUTE_PATHS.SCANNERS,
      });
    }

    // connection status, userprofile, logout
    items.push(
      {
        icon: (
          <Badge
            status={sideBarContext.connectionBadgeStatus}
            text={`${sideBarContext.connectedUsers} ${
              sideBarContext.connectedUsers === 1
                ? t("sideMenu.usersCount.single")
                : t("sideMenu.usersCount.multiple")
            }`}
          />
        ),
        key: Constants.ROUTE_PATHS.USERS,
      },
      {
        label: ` ${sideBarContext.username}`,
        icon: <MyUserAvatar avatar={sideBarContext.avatar} />,
        key: Constants.ROUTE_PATHS.USER_PROFILE,
      },
      {
        label: t("sideMenu.logout"),
        icon: <LogoutOutlined />,
        key: "/logout",
        onClick: () => {
          setUserSession();
          window.location.href = "/";

          fetch(`${Constants.API_ADDRESS}/user/auth/logout`, {
            method: "DELETE",
            headers: {
              "Content-Type": "application/json",
              "X-Authorization": userSession,
            },
          }).catch(console.error);
        },
      }
    );

    return items;
  };

  useEffect(() => {
    const pathname = location.pathname;

    setSelectedKeys(pathname);

    lastSubscribedTopic.current = pathname;

    webSocketContext.SendSocketMessage(SentMessagesCommands.SubscribeToTopic, {
      topic: pathname,
    });
  }, [location.pathname]);

  return (
    <Sider
      theme="light"
      //style={{ overflow: "auto", position: "fixed", height: "100vh" }}
      style={{
        overflow: "auto",
        height: "100vh",
        position: "fixed",
        left: 0,
        top: 0,
        bottom: 0,
      }}
      breakpoint="lg"
      collapsedWidth="0"
      collapsed={isSideMenuCollapsed}
      onCollapse={(collapsed) => setIsSideMenuCollapsed(collapsed)}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "column",
          height: "100%",
        }}
      >
        <div>
          <div className="CompanyNameContainer">
            <span>C</span>
            <span>O</span>
            <span>M</span>
            <span>P</span>
            <span>A</span>
            <span>N</span>
            <span>Y</span>
          </div>

          <div className="Subtitle">Admin Dashboard</div>

          <Menu
            mode="inline"
            onClick={(item) => navigate(item.key)}
            theme="light"
            selectedKeys={[selectedKeys]}
            items={getFirstMenuItems()}
            defaultOpenKeys={["/admin-area", "/group-tasks"]}
          />
        </div>

        <div>
          <Divider />

          <Menu
            selectable={true}
            selectedKeys={[selectedKeys]}
            mode="vertical"
            onClick={(item) => navigate(item.key)}
            items={getSecondMenuItems()}
          />
        </div>
      </div>
    </Sider>
  );
}

/*
 <div className="CompanyNameContainer">
  <span>J</span>
  <span>A</span>
  <span>N</span>
  <span>N</span>
  <span>E</span>
  <span>X</span>
</div>
*/

SideMenu.propTypes = {
  setUserSession: PropTypes.func.isRequired,
};