@orbe-agro/client-core-prod 5.6.123 → 5.6.125

package/lib/@ecme/components/template/VerticalMenuContent/VerticalMenuContent.tsx

@@ -1,192 +1,241 @@
-import { useState, useEffect, useMemo, Fragment } from "react";
-import Menu from "@/components/ui/Menu";
-import VerticalSingleMenuItem from "./VerticalSingleMenuItem";
-import VerticalCollapsedMenuItem from "./VerticalCollapsedMenuItem";
-import { themeConfig } from "@/configs/theme.config";
+import { useState, useEffect, useMemo, Fragment } from 'react'
+import Menu from '@/components/ui/Menu'
+import VerticalSingleMenuItem from './VerticalSingleMenuItem'
+import VerticalCollapsedMenuItem from './VerticalCollapsedMenuItem'
+import { themeConfig } from '@/configs/theme.config'
 import {
-  NAV_ITEM_TYPE_TITLE,
-  NAV_ITEM_TYPE_COLLAPSE,
-  NAV_ITEM_TYPE_ITEM,
-} from "@/constants/navigation.constant";
-import useMenuActive from "@/utils/hooks/useMenuActive";
-import useTranslation from "@/utils/hooks/useTranslation";
-import { Direction } from "@/@types/theme";
-import type { NavigationTree } from "@/@types/navigation";
-import type { TraslationFn } from "@/@types/common";
-import { LinkRenderer } from "@/components/layouts/Layouts";
+    NAV_ITEM_TYPE_TITLE,
+    NAV_ITEM_TYPE_COLLAPSE,
+    NAV_ITEM_TYPE_ITEM,
+} from '@/constants/navigation.constant'
+import useMenuActive from '@/utils/hooks/useMenuActive'
+import useTranslation from '@/utils/hooks/useTranslation'
+import { Direction } from '@/@types/theme'
+import type { NavigationTree } from '@/@types/navigation'
+import type { TraslationFn } from '@/@types/common'
+import { LinkRenderer } from '@/components/layouts/Layouts'
 
 export interface VerticalMenuContentProps {
-  collapsed?: boolean;
-  routeKey: string;
-  navigationTree?: NavigationTree[];
-  onMenuItemClick?: () => void;
-  direction?: Direction;
-  translationSetup?: boolean;
-  userAuthority: string[];
-  linkRenderer?: LinkRenderer;
+    collapsed?: boolean
+    routeKey: string
+    navigationTree?: NavigationTree[]
+    onMenuItemClick?: () => void
+    direction?: Direction
+    translationSetup?: boolean
+    userAuthority: string[]
+    linkRenderer?: LinkRenderer
 }
 
