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

import {
  AppstoreOutlined,
  BookOutlined,
  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, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import PropTypes from "prop-types";
import { Constants, hasOnePermission, hasPermission } from "../../utils";
import { useTranslation } from "react-i18next";
import { MyUserAvatar } from "../MyAvatar";
import { useSideBarContext } from "../../Contexts/SideBarContext";
import { useAppContext } from "../../Contexts/AppContext";

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

  useEffect(() => setSelectedKeys(location.pathname), [location.pathname]);

  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: "/equipment-documentation",
      });
    }

    // 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: [],
    };

    for (let i = 0; i < sideBarContext.availableCategoryGroups.length; i++) {
      groupTasks.children.push({
        label: sideBarContext.availableCategoryGroups[i],
        icon: <SnippetsOutlined />,
        key: `/group-tasks/${sideBarContext.availableCategoryGroups[i]}`,
      });
    }

    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
      )
    ) {
      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: "/admin-area/roles",
        });
      }

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

      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: "/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: "/users",
      },
      {
        label: ` ${sideBarContext.username}`,
        icon: <MyUserAvatar avatar={sideBarContext.avatar} />,
        key: "/user-profile",
      },
      {
        label: t("sideMenu.logout"),
        icon: <LogoutOutlined />,
        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);
        },
        key: "/",
      }
    );

    return items;
  };

  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()}
            openKeys={["/admin-area", "/group-tasks"]}
            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,
};