ui-soxo-bootstrap-core 2.4.24

package/core/models/models/models.js

@@ -0,0 +1,154 @@
+
+// @ts-nocheck
+import React from 'react';
+import Base from '../base/base';
+
+import ModelDetail from './components/model-detail/model-detail';
+
+// For formatting Date
+import { DateUtils } from './../../lib/';
+import ModalAdd from './components/model-detail/model-add';
+
+class Models extends Base {
+
+    constructor() {
+        super();
+
+        this.fields = [
+            {
+                field: 'name',
+                caption: 'Name',
+                label: 'Name'
+            },
+
+            {
+                field: 'description',
+                caption: 'Description',
+            },
+
+            {
+                field: 'table_name',
+                caption: 'Table Name',
+            },
+
+            {
+                field: 'allowed_permissions',
+                caption: 'Allowed Permissions',
+            },
+
+
+            {
+                field: 'route_name',
+                caption: 'Route Name',
+            },
+
+
+            {
+                field: 'display_column',
+                caption: 'Display Column',
+            },
+
+            {
+                field: 'menu_url',
+                caption: 'Menu Url',
+            },
+
+            {
+                field: 'model_hash',
+                caption: 'Model Hash',
+            },
+
+        ];
+    }
+
+    get getEndpoint() {
+        return 'core-model-details';
+    }
+
+    get path() {
+        return `models`;
+    }
+
+    get getName() {
+        return this.modelName + `s`;
+    }
+
+    get modelName() {
+        return `model`;
+    }
+
+    get route() {
+        return 'core-model-details';
+    }
+
+    get disableAddModal() {
+        return false;
+    }
+    /**
+     *
+     */
+    get columns() {
+        return [
+            {
+                caption: 'Name',
+                field: 'name',
+                key: 'name',
+            },
+
+            {
+                caption: 'Description',
+                field: 'description',
+                key: 'description',
+            },
+
+            // {
+            //     caption: 'Path',
+            //     field: 'path',
+            //     key: 'path',
+            // },
+
+            // {
+            //     caption: 'Created By',
+            //     field: 'created_by',
+            //     key: 'created_by',
+            // },
+
+            {
+                caption: 'Created at',
+                field: 'created_at',
+                key: 'created_at',
+                render: (ele) => {
+                    return ele.created_at ? DateUtils.formatDate(ele.created_at) : null
+                },
+            },
+        ];
+    }
+
+    /**
+    * load all Pages
+    *
+    * @param {*} menu
+    * @returns
+    */
+    getModels = () => {
+
+        // return this.getData({ path: `menus/get-menus`, queries: queries}).then((result) => {
+        //     return result;
+        // });
+
+        return this.get({ url: `core-model-details` }).then((result) => {
+            return result;
+        });
+
+    }
+
+    /**
+     * Detail Component
+     */
+    DetailComponent = () => <ModalAdd model={this} />
+
+    ModalAddComponent = (props) => <ModalAdd model={this} {...props} />;
+
+}
+
+export default Models;

package/core/models/pages/components/page-add/page-add.js

@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from 'react';
+
+import { Skeleton, Typography, Space, message, Form, Input, Select } from 'antd';
+
+import { Table, Card, Button, ReferenceSelect, JSONInput } from './../../../../lib';
+
+import './page-add.scss';
+
+const { Title } = Typography;
+
+const PageAdd = ({ model, edit, history, formContent, match, config, callback, ...props }) => {
+
+
+    if (formContent.language_string) {
+
+        if (typeof formContent.language_string === 'string') {
+
+            if (formContent.language_string !== '') {
+
+                formContent.language_string = JSON.parse(formContent.language_string);
+
+            } else {
+
+                formContent.language_string = {};
+
+            }
+        }
+    } 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 { params } = match;
+
+    useEffect(() => {
+
+        // loadModelColumns();
+
+        // getPages();
+
+        // getModels();
+
+        setLoading(false);
+
+    }, []);
+
+
+
+    /**
+     * Submit values
+     */
+    const onSubmit = (values) => {
+        // console.log(values);
+
+        setLoading(true);
+
+        let id = formContent.id;
+
+        if (values.language_string && typeof values === 'object') {
+
+            values = {
+                ...values,
+                language_string: JSON.stringify(values.language_string)
+            }
+        }
+
+        if (id && !config.copy) {
+
+            // Update of model
+            model.update({ id, values }).then(() => {
+
+                // callback();
+                message.success('Page Updated');
+
+                setLoading(false);
+
+                callback();
+
+            });
+
+        } else {
+            // add new model
+            model.add({ values }).then(() => {
+
+                // callback();
+                message.success('Page Added');
+
+                setLoading(false);
+
+                callback();
+
+            });
+        }
+    };
+
+    return (
+        <section className="collection-add">
+            <Title level={4}>{edit ? 'Edit' : 'Add'} Page</Title>
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <Form initialValues={{ ...body }} form={form} layout="vertical" onFinish={onSubmit}>
+
+                    <div className='form-container'>
+                        <div className='left-container'>
+                            {/* Name */}
+                            <Form.Item name={"name"} label="Name" required>
+                                <Input placeholder="Enter name" />
+                            </Form.Item>
+                            {/* Name Ends */}
+
+                            {/* Description */}
+                            <Form.Item name={"description"} label="Description" >
+                                <Input placeholder="Enter Description" />
+                            </Form.Item>
+                            {/* Description Ends */}
+
+                            {/* Path */}
+                            <Form.Item name="path" label="Path" required>
+                                <Input placeholder="Enter path" />
+                            </Form.Item>
+                            {/* Path Ends */}
+
+                            {/* Remote Entry Path */}
+                            <Form.Item name="remote_entry_path" label="Remote Entry Path">
+                                <Input placeholder="Enter Remote Entry Path" />
+                            </Form.Item>
+                            {/* Remote Entry Path Ends */}
+
+                            <Form.Item>
+                                <Button loading={loading} htmlType={'submit'} type="primary">
+                                    Submit
+                                </Button>
+                            </Form.Item>
+                        </div>
+                        <div className='right-container'>
+                            {/* Language String */}
+                            <Form.Item name={"language_string"} label="Language String">
+
+                                <JSONInput />
+
+                            </Form.Item>
+                            {/* Language String Ends */}
+                        </div>
+                    </div>
+
+                </Form>
+            )}
+        </section>
+    );
+};
+
+export default PageAdd;

