ui-soxo-bootstrap-core 2.5.6 → 2.5.7

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

@@ -1,61 +1,136 @@
-import React, { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
+import React, { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
 
-const ItemTypes = { PANEL: "panel" };
+export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
+  const autoScrollWindow = (monitor) => {
+    const offset = monitor.getClientOffset();
+    if (!offset) return;
 
-export default function DraggableWrapper({ id, index, movePanel, title, dragEnabled = true }) {
-  const ref = useRef(null);
+    const EDGE = 80;
+    const SPEED = 20;
 
-  const [, drop] = useDrop({
-    accept: ItemTypes.PANEL,
-    hover(item, monitor) {
-      if (!dragEnabled) return; // ignore hover if dragging is disabled
-      if (!ref.current) return;
+    const viewportHeight = window.innerHeight;
 
-      const dragIndex = item.index;
-      const hoverIndex = index;
+    // 🔼 scroll UP
+    if (offset.y < EDGE) {
+      window.scrollBy(0, -SPEED);
+    }
 
-      if (dragIndex === hoverIndex) return;
+    // 🔽 scroll DOWN
+    if (offset.y > viewportHeight - EDGE) {
+      window.scrollBy(0, SPEED);
+    }
+  };
 
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+  const [{ isDragging }, drag] = useDrag({
+    type: 'PANEL',
+    item: { id, index, level, parentId },
+    canDrag: dragEnabled,
+    collect: (monitor) => ({
+      isDragging: monitor.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) {
+        movePanel(dragItem.index, index);
+        dragItem.index = index; //  keep in sync
+      }
+    },
 
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
+    canDrop: (item) => dragEnabled,
+    drop: (dragItem, monitor) => {
+      if (monitor.didDrop()) return;
 
-      movePanel(dragIndex, hoverIndex);
-      item.index = hoverIndex;
+      if (dragItem.level !== level || dragItem.parentId !== parentId) {
+        onCrossLevelMove?.(dragItem, {
+          targetLevel: level,
+          targetParentId: parentId,
+          targetIndex: index,
+        });
+      }
     },
+    collect: (monitor) => ({
+      isOver: monitor.isOver({ shallow: true }),
+      canDrop: monitor.canDrop(),
+    }),
   });
 
-  const [{ isDragging }, drag] = useDrag({
-    type: ItemTypes.PANEL,
-    item: { id, index },
-    canDrag: dragEnabled, // only allow dragging if dragEnabled
+  // Drop zone for making items children of this item
+  const [{ isOverChild, canDropChild }, dropChild] = useDrop({
+    accept: 'PANEL',
+    canDrop: (item) => dragEnabled && item.id !== id && canAcceptChildren,
+    drop: (item, monitor) => {
+      // if (monitor.didDrop()) return;
+
+      if (onCrossLevelMove && item.id !== id) {
+        // Drop as child of this item
+        onCrossLevelMove(item, { targetLevel: level + 1, targetParentId: id, targetIndex: 0 });
+      }
+    },
     collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
+      isOverChild: monitor.isOver({ shallow: true }),
+      canDropChild: monitor.canDrop(),
     }),
   });
 
-  drag(drop(ref));
+  const backgroundColor = isOver && canDrop ? '#bae7ff' : isDragging ? '#ffff' : 'transparent';
+  const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div
-      ref={ref}
-      style={{
-        display: "flex",
-        width: "100%",
-        cursor: dragEnabled ? "grab" : "default", // show cursor only if draggable
-        opacity: isDragging ? 0.6 : 1,
-        transition: "transform 0.2s ease, opacity 0.2s ease",
-        transform: isDragging ? "scale(1.05)" : "scale(1)",
-        boxShadow: isDragging ? "0px 5px 10px rgba(0,0,0,0.15)" : "none",
-        padding: "5px 0",
-      }}
-    >
-      {title}
+    <div style={{ width: '100%', display: 'flex' }}>
+      {/* HEADER DROP — reorder only */}
+      <div ref={drop}>
+        <div
+          ref={drag}
+          style={{
+            opacity: isDragging ? 0.5 : 1,
+            cursor: dragEnabled ? 'move' : 'default',
+            backgroundColor,
+            border: isOver && canDrop ? '2px dashed #1890ff' : '2px solid transparent',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ flex: 1 }}>
+            {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
+            <span>{item.name}</span>
+            {dragEnabled ? (
+              <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
+            ) : (
+              <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>{item.path}</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* CHILD DROP — nesting */}
+      {canAcceptChildren && dragEnabled && (
+        <div
+          ref={dropChild}
+          style={{
+            marginLeft: 8,
+            //  flex:1,
+            // marginTop: 4,
+            padding: '4px 12px',
+            backgroundColor: isOverChild && canDropChild ? '#d4f4dd' : 'transparent',
+            border: isOverChild && canDropChild ? '2px solid #52c41a' : '1px dashed #d9d9d9',
+            borderRadius: 4,
+            fontSize: 11,
+            color: isOverChild && canDropChild ? '#52c41a' : '#999',
+          }}
+        >
+          {isOverChild && canDropChild ? '✓ Drop as child' : '↳ Drop here'}
+        </div>
+      )}
     </div>
   );
 }

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -0,0 +1,114 @@
+/**
+ * MenuTree Component
+ *
+ * @description
+ * Renders a hierarchical menu structure with optional checkboxes.
+ * Supports:
+ * - Recursive menu rendering
+ * - Parent–child checkbox synchronization
+ * - Indeterminate state for partially selected parents
+ *
+ * Common use cases:
+ * - Role-based menu preview
+ * - Permission assignment trees
+ *
+ * @param {Object} props
+ * @param {Array<Object>} props.menus - Menu tree data
+ * @param {Array<number>} props.selectedMenus - Selected menu IDs
+ * @param {(menuId:number, checked:boolean) => void} props.toggleMenu - Callback for menu selection
+ * @param {number|null} props.parentId - Parent menu ID (used internally for recursion)
+ * @param {boolean} props.showCheckbox - Whether to display checkboxes
+ *
+ * @returns {JSX.Element}
+ */
+
+import React from 'react';
+import { Checkbox, Collapse } from 'antd';
+
+const { Panel } = Collapse;
+
+export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = null, showCheckbox = true }) => {
+  const renderTree = (menuList, parentId = null) => {
+    return menuList.map((menu) => {
+      const children = menu.sub_menus || [];
+
+      /**
+       * Toggle menu selection recursively for all child menus
+       *
+       * @param {Object} m - Menu object
+       * @param {boolean} checked - Checkbox state
+       */
+      const toggleMenuRecursive = (m, checked) => {
+        toggleMenu && toggleMenu(m.id, checked);
+        if (m.sub_menus && m.sub_menus.length > 0) {
+          m.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
+        }
+      };
+
+      /**
+       * Handle parent checkbox change
+       * - Updates parent menu
+       * - Cascades selection to all children
+       *
+       * @param {boolean} checked
+       */
+
+      const onParentChange = (checked) => {
+        toggleMenu && toggleMenu(menu.id, checked);
+        children.forEach((c) => toggleMenuRecursive(c, checked));
+      };
+
+      /**
+       * Leaf menu (no sub-menus)
+       */
+
+      if (children.length === 0) {
+        return (
+          <div
+            key={menu.id}
+            style={{
+              border: '1px solid rgba(198, 195, 195, 0.85)',
+              padding: '12px 16px',
+              marginBottom: 6,
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+            <span>{menu.title || menu.caption}</span>
+          </div>
+        );
+      }
+
+      /**
+       * Parent menu (with sub-menus)
+       */
+
+      return (
+        <Collapse key={menu.id} style={{ marginBottom: 6 }}>
+          <Panel
+            key={menu.id}
+            header={
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {showCheckbox && (
+                  <Checkbox
+                    checked={children.every((c) => selectedMenus.includes(c.id))}
+                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                    onChange={(e) => onParentChange(e.target.checked)}
+                  />
+                )}
+                <span>{menu.title || menu.caption}</span>
+              </div>
+            }
+          >
+            <div style={{ paddingLeft: 20 }}>{renderTree(children, menu.id)}</div>
+          </Panel>
+        </Collapse>
+      );
+    });
+  };
+
+  return <>{renderTree(menus, parentId)}</>;
+};

package/core/lib/elements/basic/switch/switch.js

@@ -65,4 +65,4 @@ Switch.propTypes = {
   className: PropTypes.string,
   /** A custom style object for the switch component. */
   style: PropTypes.object,
-};
+};

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

@@ -107,13 +107,14 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
    * Submit values
    */
   const onSubmit = (values) => {
-    // console.log(values);
     setLoading(true);
 
     let id = formContent.id;
 
-    // Add the step to form content
-    // values.step = step;
+    //  ONLY set step if it's NOT already provided
+    if (!values.step) {
+      values.step = formContent.step || step;
+    }
 
     if (values.attributes && typeof values === 'object') {
       values = {
@@ -123,30 +124,29 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
     }
 
     if (id) {
-      // Update of model
       model.update({ id, values }).then(() => {
-        // callback();
         message.success('Menu Updated');
-
         setLoading(false);
-
         callback();
       });
     } else {
-      values.step = step;
-
-      // Append the additional queries to the object
       additional_queries.forEach(({ field, value }) => {
         values[field] = value;
       });
 
-      // add new model
-      model.add({ values }).then(() => {
-        // callback();
-        message.success('Menu Added');
+      MenusAPI.createMenu({ formBody: values }).then((res) => {
+        const apiMessage = res?.result?.message;
 
-        setLoading(false);
+        //  (duplicate)
+        if (apiMessage?.toLowerCase().includes('already exists')) {
+          message.warning(apiMessage);
+          setLoading(false);
+          return; // stop further execution
+        }
 
+        //  Real success
+        message.success('Menu Added');
+        setLoading(false);
         callback();
       });
     }
@@ -154,7 +154,7 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
 
   return (
     <section className="collection-add menu-add">
-      <Title level={4}>{mode} Menu</Title>
+      {/* <Title level={4}>{mode} Menu</Title> */}
 
       {loading ? (
         <Skeleton />
@@ -163,21 +163,21 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
           <div className="form-container">
             <div className="left-container">
               {/* Caption */}
-              <Form.Item name={'caption'} label="Caption" required>
+              <Form.Item name={'caption'} label="Caption" rules={[{ required: true, message: 'Caption is required' }]}>
                 <Input placeholder="Enter caption" />
               </Form.Item>
               {/* Caption Ends */}
 
               {/* Name */}
-              <Form.Item name={'name'} label="Name" required>
+              <Form.Item name={'name'} label="Name" rules={[{ required: true, message: 'Name is required' }]}>
                 <Input placeholder="Enter name" />
               </Form.Item>
               {/* Name Ends */}
 
               {/* Description */}
-              <Form.Item name={'description'} label="Description">
-                <TextArea placeholder="Enter Description" />
-              </Form.Item>
+              {/* <Form.Item name={"description"} label="Description">
+                                <TextArea placeholder="Enter Description" />
+                            </Form.Item> */}
               {/* Description Ends */}
 
               {/* Model */}
@@ -229,27 +229,28 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
               {/* Pages Ends */}
 
               {/* Path */}
-              <Form.Item name="path" label="Path" required>
+              <Form.Item name="path" label="Path" rules={[{ required: true, message: 'Path is required' }]}>
                 <Input placeholder="Enter path" />
               </Form.Item>
               {/* Path Ends */}
 
               {/* Route */}
-              <Form.Item name="route" label="Route" required>
+              <Form.Item name="route" label="Route" rules={[{ required: true, message: 'Route is required' }]}>
                 <Input placeholder="Enter route" />
               </Form.Item>
               {/* Route Ends */}
 
               {/* Switch */}
-              <Form.Item name="is_visible" label="Visible" required>
-                <Switch defaultChecked={body.is_visible} />
+              <Form.Item name="is_visible" label="Visible" valuePropName="checked" required>
+                <Switch />
               </Form.Item>
+
               {/* Switch Ends */}
 
               {/* Step */}
-              <Form.Item name={'order'} label="Order" required>
-                <InputNumber placeholder="Enter order" />
-              </Form.Item>
+              {/* <Form.Item name={"order"} label="Order" required>
+                                <InputNumber placeholder="Enter order" />
+                            </Form.Item> */}
               {/* Step Ends */}
 
               {/* Icon Name*/}