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

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

@@ -1,248 +1,290 @@
 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 = {};
     }
-
-    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);
-        });
-    };
-
-    // 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);
+  } 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
+  }
+
+    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.get({
+      queries: [
+        { field: 'step', value: 1 },
+        { field: 'header_id', value: null },
+      ],
+    })
+      .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 || {}),
+  };
+
+  //  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);
+  }
 };
 
-    
 
-    // 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();
-            });
-        }
-    };
-
-    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
+
+  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" required>
+            <Input placeholder="Enter name" />
+          </Form.Item>
+
+          {/* 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>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <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>
-    );
+                  >
+                    {/* Nested submenus */}
+                    <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 style={{ marginLeft: 20 }}>
+      {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>
+  );
 };

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

@@ -11,6 +11,7 @@ import { Typography, Modal, Space, Switch, Popconfirm, Skeleton, Input, Drawer,S
 import { TableComponent, Card, Button } from './../../../../lib';
 
 import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined, EditOutlined, CopyOutlined } from '@ant-design/icons';
+import { RolesAPI } from '../../..';
 
 const { Title } = Typography;
 
@@ -79,12 +80,13 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
         setLoading(true);
 
         // Get the records
-        return model.get(config)
+        return RolesAPI.getRole()
 
             .then((res) => {
 
                 // setRecords(res.result);
                 var result = res;
+             
 
                 // if (id) {
 
@@ -157,13 +159,12 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
         //     getRecords();
         // }
     }
-
     /**
      * On delete of each record 
      */
-    function onDelete(record) {
+    function onDelete(id) {
 
-        model.delete(record).then((res) => {
+        RolesAPI.deleteRole(id).then((res) => {
             if (res) {
                 getRecords();
 
@@ -259,7 +260,8 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
 
                             {/* Delete Icon */}
                             <Popconfirm title="Are you sure" onConfirm={() => {
-                                onDelete(record);
+                               
+                                onDelete(record.id);
                             }}>
                                 <Button size={'small'} type="dashed">
                                     <DeleteOutlined />
@@ -313,7 +315,7 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
                         <div className="button-container">
                             <Space size="small">
 
-                                <Button onClick={getRecords} size={'small'}>
+                                <Button onClick={getRecords} size={'small'} type='default'>
                                     <ReloadOutlined />
                                 </Button>