ui-soxo-bootstrap-core 2.4.25-dev.8 → 2.4.25

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

@@ -1,14 +1,14 @@
 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 { 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';
 
+
 //  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 { Button, Card } from '../../../../lib';
+import './menu-lists.scss'
 
 const { Search } = Input;
 const { Panel } = Collapse;
@@ -37,14 +37,12 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 
   const [query, setQuery] = useState('');
 
-  // DEFAULT DRAG MODE: OFF
-  const [dragMode, setDragMode] = useState(false); // for drag (default OFF)
-
-  // to detect drag changes
-  const [orderChanged, setOrderChanged] = useState(false);
+    // ... existing states
+  const [dragMode, setDragMode] = useState(true); // NEW STATE
 
   const toggleDragMode = (checked) => setDragMode(checked);
 
+
   useEffect(() => {
     loadMenus();
   }, [id]);
@@ -81,7 +79,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
         var result = res.result;
 
         if (Array.isArray(result)) {
-          setRecords(result.sort((a, b) => a.order - b.order));
+          setRecords(result);
           // } else {
           //     setRecords([])
         }
@@ -95,9 +93,9 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
       });
   };
 
-  // function changeView(result) {
-  //   setView(result);
-  // }
+  function changeView(result) {
+    setView(result);
+  }
   const loadMenus = () => {
     setLoading(true);
 
@@ -106,8 +104,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
         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);
+        setRecords(res.result || []);
         setLoading(false);
       })
       .catch(() => setLoading(false));
@@ -127,47 +124,41 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
   // ------------------------
   // Recursive function to build payload
   // ------------------------
-  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);
+  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);
       }
 
-      return item;
+      return payload;
     });
+  };
 
   // ------------------------
   // Save order function
   // ------------------------
   const saveOrder = () => {
     const payload = { menus: buildOrderPayload(records) };
-
     model
-      .saveOrder({ formBody: payload })
-      .then((res) => {
-        setOrderChanged(false);
-
-        loadMenus(); // force refresh
+      .post('/update-order', payload) // Adjust endpoint to your backend
+      .then(() => {
+        message.success('Order saved successfully');
+        loadMenus(); // reload menus with new order
       })
-      // 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">
@@ -188,29 +179,41 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
           <div className="table-actions">
             <div className="button-container">
               <Space size="small">
-                <Button onClick={getRecords} size={'small'} type="default">
+                <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"
-                  className="custom-switch"
-                />
-                {/* Only show Save Order button when a change happens */}
-                {dragMode && orderChanged && (
-                  <Button type="primary" size="small" onClick={saveOrder}>
-                    Save Order
-                  </Button>
-                )}
+              <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"
+                    size='small'
                     onClick={() => {
                       setSelectedRecord({}); // empty record for creation
                       setDrawerTitle('Create New Menu');
@@ -241,20 +244,18 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
                         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
+                              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)}
@@ -263,16 +264,10 @@ 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>
                     ))}
@@ -324,7 +319,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);
@@ -337,7 +332,6 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
       {model.ModalAddComponent && (
         <Button
           size="small"
-          type="default"
           onClick={() => {
             setSelectedRecord(item);
             setDrawerTitle('Edit Menu');
@@ -350,7 +344,6 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
 
       <Button
         size="small"
-        type="default"
         onClick={() => {
           setSelectedRecord({ ...item, id: null, copy: true });
           setDrawerTitle('Copy Menu');
@@ -361,7 +354,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
       </Button>
 
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
-        <Button danger size="small" type="default">
+        <Button danger size="small">
           <DeleteOutlined />
         </Button>
       </Popconfirm>
@@ -372,27 +365,11 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
 // ------------------------
 // NestedMenu: Pass sub_menus recursively
 // ------------------------
-// ------------------------
-
-function NestedMenu({
-  parentId,
-  step,
-  model,
-  dragMode,
-
-  setSelectedRecord,
-  setDrawerTitle,
-  setDrawerVisible,
-  deleteRecord,
-  onChange, // callback to propagate changes to parent
-}) {
+function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord }) {
   const [items, setItems] = useState([]);
   const [loading, setLoading] = useState(true);
 
-  // Load child menus
-  // NestedMenu
   useEffect(() => {
-    setLoading(true);
     model
       .get({
         queries: [
@@ -401,25 +378,18 @@ function NestedMenu({
         ],
       })
       .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);
+        const menusWithSub = res.result.map((menu) => ({ ...menu, sub_menus: [] }));
+        setItems(menusWithSub || []);
         setLoading(false);
       })
       .catch(() => setLoading(false));
-  }, [parentId, step]);
+  }, [parentId]);
 
-  // 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 />;
@@ -434,31 +404,24 @@ function NestedMenu({
             <DraggableWrapper
               id={child.id}
               index={index}
-              movePanel={(from, to) => {
-                if (!dragMode) return; // block drag when OFF
-                moveSubMenu(from, to);
-              }}
+              movePanel={moveSubMenu}
               title={child.name}
-              dragEnabled={dragMode}
+              dragEnabled={true}
             />
           }
           extra={panelActions(child, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, 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);
-            }}
-          />
+          {child.hasChildren && (
+            <NestedMenu
+              parentId={child.id}
+              step={step + 1}
+              model={model}
+              setSelectedRecord={setSelectedRecord}
+              setDrawerTitle={setDrawerTitle}
+              setDrawerVisible={setDrawerVisible}
+              deleteRecord={deleteRecord}
+            />
+          )}
         </Panel>
       ))}
     </Collapse>

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

@@ -38,13 +38,4 @@
   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 */
-}