ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,127 @@
+
+import React from "react";
+
+import { Base } from './../';
+
+import { Link } from 'react-router-dom';
+
+import { Tag } from 'antd';
+
+// import CollectionAdd from '../../../business/accounts/components/collection-add/collection-add';
+
+import MenuRolesAdd from './../menus/components/menu-roles-add/menu-roles-add';
+
+import { Roles } from '../../../lib/models/';
+
+class MenuRole extends Base {
+    constructor() {
+        super();
+
+        this.fields = [
+            {
+                field: 'name',
+                caption: 'Name',
+            },
+            {
+                field: 'description',
+                caption: 'Description',
+            },
+        ];
+
+        // this.columns = ;
+    }
+
+    get getEndpoint() {
+        return 'menu_roles';
+    }
+
+    get path() {
+        return `menu_roles`;
+    }
+
+    get getName() {
+        return this.modelName + `s`;
+    }
+
+    get modelName() {
+        return `menu_role`;
+    }
+
+    disableAdd() {
+        return false;
+    }
+
+    disableAddModal() {
+        return false;
+    }
+
+    get columns() {
+        return [
+            {
+                caption: 'Name',
+                field: 'role.name',
+                key: 'name',
+            },
+            {
+                caption: 'Description',
+                field: 'description',
+                key: 'description',
+            },
+            {
+                caption: 'Date',
+                field: 'created_at',
+                key: 'created_at',
+            },
+        ];
+    }
+
+    /**
+     * Get the data from the table
+     */
+    get = (queries) => {
+        return this.getMethod(queries).then((result) => {
+            return Promise.all(result.menu_roles.map(this.loadRoles)).then((result) => {
+                return { menu_roles: result };
+            });
+        });
+    };
+
+    // Attach the related staff with the object
+    loadRoles = (item) => {
+        return Roles.getRecord(item.role_id).then((result) => {
+            return {
+                ...item,
+                role: result,
+            };
+        });
+    };
+
+    /**
+     * Card Component for Staff
+     *
+     * @param {*} record
+     * @returns
+     */
+    Card = (record) => {
+        return (
+            <Link className="booking-card" to={`/collections/${record['id']}`}>
+                <div className="card">
+                    <h2 className="">{record.role.name}</h2>
+
+                    <h3 className="title">{record.weight}</h3>
+
+                    <p className="address">
+                        Collected on {record.created_at}
+                        <Tag color="magenta">{record['Consultant Name']}</Tag>
+                    </p>
+                </div>
+            </Link>
+        );
+    };
+
+    // AddComponent = () => <CollectionAdd model={this} staff={Staffs} />;
+
+    ModalAddComponent = (props) => <MenuRolesAdd model={this} {...props} />;
+}
+
+export default MenuRole;

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

