@asaleh37/ui-base 25.6.2-0.4 → 25.6.17-1

package/src/layout/NavigationTree.tsx

@@ -1,298 +1,291 @@
-import * as React from "react";
-import clsx from "clsx";
-import { animated, useSpring } from "@react-spring/web";
-import { styled, alpha } from "@mui/material/styles";
-import { TransitionProps } from "@mui/material/transitions";
-import Box from "@mui/material/Box";
-import Collapse from "@mui/material/Collapse";
-import Typography from "@mui/material/Typography";
-import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
-import { treeItemClasses } from "@mui/x-tree-view/TreeItem";
-import {
-  useTreeItem2,
-  UseTreeItem2Parameters,
-} from "@mui/x-tree-view/useTreeItem2";
-import {
-  TreeItem2Checkbox,
-  TreeItem2Content,
-  TreeItem2IconContainer,
-  TreeItem2Label,
-  TreeItem2Root,
-} from "@mui/x-tree-view/TreeItem2";
-import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon";
-import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider";
-import { TreeItem2DragAndDropOverlay } from "@mui/x-tree-view/TreeItem2DragAndDropOverlay";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { useIsMobile } from "../hooks/UseMobile";
-import useSession from "../hooks/UseSession";
-import { findNavigationItemById, NavigationItems } from "../navigationItems";
-import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
-
-function DotIcon() {
-  return (
-    <Box
-      sx={{
-        width: 6,
-        height: 6,
-        borderRadius: "70%",
-        bgcolor: "warning.main",
-        display: "inline-block",
-        verticalAlign: "middle",
-        zIndex: 1,
-        mx: 1,
-      }}
-    />
-  );
-}
-declare module "react" {
-  interface CSSProperties {
-    "--tree-view-color"?: string;
-    "--tree-view-bg-color"?: string;
-  }
-}
-
-const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
-  color: theme.palette.grey[400],
-  position: "relative",
-  [`& .${treeItemClasses.groupTransition}`]: {
-    marginLeft: theme.spacing(2.5),
-  },
-  ...theme.applyStyles("light", {
-    color: theme.palette.grey[800],
-  }),
-})) as unknown as typeof TreeItem2Root;
-
-const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
-  flexDirection: "row-reverse",
-  borderRadius: theme.spacing(0.7),
-  marginBottom: theme.spacing(0.5),
-  marginTop: theme.spacing(0.5),
-  padding: theme.spacing(0.5),
-  paddingRight: theme.spacing(1),
-  [`&.Mui-expanded `]: {
-    "&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon":
-      {
-        color: theme.palette.primary.dark,
-        ...theme.applyStyles("light", {
-          color: theme.palette.primary.main,
-        }),
-      },
-    "&::before": {
-      content: '""',
-      display: "block",
-      position: "absolute",
-      left: "16px",
-      top: "44px",
-      height: "calc(100% - 48px)",
-      width: "1.5px",
-      backgroundColor: theme.palette.grey[700],
-      ...theme.applyStyles("light", {
-        backgroundColor: theme.palette.grey[300],
-      }),
-    },
-  },
-  "&:hover": {
-    backgroundColor: alpha(theme.palette.primary.main, 0.1),
-    color: "white",
-    ...theme.applyStyles("light", {
-      color: theme.palette.primary.main,
-    }),
-  },
-  [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
-    backgroundColor: theme.palette.primary.dark,
-    color: theme.palette.primary.contrastText,
-    ...theme.applyStyles("light", {
-      backgroundColor: theme.palette.primary.main,
-    }),
-  },
-}));
-
-const AnimatedCollapse = animated(Collapse);
-
-function TransitionComponent(props: TransitionProps) {
-  const style = useSpring({
-    to: {
-      opacity: props.in ? 1 : 0,
-      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
-    },
-  });
-
-  return <AnimatedCollapse style={style} {...props} />;
-}
-
-const StyledTreeItemLabelText = styled(Typography)({
-  color: "inherit",
-  fontWeight: 500,
-}) as unknown as typeof Typography;
-
-interface CustomLabelProps {
-  children: any;
-  icon: IconProp;
-  expandable?: boolean;
-}
-
-function CustomLabel({
-  icon,
-  expandable,
-  children,
-  ...other
-}: CustomLabelProps) {
-  const { t } = useTranslation();
-  const appLayoutState = useSelector((state: any) => state.AppLayout);
-  return (
-    <TreeItem2Label
-      {...other}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        padding: 1,
-      }}
-    >
-      <FontAwesomeIcon
-        style={{
-          marginRight: appLayoutState.appDirection === "ltr" ? 7 : undefined,
-          marginLeft: appLayoutState.appDirection === "rtl" ? 7 : undefined,
-          fontSize: "1.2rem",
-        }}
-        icon={icon}
-      />
-      <StyledTreeItemLabelText variant="body2" sx={{ fontSize: 16 }}>
-        {t(children)}
-      </StyledTreeItemLabelText>
-      {expandable && <DotIcon />}
-    </TreeItem2Label>
-  );
-}
-
-const isExpandable = (reactChildren: React.ReactNode) => {
-  if (Array.isArray(reactChildren)) {
-    return reactChildren.length > 0 && reactChildren.some(isExpandable);
-  }
-  return Boolean(reactChildren);
-};
-
-interface CustomTreeItemProps
-  extends Omit<UseTreeItem2Parameters, "rootRef">,
-    Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {}
-
-const CustomTreeItem = React.forwardRef(function CustomTreeItem(
-  props: CustomTreeItemProps,
-  ref: React.Ref<HTMLLIElement>
-) {
-  const { id, itemId, label, disabled, children, ...other } = props;
-  const {
-    getRootProps,
-    getContentProps,
-    getIconContainerProps,
-    getCheckboxProps,
-    getLabelProps,
-    getGroupTransitionProps,
-    getDragAndDropOverlayProps,
-    status,
-    publicAPI,
-  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
-  const item = publicAPI.getItem(itemId);
-  const expandable = isExpandable(children);
-  return (
-    <TreeItem2Provider itemId={itemId}>
-      <StyledTreeItemRoot {...getRootProps(other)}>
-        <CustomTreeItemContent
-          {...getContentProps({
-            className: clsx("content", {
-              "Mui-expanded": status.expanded,
-              "Mui-selected": status.selected,
-              "Mui-focused": status.focused,
-              "Mui-disabled": status.disabled,
-            }),
-          })}
-        >
-          <TreeItem2IconContainer {...getIconContainerProps()}>
-            <TreeItem2Icon status={status} />
-          </TreeItem2IconContainer>
-          <TreeItem2Checkbox {...getCheckboxProps()} />
-          <CustomLabel
-            {...getLabelProps({
-              icon: item?.icon || "book",
-              expandable: expandable && status.expanded,
-            })}
-          />
-          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
-        </CustomTreeItemContent>
-        {children && <TransitionComponent {...getGroupTransitionProps()} />}
-      </StyledTreeItemRoot>
-    </TreeItem2Provider>
-  );
-});
-
-export default function NavigationTree() {
-  const navigate = useNavigate();
-  const appLayoutState = useSelector((state: any) => state.AppLayout);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
-  const dispatch = useDispatch();
-  const isMobile = useIsMobile();
-  const { isUserAuthorized, isCurrentOrganizationAuthorizedToModule } =
-    useSession();
-  const filterData = (data) => {
-    const parentItems = [];
-    for (let parentItem of data) {
-      if (
-        (parentItem.authority === undefined ||
-          parentItem.authority == null ||
-          isUserAuthorized(parentItem.authority)) &&
-        (parentItem.applicationModule === undefined ||
-          parentItem.applicationModule === null ||
-          isCurrentOrganizationAuthorizedToModule(parentItem.applicationModule))
-      ) {
-        let newParentItem = structuredClone(parentItem);
-        if (parentItem?.children) {
-          newParentItem.children = filterData(parentItem.children);
-        }
-        parentItems.push(newParentItem);
-      }
-    }
-    return parentItems;
-  };
-
-  const mergedNavigationItems = [];
-  if (AppInfo.enableAdministrationModule) {
-    mergedNavigationItems.push(...structuredClone(NavigationItems));
-  }
-  mergedNavigationItems.push(
-    ...structuredClone(AppInfo.businessNavigationItems)
-  );
-  const authoriedNavigationItems = filterData(mergedNavigationItems);
-  return (
-    <RichTreeView
-      items={authoriedNavigationItems}
-      onItemClick={(event, itemId) => {
-        const navigationItem = findNavigationItemById(
-          itemId,
-          mergedNavigationItems
-        );
-        if (
-          navigationItem?.action === "NAVIGATION" &&
-          navigationItem?.actionPayload != null &&
-          (navigationItem.children === undefined ||
-            navigationItem.children === null ||
-            navigationItem.children.length == 0)
-        ) {
-          navigate(navigationItem?.actionPayload?.path || "");
-        }
-      }}
-      sx={{
-        height: "fit-content",
-        flexGrow: 1,
-        maxWidth: DRAWER_WIDTH,
-        direction: appLayoutState.appDirection,
-        maxHeight: isMobile ? 300 : undefined,
-        overflowY: "auto",
-        overflowX: "auto",
-      }}
-      slots={{ item: CustomTreeItem }}
-    />
-  );
-}
+import * as React from "react";
+import clsx from "clsx";
+import { animated, useSpring } from "@react-spring/web";
+import { styled, alpha } from "@mui/material/styles";
+import { TransitionProps } from "@mui/material/transitions";
+import Box from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import Typography from "@mui/material/Typography";
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
+import { treeItemClasses } from "@mui/x-tree-view/TreeItem";
+import {
+  useTreeItem2,
+  UseTreeItem2Parameters,
+} from "@mui/x-tree-view/useTreeItem2";
+import {
+  TreeItem2Checkbox,
+  TreeItem2Content,
+  TreeItem2IconContainer,
+  TreeItem2Label,
+  TreeItem2Root,
+} from "@mui/x-tree-view/TreeItem2";
+import { TreeItem2Icon } from "@mui/x-tree-view/TreeItem2Icon";
+import { TreeItem2Provider } from "@mui/x-tree-view/TreeItem2Provider";
+import { TreeItem2DragAndDropOverlay } from "@mui/x-tree-view/TreeItem2DragAndDropOverlay";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { useIsMobile } from "../hooks/UseMobile";
+import useSession from "../hooks/UseSession";
+import { findNavigationItemById, NavigationItems } from "../navigationItems";
+import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
+
+function DotIcon() {
+  return (
+    <Box
+      sx={{
+        width: 6,
+        height: 6,
+        borderRadius: "70%",
+        bgcolor: "warning.main",
+        display: "inline-block",
+        verticalAlign: "middle",
+        zIndex: 1,
+        mx: 1,
+      }}
+    />
+  );
+}
+declare module "react" {
+  interface CSSProperties {
+    "--tree-view-color"?: string;
+    "--tree-view-bg-color"?: string;
+  }
+}
+
+const StyledTreeItemRoot = styled(TreeItem2Root)(({ theme }) => ({
+  color: theme.palette.grey[400],
+  position: "relative",
+  [`& .${treeItemClasses.groupTransition}`]: {
+    marginLeft: theme.spacing(2.5),
+  },
+  ...theme.applyStyles("light", {
+    color: theme.palette.grey[800],
+  }),
+})) as unknown as typeof TreeItem2Root;
+
+const CustomTreeItemContent = styled(TreeItem2Content)(({ theme }) => ({
+  flexDirection: "row-reverse",
+  borderRadius: theme.spacing(0.7),
+  marginBottom: theme.spacing(0.5),
+  marginTop: theme.spacing(0.5),
+  padding: theme.spacing(0.5),
+  paddingRight: theme.spacing(1),
+  [`&.Mui-expanded `]: {
+    "&:not(.Mui-focused, .Mui-selected, .Mui-selected.Mui-focused) .labelIcon":
+      {
+        color: theme.palette.primary.dark,
+        ...theme.applyStyles("light", {
+          color: theme.palette.primary.main,
+        }),
+      },
+    "&::before": {
+      content: '""',
+      display: "block",
+      position: "absolute",
+      left: "16px",
+      top: "44px",
+      height: "calc(100% - 48px)",
+      width: "1.5px",
+      backgroundColor: theme.palette.grey[700],
+      ...theme.applyStyles("light", {
+        backgroundColor: theme.palette.grey[300],
+      }),
+    },
+  },
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+    color: "white",
+    ...theme.applyStyles("light", {
+      color: theme.palette.primary.main,
+    }),
+  },
+  [`&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused`]: {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.primary.contrastText,
+    ...theme.applyStyles("light", {
+      backgroundColor: theme.palette.primary.main,
+    }),
+  },
+}));
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props: TransitionProps) {
+  const style = useSpring({
+    to: {
+      opacity: props.in ? 1 : 0,
+      transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+    },
+  });
+
+  return <AnimatedCollapse style={style} {...props} />;
+}
+
+const StyledTreeItemLabelText = styled(Typography)({
+  color: "inherit",
+  fontWeight: 500,
+}) as unknown as typeof Typography;
+
+interface CustomLabelProps {
+  children: any;
+  icon: IconProp;
+  expandable?: boolean;
+}
+
+function CustomLabel({
+  icon,
+  expandable,
+  children,
+  ...other
+}: CustomLabelProps) {
+  const { t } = useTranslation();
+  const appLayoutState = useSelector((state: any) => state.AppLayout);
+  return (
+    <TreeItem2Label
+      {...other}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        padding: 1,
+      }}
+    >
+      <FontAwesomeIcon
+        style={{
+          marginRight: appLayoutState.appDirection === "ltr" ? 7 : undefined,
+          marginLeft: appLayoutState.appDirection === "rtl" ? 7 : undefined,
+          fontSize: "1.2rem",
+        }}
+        icon={icon}
+      />
+      <StyledTreeItemLabelText variant="body2" sx={{ fontSize: 16 }}>
+        {t(children)}
+      </StyledTreeItemLabelText>
+      {expandable && <DotIcon />}
+    </TreeItem2Label>
+  );
+}
+
+const isExpandable = (reactChildren: React.ReactNode) => {
+  if (Array.isArray(reactChildren)) {
+    return reactChildren.length > 0 && reactChildren.some(isExpandable);
+  }
+  return Boolean(reactChildren);
+};
+
+interface CustomTreeItemProps
+  extends Omit<UseTreeItem2Parameters, "rootRef">,
+    Omit<React.HTMLAttributes<HTMLLIElement>, "onFocus"> {}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+  props: CustomTreeItemProps,
+  ref: React.Ref<HTMLLIElement>
+) {
+  const { id, itemId, label, disabled, children, ...other } = props;
+  const {
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    getDragAndDropOverlayProps,
+    status,
+    publicAPI,
+  } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+  const item = publicAPI.getItem(itemId);
+  const expandable = isExpandable(children);
+  return (
+    <TreeItem2Provider itemId={itemId}>
+      <StyledTreeItemRoot {...getRootProps(other)}>
+        <CustomTreeItemContent
+          {...getContentProps({
+            className: clsx("content", {
+              "Mui-expanded": status.expanded,
+              "Mui-selected": status.selected,
+              "Mui-focused": status.focused,
+              "Mui-disabled": status.disabled,
+            }),
+          })}
+        >
+          <TreeItem2IconContainer {...getIconContainerProps()}>
+            <TreeItem2Icon status={status} />
+          </TreeItem2IconContainer>
+          <TreeItem2Checkbox {...getCheckboxProps()} />
+          <CustomLabel
+            {...getLabelProps({
+              icon: item?.icon || "book",
+              expandable: expandable && status.expanded,
+            })}
+          />
+          <TreeItem2DragAndDropOverlay {...getDragAndDropOverlayProps()} />
+        </CustomTreeItemContent>
+        {children && <TransitionComponent {...getGroupTransitionProps()} />}
+      </StyledTreeItemRoot>
+    </TreeItem2Provider>
+  );
+});
+
+export default function NavigationTree() {
+  const navigate = useNavigate();
+  const appLayoutState = useSelector((state: any) => state.AppLayout);
+  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const dispatch = useDispatch();
+  const isMobile = useIsMobile();
+  const { isUserAuthorized } = useSession();
+  const filterData = (data) => {
+    return data
+      .filter(
+        (item: any) =>
+          item.authority === undefined ||
+          item.authority == null ||
+          isUserAuthorized(item.authority)
+      )
+      .map((item: any) => {
+        if (item.children) {
+          item.children = filterData(item.children);
+        }
+        return item;
+      });
+  };
+
+  const mergedNavigationItems = [];
+  if (AppInfo.enableAdministrationModule) {
+    mergedNavigationItems.push(...NavigationItems);
+  }
+  mergedNavigationItems.push(...AppInfo.businessNavigationItems);
+  const authoriedNavigationItems = filterData(mergedNavigationItems);
+
+  return (
+    <RichTreeView
+      items={authoriedNavigationItems}
+      onItemClick={(event, itemId) => {
+        const navigationItem = findNavigationItemById(
+          itemId,
+          mergedNavigationItems
+        );
+        if (
+          navigationItem?.action === "NAVIGATION" &&
+          navigationItem?.actionPayload != null &&
+          (navigationItem.children === undefined ||
+            navigationItem.children === null ||
+            navigationItem.children.length == 0)
+        ) {
+          navigate(navigationItem?.actionPayload?.path || "");
+        }
+      }}
+      sx={{
+        height: "fit-content",
+        flexGrow: 1,
+        maxWidth: DRAWER_WIDTH,
+        direction: appLayoutState.appDirection,
+        maxHeight: isMobile ? 300 : undefined,
+        overflowY: "auto",
+        overflowX: "auto",
+      }}
+      slots={{ item: CustomTreeItem }}
+    />
+  );
+}