ui-soxo-bootstrap-core 2.6.40-dev.16 → 2.6.40

package/core/lib/components/sidemenu/sidemenu.js

@@ -385,71 +385,6 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
   const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
 
-  /**
-   * Recursively renders the menu tree to any depth. Any menu that has visible
-   * children is rendered as a <SubMenu>; everything else becomes a clickable
-   * leaf <Menu.Item>. This replaces the old hard-coded 3-level rendering so
-   * menus nested 4, 5, 6+ levels deep all show up.
-   *
-   * Keys are kept identical to the previous implementation
-   * (SubMenu => id || path || caption, leaf => path || caption) so the
-   * openKeys / selectedKeys / onOpenChange logic continues to work.
-   */
-  const renderMenuTree = (items, { isRoot = false, parentKey } = {}) => {
-    const visibleItems = Menus.screenMenus(items, 'order').filter((record) => {
-      // Drop entries without a caption — they have no label to render.
-      const hasCaption = typeof record.caption === 'string' && record.caption.trim().length > 0;
-      if (!hasCaption) return false;
-
-      // The visibility / icon rule only applies to top-level menus, matching the
-      // previous behaviour; nested items just need a caption.
-      if (!isRoot) return true;
-
-      if (record.id) {
-        if (record.is_visible) return true;
-        return !!record.icon_name;
-      }
-
-      return true;
-    });
-
-    return visibleItems.map((menu, index) => {
-      const icon = menu.icon_name || 'fa-solid fas fa-user';
-
-      // Children that actually have something to show (a caption).
-      const children =
-        menu && menu.sub_menus
-          ? Menus.screenMenus(menu.sub_menus, 'order').filter((s) => typeof s.caption === 'string' && s.caption.trim().length > 0)
-          : [];
-
-      if (children.length) {
-        return (
-          <SubMenu
-            className="popup"
-            style={{ color: state.theme.colors.leftSectionColor }}
-            key={menu.id || menu.path || menu.caption}
-            title={
-              <span>
-                <CollapsedIconMenu menu={menu} caption={menu.caption} icon={icon} collapsed={collapsed} />
-              </span>
-            }
-          >
-            {renderMenuTree(menu.sub_menus, { isRoot: false, parentKey: menu.path || menu.caption })}
-          </SubMenu>
-        );
-      }
-
-      return (
-        <Menu.Item
-          key={menu.path || menu.caption}
-          onClick={() => onMenuClick({ ...menu, parentKey: parentKey || menu.path || menu.caption, isRoot }, index)}
-        >
-          <CollapsedIconMenu menu={menu} caption={menu.caption} icon={icon} collapsed={collapsed} />
-        </Menu.Item>
-      );
-    });
-  };
-
   return (
     <div className="sidemenu">
       {loading ? (
@@ -555,7 +490,153 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
               })
             } */}
 