@@ -0,0 +1,228 @@
+import React, { useEffect, useState, useContext } from 'react';
+
+import { Form, Input, Button, Select, Skeleton, InputNumber } from 'antd';
+
+import { GlobalContext } from '../../../../Store';
+
+import { Switch, JSONInput } from './../../../../elements/'
+
+import { Pages, Models, Menus } from './../../../../models';
+
+import { Location } from '../../../../utils/location/location.utils';
+
+const { Option } = Select;
+
+export default function MenuAdd({ model, edit, history, match, formContent, callback, additional_queries, ...props }) {
+
+    let step = Location.search().step || 1;
+
+    const [loading, setLoading] = useState(true);
+
+    const [form] = Form.useForm();
+
+    const [pages, setPages] = useState([]);
+
+    const [models, setModels] = useState([]);
+
+    // const [modules, setModules] = useState([]);
+
+    const [body, setBody] = useState(formContent);
+
+    const { user } = useContext(GlobalContext);
+
+    const { params } = match;
+
+    useEffect(() => {
+        getPages();
+
+        getModels();
+
+        // getModules();
+
+        // if (params && params.id) {
+        //     getRecord(params.id);
+        // } else {
+        setLoading(false);
+        // }
+    }, []);
+
+    function getRecord(id) {
+        // console.log(id);
+
+        Menus.getDetail(id).then((result) => {
+
+            console.log(result);
+            setBody(result);
+
+            setLoading(false);
+        });
+    }
+
+    /**
+     * Load the Staffs
+     */
+    const getPages = () => {
+        Pages.get([]).then((result) => {
+            // console.log(result);
+
+            setPages(result.pages);
+        });
+    };
+
+    /**
+     * Load the Staffs
+     */
+    const getModels = () => {
+        Models.get([]).then((result) => {
+            // console.log(result);
+
+            setModels(result.models);
+        });
+    };
+
+    /**
+     * Load the Staffs
+     */
+    // const getModules = () => {
+    //     Modules.get([]).then((result) => {
+    //         // console.log(result);
+
+    //         setModules(result.modules);
+    //     });
+    // };
+
+    const onSubmit = (values) => {
+
+        setLoading(true);
+
+        if (formContent.id) {
+            // Update of model
+            model.update(formContent.id, values, user).then(() => {
+
+                callback();
+
+                setLoading(false);
+
+            });
+
+        } else {
+
+            values['header_id'] = null;
+
+            values.step = parseInt(step);
+
+            // Append the additional queries to the object
+            additional_queries.forEach(({ field, value }) => {
+
+                values[field] = value;
+
+            })
+
+            // add new model
+            model.add(values, user).then(() => {
+
+                callback();
+
+                setLoading(false);
+
+            });
+        }
+    };
+
+    return (
+        <section className="collection-add">
+            {/* <Title level={4}>{edit ? 'Edit' : 'Add'} Menu</Title> */}
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <Form initialValues={{
+                    ...body
+                }} form={form} layout="vertical" onFinish={onSubmit}>
+
+                    {/* Name */}
+                    <Form.Item name="name" label="Name" required>
+                        <Input placeholder="Enter name" />
+                    </Form.Item>
+                    {/* Name Ends */}
+
+                    {/* Model */}
+                    {/* <Form.Item label="Module" name="module_id" required>
+                        <Select style={{ width: '100%' }}>
+                            {modules.map((model, key) => (
+                                <Option key={key} value={model.id}>{model.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item> */}
+                    {/* Model Ends */}
+
+                    {/* Model */}
+                    <Form.Item label="Model" name="model_id">
+                        <Select style={{ width: '100%' }}>
+                            {models.map((model, key) => (
+                                <Option key={key} value={model.id}>{model.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Model Ends */}
+
+                    {/* Page */}
+                    <Form.Item label="Page" name="page_id">
+                        <Select style={{ width: '100%' }}>
+                            {pages.map((page, key) => (
+                                <Option key={key} value={page.id}>{page.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Page Ends */}
+
+                    {/* Weight */}
+                    <Form.Item name="path" label="Path" required>
+                        <Input placeholder="Enter path" />
+                    </Form.Item>
+                    {/* Weight Ends */}
+
+                    {/* Weight */}
+                    <Form.Item name="is_visible" label="Visible" required>
+                        <Switch />
+                    </Form.Item>
+                    {/* Weight Ends */}
+
+                    {/* Weight */}
+                    <Form.Item name="finger_print_protected" label="Finger Print Protected" required>
+                        <Switch />
+                    </Form.Item>
+                    {/* Weight Ends */}
+
+                    {/* Order */}
+                    <Form.Item name="order" label="Order" required>
+                        <InputNumber style={{ width: '100%' }} placeholder="Enter order" />
+                    </Form.Item>
+                    {/* Order Ends */}
+
+                    {/* Order */}
+                    <Form.Item name="redirect_link" label="Redirect Link" required>
+                        <Input style={{ width: '100%' }} placeholder="Redirect Link" />
+                    </Form.Item>
+                    {/* Order Ends */}
+
+                    {/* Attributes */}
+                    <Form.Item name={"attributes"} label="Attributes">
+
+                        <JSONInput />
+
+                    </Form.Item>
+                    {/* Attributes Ends */}
+
+
+
+                    <Form.Item>
+                        <Button loading={loading} htmlType={'submit'} type="primary">
+                            Submit
+                        </Button>
+                    </Form.Item>
+                </Form>
+            )}
+        </section>
+    );
+}

package/core/lib/models/menus/components/menu-detail/menu-detail.js

@@ -0,0 +1,170 @@
+/**
+ * Generic Detail accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { Typography, Button, Modal, Skeleton, Tabs, Space, Row } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+import './menu-detail.scss';
+
+import GenericList from './../../../../modules/generic/generic-list/generic-list';
+
+import MenuList from './../menu-list/menu-list';
+
+import { ReloadOutlined } from '@ant-design/icons';
+
+import { MenuRoles, Menus, Actions } from './../../../../models';
+
+const { Title } = Typography;
+
+const { TabPane } = Tabs;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function MenuDetail({ match, model, columns: cols, schema = { custom_actions: [] }, disableEdit = schema.disableEdit }) {
+
+    const [record, setRecord] = useState([]);
+
+    const [visible, setVisible] = useState(false);
+
+    const { params } = match;
+
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+
+        loadData();
+
+    }, [params]);
+
+    const loadData = () => {
+        setLoading(true);
+
+        getRecords(schema);
+    };
+
+    const getRecords = (schema) => {
+        // Get the model by queries
+        return model.getRecord(match.params.id, model).then((result) => {
+
+            setRecord(result);
+
+            setLoading(false);
+        });
+    };
+
+    function refresh() {
+        loadData();
+    }
+
+    function closeModal() {
+        setVisible(false);
+    }
+
+    return (
+        <section className="generic-list">
+            {/* Table Header */}
+            <div className="table-header">
+                {/* <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+                </div>
+ */}
+            </div>
+
+            {/* Table Header Ends */}
+
+            {/* Add Modal */}
+            <Modal destroyOnClose confirmLoading={loading} title="Edit Menu" visible={visible} onCancel={() => { closeModal() }} footer={null}>
+                <model.ModalAddComponent
+                    match={match}
+                    // menu={menu}
+                    model={model}
+                    // additional_queries={additional_queries}
+                    formContent={record}
+
+                    callback={() => {
+                        closeModal(true);
+                    }}
+                />
+            </Modal>
+
+
+            {loading ? (
+                <Skeleton type="listing" />
+            ) : (
+                <>
+                    <div className="card">
+
+                        <div gutter={0} className="detail-wrapper">
+
+                            <div className="detail-element">
+                                <span>Name</span>
+                                <Row span={6}>
+                                    <h3>{record.name}</h3>
+                                </Row>
+                            </div>
+
+                            <div className="detail-element">
+                                <span>Description</span>
+                                <Row span={6}>
+                                    <h3>{record.description}</h3>
+                                </Row>
+                            </div>
+                        </div>
+                        
+                    </div>
+
+                    <Tabs>
+                        <TabPane tab="Sub Menus" key="0">
+                            <MenuList
+                                model={Menus}
+                                history={history}
+                                additional_queries={[
+                                    {
+                                        field: 'header_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+
+                        <TabPane tab="Roles" key="1">
+                            <GenericList
+                                
+                                model={MenuRoles}
+                                additional_queries={[
+                                    {
+                                        field: 'menu_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+
+                        <TabPane tab="Actions" key="2">
+                            <GenericList
+                                model={Actions}
+                                additional_queries={[
+                                    {
+                                        field: 'menu_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+                    </Tabs>
+                </>
+            )}
+        </section>
+    );
+}
+
+export default withRouter(MenuDetail);