ui-soxo-bootstrap-core 2.4.24

package/core/modules/generic/components/generic-add-modal/generic-add-modal.js

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+
+import { Typography, Space, message } from 'antd';
+
+import { FormCreator, Card, Button } from './../../../../lib';
+
+import { ModelColumnsAPI } from '../../../../models';
+
+import './generic-add-modal.scss';
+
+const { Title } = Typography;
+
+
+const GenericAdd = ({ model, callback, formContent }) => {
+
+    const [config, setConfig] = useState({ fields: [] })
+
+    useEffect(() => {
+
+        if (model.id) {
+
+            loadModelColumns();
+
+        } else {
+
+            setConfig({
+                fields: model.fields
+            })
+        }
+
+    }, []);
+
+    /**
+     * Load all the model columns
+     */
+    function loadModelColumns() {
+
+        ModelColumnsAPI.getFormColumns(model.id).then((result) => {
+
+            console.log(result);
+
+            let model = {
+                fields: result
+            }
+
+            setConfig(model)
+
+        })
+    }
+
+
+    /**
+     *
+     */
+    function onSubmit(values) {
+
+        if (formContent.id) {
+
+            // save the data to the model
+            return model
+                .update({ id: formContent.id, values })
+                .then(() => {
+                    message.success('Operation Successful');
+
+                    callback();
+                })
+                .catch(() => {
+                    message.error('Operation Failed');
+                });
+
+        } else {
+
+            // save the data to the model
+            return model
+                .add({ values })
+                .then(() => {
+                    message.success('Operation Successful');
+
+                    callback();
+
+                })
+                .catch(() => {
+                    message.error('Operation Failed');
+                });
+        }
+
+    }
+
+
+    return (
+        <div className="generic-add">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+
+                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
+                </div>
+
+                <div className="table-bar">
+                    {/* Table Filters */}
+                    <div className="table-filters"></div>
+                    {/* Table Filters Ends */}
+
+                    <div className="table-actions">
+                        <div className="button-container">
+                            <Space size="small">
+                                <Button type="secondary" size={'small'}>
+                                    Cancel
+                                </Button>
+                            </Space>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* Table Header Ends */}
+
+            <Card className="detail-content">
+                <FormCreator fields={config.fields} formContent={formContent} model={config} onSubmit={onSubmit} />
+            </Card>
+        </div>
+    );
+};
+
+export default GenericAdd;

package/core/modules/generic/components/generic-add-modal/generic-add-modal.scss

@@ -0,0 +1,13 @@
+.generic-add {
+
+    margin: 0px 10px;
+
+
+    .table-header {
+        .table-bar {
+            display: flex;
+            justify-content: space-between;
+            margin: 5px 0px;
+        }
+    }
+}

package/core/modules/generic/components/generic-detail/generic-detail.js

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+
+import { Link, useParams } from 'react-router-dom';
+
+import { Skeleton, Typography, Space, Popconfirm, Tabs } from 'antd';
+
+import { Card, Button } from '../../../../lib/';
+
+import GenericList from '../generic-list/generic-list';
+
+// import DetailLoader from '../../../../models/detail-loader';
+
+import './generic-detail.scss';
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Title } = Typography;
+
+const { TabPane } = Tabs;
+
+
+const GenericDetail = ({ history, model, match }) => {
+
+    const actions = [];
+
+    let { id } = useParams();
+
+    const [loading, setLoading] = useState(false);
+
+    const [record, setRecord] = useState({});
+
+    const [selected, setSelected] = useState([]);
+
+    const [relations, setRelations] = useState([]);
+
+    useEffect(() => {
+        getRecords();
+    }, []);
+
+    function getRecords() {
+        setLoading(true);
+        // Get the records
+        model.getRecord({ id }).then((result) => {
+            // console.log(result);
+
+            setRecord(result);
+
+            model.getRelations(52).then((result) => {
+
+                // console.log(result);
+
+                setRelations(result.result.relationships);
+
+                setLoading(false);
+
+            })
+        });
+    }
+
+    return (
+        <div className="generic-detail">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+
+                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
+                </div>
+
+                <div className="table-bar">
+                    {/* Table Filters */}
+                    <div className="table-filters"></div>
+                    {/* Table Filters Ends */}
+
+                    <div className="table-actions">
+                        <div className="button-container">
+                            {selected.length ? (
+                                <>
+                                    {selected.length} selected .
+                                    <Popconfirm
+                                        title="Are you sure you want to delete the selected rows ? "
+                                        // onConfirm={() => deleteSelected()}
+                                        onCancel={() => { }}
+                                        okText="Yes"
+                                        cancelText="No"
+                                    >
+                                        <Button size="small">
+                                            <DeleteOutlined />
+                                        </Button>
+                                    </Popconfirm>
+                                </>
+                            ) : null}
+
+                            <Space size="small">
+                                <Button onClick={() => { }} type="secondary" size={'small'}>
+                                    <Link to={`/${model.link}/${id}/e`}>Edit</Link>
+                                </Button>
+
+                                <Button onClick={getRecords} type="secondary" size={'small'}>
+                                    <ReloadOutlined />
+                                </Button>
+                            </Space>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* Table Header Ends */}
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <>
+
+                    {/* Detail Screen */}
+                    <Card className="detail-content">
+                        {Object.keys(record).map((key) => {
+                            return (
+                                <>
+                                    <div className="detail-wrapper">
+                                        <div className="detail-element">
+                                            <p>{key}</p>
+
+                                            <h3>{record[key]}</h3>
+                                        </div>
+                                    </div>
+                                </>
+                            );
+                        })}
+                    </Card>
+                    {/* Detail Screen Ends */}
+
+                    {/* Relations */}
+                    <div className="bottom-section">
+                        <Tabs type="card">
+
+                            {relations.filter((record) => record.relationship.reference_type_id === 10).map((model, index) => {
+
+                                return (<TabPane tab={model.relationship.display_name} key={index}>
+
+                                    <ModelLoader id={id} menu={model.relationship} />
+
+                                    {/* <GenericList model={ModuleMenus} config={menuConfig} /> */}
+                                </TabPane>)
+
+                            })}
+
+                        </Tabs>
+                    </div>
+                    {/* Relations Ends */}
+
+                </>
+            )}
+        </div>
+    );
+};
+
+/**
+ * 
+ */
+function ModelLoader({ id, menu }) {
+
+    // Queries for filtering module menus
+    let menuConfig = { includes: '', queries: [{ field: 'model_id', value: id }] };
+
+    // console.log(menu);
+
+    const DetailModel = {};
+    // const DetailModel = new DetailLoader({
+    //     ...menu.reference_model,
+    //     // path: menu.route,
+    //     name: menu.reference_model.route_name,
+    //     id: id
+    // });
+
+    return (<>
+
+        <GenericList relativeAdd={true} model={DetailModel} config={menuConfig} />
+
+    </>)
+
+}
+
+
+export default GenericDetail;

