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

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

@@ -1,14 +1,14 @@
 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 { 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';
 
-
 //  for draggable menu list import { DndProvider } from "react-dnd";
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DraggableWrapper } from '../../../../lib';
-import './menu-lists.scss'
+import './menu-lists.scss';
+import { Button, Card } from '../../../../lib';
 
 const { Search } = Input;
 const { Panel } = Collapse;
@@ -37,11 +37,13 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 
   const [query, setQuery] = useState('');
 
-    // ... existing states
-  const [dragMode, setDragMode] = useState(true); // NEW STATE
+  // DEFAULT DRAG MODE: OFF
+  const [dragMode, setDragMode] = useState(false); // for drag (default OFF)
 
-  const toggleDragMode = (checked) => setDragMode(checked);
+  // to detect drag changes
+  const [orderChanged, setOrderChanged] = useState(false);
 
+  const toggleDragMode = (checked) => setDragMode(checked);
 
   useEffect(() => {
     loadMenus();
@@ -79,7 +81,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,9 +95,9 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
       });
   };
 
-  function changeView(result) {
-    setView(result);
-  }
+  // function changeView(result) {
+  //   setView(result);
+  // }
   const loadMenus = () => {
     setLoading(true);
 
@@ -104,7 +106,8 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
         queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
       })
       .then((res) => {
-        setRecords(res.result || []);
+        const sorted = (res.result || []).sort((a, b) => a.order - b.order);
+        setRecords(sorted);
         setLoading(false);
       })
       .catch(() => setLoading(false));
@@ -124,41 +127,47 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
   // ------------------------
   // Recursive function to build payload
   // ------------------------
-  const buildOrderPayload = (menus) => {
-    return menus.map((menu, index) => {
-      const payload = {
-        id: menu.id,
-        order: index + 1,
-      };
-
-      if (menu.sub_menus && menu.sub_menus.length) {
-        payload.sub_menus = buildOrderPayload(menu.sub_menus);
+  const buildOrderPayload = (menus) =>
+    menus.map((menu, index) => {
+      const item = { id: menu.id, order: index + 1 };
+
+      // FIX: use sub_menus instead of children
+      if (menu.sub_menus && menu.sub_menus.length > 0) {
+        item.sub_menus = buildOrderPayload(menu.sub_menus);
       }
 
-      return payload;
+      return item;
     });
-  };
 
   // ------------------------
   // Save order function
   // ------------------------
   const saveOrder = () => {
     const payload = { menus: buildOrderPayload(records) };
+
     model
-      .post('/update-order', payload) // Adjust endpoint to your backend
-      .then(() => {
-        message.success('Order saved successfully');
-        loadMenus(); // reload menus with new order
+      .saveOrder({ formBody: payload })
+      .then((res) => {
+        setOrderChanged(false);
+
+        loadMenus(); // force refresh
       })
+      // 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);
-        message.error('Failed to save order');
+        
       });
   };
 
-
-
-
   return (
     <Card className="generic-list">
       <div className="table-header">
@@ -179,41 +188,29 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
           <div className="table-actions">
             <div className="button-container">
               <Space size="small">
-                <Button onClick={getRecords} size={'small'}>
+                <Button onClick={getRecords} size={'small'} type="default">
                   <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>
-)}
-
-
+                <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'
+                    size="small"
                     onClick={() => {
                       setSelectedRecord({}); // empty record for creation
                       setDrawerTitle('Create New Menu');
@@ -244,18 +241,20 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
                         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
-
+                            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)}
@@ -264,10 +263,16 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
                           parentId={item.id}
                           step={step + 1}
                           model={model}
+                          dragMode={dragMode}
                           setSelectedRecord={setSelectedRecord}
                           setDrawerTitle={setDrawerTitle}
                           setDrawerVisible={setDrawerVisible}
                           deleteRecord={deleteRecord}
+                          onChange={(subMenus) => {
+                            const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
+                            setRecords(updated);
+                            setOrderChanged(true);
+                          }}
                         />
                       </Panel>
                     ))}
@@ -319,7 +324,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
           setSelectedRecord({
             header_id: item.id, // parent menu id
             step: item.step + 1,
-            id: null,           // new record
+            id: null, // new record
           });
           setDrawerTitle(`Add Submenu to "${item.name}"`);
           setDrawerVisible(true);
@@ -332,6 +337,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
       {model.ModalAddComponent && (
         <Button
           size="small"
+          type="default"
           onClick={() => {
             setSelectedRecord(item);
             setDrawerTitle('Edit Menu');
@@ -344,6 +350,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 +361,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>
@@ -365,11 +372,27 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
 // ------------------------
 // NestedMenu: Pass sub_menus recursively
 // ------------------------
-function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord }) {
+// ------------------------
+
+function NestedMenu({
+  parentId,
+  step,
+  model,
+  dragMode,
+
+  setSelectedRecord,
+  setDrawerTitle,
+  setDrawerVisible,
+  deleteRecord,
+  onChange, // callback to propagate changes to parent
+}) {
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(true);
 
+  // Load child menus
+  // NestedMenu
   useEffect(() => {
+    setLoading(true);
     model
       .get({
         queries: [
@@ -378,18 +401,25 @@ function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle,
         ],
       })
       .then((res) => {
-        const menusWithSub = res.result.map((menu) => ({ ...menu, sub_menus: [] }));
-        setItems(menusWithSub || []);
+        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]);
+  }, [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
   };
 
   if (loading) return <Skeleton active />;
@@ -404,24 +434,31 @@ function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle,
             <DraggableWrapper
               id={child.id}
               index={index}
-              movePanel={moveSubMenu}
+              movePanel={(from, to) => {
+                if (!dragMode) return; // block drag when OFF
+                moveSubMenu(from, to);
+              }}
               title={child.name}
-              dragEnabled={true}
+              dragEnabled={dragMode}
             />
           }
           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}
-            />
-          )}
+          {/* Recursively render submenus */}
+          <NestedMenu
+            parentId={child.id}
+            step={step + 1}
+            model={model}
+            setSelectedRecord={setSelectedRecord}
+            setDrawerTitle={setDrawerTitle}
+            setDrawerVisible={setDrawerVisible}
+            deleteRecord={deleteRecord}
+            onChange={(submenus) => {
+              const updated = items.map((item) => (item.id === child.id ? { ...item, sub_menus: submenus } : item));
+              setItems(updated);
+              onChange?.(updated);
+            }}
+          />
         </Panel>
       ))}
     </Collapse>

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

@@ -38,4 +38,13 @@
   padding: 10px 14px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.04);
 }
+/* OFF state */
+.custom-switch.ant-switch {
+  background-color: #bfbfbf !important; /* gray */
+}
+
+/* ON state */
+.custom-switch.ant-switch-checked {
+  background-color: #446AA9 !important; /* blue */
+}