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

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

@@ -1,248 +1,285 @@
 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 '../../..';
 
 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);
+  const [originalMenus, setOriginalMenus] = useState([]); // for deselected menu for editing
+
+  // 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);
+      setOriginalMenus(menus); // keep original copy for deselect comparison
     }
 
-    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>
+    //  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>
+
+          {/* 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" 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>
+                    );
+                  }
+
+                  // 👉 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>
-                    }
-                >
-                    {/* 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>
-    );
+                      }
+                    >
+                      <NestedMenu parentId={item.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+                    </Panel>
+                  );
+                })}
+              </Collapse>
+            </div>
+          )}
+
+          {/* Submit Button */}
+          <Form.Item>
+            <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>
-                    }
-                >
-                    <NestedMenu
-                        parentId={menu.id}
-                        step={step + 1}
-                        api={api}
-                        additional_queries={additional_queries}
-                    />
-                </Panel>
-            ))}
-        </Collapse>
-    );
+const NestedMenu = ({ parentId, step, selectedMenus, toggleMenu }) => {
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    MenusAPI.get({
+      queries: [
+        { field: 'header_id', value: parentId },
+        { field: 'step', value: step },
+      ],
+    })
+      .then((res) => {
+        setItems(res.result || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [parentId, step]);
+
+  if (loading) return <Skeleton active />;
+  if (!items.length) return null;
+
+  return (
+    <Collapse ghost>
+      {items.map((menu) => (
+        <Panel
+          key={menu.id}
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Checkbox
+                checked={selectedMenus.includes(Number(menu.id))} // ensure number
+                onChange={(e) => toggleMenu(Number(menu.id), e.target.checked)}
+              />
+              <span>{menu.title || menu.caption}</span>
+            </div>
+          }
+        >
+          <NestedMenu parentId={menu.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+        </Panel>
+      ))}
+    </Collapse>
+  );
 };