ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,429 @@
+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';
+
+
+//  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'
+
+const { Search } = Input;
+const { Panel } = Collapse;
+
+const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [], disableAddModal = model.disableAddModal }) => {
+  const actions = [];
+
+  match = useParams();
+  const id = match.id;
+  const location = useLocation();
+
+  const step = parseInt(new URLSearchParams(location.search).get('step')) || 1;
+
+  const [records, setRecords] = 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('');
+
+    // ... existing states
+  const [dragMode, setDragMode] = useState(true); // NEW STATE
+
+  const toggleDragMode = (checked) => setDragMode(checked);
+
+
+  useEffect(() => {
+    loadMenus();
+  }, [id]);
+  /**
+   *
+   */
+  const getRecords = () => {
+    let firstStepQueries = [
+      {
+        field: 'step',
+        value: step,
+      },
+    ];
+
+    let config = {
+      queries: [...additional_queries, ...firstStepQueries],
+    };
+
+    if (!additional_queries.length) {
+      config.queries.push({
+        field: 'header_id',
+        value: null,
+      });
+    }
+
+    setLoading(true);
+
+    // Get the records
+    return model
+      .get(config)
+
+      .then((res) => {
+        // setRecords(res.result);
+        var result = res.result;
+
+        if (Array.isArray(result)) {
+          setRecords(result);
+          // } else {
+          //     setRecords([])
+        }
+
+        setLoading(false);
+      })
+      .catch((error) => {
+        setLoading(false);
+
+        console.log(error);
+      });
+  };
+
+  function changeView(result) {
+    setView(result);
+  }
+  const loadMenus = () => {
+    setLoading(true);
+
+    model
+      .get({
+        queries: [...additional_queries, { field: 'step', value: step }, { field: 'header_id', value: null }],
+      })
+      .then((res) => {
+        setRecords(res.result || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  };
+
+  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 onSearch = (event) => {
+    setQuery(event.target.value); // <-- use setQuery
+  };
+
+  // ------------------------
+  // 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);
+      }
+
+      return payload;
+    });
+  };
+
+  // ------------------------
+  // 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
+      })
+      .catch((err) => {
+        console.error(err);
+        message.error('Failed to save order');
+      });
+  };
+
+
+
+
+  return (
+    <Card className="generic-list">
+      <div className="table-header">
+        <div className="table-title">
+          <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> */}
+        </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>
+          </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)}
+                      >
+                        <NestedMenu
+                          parentId={item.id}
+                          step={step + 1}
+                          model={model}
+                          setSelectedRecord={setSelectedRecord}
+                          setDrawerTitle={setDrawerTitle}
+                          setDrawerVisible={setDrawerVisible}
+                          deleteRecord={deleteRecord}
+                        />
+                      </Panel>
+                    ))}
+                  </Collapse>
+                </DndProvider>
+              </Card>
+            ) : (
+              <CardList model={model} data={filtered ? filtered : records} />
+            )}
+          </>
+        </>
+      )}
+      {/* DRAWER */}
+      <Drawer title={drawerTitle} open={drawerVisible} width="50%" destroyOnClose onClose={() => setDrawerVisible(false)}>
+        {model.ModalAddComponent && (
+          <model.ModalAddComponent
+            formContent={selectedRecord}
+            match={match}
+            model={model}
+            additional_queries={additional_queries}
+            callback={() => {
+              setDrawerVisible(false);
+              loadMenus();
+            }}
+          />
+        )}
+      </Drawer>
+    </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)
+------------------------------------------------------------------------ */
+function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
+  return (
+    <Space onClick={(e) => e.stopPropagation()}>
+      {/* ⭐ NEW BUTTON — Add Submenu */}
+      <Button
+        size="small"
+        type="dashed"
+        onClick={() => {
+          setSelectedRecord({
+            header_id: item.id, // parent menu id
+            step: item.step + 1,
+            id: null,           // new record
+          });
+          setDrawerTitle(`Add Submenu to "${item.name}"`);
+          setDrawerVisible(true);
+        }}
+      >
+        <PlusCircleFilled />
+        add submenu
+      </Button>
+
+      {model.ModalAddComponent && (
+        <Button
+          size="small"
+          onClick={() => {
+            setSelectedRecord(item);
+            setDrawerTitle('Edit Menu');
+            setDrawerVisible(true);
+          }}
+        >
+          <EditOutlined />
+        </Button>
+      )}
+
+      <Button
+        size="small"
+        onClick={() => {
+          setSelectedRecord({ ...item, id: null, copy: true });
+          setDrawerTitle('Copy Menu');
+          setDrawerVisible(true);
+        }}
+      >
+        <CopyOutlined />
+      </Button>
+
+      <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
+        <Button danger size="small">
+          <DeleteOutlined />
+        </Button>
+      </Popconfirm>
+    </Space>
+  );
+}
+
+// ------------------------
+// NestedMenu: Pass sub_menus recursively
+// ------------------------
+function NestedMenu({ parentId, step, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord }) {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  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]);
+
+  const moveSubMenu = (from, to) => {
+    const updated = [...items];
+    const [moved] = updated.splice(from, 1);
+    updated.splice(to, 0, moved);
+    setItems(updated);
+  };
+
+  if (loading) return <Skeleton active />;
+  if (!items.length) return <p style={{ paddingLeft: 20 }}>No submenu</p>;
+
+  return (
+    <Collapse accordion className="nested-collapse">
+      {items.map((child, index) => (
+        <Panel
+          key={child.id}
+          header={
+            <DraggableWrapper
+              id={child.id}
+              index={index}
+              movePanel={moveSubMenu}
+              title={child.name}
+              dragEnabled={true}
+            />
+          }
+          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}
+            />
+          )}
+        </Panel>
+      ))}
+    </Collapse>
+  );
+}

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

@@ -0,0 +1,41 @@
+.custom-collapse {
+  background: transparent !important;
+  border: none !important;
+}
+
+.ant-collapse {
+  background: transparent !important;
+  border: none !important;
+}
+.ant-collapse > .ant-collapse-item {
+     border: 1px solid #d9d9d9; 
+   
+}
+
+.ant-collapse > .ant-collapse-item {
+  margin-bottom: 14px;              // GAP between each panel
+  // border: none !important;
+}
+
+.custom-panel {
+  background: #fff !important;       // white box
+  border-radius: 8px !important;    
+  // padding: 12px 16px !important;     
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);  
+}
+
+.nested-collapse {
+  margin-left: 20px;           // indent child collapses
+}
+
+.nested-collapse .ant-collapse-item {
+  margin-bottom: 12px;
+}
+
+.nested-panel {
+  background: #f9f9f9 !important;    // slightly light background
+  border-radius: 8px;
+  padding: 10px 14px;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+}
+