ui-soxo-bootstrap-core 2.5.6 → 2.5.7

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

@@ -1,248 +1,312 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useLocation,useParams } from 'react-router-dom';
-import { Skeleton, Typography, message, Form, Input, Select, Collapse, Checkbox } from 'antd';
-import { Table, Card, Button, JSONInput, Switch, GlobalContext } from './../../../../lib';
-
-import { ModelsAPI, PagesAPI, RolesAPI,MenusAPI } from '../../..';
+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 { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
+import './role-add.scss';
 
 const { Title } = Typography;
-const { Option } = Select;
 const { Panel } = Collapse;
 
-const RoleAdd = ({ model, callback, edit, history, formContent, match, additional_queries, ...props }) => {
-
-    let mode = 'Add';
-    if (formContent.id) mode = 'Edit';
-    else if (formContent.copy) mode = 'copy';
-
-    // Parse attributes safely
-    if (formContent.attributes) {
-        if (typeof formContent.attributes === 'string' && formContent.attributes !== '') {
-            formContent.attributes = JSON.parse(formContent.attributes);
-        } else {
-            formContent.attributes = {};
-        }
-    } else {
+const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_queries = [] }) => {
+  let mode = 'Add';
+  if (formContent.id) mode = 'Edit';
+  else if (formContent.copy) mode = 'copy';
+
+  // Parse attributes safely
+  if (formContent.attributes) {
+    if (typeof formContent.attributes === 'string' && formContent.attributes !== '') {
+      try {
+        formContent.attributes = JSON.parse(formContent.attributes);
+      } catch {
         formContent.attributes = {};
+      }
+    } else {
+      formContent.attributes = {};
+    }
+  } else {
+    formContent.attributes = {};
+  }
+
+  const [loading, setLoading] = useState(true);
+  const [form] = Form.useForm();
+  const [pages, setPages] = useState([]);
+  const [models, setModels] = useState([]);
+  const [menuList, setMenuList] = useState([]);
+  const [showMenus, setShowMenus] = useState(false);
+  // for deselected menu for editing
+  const [originalMenus, setOriginalMenus] = useState([]);
+
+  // Selected menus (array of IDs)
+  const [selectedMenus, setSelectedMenus] = useState([]);
+
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+  let step = parseInt(query.get('step')) || 1;
+
+  const { user = {} } = useContext(GlobalContext);
+
+  // On component mount
+  useEffect(() => {
+    getPages();
+    getModels();
+    loadMenus();
+    setShowMenus(true);
+
+    // Preselect menus when editing
+    if (formContent && formContent.menu_ids) {
+      let menus = formContent.menu_ids;
+
+      setSelectedMenus(menus);
+      // keep original copy for deselect comparison
+      setOriginalMenus(menus);
     }
 
-    const [loading, setLoading] = useState(true);
-    const [form] = Form.useForm();
-    const [pages, setPages] = useState([]);
-    const [models, setModels] = useState([]);
-    const [body, setBody] = useState(formContent);
-
-    const [showMenus, setShowMenus] = useState(false);
-    const [menuList, setMenuList] = useState([]);
-
-    const { params } = match;
-    const { dispatch, user = {} } = useContext(GlobalContext);
-
-    const location = useLocation();
-    const query = new URLSearchParams(location.search);
-
-    let step = parseInt(query.get('step')) || 1;
-
-     match = useParams();
-      const id = match.id;
-
-    useEffect(() => {
-        getPages();
-        getModels();
-        loadMenus();
-
-          setLoading(false);
-    }, []);
-     useEffect(() => {
-        
-        loadMenus();
-        setShowMenus(true)
-
-        //   setLoading(false);
-    }, [id]);
-
-    // Load pages
-    const getPages = () => {
-        PagesAPI.getPages().then((result) => {
-            setPages(result.result);
-        });
-    };
-
-    // Load models
-    const getModels = () => {
-        ModelsAPI.get().then((result) => { 
-            console.log(result);
-            setModels(result.result);
-        });
+    setLoading(false);
+  }, [formContent]);
+
+  // Load pages
+  const getPages = () => {
+    PagesAPI.getPages().then((res) => setPages(res.result || []));
+  };
+
+  // Load models
+  const getModels = () => {
+    ModelsAPI.get().then((res) => setModels(res.result || []));
+  };
+
+  // Load top-level menus
+  const loadMenus = () => {
+    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)));
+  };
+
+  // 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 payload = {
+      ...values,
+      menu_ids: selectedMenus,
+      deselect_array: deselectedMenus, //  add deselected menus when edit time
+      attributes: JSON.stringify(values.attributes || {}),
     };
 