-const { MenuGroup } = Menu;
+const { MenuGroup } = Menu
 
 const findAncestorKeys = (
-  navTree: NavigationTree[],
-  targetKey: string
+    navTree: NavigationTree[],
+    targetKey: string,
 ): string[] | null => {
-  for (const node of navTree) {
-    if (node.key === targetKey) return [];
-    if (node.subMenu && node.subMenu.length > 0) {
-      const found = findAncestorKeys(node.subMenu, targetKey);
-      if (found !== null) return [node.key, ...found];
+    for (const node of navTree) {
+        if (node.key === targetKey) return []
+        if (node.subMenu && node.subMenu.length > 0) {
+            const found = findAncestorKeys(node.subMenu, targetKey)
+            if (found !== null) return [node.key, ...found]
+        }
     }
-  }
-  return null;
-};
+    return null
+}
 
 const filterNavigationByAuthority = (
-  navTree: NavigationTree[],
-  userAuthority: string[]
+    navTree: NavigationTree[],
+    userAuthority: string[],
 ): NavigationTree[] => {
-  return navTree.reduce((acc: NavigationTree[], nav) => {
-    // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
-    if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
-      const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
-        userAuthority.includes(path)
-      );
-      if (shouldExclude) {
-        return acc;
-      }
+    return navTree.reduce((acc: NavigationTree[], nav) => {
+        // Verifica se deve excluir o item quando o usuário possui alguma funcionalidade específica
+        if (nav.excludeWhenHasPaths && nav.excludeWhenHasPaths.length > 0) {
+            const shouldExclude = nav.excludeWhenHasPaths.some((path) =>
+                userAuthority.includes(path),
+            )
+            if (shouldExclude) {
+                return acc
+            }
+        }
+
+        if (nav.subMenu && nav.subMenu.length > 0) {
+            const filteredSubMenu = filterNavigationByAuthority(
+                nav.subMenu,
+                userAuthority,
+            )
+            if (filteredSubMenu.length > 0) {
+                acc.push({ ...nav, subMenu: filteredSubMenu })
+            }
+        } else {
+            if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
+                acc.push(nav)
+            }
+        }
+        return acc
+    }, [])
+}
+
+const compareNavigationOrder = (a: NavigationTree, b: NavigationTree) => {
+    const orderA = a.sortOrder ?? Number.MAX_SAFE_INTEGER
+    const orderB = b.sortOrder ?? Number.MAX_SAFE_INTEGER
+
+    if (orderA !== orderB) {
+        return orderA - orderB
     }
 
-    if (nav.subMenu && nav.subMenu.length > 0) {
-      const filteredSubMenu = filterNavigationByAuthority(
-        nav.subMenu,
-        userAuthority
-      );
-      if (filteredSubMenu.length > 0) {
-        acc.push({ ...nav, subMenu: filteredSubMenu });
-      }
-    } else {
-      if ((nav.path && userAuthority.includes(nav.path)) || !nav.path) {
-        acc.push(nav);
-      }
+    const titleCompare = a.title.localeCompare(b.title, 'pt-BR')
+
+    if (titleCompare !== 0) {
+        return titleCompare
     }
-    return acc;
-  }, []);
-};
+
+    return a.key.localeCompare(b.key, 'pt-BR')
+}
+
+const sortNavigationNodeList = (navTree: NavigationTree[]): NavigationTree[] =>
+    [...navTree].sort(compareNavigationOrder)
+
+const sortNavigationRecursively = (
+    navTree: NavigationTree[],
+): NavigationTree[] => {
+    return sortNavigationNodeList(navTree)
+        .map((nav) => ({
+            ...nav,
+            subMenu: nav.subMenu
+                ? sortNavigationRecursively(nav.subMenu)
+                : nav.subMenu,
+        }))
+}
 
 const VerticalMenuContent = (props: VerticalMenuContentProps) => {
-  const {
-    collapsed,
-    routeKey,
-    navigationTree = [],
-    onMenuItemClick,
-    direction = themeConfig.direction,
-    translationSetup,
-    userAuthority,
-    linkRenderer,
-  } = props;
-
-  const { t } = useTranslation(!translationSetup);
-  const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([]);
-  const filteredNavigationTree = useMemo(
-    () => filterNavigationByAuthority(navigationTree, userAuthority),
-    [navigationTree, userAuthority]
-  );
-
-  const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey);
-
-  useEffect(() => {
-    if (activedRoute?.key) {
-      const ancestors = findAncestorKeys(
-        filteredNavigationTree,
-        activedRoute.key
-      );
-      setDefaulExpandKey(ancestors ?? []);
+    const {
+        collapsed,
+        routeKey,
+        navigationTree = [],
+        onMenuItemClick,
+        direction = themeConfig.direction,
+        translationSetup,
+        userAuthority,
+        linkRenderer,
+    } = props
+
+    const { t } = useTranslation(!translationSetup)
+    const [defaulExpandKey, setDefaulExpandKey] = useState<string[]>([])
+
+    const filteredNavigationTree = useMemo(() => {
+        const filteredTree = filterNavigationByAuthority(
+            navigationTree,
+            userAuthority,
+        )
+
+        return sortNavigationRecursively(filteredTree)
+    }, [navigationTree, userAuthority])
+
+    const { activedRoute } = useMenuActive(filteredNavigationTree, routeKey)
+
+    useEffect(() => {
+        if (activedRoute?.key) {
+            const ancestors = findAncestorKeys(
+                filteredNavigationTree,
+                activedRoute.key,
+            )
+            setDefaulExpandKey(ancestors ?? [])
+        }
+    }, [activedRoute?.key, filteredNavigationTree])
+
+    const handleLinkClick = () => {
+        onMenuItemClick?.()
     }
-  }, [activedRoute?.key, filteredNavigationTree]);
 
-  const handleLinkClick = () => {
-    onMenuItemClick?.();
-  };
+    const renderNavigation = (
+        navTree: NavigationTree[],
+        cascade: number = 0,
+        indent?: boolean,
+    ) => {
+        const nextCascade = cascade + 1
+        const orderedNavTree = sortNavigationNodeList(navTree)
 
-  const renderNavigation = (
-    navTree: NavigationTree[],
-    cascade: number = 0,
-    indent?: boolean
-  ) => {
-    const nextCascade = cascade + 1;
+        return (
+            <>
+                {orderedNavTree.map((nav) => (
+                    <Fragment key={nav.key}>
+                        {nav.type === NAV_ITEM_TYPE_ITEM && (
+                            <VerticalSingleMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={indent}
+                                renderAsIcon={cascade <= 0}
+                                showIcon={cascade <= 0}
+                                userAuthority={userAuthority}
+                                showTitle={
+                                    nav.forceShowTitle ??
+                                    (collapsed ? cascade >= 1 : cascade <= 1)
+                                }
+                                t={t as TraslationFn}
+                                onLinkClick={handleLinkClick}
+                                linkRenderer={linkRenderer}
+                            />
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
+                            <VerticalCollapsedMenuItem
+                                key={nav.key}
+                                currentKey={activedRoute?.key}
+                                parentKeys={defaulExpandKey}
+                                nav={nav}
+                                sideCollapsed={collapsed}
+                                direction={direction}
+                                indent={nextCascade >= 2}
+                                dotIndent={nextCascade >= 2}
+                                renderAsIcon={nextCascade <= 1}
+                                userAuthority={userAuthority}
+                                t={t as TraslationFn}
+                                onLinkClick={onMenuItemClick}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        nextCascade,
+                                        true,
+                                    )}
+                            </VerticalCollapsedMenuItem>
+                        )}
+                        {nav.type === NAV_ITEM_TYPE_TITLE && (
+                            <MenuGroup
+                                key={nav.key}
+                                label={t(nav.translateKey) || nav.title}
+                            >
+                                {nav.subMenu &&
+                                    nav.subMenu.length > 0 &&
+                                    renderNavigation(
+                                        nav.subMenu,
+                                        cascade,
+                                        false,
+                                    )}
+                            </MenuGroup>
+                        )}
+                    </Fragment>
+                ))}
+            </>
+        )
+    }
 
     return (
-      <>
-        {navTree.map((nav) => (
-          <Fragment key={nav.key}>
-            {nav.type === NAV_ITEM_TYPE_ITEM && (
-              <VerticalSingleMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={indent}
-                renderAsIcon={cascade <= 0}
-                showIcon={cascade <= 0}
-                userAuthority={userAuthority}
-                showTitle={
-                  nav.forceShowTitle ??
-                  (collapsed ? cascade >= 1 : cascade <= 1)
-                }
-                t={t as TraslationFn}
-                onLinkClick={handleLinkClick}
-                linkRenderer={linkRenderer}
-              />
-            )}
-            {nav.type === NAV_ITEM_TYPE_COLLAPSE && (
-              <VerticalCollapsedMenuItem
-                key={nav.key}
-                currentKey={activedRoute?.key}
-                parentKeys={defaulExpandKey}
-                nav={nav}
-                sideCollapsed={collapsed}
-                direction={direction}
-                indent={nextCascade >= 2}
-                dotIndent={nextCascade >= 2}
-                renderAsIcon={nextCascade <= 1}
-                userAuthority={userAuthority}
-                t={t as TraslationFn}
-                onLinkClick={onMenuItemClick}
-              >
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, nextCascade, true)}
-              </VerticalCollapsedMenuItem>
-            )}
-            {nav.type === NAV_ITEM_TYPE_TITLE && (
-              <MenuGroup key={nav.key} label={t(nav.translateKey) || nav.title}>
-                {nav.subMenu &&
-                  nav.subMenu.length > 0 &&
-                  renderNavigation(nav.subMenu, cascade, false)}
-              </MenuGroup>
-            )}
-          </Fragment>
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <Menu
-      className="px-4 pb-4"
-      sideCollapsed={collapsed}
-      defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
-      defaultExpandedKeys={defaulExpandKey}
-      defaultCollapseActiveKeys={
-        activedRoute?.parentKey ? [activedRoute.parentKey] : []
-      }
-    >
-      {renderNavigation(filteredNavigationTree, 0)}
-    </Menu>
-  );
-};
-
-export default VerticalMenuContent;
+        <Menu
+            className="px-4 pb-4"
+            sideCollapsed={collapsed}
+            defaultActiveKeys={activedRoute?.key ? [activedRoute.key] : []}
+            defaultExpandedKeys={defaulExpandKey}
+            defaultCollapseActiveKeys={
+                activedRoute?.parentKey ? [activedRoute.parentKey] : []
+            }
+        >
+            {renderNavigation(filteredNavigationTree, 0)}
+        </Menu>
+    )
+}
+
+export default VerticalMenuContent