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

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

@@ -4,7 +4,7 @@
 }
 
 .ant-collapse {
-  background: transparent !important;
+   background-color: #fafafa !important;
   border: none !important;
 }
 .ant-collapse > .ant-collapse-item {
@@ -25,7 +25,7 @@
 }
 
 .nested-collapse {
-  margin-left: 20px;           // indent child collapses
+  margin-left: 2px;           // indent child collapses
 }
 
 .nested-collapse .ant-collapse-item {
@@ -38,13 +38,8 @@
   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 */
+.ant-collapse > .ant-collapse-item > .ant-collapse-heade{
+  align-items: center;
 }
 
-/* ON state */
-.custom-switch.ant-switch-checked {
-  background-color: #446AA9 !important; /* blue */
-}
 

package/core/models/menus/menus.js

@@ -179,6 +179,15 @@ class MenusAPI extends Base {
     }).then((result) => result);
   };
 
+  // get core-menu list with submenu
+  getCoreMenuLists = () => {
+    const url = 'core-menus/core-menus?step=1&header_id=null';
+
+    return this.get({
+      url,
+    }).then((result) => result);
+  };
+
   getCoreMenus = () => {
     return [
       // {

package/core/models/roles/components/role-add/role-add.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Skeleton, Typography, message, Form, Input, Collapse, Checkbox } from 'antd';
 import { GlobalContext } from './../../../../lib';
-import {Button} from './../../../../lib';
+import { Button } from './../../../../lib';
 import { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
 
 const { Title } = Typography;
@@ -34,8 +34,7 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
   const [models, setModels] = useState([]);
   const [menuList, setMenuList] = useState([]);
   const [showMenus, setShowMenus] = useState(false);
-  const [originalMenus, setOriginalMenus] = useState([]);// for deselected menu for editing
-
+  const [originalMenus, setOriginalMenus] = useState([]); // for deselected menu for editing
 
   // Selected menus (array of IDs)
   const [selectedMenus, setSelectedMenus] = useState([]);
@@ -54,18 +53,16 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
     setShowMenus(true);
 
     // Preselect menus when editing
-     if (formContent && formContent.menu_ids) {
-    let menus = formContent.menu_ids;
-    
-    setSelectedMenus(menus);
-    setOriginalMenus(menus);       // keep original copy for deselect comparison
-  }
+    if (formContent && formContent.menu_ids) {
+      let menus = formContent.menu_ids;
+
+      setSelectedMenus(menus);
+      setOriginalMenus(menus); // keep original copy for deselect comparison
+    }
 
     setLoading(false);
   }, [formContent]);
 
