ui-soxo-bootstrap-core 2.4.24 → 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 { Typography, Modal, Space, Switch, Popconfirm, Skeleton, Input, Drawer, Collapse, Button, Card } from 'antd';
-import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, 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 './menu-lists.scss';
 
 const { Search } = Input;
 const { Panel } = Collapse;
@@ -18,34 +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('');
+  const [dragMode, setDragMode] = useState(false);
+  const [orderChanged, setOrderChanged] = useState(false);
 
-    // ... existing states
-  const [dragMode, setDragMode] = useState(true); // NEW STATE
-
-  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);
   /**
    *
    */
@@ -79,7 +89,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
         var result = res.result;
 
         if (Array.isArray(result)) {
-          setRecords(result);
+          setRecords(result.sort((a, b) => a.order - b.order));
           // } else {
           //     setRecords([])
         }
@@ -93,195 +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) => {
-        setRecords(res.result || []);
-        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) => {
-    return menus.map((menu, index) => {
-      const payload = {
-        id: menu.id,
-        order: index + 1,
-      };
+  const buildUpdatedOrderPayload = (menus, originalMenus) => {
+    const result = [];
 
-      if (menu.sub_menus && menu.sub_menus.length) {
-        payload.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 payload;
+      // 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
-      .post('/update-order', payload) // Adjust endpoint to your backend
+      .saveOrder({ formBody: payload })
       .then(() => {
-        message.success('Order saved successfully');
-        loadMenus(); // reload menus with new order
+        setOrderChanged(false);
+        loadMenus(); // refresh from backend
       })
-      .catch((err) => {
-        console.error(err);
-        message.error('Failed to save order');
-      });
+      .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'}>
-                  <ReloadOutlined />
-                </Button>
-
-                {/* <Switch
-                  defaultChecked
-                  onChange={changeView}
-                  checked={view}
-                  checkedChildren={<OrderedListOutlined />}
-                  unCheckedChildren={<PicCenterOutlined />}
-                /> */}
-                {/* NEW SWITCH: Drag Mode */}
-              <Switch
-                checked={dragMode}
-                onChange={toggleDragMode}
-                checkedChildren="Order On"
-                unCheckedChildren="Order Off"
-              />
-
-              {dragMode && (
-  <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; // prevent moving if drag mode off
-    const updated = [...filtered];
-    const [moved] = updated.splice(from, 1);
-    updated.splice(to, 0, moved);
-    setRecords(updated);
-  }}
-  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}
@@ -298,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 (
@@ -317,21 +446,24 @@ 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 && (
         <Button
           size="small"
+          type="default"
           onClick={() => {
             setSelectedRecord(item);
             setDrawerTitle('Edit Menu');
@@ -344,6 +476,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
 
       <Button
         size="small"
+        type="default"
         onClick={() => {
           setSelectedRecord({ ...item, id: null, copy: true });
           setDrawerTitle('Copy Menu');
@@ -354,7 +487,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
       </Button>
 
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
-        <Button danger size="small">
+        <Button danger size="small" type="default">
           <DeleteOutlined />
         </Button>
       </Popconfirm>
@@ -362,42 +495,50 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
   );
 }
 
-// ------------------------
-// NestedMenu: Pass sub_menus recursively
-// ------------------------
-function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord }) {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(true);
+function NestedMenu({
+  parentId,
+  step,
+  items,
+  model,
+  dragMode,
+  setSelectedRecord,
+  setDrawerTitle,
+  setDrawerVisible,
+  deleteRecord,
+  level,
+  onCrossLevelMove,
+  onChange,
+}) {
+  // do not render Collapse
+  if (!items || items.length === 0) return null;
+
+  const [localItems, setLocalItems] = useState(items);
 
   useEffect(() => {
-    model
-      .get({
-        queries: [
-          { field: 'header_id', value: parentId },
-          { field: 'step', value: step },
-        ],
-      })
-      .then((res) => {
-        const menusWithSub = res.result.map((menu) => ({ ...menu, sub_menus: [] }));
-        setItems(menusWithSub || []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, [parentId]);
+    setLocalItems(items);
+  }, [items]);
 
-  const moveSubMenu = (from, to) => {
-    const updated = [...items];
-    const [moved] = updated.splice(from, 1);
-    updated.splice(to, 0, moved);
-    setItems(updated);
-  };
+  const moveSubMenu = useCallback(
+    (from, to) => {
+      if (!dragMode || from === to) return;
+
+      const updated = [...localItems];
+      const [moved] = updated.splice(from, 1);
+      updated.splice(to, 0, moved);
 
-  if (loading) return <Skeleton active />;
-  if (!items.length) return <p style={{ paddingLeft: 20 }}>No submenu</p>;
+      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={
@@ -405,25 +546,39 @@ function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle,
               id={child.id}
               index={index}
               movePanel={moveSubMenu}
-              title={child.name}
-              dragEnabled={true}
+              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)}
         >
-          {child.hasChildren && (
-            <NestedMenu
-              parentId={child.id}
-              step={step + 1}
-              model={model}
-              setSelectedRecord={setSelectedRecord}
-              setDrawerTitle={setDrawerTitle}
-              setDrawerVisible={setDrawerVisible}
-              deleteRecord={deleteRecord}
-            />
-          )}
+          <NestedMenu
+            parentId={child.id}
+            step={step + 1}
+            items={child.sub_menus || []}
+            dragMode={dragMode}
+            setSelectedRecord={setSelectedRecord}
+            setDrawerTitle={setDrawerTitle}
+            setDrawerVisible={setDrawerVisible}
+            deleteRecord={deleteRecord}
+            level={level + 1}
+            onCrossLevelMove={onCrossLevelMove}
+            onChange={(submenus) => {
+              const updated = localItems.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
+              setLocalItems(updated);
+              onChange?.(updated);
+            }}
+          />
         </Panel>
       ))}
     </Collapse>
   );
 }
+
+export default MenuLists;