package/core/models/pages/components/page-add/page-add.scss

@@ -0,0 +1,31 @@
+.collection-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;
+                                //     }
+                                // }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/core/models/pages/components/page-details/page-details.js

@@ -0,0 +1,210 @@
+/**
+ * Generic List accepts an array of fields to update any resource
+ */
+
+ import React, { useState, useRef, useEffect, useContext } from 'react';
+
+ import { Link, match, useParams } from 'react-router-dom';
+ 
+ import { Typography, Modal, Select, Space, Switch, Popconfirm, message, DatePicker, Skeleton, Tabs } from 'antd';
+ 
+ import { Table, Card, Button } from './../../../../lib';
+ 
+ import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';
+  
+ const { Title } = Typography;
+ 
+ const { TabPane } = Tabs;
+ 
+ 
+ const PageDetails = ({ history, model, columns, relativeAdd = false, match }) => {
+ 
+     const actions = [];
+ 
+     // const { params } = match;
+ 
+     match = useParams();
+ 
+     const id = match.id;
+ 
+     console.log(model);
+ 
+     const [loading, setLoading] = useState(false);
+ 
+     const [record, setRecords] = useState([]);
+ 
+     const [pagedetail, setPageDetail] = useState<PageDetail>({});
+ 
+     const [view, setView] = useState(false);
+ 
+     const [visible, setVisible] = useState(false);
+
+    const [single, setSingle] = useState({});
+
+ 
+     useEffect(() => {
+ 
+         loadData();
+     }, []);
+ 
+ 
+     const loadData = () => {
+         setLoading(true);
+ 
+         getRecords();
+     };
+ 
+ 
+     const getRecords = () => {
+         setLoading(true);
+ 
+         model
+             .getDetail({ id }).then((result) => {
+
+                 if (result) {
+ 
+                    setPageDetail(result)
+
+                    setLoading(false);
+
+                 }
+             })
+     };
+ 
+ 
+     function changeView(result) {
+         setView(result);
+     }
+ 
+     function closeModal() {
+         setVisible(false);
+     }
+ 
+     function refresh() {
+         loadData();
+     }
+ 
+     return (
+ 
+        <div className="generic-list">
+        {/* Table Header */}
+        <div className="table-header">
+            <div className="table-title">
+                <Title level={4}>{model.name}</Title>
+
+                {/* <p>{loading ? 'Loading records' : `${record.length} records`}</p> */}
+            </div>
+
+            <div className="table-bar">
+                {/* Table Filters */}
+                <div className="table-filters">
+                    <Space direction="vertical" size={12}></Space>
+                </div>
+                {/* Table Filters Ends */}
+
+                <div className="table-actions">
+                    <div className="button-container">
+                        <Space size="small">
+                            <Button onClick={getRecords} size={'small'}>
+                                <ReloadOutlined />
+                            </Button>
+
+                            <Switch
+                                defaultChecked
+                                onChange={changeView}
+                                checked={view}
+                                checkedChildren={<OrderedListOutlined />}
+                                unCheckedChildren={<PicCenterOutlined />}
+                            />
+
+                            {/* Edit */}
+                        {!model.ModalAddComponent ? null : (
+                            <Button type="dashed" onClick={() => {
+
+                                setSingle({ ...pagedetail });
+
+                                setVisible(true);
+                            }}>
+                                Edit
+                            </Button>
+                        )}
+                        {/* Edit Ends */}
+
+                        </Space>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Table Header Ends */}
+
+        {loading ? (
+            <Skeleton/>
+        ) : (
+            <>
+                <div className="card">
+            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
+                <div style={{ display: 'flex', flexDirection: 'column', padding: '3%' }}>
+                    <table>
+
+                        <tr>
+                            <td>
+                                <p>Name :</p>
+                            </td>
+                            <td>
+                                <p>{pagedetail.name}</p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <p>Code :</p>
+                            </td>
+                            <td>
+                                <p>{pagedetail.code}</p>
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td>
+                                <p>Description :</p>
+                            </td>
+                            <td>
+                                <p>{pagedetail.description}</p>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+        </div>
+            </>
+        )}
+
+        {/* Add Modal */}
+        <Modal destroyOnClose confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
+            <model.ModalAddComponent
+            match={match}
+            model={model}
+                formContent={single}
+                callback={() => {
+                    closeModal();
+                }}
+            />
+            {/* <FormCreator formContent={{ [model]: {} }} modelIndex="requestId" model={model} onSubmit={createRecord} config={step} /> */}
+        </Modal>
+        
+ 
+        </div>
+ 
+ 
+     );
+ }
+ 
+ function CardList({ model, data, url, ...props }) {
+     return data.map((record, index) => {
+         return <model.Card record={record} model={model} index={index} key={index} {...record} {...props} />;
+     });
+ }
+ export default PageDetails;
+ 
+