-  
-
   // Load pages
   const getPages = () => {
     PagesAPI.getPages().then((res) => setPages(res.result || []));
@@ -78,112 +75,102 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 
   // Load top-level menus
   const loadMenus = () => {
-    MenusAPI.get({
-      queries: [
-        { field: 'step', value: 1 },
-        { field: 'header_id', value: null },
-      ],
-    })
+    MenusAPI.getCoreMenuLists()
       .then((res) => setMenuList(res.result || []))
       .catch(console.error);
   };
 
   // Toggle menu selection
   const toggleMenu = (id, checked) => {
-    setSelectedMenus((prev) =>
-      checked ? [...prev, id] : prev.filter((m) => m !== id)
-    );
+    setSelectedMenus((prev) => (checked ? [...prev, id] : prev.filter((m) => m !== id)));
   };
 
   // Submit handler
-//   const onSubmit = (values) => {
-//     setLoading(true);
-
-//     const payload = {
-//       ...values,
-//       menu_ids
-// : selectedMenus,
-//       attributes: JSON.stringify(values.attributes || {}),
-//     };
-
-//     if (formContent.id) {
-//       RolesAPI.updateRole({ id: formContent.id, formBody: payload })
-//         .then(() => {
-//           message.success('Role Updated');
-//           setLoading(false);
-//           callback();
-//         })
-//         .catch(() => setLoading(false));
-//     } else {
-//       additional_queries.forEach(({ field, value }) => {
-//         payload[field] = value;
-//       });
-//       RolesAPI.createRole(payload)
-//         .then(() => {
-//           message.success('Role Added');
-//           setLoading(false);
-//           callback();
-//         })
-//         .catch(() => setLoading(false));
-//     }
-//   };
-    const onSubmit = async (values) => {
-  setLoading(true);
-
-  
-  // Find menus that were originally selected but now deselected
-  const deselectedMenus = originalMenus.filter(
-    (id) => !selectedMenus.includes(id)
-  );
+  //   const onSubmit = (values) => {
+  //     setLoading(true);
+
+  //     const payload = {
+  //       ...values,
+  //       menu_ids
+  // : selectedMenus,
+  //       attributes: JSON.stringify(values.attributes || {}),
+  //     };
+
+  //     if (formContent.id) {
+  //       RolesAPI.updateRole({ id: formContent.id, formBody: payload })
+  //         .then(() => {
+  //           message.success('Role Updated');
+  //           setLoading(false);
+  //           callback();
+  //         })
+  //         .catch(() => setLoading(false));
+  //     } else {
+  //       additional_queries.forEach(({ field, value }) => {
+  //         payload[field] = value;
+  //       });
+  //       RolesAPI.createRole(payload)
+  //         .then(() => {
+  //           message.success('Role Added');
+  //           setLoading(false);
+  //           callback();
+  //         })
+  //         .catch(() => setLoading(false));
+  //     }
+  //   };
+  const onSubmit = async (values) => {
+    setLoading(true);
+
+    // Find menus that were originally selected but now deselected
+    const deselectedMenus = originalMenus.filter((id) => !selectedMenus.includes(id));
+
+    const payload = {
+      ...values,
+      menu_ids: selectedMenus,
+      deselect_array: deselectedMenus, //  add deselected menus when edit time
+      attributes: JSON.stringify(values.attributes || {}),
+    };
+
+    //  include id ONLY for edit
+    if (formContent?.id) {
+      payload.id = formContent.id;
+    }
 
-  const payload = {
-    ...values,
-    menu_ids: selectedMenus, 
-    deselect_array: deselectedMenus, //  add deselected menus when edit time
-    attributes: JSON.stringify(values.attributes || {}),
+    //  include additional queries for both cases
+    additional_queries.forEach(({ field, value }) => {
+      payload[field] = value;
+    });
+
+    try {
+      await RolesAPI.createRole(payload); //  single API
+      message.success(formContent?.id ? 'Role Updated' : 'Role Added');
+      callback();
+    } catch (err) {
+      // message.error('Something went wrong');
+    } finally {
+      setLoading(false);
+    }
   };
 
-  //  include id ONLY for edit
-  if (formContent?.id) {
-    payload.id = formContent.id;
-  }
-
-  //  include additional queries for both cases
-  additional_queries.forEach(({ field, value }) => {
-    payload[field] = value;
-  });
-
-  try {
-    await RolesAPI.createRole(payload); //  single API
-    message.success(formContent?.id ? 'Role Updated' : 'Role Added');
-    callback();
-  } catch (err) {
-    // message.error('Something went wrong');
-  } finally {
-    setLoading(false);
-  }
-};
-
-
-
   return (
     <section className="collection-add">
       {loading ? (
         <Skeleton />
       ) : (
-        <Form
-          initialValues={{ ...formContent }}
-          form={form}
-          layout="vertical"
-          onFinish={onSubmit}
-        >
+        <Form initialValues={{ ...formContent }} form={form} layout="vertical" onFinish={onSubmit}>
           {/* Role Name */}
-          <Form.Item name="name" label="Enter Role Name" required>
+          <Form.Item name="name" label="Enter Role Name" rules={[{ required: true, message: 'Role name is required' }]}>
             <Input placeholder="Enter name" />
           </Form.Item>
 
           {/* Description */}
-          <Form.Item name="description" label="Enter Description" required>
+          <Form.Item
+            name="description"
+            label="Enter Description"
+            rules={[
+              { required: true, message: 'Description is required' },
+              { max: 250, message: 'Description cannot exceed 255 characters' },
+            ]}
+          >
             <Input placeholder="Enter description" />
           </Form.Item>
 
@@ -193,33 +180,46 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
               <Title level={5} style={{ marginBottom: 16 }}>
                 Menu List
               </Title>
-              <p style={{ marginTop: -10, marginBottom: 20, color: '#999' }}>
-                Choose menus and set permissions
-              </p>
-
-              <Collapse expandIconPosition="left">
-                {menuList.map((item) => (
-                  <Panel
-                    key={item.id}
-                    header={
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <Checkbox
-                          checked={selectedMenus.includes(item.id)}
-                          onChange={(e) => toggleMenu(item.id, e.target.checked)}
-                        />
+              <p style={{ marginTop: -10, marginBottom: 20, color: '#999' }}>Choose menus and set permissions</p>
+
+              <Collapse expandIconPosition="left" style={{ marginBottom: '4px' }}>
+                {menuList.map((item) => {
+                  const hasChildren = item.sub_menus && item.sub_menus.length > 0;
+
+                  if (!hasChildren) {
+                    // 👉 NO collapse icon
+                    return (
+                      <div
+                        key={item.id}
+                        style={{
+                          padding: '12px 16px',
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 8,
+                          borderBottom: '1px solid #f0f0f0',
+                        }}
+                      >
+                        <Checkbox checked={selectedMenus.includes(item.id)} onChange={(e) => toggleMenu(item.id, e.target.checked)} />
                         <span>{item.title || item.caption}</span>
                       </div>
-                    }
-                  >
-                    {/* Nested submenus */}
-                    <NestedMenu
-                      parentId={item.id}
-                      step={step + 1}
-                      selectedMenus={selectedMenus}
-                      toggleMenu={toggleMenu}
-                    />
-                  </Panel>
-                ))}
+                    );
+                  }
+
+                  // 👉 WITH collapse icon
+                  return (
+                    <Panel
+                      key={item.id}
+                      header={
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid #f0f0f0' }}>
+                          <Checkbox checked={selectedMenus.includes(item.id)} onChange={(e) => toggleMenu(item.id, e.target.checked)} />
+                          <span>{item.title || item.caption}</span>
+                        </div>
+                      }
+                    >
+                      <NestedMenu parentId={item.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+                    </Panel>
+                  );
+                })}
               </Collapse>
             </div>
           )}
@@ -257,13 +257,13 @@ const NestedMenu = ({ parentId, step, selectedMenus, toggleMenu }) => {
         setLoading(false);
       })
       .catch(() => setLoading(false));
-  }, [parentId, step]); 
+  }, [parentId, step]);
 
   if (loading) return <Skeleton active />;
   if (!items.length) return null;
 
   return (
-    <Collapse ghost style={{ marginLeft: 20 }}>
+    <Collapse ghost>
       {items.map((menu) => (
         <Panel
           key={menu.id}
@@ -277,12 +277,7 @@ const NestedMenu = ({ parentId, step, selectedMenus, toggleMenu }) => {
             </div>
           }
         >
-          <NestedMenu
-            parentId={menu.id}
-            step={step + 1}
-            selectedMenus={selectedMenus}
-            toggleMenu={toggleMenu}
-          />
+          <NestedMenu parentId={menu.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
         </Panel>
       ))}
     </Collapse>