ui-soxo-bootstrap-core 2.4.25-dev.8 → 2.4.25

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

@@ -1,290 +1,248 @@
 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 { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
+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 '../../..';
 
 const { Title } = Typography;
+const { Option } = Select;
 const { Panel } = Collapse;
 
-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 = {};
-      }
+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 {
-      formContent.attributes = {};
+        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
-  }
-
-    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);
-  }
-};
 
+    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);
+};
 
+    
 
-  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
+    // 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
                     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)}
-                        />
-                        <span>{item.title || item.caption}</span>
-                      </div>
+                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                            <Checkbox />
+                            <span>{item.title || item.caption}</span>
+                        </div>
                     }
-                  >
-                    {/* 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>
-  );
+                >
+                    {/* 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>
+    );
 };
 
 export default RoleAdd;
 
+
 // ------------------------
 // Recursive Nested Menu Component
 // ------------------------
-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>
-  );
+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>
+    );
 };

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

@@ -11,7 +11,6 @@ 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;
 
@@ -80,13 +79,12 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
         setLoading(true);
 
         // Get the records
-        return RolesAPI.getRole()
+        return model.get(config)
 
             .then((res) => {
 
                 // setRecords(res.result);
                 var result = res;
-             
 
                 // if (id) {
 
@@ -159,12 +157,13 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
         //     getRecords();
         // }
     }
+
     /**
      * On delete of each record 
      */
-    function onDelete(id) {
+    function onDelete(record) {
 
-        RolesAPI.deleteRole(id).then((res) => {
+        model.delete(record).then((res) => {
             if (res) {
                 getRecords();
 
@@ -260,8 +259,7 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
 
                             {/* Delete Icon */}
                             <Popconfirm title="Are you sure" onConfirm={() => {
-                               
-                                onDelete(record.id);
+                                onDelete(record);
                             }}>
                                 <Button size={'small'} type="dashed">
                                     <DeleteOutlined />
@@ -315,7 +313,7 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
                         <div className="button-container">
                             <Space size="small">
 
-                                <Button onClick={getRecords} size={'small'} type='default'>
+                                <Button onClick={getRecords} size={'small'}>
                                     <ReloadOutlined />
                                 </Button>