ui-soxo-bootstrap-core 2.4.25-dev.10 → 2.4.25-dev.11

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

@@ -1,61 +1,138 @@
-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 }) {
 
-export default function DraggableWrapper({ id, index, movePanel, title, dragEnabled = true }) {
-  const ref = useRef(null);
+  const autoScrollWindow = (monitor) => {
+  const offset = monitor.getClientOffset();
+  if (!offset) return;
 
-  const [, drop] = useDrop({
-    accept: ItemTypes.PANEL,
-    hover(item, monitor) {
-      if (!dragEnabled) return; // ignore hover if dragging is disabled
-      if (!ref.current) return;
+  const EDGE = 80;
+  const SPEED = 20;
 
-      const dragIndex = item.index;
-      const hoverIndex = index;
+  const viewportHeight = window.innerHeight;
 
-      if (dragIndex === hoverIndex) return;
+  // 🔼 scroll UP
+  if (offset.y < 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;
+  // 🔽 scroll DOWN
+  if (offset.y > viewportHeight - EDGE) {
+    window.scrollBy(0, SPEED);
+  }
+};
 
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
+  const [{ isDragging }, drag] = useDrag({
+    type: 'PANEL',
+    item: { id, index, level, parentId },
+    canDrag: dragEnabled,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
 
-      movePanel(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    },
+  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
+    }
+  },
+
+    canDrop: (item) => dragEnabled,
+     drop: (dragItem, monitor) => {
+    if (monitor.didDrop()) return;
+
+    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 ? '#e6f7ff' : '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 ref={drop} style={{ width: '100%' }}>
+      <div
+        ref={drag}
+        style={{
+          opacity: isDragging ? 0.5 : 1,
+          cursor: dragEnabled ? 'move' : 'default',
+          // padding: '8px',
+          backgroundColor,
+          transition: 'all 0.2s ease',
+          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, color: '#999' }}>⋮⋮</span>}
+          <strong>{item.name}</strong>
+          {dragEnabled ?( <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>):(<span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>{item.path}</span>)}
+        </div>
+
+        {canAcceptChildren && dragEnabled && (
+          <div
+            ref={dropChild}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              padding: '4px 12px',
+              marginLeft: 8,
+              backgroundColor: childZoneBackgroundColor,
+              border: isOverChild && canDropChild ? '2px solid #52c41a' : '1px dashed #d9d9d9',
+              borderRadius: 4,
+              fontSize: 11,
+              color: isOverChild && canDropChild ? '#52c41a' : '#999',
+              cursor: 'default',
+              transition: 'all 0.2s ease',
+            }}
+          >
+            {isOverChild && canDropChild ? '✓ Drop as child' : '↳ Drop here'}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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,19 @@ 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');
-
         setLoading(false);
-
         callback();
       });
     }
@@ -154,7 +144,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 +153,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,37 +219,38 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
               {/* Pages Ends */}
 
               {/* Path */}
-              <Form.Item name="path" label="Path" required>
-                <Input placeholder="Enter path" />
-              </Form.Item>
+              {/* <Form.Item name="path" label="Path" 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" rules={[{ required: true, message: 'Visibility is 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*/}
-              <Form.Item name="icon_name" label="Icon Name" required>
+              <Form.Item name="icon_name" label="Icon Name" rules={[{ required: true, message: 'Icon name is required' }]}>
                 <Input placeholder="Enter icon name" />
               </Form.Item>
               {/*  Icon Name Ends */}
 
               {/* Step */}
-              <Form.Item name={'step'} label="Step" required>
+              <Form.Item name={'step'} label="Step" rules={[{ required: true, message: 'Step is required' }]}>
                 <InputNumber placeholder="Enter step" />
               </Form.Item>
               {/* Step Ends */}