ui-soxo-bootstrap-core 2.4.24

package/core/models/menu-roles/menu-roles.js

@@ -0,0 +1,158 @@
+// @ts-nocheck
+import React from 'react';
+import Base from '../base/base';
+
+// import ApiUtils from './../core/utils/api.utils';
+
+// import RoleAdd from '../core/components/roles/role-add/role-add';
+
+// import RoleList from '../core/components/roles/role-list/role-list';
+
+// import RoleDetail from '../core/components/roles/role-detail/role-detail';
+
+import MenuRolesAdd from './components/menu-roles-add/menu-roles-add';
+
+import { DateUtils } from './../../lib/';
+
+
+class MenuRole extends Base {
+    constructor() {
+        super();
+
+        this.fields = [
+            {
+                field: 'name',
+                caption: 'Name',
+            },
+            {
+                field: 'amount',
+                caption: 'Amount',
+            },
+        ];
+    }
+
+    get getEndpoint() {
+        return 'core-menu-roles';
+    }
+
+    get path() {
+        return `core-menu-roles`;
+    }
+
+    get getName() {
+        return this.modelName + `s`;
+    }
+
+    get modelName() {
+        return `core-menu-role`;
+    }
+
+    get columns() {
+
+        return [
+            {
+                field: 'role.name',
+                caption: 'Role'
+            },
+            {
+                field: 'created_at',
+                caption: 'Created At',
+                render: (ele) => {
+                    return ele.created_at ? DateUtils.formatDate(ele.created_at) : null
+                },
+            }
+        ];
+
+    }
+
+
+    get disableAddModal() {
+        return false;
+    }
+
+    get disableEditModal() {
+        return false;
+    }
+
+
+    // ListComponent = RoleList;
+
+    // DetailComponent = RoleDetail;
+
+    // ModalAddComponent = (props) => <RoleAdd model={this} {...props} />;
+
+    // ModalAddComponent = (props) => <GenericAdd model={this} {...props} />;
+
+    /**
+     * Get the data from the table
+     */
+    // get = (queries) => {
+    //     return this.getMethod(queries).then((result) => {
+    //         return Promise.all(result.menus.map((menu) => this.loadModule(menu))).then((result) => {
+    //             return { menus: result };
+    //         });
+    //     });
+    // };
+
+    /**
+     * Load the module of the menu
+     *
+     * @param {*} param0
+     * @returns
+     */
+    loadModule = (menu) => { };
+
+    /**
+     * load the detail of menu
+     *
+     * @param {*} menu
+     * @returns
+     */
+    getDetail = (id) => {
+        return this.getRecord(id).then((result) => {
+            return result;
+        });
+    };
+
+    /**
+     * load the list of menu
+     *
+     * @param {*} menu
+     * @returns
+     */
+    getMenus = (config) => {
+
+        // return this.getData({ path: `menus/get-menus`, queries: queries}).then((result) => {
+        //     return result;
+        // });
+
+        return this.get({ url: `menus/get-menus`, config: config }).then((result) => {
+            return result;
+        });
+
+    };
+
+    /**
+     * 
+     * @param {*} formBody 
+     * @returns 
+     */
+    addMenuRole = ({ values }) => {
+
+        return this.post({
+            url: 'core-menu-roles/create-menu-roles',
+            formBody: values
+        })
+    }
+
+    /**
+     * 
+     * 
+     * @param props 
+     * @returns 
+     */
+    ModalAddComponent = (props) => <MenuRolesAdd model={this} {...props} />;
+
+}
+
+export default MenuRole;

package/core/models/menus/components/menu-add/menu-add.js