-    // Load menus dynamically
-const loadMenus = () => {
-  MenusAPI.get({
-    queries: [
-      { field: 'step', value: 1 },
-      { field: 'header_id', value: null }
-    ]
-  })
-  .then(res => setMenuList(res.result || []))
-  .catch(console.error);
-};
-
-    
-
-    // Submit
-    const onSubmit = (values) => {
-        setLoading(true);
-        let id = formContent.id;
-
-        if (values.attributes && typeof values === 'object') {
-            values = {
-                ...values,
-                attributes: JSON.stringify(values.attributes)
-            };
-        }
-
-        if (id) {
-            RolesAPI.updateRole({ id, formBody: values }).then(() => {
-                message.success('Role Updated');
-                setLoading(false);
-                callback();
-            });
-        } else {
-            additional_queries.forEach(({ field, value }) => {
-                values[field] = value;
-            });
-
-            RolesAPI.createRole(values).then(() => {
-                message.success('Role Added');
-                setLoading(false);
-                callback();
-            });
-        }
-    };
+    //  include id ONLY for edit
+    if (formContent?.id) {
+      payload.id = formContent.id;
+    }
 
-    return (
-        <section className="collection-add">
-
-            {loading ? (
-                <Skeleton />
-            ) : (
-                <Form initialValues={{ ...body }} form={form} layout="vertical" onFinish={onSubmit}>
-                    
-                    {/* Role Name */}
-                    <Form.Item name="name" label="Enter Role Name" required>
-                        <Input placeholder="Enter name" />
-                    </Form.Item>
-                     {/* Name */}
-                    {/* <Form.Item name={"identifier"} label="Identifier" required>
-                        <Input placeholder="Enter identifier" />
-                    </Form.Item> */}
-                    {/* Name Ends */}
-
-                    {/* Path */}
-                    {/* <Form.Item name="weight" label="Weight" required>
-                        <Input placeholder="Enter weight" />
-                    </Form.Item> */}
-                    {/* Path Ends */}
-
-                    {/* Description */}
-                    <Form.Item name="description" label="Enter Description" required>
-                        <Input placeholder="Enter description" />
-                    </Form.Item>
-
-                    {/* MENUS COLLAPSE */}
-                    {showMenus && menuList.length > 0 && (
-    <div style={{ marginTop: 30 }}>
-        <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 />
-                            <span>{item.title || item.caption}</span>
-                        </div>
-                    }
-                >
-                    {/* Load submenus recursively */}
-                    <NestedMenu parentId={item.id} step={step + 1} />
-                </Panel>
-            ))}
-        </Collapse>
-    </div>
-)}
-{/* <Button type="primary" onClick={loadMenus()}>
-                            Get Menus
-                        </Button> */}
-
-
-                    {/* Submit Button */}
-                    <Form.Item>
-                        <Button loading={loading} htmlType="submit" type="primary">
-                            Save
-                        </Button>
-                    </Form.Item>
-
-                </Form>
-            )}
-
-        </section>
-    );
+    //  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}>
+          {/* Role Name */}
+          <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"
+            rules={[
+              { required: true, message: 'Description is required' },
+              { max: 250, message: 'Description cannot exceed 255 characters' },
+            ]}
+          >
+            <Input placeholder="Enter description" />
+          </Form.Item>
+
+          {/* MENU TREE */}
+          {showMenus && menuList.length > 0 && (
+            <div style={{ marginTop: 30 }}>
+              <Title level={5}>Menu List</Title>
+              <p style={{ color: '#999' }}>Choose menus and set permissions</p>
+
+              <MenuTree menus={menuList} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+            </div>
+          )}
+
+          {/* Submit Button */}
+          <Form.Item style={{ marginTop: 20 }}>
+            <Button loading={loading} htmlType="submit" type="primary">
+              Save
+            </Button>
+          </Form.Item>
+        </Form>
+      )}
+    </section>
+  );
 };
 
 export default RoleAdd;
 
