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

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

@@ -1,14 +1,13 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Space, Switch, Popconfirm, Skeleton, Input, Drawer, Collapse } from 'antd';
-import { ReloadOutlined, DeleteOutlined, EditOutlined, CopyOutlined, PlusCircleFilled } from '@ant-design/icons';
-import { Link, useParams, useLocation } from 'react-router-dom';
-
+import React, { useState, useCallback, useEffect } from 'react';
+import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message } from 'antd';
+import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
+import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
 //  for draggable menu list import { DndProvider } from "react-dnd";
 import { DndProvider } from 'react-dnd';
+import { Link, useParams, useLocation } from 'react-router-dom';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { DraggableWrapper } from '../../../../lib';
+
 import './menu-lists.scss';
-import { Button, Card } from '../../../../lib';
 
 const { Search } = Input;
 const { Panel } = Collapse;
@@ -18,36 +17,45 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 
   match = useParams();
   const id = match.id;
-  const location = useLocation();
-
+  // const location = useLocation();
   const step = parseInt(new URLSearchParams(location.search).get('step')) || 1;
 
   const [records, setRecords] = useState([]);
+  const [originalRecords, setOriginalRecords] = useState([]);
   const [loading, setLoading] = useState(false);
-
   const [drawerVisible, setDrawerVisible] = useState(false);
-
-  const [view, setView] = useState(false);
-
-  const [visible, setVisible] = useState(false);
-
   const [single, setSingle] = useState({});
   const [drawerTitle, setDrawerTitle] = useState('');
   const [selectedRecord, setSelectedRecord] = useState(null);
-
   const [query, setQuery] = useState('');
-
-  // DEFAULT DRAG MODE: OFF
-  const [dragMode, setDragMode] = useState(false); // for drag (default OFF)
-
-  // to detect drag changes
+  const [dragMode, setDragMode] = useState(false);
   const [orderChanged, setOrderChanged] = useState(false);
 
-  const toggleDragMode = (checked) => setDragMode(checked);
+  const [nextId, setNextId] = useState(10000);
 
   useEffect(() => {
     loadMenus();
   }, [id]);
+
+  const loadMenus = () => {
+    setLoading(true);
+
+    model
+      .getCoreMenuLists
+      //   {
+      //   queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
+      // }
+      ()
+      .then((res) => {
+        const sorted = (res.result || []).sort((a, b) => a.order - b.order);
+        setRecords(sorted);
+        setOriginalRecords(sorted);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  };
+
+  console.log('record', records);
   /**
    *
    */
@@ -95,198 +103,321 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
       });
   };
 