-            {renderMenuTree(modules, { isRoot: true })}
+            {Menus.screenMenus(modules, 'order')
+
+              .filter((record) => {
+                icon = record;
+
+                // Drop entries without a caption — they have no permission/label
+                // to render, so showing just an icon is misleading.
+                const hasCaption = typeof record.caption === 'string' && record.caption.trim().length > 0;
+                if (!hasCaption) return false;
+
+                if (record.id) {
+                  if (record.is_visible) {
+                    return true;
+                  }
+
+                  if (record.icon_name) {
+                    return true;
+                  } else {
+                    return false;
+                  }
+                } else {
+                  return true;
+                }
+              })
+              .map((menu, index) => {
+                // return <MenuItem menu={menu} index={index} />
+
+                let sub_menus = menu && menu.sub_menus
+                  ? Menus.screenMenus(menu.sub_menus).filter((s) => typeof s.caption === 'string' && s.caption.trim().length > 0)
+                  : [];
+
+                if (menu && sub_menus && sub_menus.length) {
+                  // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                  return (
+                    <SubMenu
+                      className="popup"
+                      style={{ color: state.theme.colors.leftSectionColor }}
+                      // key={`first-level-${randomIndex}-${menu.caption}`}
+
+                      key={menu.id || menu.path || menu.caption}
+                      title={
+                        <>
+                          <CollapsedIconMenu
+                            menu={menu}
+                            caption={menu.caption}
+                            icon={menu.icon_name || 'fa-solid fas fa-user'}
+                            collapsed={collapsed}
+                          />
+                        </>
+                      }
+                    >
+                      {sub_menus.map((submenu, innerIndex) => {
+                        // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                        let third_menus = submenu && submenu.sub_menus ? Menus.screenMenus(submenu.sub_menus) : [];
+
+                        if (third_menus && third_menus.length) {
+                          return (
+                            <SubMenu
+                              className="popup"
+                              // key={`second-level-${randomIndex}-${submenu.id}`}
+
+                              key={submenu.id || submenu.path || submenu.caption}
+                              title={
+                                <span>
+                                  <CollapsedIconMenu
+                                    menu={menu}
+                                    caption={submenu.caption}
+                                    icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                    collapsed={collapsed}
+                                  />
+                                </span>
+                              }
+                            >
+                              {third_menus.map((menu) => {
+                                // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                                return (
+                                  <Menu.Item
+                                    // onClick={() => {
+                                    //   onMenuClick(menu, index);
+                                    // }}
+                                    onClick={() => {
+                                      onMenuClick({ ...menu, parentKey: submenu.path || submenu.caption }, index);
+                                    }}
+                                    // key={`second-level-${randomIndex}-${index}`}
+
+                                    key={menu.path || menu.caption}
+                                  >
+                                    <CollapsedIconMenu
+                                      menu={menu}
+                                      caption={menu.caption}
+                                      icon={menu.icon_name || 'fa-solid fas fa-user'}
+                                      collapsed={collapsed}
+                                    />
+                                  </Menu.Item>
+                                );
+                              })}
+                            </SubMenu>
+                          );
+                        } else {
+                          // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                          return (
+                            <Menu.Item
+                              // onClick={() => {
+                              //   onMenuClick(submenu, index);
+                              // }}
+                              onClick={() => {
+                                onMenuClick({ ...submenu, parentKey: menu.path || menu.caption }, index);
+                              }}
+                              // key={`first-level-${randomIndex}-${innerIndex}`}
+                              key={submenu.path || submenu.caption}
+                            >
+                              <CollapsedIconMenu
+                                menu={menu}
+                                caption={submenu.caption}
+                                icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                collapsed={collapsed}
+                              />
+                            </Menu.Item>
+                          );
+                        }
+                      })}
+                    </SubMenu>
+                  );
+                } else {
+                  // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                  return (
+                    <Menu.Item
+                      // onClick={() => {
+                      //   onMenuClick(menu, index);
+                      // }}
+
+                      onClick={() => {
+                        onMenuClick({ ...menu, parentKey: menu.path || menu.caption, isRoot: true }, index);
+                      }}
+                      // key={`${menu.id}-${randomIndex}`}
+                      key={menu.path || menu.caption}
+                    >
+                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
+                    </Menu.Item>
+                  );
+                }
+              })}
 
             {loading ? (
               <div class="skeleton-wrapper"></div>

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -1,27 +1,26 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
-// Walk up the DOM to find the nearest vertically-scrollable ancestor.
-// Returns null when the page (window) is the scroller.
-function getScrollableAncestor(node) {
-  let el = node?.parentElement;
-  while (el) {
-    const { overflowY } = window.getComputedStyle(el);
-    const scrollable = overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
-    if (scrollable && el.scrollHeight > el.clientHeight) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-
 export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
-  // Root DOM node, used to locate the scrollable ancestor at drag time
-  const rootRef = useRef(null);
-  // Latest pointer Y, fed by a document-level `dragover` listener (see effect below)
-  const pointerY = useRef(0);
-  const rafRef = useRef(null);
-  // The scrollable container to auto-scroll (resolved when a drag starts)
-  const scrollContainerRef = useRef(null);
+  const autoScrollWindow = (monitor) => {
+    const offset = monitor.getClientOffset();
+    if (!offset) return;
+
+    const EDGE = 80;
+    const SPEED = 20;
+
+    const viewportHeight = window.innerHeight;
+
+    // 🔼 scroll UP
+    if (offset.y < EDGE) {
+      window.scrollBy(0, -SPEED);
+    }
+
+    // 🔽 scroll DOWN
+    if (offset.y > viewportHeight - EDGE) {
+      window.scrollBy(0, SPEED);
+    }
+  };
 
   const [{ isDragging }, drag] = useDrag({
     type: 'PANEL',
@@ -32,78 +31,12 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
     }),
   });
 
-  /**
-   * Continuous edge auto-scroll while THIS item is being dragged.
-   *
-   * Driven by a document-level `dragover` listener + requestAnimationFrame loop
-   * rather than the drop target's `hover` handler. `hover` only fires while the
-   * pointer is over a droppable panel and only on movement, so scrolling UP
-   * failed: the top of the viewport is the (non-droppable) header, and holding
-   * the pointer still at an edge produced no events. The rAF loop keeps
-   * scrolling from the last known pointer position regardless of what's beneath.
-   *
-   * The list may scroll inside an overflow container rather than the window, so
-   * we resolve the nearest scrollable ancestor and scroll that (falling back to
-   * the window), computing the edges from the container's own bounds.
-   */
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const EDGE = 80;
-    const SPEED = 20;
-
-    scrollContainerRef.current = getScrollableAncestor(rootRef.current);
-
-    const onDragOver = (e) => {
-      pointerY.current = e.clientY;
-    };
-
-    const tick = () => {
-      const y = pointerY.current;
-
-      if (y > 0) {
-        const container = scrollContainerRef.current;
-
-        if (container) {
-          const rect = container.getBoundingClientRect();
-          // near container top
-          if (y < rect.top + EDGE) {
-            container.scrollTop -= SPEED;
-          }
-          // near container bottom
-          else if (y > rect.bottom - EDGE) {
-            container.scrollTop += SPEED;
-          }
-        } else {
-          const viewportHeight = window.innerHeight;
-          // near viewport top
-          if (y < EDGE) {
-            window.scrollBy(0, -SPEED);
-          }
-          // near viewport bottom
-          else if (y > viewportHeight - EDGE) {
-            window.scrollBy(0, SPEED);
-          }
-        }
-      }
-
-      rafRef.current = requestAnimationFrame(tick);
-    };
-
-    window.addEventListener('dragover', onDragOver);
-    rafRef.current = requestAnimationFrame(tick);
-
-    return () => {
-      window.removeEventListener('dragover', onDragOver);
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-      pointerY.current = 0;
-      scrollContainerRef.current = null;
-    };
-  }, [isDragging]);
-
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: 'PANEL',
     hover: (dragItem, monitor) => {
+      //  THIS FIXES BOTTOM → TOP
+      autoScrollWindow(monitor);
+
       if (dragItem.index === index) return;
 
       if (dragItem.level === level && dragItem.parentId === parentId) {
@@ -152,7 +85,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
   const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div ref={rootRef} style={{ width: '100%', display: 'flex' }}>
+    <div style={{ width: '100%', display: 'flex' }}>
       {/* HEADER DROP — reorder only */}
       <div ref={drop}>
         <div

package/core/lib/models/menus/components/menu-add/menu-add.js

@@ -158,7 +158,7 @@ export default function MenuAdd({ model, edit, history, match, formContent, call
 
                     {/* Model */}
                     <Form.Item label="Model" name="model_id">
-                        <Select allowClear style={{ width: '100%' }}>
+                        <Select style={{ width: '100%' }}>
                             {models.map((model, key) => (
                                 <Option key={key} value={model.id}>{model.name}</Option>
                             ))}
@@ -168,7 +168,7 @@ export default function MenuAdd({ model, edit, history, match, formContent, call
 
                     {/* Page */}
                     <Form.Item label="Page" name="page_id">
-                        <Select allowClear style={{ width: '100%' }}>
+                        <Select style={{ width: '100%' }}>
                             {pages.map((page, key) => (
                                 <Option key={key} value={page.id}>{page.name}</Option>
                             ))}