package/core/modules/generic/components/generic-detail/generic-detail.scss

@@ -0,0 +1,25 @@
+.generic-detail {
+    margin: 0px 10px;
+
+    .detail-content {
+        padding: 10px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .detail-wrapper {
+            flex-basis: 50%;
+        }
+    }
+
+    .table-header {
+        .table-bar {
+            display: flex;
+            justify-content: space-between;
+            margin: 5px 0px;
+        }
+    }
+
+    .bottom-section {
+        margin-top: 20px;
+    }
+}

package/core/modules/generic/components/generic-edit/generic-edit.js

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react';
+
+import { useParams } from 'react-router-dom';
+
+import { Skeleton, Typography, Space, message } from 'antd';
+
+// import { Table, Card, Button } from './../../lib/';
+
+import { FormCreator } from './../../../../lib/';
+
+import { ModelColumnsAPI } from '../../../../models';
+
+import './generic-edit.scss';
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, DeleteOutlined } from '@ant-design/icons';
+
+const { Title } = Typography;
+
+
+const GenericEdit = ({ history, model, match }) => {
+
+    let { id } = useParams();
+
+    const [config, setConfig] = useState({ fields: [] })
+
+    const [loading, setLoading] = useState(false);
+
+    const [record, setRecord] = useState({});
+
+    useEffect(() => {
+
+        loadModelColumns().then(() => {
+
+            getRecords();
+
+        })
+
+    }, []);
+
+    /**
+     * Load all the model columns
+     */
+    function loadModelColumns() {
+
+        return ModelColumnsAPI.getFormColumns(model.id).then((result) => {
+
+            console.log(result);
+
+            let model = {
+                fields: result
+            }
+
+            setConfig(model)
+
+        })
+    }
+
+    function getRecords() {
+        setLoading(true);
+        // Get the records
+        model.getRecord({ id }).then((result) => {
+            console.log(result);
+
+            setRecord(result);
+
+            setLoading(false);
+        });
+    }
+
+    /**
+     *
+     */
+    function onSubmit(formBody) {
+        return model
+            .update({ id, formBody })
+            .then(() => {
+                message.success('Operation Successful');
+            })
+            .catch(() => {
+                message.error('Operation Failed');
+            });
+    }
+
+    return (
+        <div className="generic-detail">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+
+                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
+                </div>
+
+                <div className="table-bar">
+                    {/* Table Filters */}
+                    <div className="table-filters"></div>
+                    {/* Table Filters Ends */}
+
+                    <div className="table-actions">
+                        <div className="button-container">
+                            <Space size="small">
+                                {/* <Button onClick={getRecords} type="secondary" size={'small'}>
+                                    <ReloadOutlined />
+                                </Button> */}
+                            </Space>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* Table Header Ends */}
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <Card className="detail-content">
+                    <FormCreator formContent={record} model={config} onSubmit={onSubmit} />
+                </Card>
+            )}
+        </div>
+    );
+};
+
+export default GenericEdit;