@@ -0,0 +1,325 @@
+import React, { useState, useEffect } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+import { Skeleton, Typography, InputNumber, message, Form, Input, Select, Switch } from 'antd';
+
+import { Table, Card, Button, JSONInput } from './../../../../lib';
+
+import { ModelsAPI, PagesAPI, MenusAPI } from '../../..';
+
+const { TextArea } = Input;
+
+const { Title } = Typography;
+
+const { Option } = Select;
+
+import './menu-add.scss';
+
+
+const MenuAdd = ({ model, callback, edit, history, formContent, match, additional_queries, ...props }) => {
+
+    let mode = 'Add';
+
+    if (formContent.id) {
+        mode = 'Edit'
+    } else if (formContent.copy) {
+        mode = 'copy'
+    }
+
+    if (formContent.attributes) {
+
+        if (typeof formContent.attributes === 'string') {
+
+            if (formContent.attributes !== '') {
+
+                formContent.attributes = JSON.parse(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 [menus, setMenus] = useState([])
+
+    const [body, setBody] = useState(formContent);
+
+    const { params } = match;
+
+    let location = useLocation();
+
+    const query = new URLSearchParams(location.search);
+
+    console.log(query.get('step'));
+
+    let step = parseInt(query.get('step')) || 1;
+
+    console.log(step);
+
+    useEffect(() => {
+
+        // loadModelColumns();
+        getPages();
+
+        getModels();
+
+        setLoading(false);
+
+        getMenus();
+
+    }, []);
+
+
+    /**
+     * Load the Staffs
+     */
+    const getPages = () => {
+        PagesAPI.getPages().then((result) => {
+
+            if (Array.isArray(result.result)) {
+                setPages(result.result);
+            }
+        });
+    };
+
+    /**
+     * Load the Models
+     */
+    const getModels = () => {
+        ModelsAPI.get().then((result) => {
+            // console.log(result);
+
+            setModels(result.result);
+        });
+    };
+
+
+    /**
+  * Load the Models
+  */
+    const getMenus = () => {
+        MenusAPI.get().then((result) => {
+            // console.log(result);
+
+            setMenus(result.result);
+        });
+    };
+
+
+    /**
+     * Submit values
+     */
+    const onSubmit = (values) => {
+        // console.log(values);
+        setLoading(true);
+
+        let id = formContent.id;
+
+        // Add the step to form content
+        // values.step = step;
+
+        if (values.attributes && typeof values === 'object') {
+
+            values = {
+                ...values,
+                attributes: JSON.stringify(values.attributes)
+            }
+        }
+
+        if (id) {
+            // Update of model
+            model.update({ id, values }).then(() => {
+
+                // callback();
+                message.success('Menu Updated');
+
+                setLoading(false);
+
+                callback();
+
+            });
+
+        } else {
+
+            values.step = step;
+
+            // Append the additional queries to the object
+            additional_queries.forEach(({ field, value }) => {
+
+                values[field] = value;
+
+            })
+
+            // add new model
+            model.add({ values }).then(() => {
+
+                // callback();
+                message.success('Menu Added');
+
+                setLoading(false);
+
+                callback();
+
+            });
+        }
+    };
+
+    return (
+        <section className="collection-add menu-add">
+            {/* <Title level={4}>{mode} Menu</Title> */}
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <Form initialValues={{ ...body }} form={form} layout="vertical" onFinish={onSubmit}>
+
+                    <div className='form-container'>
+                        <div className='left-container'>
+
+
+                            {/* Caption */}
+                            <Form.Item name={"caption"} label="Caption" required>
+                                <Input placeholder="Enter caption" />
+                            </Form.Item>
+                            {/* Caption Ends */}
+
+                            {/* Name */}
+                            <Form.Item name={"name"} label="Name" required>
+                                <Input placeholder="Enter name" />
+                            </Form.Item>
+                            {/* Name Ends */}
+
+                            {/* Description */}
+                            <Form.Item name={"description"} label="Description">
+                                <TextArea placeholder="Enter Description" />
+                            </Form.Item>
+                            {/* Description Ends */}
+
+                            {/* Model */}
+                            <Form.Item label="Models" name={'model_id'}>
+
+                                {/* <ReferenceSelect value={model.id} label={model.name} model={Models} /> */}
+                                <Select showSearch  style={{ width: '100%' }}
+                                 placeholder="Select a Page"
+                                 optionFilterProp="label" 
+                                 >
+                                    {models.map((model, key) => (
+                                        <Option key={key} label={model.name}  value={model.id}>{model.name}</Option>
+                                    ))}
+                                </Select>
+
+                            </Form.Item>
+                            {/* Model Ends
+
+
+                    {/* Pages */}
+                            <Form.Item label="Pages" name={'page_id'}>
+
+                                {/* <ReferenceSelect value={pages.id} label={pages.name} model={Pages} /> */}
+
+                                <Select showSearch optionFilterProp="children" style={{ width: '100%' }}>
+                                    {pages.map((model, key) => (
+                                        <Option key={key} value={model.id}>{model.name}</Option>
+                                    ))}
+                                </Select>
+
+                            </Form.Item>
+                            {/* Pages Ends */}
+
+
+
+                            {/* Pages */}
+                            <Form.Item label="Header" name={'header_id'}>
+
+                                {/* <ReferenceSelect value={pages.id} label={pages.name} model={Pages} /> */}
+
+                                <Select showSearch style={{ width: '100%' }}>
+                                    {menus.map((menu, key) => (
+                                        <Option key={key} value={menu.id}>{menu.name}</Option>
+                                    ))}
+                                </Select>
+
+                            </Form.Item>
+                            {/* Pages Ends */}
+
+
+                            {/* Path */}
+                            <Form.Item name="path" label="Path" required>
+                                <Input placeholder="Enter path" />
+                            </Form.Item>
+                            {/* Path Ends */}
+
+                            {/* Route */}
+                            <Form.Item name="route" label="Route" required>
+                                <Input placeholder="Enter route" />
+                            </Form.Item>
+                            {/* Route Ends */}
+
+                            {/* Switch */}
+                            <Form.Item name="is_visible" label="Visible" required>
+                                <Switch defaultChecked={body.is_visible} />
+                            </Form.Item>
+                            {/* Switch Ends */}
+
+                            {/* Step */}
+                            <Form.Item name={"order"} label="Order" required>
+                                <InputNumber placeholder="Enter order" />
+                            </Form.Item>
+                            {/* Step Ends */}
+
+                            {/* Icon Name*/}
+                            <Form.Item name="icon_name" label="Icon Name" required>
+                                <Input placeholder="Enter icon name" />
+                            </Form.Item>
+                            {/*  Icon Name Ends */}
+
+                            {/* Step */}
+                            <Form.Item name={"step"} label="Step" required>
+                                <InputNumber placeholder="Enter step" />
+                            </Form.Item>
+                            {/* Step Ends */}
+
+
+                            <Form.Item>
+                                <Button loading={loading} htmlType={'submit'} type="primary">
+                                    Submit
+                                </Button>
+                            </Form.Item>
+
+                        </div>
+                        <div className='right-container'>
+
+
+                            {/* Description */}
+                            <Form.Item name={"attributes"} label="Attributes">
+
+                                <JSONInput />
+
+                            </Form.Item>
+                            {/* Description Ends */}
+
+                        </div>
+
+                    </div>
+
+                </Form>
+            )}
+        </section>
+    );
+};
+
+export default MenuAdd;

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

@@ -0,0 +1,31 @@
+.menu-add {
+    .form-container {
+        display: flex;
+        flex-direction: row;
+        .left-container {
+            width: 350px;
+        }
+        .right-container {
+            width: 100%;
+            margin-left: 20px;
+
+            .ant-row {
+                .ant-col {
+                    .ant-form-item-control-input {
+                        .ant-form-item-control-input-content {
+                            .card {
+                                height: 550px;
+
+                                // .a_unique_id-outer-box{
+                                //     .a_unique_id-container{
+                                //         height: 515px !important;
+                                //     }
+                                // }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}