-
 // ------------------------
 // Recursive Nested Menu Component
 // ------------------------
-const NestedMenu = ({ parentId, step, api, additional_queries }) => {
-    const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        MenusAPI.get({
-            queries: [
-                // ...additional_queries,
-                { field: 'header_id', value: parentId },
-                { field: 'step', value: step }
-            ],
-        })
-        .then(res => {
-            setItems(res.result || []);
-            setLoading(false);
-        })
-        .catch(() => setLoading(false));
-    }, [parentId]);
-
-    if (loading) return <Skeleton active />;
-    if (!items.length) return null;
-
-    return (
-        <Collapse ghost style={{ marginLeft: 20 }}>
-            {items.map(menu => (
-                <Panel
-                    key={menu.id}
-                    header={
-                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                            <Checkbox />
-                            <span>{menu.title || menu.caption}</span>
-                        </div>
-                    }
+// ------------------------
+// Recursive Nested Menu Component
+// ------------------------
+const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
+  // Helper: check if parent should be checked
+  const isParentChecked = (menu) => {
+    if (!menu.sub_menus || menu.sub_menus.length === 0) {
+      return selectedMenus.includes(menu.id);
+    }
+    const allChildIds = menu.sub_menus.map((c) => c.id);
+    return allChildIds.every((id) => selectedMenus.includes(id));
+  };
+
+  // Helper: check if parent is indeterminate
+  const isParentIndeterminate = (menu) => {
+    if (!menu.sub_menus || menu.sub_menus.length === 0) return false;
+    const allChildIds = menu.sub_menus.map((c) => c.id);
+    const checkedCount = allChildIds.filter((id) => selectedMenus.includes(id)).length;
+    return checkedCount > 0 && checkedCount < allChildIds.length;
+  };
+
+  return (
+    <>
+      {menus.map((menu) => {
+        const children = menu.sub_menus || [];
+        const parentChecked = isParentChecked(menu);
+        const parentIndeterminate = isParentIndeterminate(menu);
+
+        const onParentChange = (checked) => {
+          toggleMenu(menu.id, checked);
+          // toggle children recursively
+          children.forEach((c) => toggleMenuRecursive(c, checked));
+        };
+
+        const toggleMenuRecursive = (menu, checked) => {
+          toggleMenu(menu.id, checked);
+          if (menu.sub_menus && menu.sub_menus.length > 0) {
+            menu.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
+          }
+        };
+
+        if (children.length === 0) {
+          return (
+            <div
+              key={menu.id}
+              style={{
+                border: '1px solid rgba(198, 195, 195, 0.85)',
+                // borderRadius: 6,
+                padding: '12px 16px',
+                marginBottom: 6,
+                background: '#fff',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}
+            >
+              <Checkbox
+                checked={selectedMenus.includes(menu.id)}
+                onChange={(e) => {
+                  const checked = e.target.checked;
+
+                  toggleMenu(menu.id, checked);
+
+                  // ✅ FORCE parent selection
+                  if (checked && parentId) {
+                    toggleMenu(parentId, true);
+                  }
+                }}
+              />
+              <span>{menu.title || menu.caption}</span>
+            </div>
+          );
+        }
+
+        return (
+          <Collapse
+            key={menu.id}
+            style={{ marginBottom: 6 }}
+            // defaultActiveKey={[menu.id]}
+          >
+            <Panel
+              key={menu.id}
+              header={
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                  }}
+                  onClick={(e) => e.stopPropagation()}
                 >
-                    <NestedMenu
-                        parentId={menu.id}
-                        step={step + 1}
-                        api={api}
-                        additional_queries={additional_queries}
-                    />
-                </Panel>
-            ))}
-        </Collapse>
-    );
+                  <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
+                  <span>{menu.title || menu.caption}</span>
+                </div>
+              }
+            >
+              <div style={{ paddingLeft: 20 }}>
+                <MenuTree menus={children} selectedMenus={selectedMenus} toggleMenu={toggleMenu} parentId={menu.id} />
+              </div>
+            </Panel>
+          </Collapse>
+        );
+      })}
+    </>
+  );
 };

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

@@ -0,0 +1,4 @@
+.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+  height: 2.5px;
+  opacity: 0.85;
+}