-  // function changeView(result) {
-  //   setView(result);
-  // }
-  const loadMenus = () => {
-    setLoading(true);
+  const toggleDragMode = (checked) => {
+    setDragMode(checked);
+    if (checked) {
+      message.info('Drag mode enabled - Drag items anywhere, including the "Drop here" zones!');
+    }
+  };
 
-    model
-      .get({
-        queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
-      })
-      .then((res) => {
-        const sorted = (res.result || []).sort((a, b) => a.order - b.order);
-        setRecords(sorted);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
+  // Function to find and remove an item from anywhere in the tree
+  const findAndRemoveItem = (items, itemId) => {
+    let foundItem = null;
+
+    const removeRecursive = (arr) => {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].id === itemId) {
+          foundItem = { ...arr[i] };
+          arr.splice(i, 1);
+          return true;
+        }
+        if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
+          if (removeRecursive(arr[i].sub_menus)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    const newItems = JSON.parse(JSON.stringify(items));
+    removeRecursive(newItems);
+    return { newItems, foundItem };
   };
 
+  // Function to insert item at specific location
+  const insertItemAt = (items, item, targetLevel, targetParentId, targetIndex) => {
+    const newItems = JSON.parse(JSON.stringify(items));
+
+    // Update item properties for new location
+    const updatedItem = {
+      ...item,
+      step: targetLevel,
+      header_id: targetParentId,
+    };
+
+    if (targetLevel === 1) {
+      // Insert at main level
+      newItems.splice(targetIndex, 0, updatedItem);
+    } else {
+      // Insert into nested level
+      const insertRecursive = (arr) => {
+        for (let i = 0; i < arr.length; i++) {
+          if (arr[i].id === targetParentId) {
+            if (!arr[i].sub_menus) arr[i].sub_menus = [];
+            arr[i].sub_menus.splice(targetIndex, 0, updatedItem);
+            return true;
+          }
+          if (arr[i].sub_menus && arr[i].sub_menus.length > 0) {
+            if (insertRecursive(arr[i].sub_menus)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+      insertRecursive(newItems);
+    }
+
+    return newItems;
+  };
+
+  const handleCrossLevelMove = useCallback(
+    (draggedItem, dropTarget) => {
+      const { targetLevel, targetParentId, targetIndex } = dropTarget;
+
+      // Prevent moving item into itself or its children
+      if (draggedItem.id === targetParentId) {
+        message.warning('Cannot move item into itself');
+        return;
+      }
+
+      // Remove item from original location
+      const { newItems: itemsAfterRemove, foundItem } = findAndRemoveItem(records, draggedItem.id);
+
+      if (!foundItem) {
+        message.error('Could not find item to move');
+        return;
+      }
+
+      // Insert item at new location
+      const finalItems = insertItemAt(itemsAfterRemove, foundItem, targetLevel, targetParentId, targetIndex);
+
+      setRecords(finalItems);
+      setOrderChanged(true);
+      message.success(`Moved "${foundItem.name}" to level ${targetLevel}`);
+    },
+    [records]
+  );
+
   const deleteRecord = (rec) => {
     model.delete(rec).then(loadMenus);
   };
 
-  const filtered = records.filter((r) => r.name?.toUpperCase().includes(query.toUpperCase())); /**
-   * Function to store search value
-   */
+  const filtered = records.filter((r) => r.name?.toUpperCase().includes(query.toUpperCase()));
+
+  const visibleItems = dragMode ? records : filtered;
+
   const onSearch = (event) => {
-    setQuery(event.target.value); // <-- use setQuery
+    setQuery(event.target.value);
   };
 
   // ------------------------
   // Recursive function to build payload
   // ------------------------
-  const buildOrderPayload = (menus) =>
-    menus.map((menu, index) => {
-      const item = { id: menu.id, order: index + 1 };
+  const buildUpdatedOrderPayload = (menus, originalMenus) => {
+    const result = [];
 
-      // FIX: use sub_menus instead of children
-      if (menu.sub_menus && menu.sub_menus.length > 0) {
-        item.sub_menus = buildOrderPayload(menu.sub_menus);
+    menus.forEach((menu, index) => {
+      const original = findMenuById(originalMenus, menu.id);
+
+      const newOrder = index + 1;
+      const oldOrder = original ? original.order : null;
+
+      const orderChanged = oldOrder !== newOrder;
+      const parentChanged = original?.header_id !== menu.header_id;
+
+      // check sub menus
+      let updatedSubMenus = [];
+      if (menu.sub_menus?.length) {
+        updatedSubMenus = buildUpdatedOrderPayload(menu.sub_menus, originalMenus);
       }
 
-      return item;
+      // include only if changed OR has changed children
+      if (orderChanged || parentChanged || updatedSubMenus.length) {
+        result.push({
+          id: menu.id,
+          order: newOrder,
+          header_id: menu.header_id,
+          name: menu.name,
+          ...(updatedSubMenus.length && { sub_menus: updatedSubMenus }),
+        });
+      }
     });
 
+    return result;
+  };
+
+  // ------------------------
+  // Find menu by id (recursive)
+  // ------------------------
+  const findMenuById = (menus, id) => {
+    for (const menu of menus || []) {
+      if (menu.id === id) return menu;
+
+      if (menu.sub_menus?.length) {
+        const found = findMenuById(menu.sub_menus, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
   // ------------------------
   // Save order function
   // ------------------------
   const saveOrder = () => {
-    const payload = { menus: buildOrderPayload(records) };
+    const updatedMenus = buildUpdatedOrderPayload(records, originalRecords);
+
+    if (!updatedMenus.length) {
+      message.info('No order changes to save');
+      return;
+    }
+
+    const payload = { menus: updatedMenus };
 
     model
       .saveOrder({ formBody: payload })
-      .then((res) => {
+      .then(() => {
         setOrderChanged(false);
-
-        loadMenus(); // force refresh
+        loadMenus(); // refresh from backend
       })
-      // const { updated_ids, same_order_ids } = res.result;
-
-      // Combine the updated order
-      // const newOrder = [...updated_ids, ...same_order_ids];
-      // const reorderedRecords = newOrder.map((id) => records.find((r) => r.id === id)).filter(Boolean); // remove undefined if not found
-
-      // setRecords(reorderedRecords);
-      // loadMenus(); // <-- reload from backend
-      // setOrderChanged(false);
-      // })
-      .catch((err) => {
-        console.error(err);
-        
-      });
+      .catch(console.error);
   };
 
+  const movePanel = useCallback(
+    (from, to) => {
+      if (!dragMode) return;
+      if (from === to) return;
+
+      setRecords((prevRecords) => {
+        const updated = [...prevRecords];
+        const [moved] = updated.splice(from, 1);
+        updated.splice(to, 0, moved);
+        return updated;
+      });
+
+      setOrderChanged(true);
+    },
+    [dragMode]
+  );
+
   return (
     <Card className="generic-list">
-      <div className="table-header">
-        <div className="table-title">
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
           <Search placeholder="Enter Search Value" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={onSearch} />
-          {/* <Title level={4}>{model.name}</Title> */}
 
-          {/* <p>{loading ? 'Loading records' : `${record.length} records`}</p> */}
+          <Space size="small">
+            <Button onClick={getRecords} size={'small'} type="default">
+              <ReloadOutlined />
+            </Button>
+
+            <Switch checked={dragMode} onChange={toggleDragMode} checkedChildren="Order On" unCheckedChildren="Order Off" />
+
+            {dragMode && orderChanged && (
+              <Button onClick={saveOrder} type="primary" size="small">
+                Save Order
+              </Button>
+            )}
+
+            <Button
+              type="primary"
+              size="small"
+              onClick={() => {
+                setSelectedRecord({ step: 1, header_id: null });
+                setDrawerTitle('Create New Menu');
+                setDrawerVisible(true);
+              }}
+            >
+              Create New Menu
+            </Button>
+          </Space>
         </div>
 
-        <div className="table-bar">
-          {/* Table Filters */}
-          <div className="table-filters">
-            <Space direction="vertical" size={12}></Space>
-          </div>
-          {/* Table Filters Ends */}
-
-          <div className="table-actions">
-            <div className="button-container">
-              <Space size="small">
-                <Button onClick={getRecords} size={'small'} type="default">
-                  <ReloadOutlined />
-                </Button>
-
-                {/* NEW SWITCH: Drag Mode */}
-                <Switch
-                  checked={dragMode}
-                  onChange={toggleDragMode}
-                  checkedChildren="Order On"
-                  unCheckedChildren="Order Off"
-                  className="custom-switch"
-                />
-                {/* Only show Save Order button when a change happens */}
-                {dragMode && orderChanged && (
-                  <Button type="primary" size="small" onClick={saveOrder}>
-                    Save Order
-                  </Button>
-                )}
-
-                {disableAddModal || !model.ModalAddComponent ? null : (
-                  <Button
-                    type="primary"
-                    size="small"
-                    onClick={() => {
-                      setSelectedRecord({}); // empty record for creation
-                      setDrawerTitle('Create New Menu');
-                      setDrawerVisible(true); // this controls Drawer visibility
-                    }}
-                  >
-                    Create New Menu
-                  </Button>
-                )}
-              </Space>
-            </div>
+        {dragMode && (
+          <div
+            style={{
+              padding: '8px 12px',
+              backgroundColor: '#e6f7ff',
+              borderRadius: 4,
+              border: '1px solid #91d5ff',
+              fontSize: 13,
+            }}
+          >
+            <strong>💡 Tips:</strong>
+            <ul style={{ margin: '4px 0', paddingLeft: 20 }}>
+              <li>Drag between items to reorder at the same level</li>
+              <li>Drop on the green "↳ Drop here" zone to make it a child of that item</li>
+              <li>Works at all levels - unlimited nesting supported!</li>
+            </ul>
           </div>
-        </div>
+        )}
       </div>
-
       {loading ? (
         <Skeleton active />
       ) : (
         <>
           <>
-            {!view ? (
-              <Card>
-                <DndProvider backend={HTML5Backend}>
-                  <Collapse accordion className="custom-collapse">
-                    {filtered.map((item, index) => (
-                      <Panel
-                        key={item.id}
-                        className="custom-panel"
-                        header={
-                          <DraggableWrapper
-                            id={item.id}
-                            index={index}
-                            movePanel={(from, to) => {
-                              if (!dragMode) return;
-
-                              const updated = [...records];
-                              const [moved] = updated.splice(from, 1);
-                              updated.splice(to, 0, moved);
-
-                              setRecords(updated);
-                              setOrderChanged(true); // <-- mark as changed
-                            }}
-                            title={item.name}
-                            dragEnabled={dragMode} // pass dragMode to wrapper
-                          />
-                        }
-                        extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
-                      >
+            {/* {!view ? ( */}
+            <Card>
+              <DndProvider backend={HTML5Backend}>
+                <Collapse accordion>
+                  {visibleItems.map((item, index) => (
+                    <Panel
+                      key={item.id}
+                      header={
+                        <DraggableWrapper
+                          id={item.id}
+                          index={index}
+                          movePanel={movePanel}
+                          item={item}
+                          dragEnabled={dragMode}
+                          level={1}
+                          parentId={null}
+                          onCrossLevelMove={handleCrossLevelMove}
+                          canAcceptChildren={true}
+                        />
+                      }
+                      //  only show arrow if sub_menus exist
+                      showArrow={item.sub_menus && item.sub_menus.length > 0}
+                      //  disable panel
+                      collapsible={item.sub_menus && item.sub_menus.length > 0 ? 'header' : 'disabled'}
+                      extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
+                    >
+                      {item.sub_menus && item.sub_menus.length > 0 && (
                         <NestedMenu
                           parentId={item.id}
-                          step={step + 1}
+                          step={item.step + 1}
+                          items={item.sub_menus || []}
                           model={model}
                           dragMode={dragMode}
                           setSelectedRecord={setSelectedRecord}
                           setDrawerTitle={setDrawerTitle}
                           setDrawerVisible={setDrawerVisible}
                           deleteRecord={deleteRecord}
+                          level={2}
+                          onCrossLevelMove={handleCrossLevelMove}
                           onChange={(subMenus) => {
                             const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
                             setRecords(updated);
                             setOrderChanged(true);
                           }}
                         />
-                      </Panel>
-                    ))}
-                  </Collapse>
-                </DndProvider>
-              </Card>
-            ) : (
+                      )}
+                    </Panel>
+                  ))}
+                </Collapse>
+              </DndProvider>
+            </Card>
+            {/* ) : (
               <CardList model={model} data={filtered ? filtered : records} />
-            )}
+            )} */}
           </>
         </>
       )}
-      {/* DRAWER */}
-      <Drawer title={drawerTitle} open={drawerVisible} width="50%" destroyOnClose onClose={() => setDrawerVisible(false)}>
+
+      <Drawer title={drawerTitle} open={drawerVisible} width="80%" destroyOnClose onClose={() => setDrawerVisible(false)}>
         {model.ModalAddComponent && (
           <model.ModalAddComponent
             formContent={selectedRecord}
@@ -303,15 +434,8 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
     </Card>
   );
 };
-function CardList({ model, data, url, ...props }) {
-  return data.map((record, index) => {
-    return <model.Card record={record} model={model} index={index} key={index} {...record} {...props} />;
-  });
-}
-export default MenuLists;
-
 /* -----------------------------------------------------------------------
-   PANEL ACTIONS (NOW FIXED)
+   PANEL ACTIONS 
 ------------------------------------------------------------------------ */
 function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
   return (
@@ -322,16 +446,18 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         type="dashed"
         onClick={() => {
           setSelectedRecord({
-            header_id: item.id, // parent menu id
+            // parent menu id
+            header_id: item.id,
             step: item.step + 1,
-            id: null, // new record
+            // new record
+            id: null,
           });
           setDrawerTitle(`Add Submenu to "${item.name}"`);
           setDrawerVisible(true);
         }}
       >
         <PlusCircleFilled />
-        add submenu
+        Add Sub Menu
       </Button>
 
       {model.ModalAddComponent && (
@@ -369,93 +495,83 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
   );
 }
 
-// ------------------------
-// NestedMenu: Pass sub_menus recursively
-// ------------------------
-// ------------------------
-
 function NestedMenu({
   parentId,
   step,
+  items,
   model,
   dragMode,
-
   setSelectedRecord,
   setDrawerTitle,
   setDrawerVisible,
   deleteRecord,
-  onChange, // callback to propagate changes to parent
+  level,
+  onCrossLevelMove,
+  onChange,
 }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(true);
+  // do not render Collapse
+  if (!items || items.length === 0) return null;
+
+  const [localItems, setLocalItems] = useState(items);
 
-  // Load child menus
-  // NestedMenu
   useEffect(() => {
-    setLoading(true);
-    model
-      .get({
-        queries: [
-          { field: 'header_id', value: parentId },
-          { field: 'step', value: step },
-        ],
-      })
-      .then((res) => {
-        const sortedMenus = (res.result || [])
-          .sort((a, b) => a.order - b.order) // sort top-level in this submenu
-          .map((menu) => ({
-            ...menu,
-            sub_menus: menu.sub_menus ? menu.sub_menus.sort((a, b) => a.order - b.order) : [],
-          }));
-        setItems(sortedMenus);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, [parentId, step]);
-
-  // Move submenu
-  const moveSubMenu = (from, to) => {
-    const updated = [...items];
-    const [moved] = updated.splice(from, 1);
-    updated.splice(to, 0, moved);
-    setItems(updated);
-    onChange?.(updated); // propagate to parent
-  };
+    setLocalItems(items);
+  }, [items]);
 
-  if (loading) return <Skeleton active />;
-  if (!items.length) return <p style={{ paddingLeft: 20 }}>No submenu</p>;
+  const moveSubMenu = useCallback(
+    (from, to) => {
+      if (!dragMode || from === to) return;
+
+      const updated = [...localItems];
+      const [moved] = updated.splice(from, 1);
+      updated.splice(to, 0, moved);
+
+      setLocalItems(updated);
+      onChange?.(updated);
+    },
+    [dragMode, localItems, onChange]
+  );
+  if (!localItems || localItems.length === 0) {
+    // <-- don’t render anything if no submenus
+    return null;
+  }
 
   return (
-    <Collapse accordion className="nested-collapse">
-      {items.map((child, index) => (
+    <Collapse accordion>
+      {localItems.map((child, index) => (
         <Panel
           key={child.id}
           header={
             <DraggableWrapper
               id={child.id}
               index={index}
-              movePanel={(from, to) => {
-                if (!dragMode) return; // block drag when OFF
-                moveSubMenu(from, to);
-              }}
-              title={child.name}
+              movePanel={moveSubMenu}
+              item={child}
               dragEnabled={dragMode}
+              level={level}
+              parentId={parentId}
+              onCrossLevelMove={onCrossLevelMove}
+              canAcceptChildren={true}
             />
           }
+          //  only show arrow if sub_menus exist
+          showArrow={child.sub_menus && child.sub_menus.length > 0}
           extra={panelActions(child, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
         >
-          {/* Recursively render submenus */}
           <NestedMenu
             parentId={child.id}
             step={step + 1}
-            model={model}
+            items={child.sub_menus || []}
+            dragMode={dragMode}
             setSelectedRecord={setSelectedRecord}
             setDrawerTitle={setDrawerTitle}
             setDrawerVisible={setDrawerVisible}
             deleteRecord={deleteRecord}
+            level={level + 1}
+            onCrossLevelMove={onCrossLevelMove}
             onChange={(submenus) => {
-              const updated = items.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
-              setItems(updated);
+              const updated = localItems.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
+              setLocalItems(updated);
               onChange?.(updated);
             }}
           />
@@ -464,3 +580,5 @@ function NestedMenu({
     </Collapse>
   );
 }
+
+export default MenuLists;