ui-soxo-bootstrap-core 2.4.24

package/core/lib/models/actions/actions.js

@@ -0,0 +1,128 @@
+/**
+ * Schema required for implementing process
+ */
+
+import React from "react";
+
+
+import Base from './../base';
+
+import { Link } from 'react-router-dom'
+
+import { Tag } from 'antd'
+
+//  import FormDetail from './components/form-detail/form-detail';
+
+import ActionDetail from './components/action-detail/action-detail';
+
+
+class Action extends Base {
+
+    constructor() {
+
+        super()
+
+        this.fields = [{
+            field: 'caption',
+            caption: 'Caption'
+        }, {
+            field: 'description',
+            caption: 'Description'
+        }, {
+            field: 'identifier',
+            caption: 'Identifier'
+        }, {
+            field: 'identifier',
+            caption: 'Identifier'
+        }, {
+            field: 'active',
+            type: 'radio',
+            options: [true, false],
+            caption: 'Active'
+        }]
+
+        // this.columns = [];
+    }
+
+    get getEndpoint() {
+        return 'actions'
+    }
+
+    get path() {
+        return `actions`
+    }
+
+    get getName() {
+        return `actions`
+    }
+
+
+    get columns() {
+        return [
+
+            {
+                caption: 'Name',
+                render: (record) => {
+
+                    return <Link className="booking-card" to={`/candidates/${record['id']}`}>
+                        {record.name}
+                    </Link>
+
+
+                },
+                key: 'created_at',
+            },
+
+
+            {
+                caption: 'Description',
+                field: 'description',
+                key: 'description',
+            },
+
+            {
+                caption: 'Identier',
+                field: 'identier',
+                key: 'identier',
+            },
+
+        ];
+    }
+
+    Card = (record) => {
+
+        return (<Link className="booking-card" to={`sales/${record['id']}`}>
+            <div className="card">
+                <h2 className="">
+
+                    {record['amount']}
+
+                </h2>
+                <h3 className="head">
+
+                    {record['name']}
+
+                </h3>
+
+                <h3 className="title">
+
+                    {record['title']}
+
+                </h3>
+
+                <p className="address">
+                    Booked on {record['Booking Date']}
+                    <Tag color="magenta">{record['Consultant Name']}</Tag>
+                </p>
+
+            </div>
+        </Link>)
+    }
+
+    DetailComponent = ({ model }) => <ActionDetail model={model} />
+
+    // AddComponent = ({ model }) => <ProcessAdd model={model} />
+
+}
+
+export default Action;

package/core/lib/models/actions/components/action-detail/action-detail.js

@@ -0,0 +1,190 @@
+/**
+ * Generic Detail accepts an array of fields to update any resource
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { Typography, Button, Skeleton, Tabs, Row, Popconfirm, Space } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+import './action-detail.scss';
+
+import GenericList from '../../../../modules/generic/generic-list/generic-list';
+
+import { ReloadOutlined } from '@ant-design/icons';
+
+//  import useDeviceDetect from './../../../../../hooks/device-detect';
+
+import { Columns } from '../../..';
+
+import ScriptInput from '../../../../components/script-input/script-input';
+
+const { Title } = Typography;
+
+const { TabPane } = Tabs;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function ActionDetail({ match, model, columns: cols, schema = { custom_actions: [] }, disableEdit = schema.disableEdit }) {
+
+    const [record, setRecord] = useState([]);
+
+    const { params } = match;
+
+    // console.log(params);
+
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        loadData();
+
+        // console.log('hello');
+    }, []);
+
+    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();
+    }
+
+    /**
+     * On Update of script
+     * 
+     * @param {*} param0 
+     * @returns 
+     */
+    function onUpdate({ script_id }) {
+
+        let body = {
+            on_click_script_id: script_id
+        }
+
+        return model.update(params.id, body).then((result) => {
+
+            console.log(result);
+
+            loadData();
+        })
+    }
+
+    return (
+        <section className="generic-list">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+                </div>
+
+                <div className="table-actions">
+                    <div className="button-container">
+                        <Button onClick={refresh} type="secondary" size={'small'}>
+                            <ReloadOutlined />
+                        </Button>
+
+                        {disableEdit ? null : (
+                            <Space size="middle">
+                                <Button type="dashed">
+                                    <Link to={`/${model.name}/${match.params.id}/e/`}>Edit</Link>
+                                </Button>
+                            </Space>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Table Header Ends */}
+
+            {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 className="detail-element">
+                                <span>On Click</span>
+                                <Row span={6}>
+
+                                    <Space>
+
+                                        <ScriptInput script_id={record.on_click_script_id} callback={onUpdate} />
+
+                                        {
+                                            record.on_click_script_id
+                                                ?
+                                                <Popconfirm
+                                                    title="Are you sure you want to remove the script ? "
+                                                    onConfirm={onUpdate}>
+                                                    <Button size={'small'} type="danger">Remove</Button>
+                                                </Popconfirm>
+                                                :
+                                                null
+                                        }
+
+                                    </Space>
+
+
+                                </Row>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    {/* <Tabs>
+                        <TabPane tab="Form Columns" key="0">
+                            <GenericList
+                                index={'form_id'}
+                                model={Columns}
+                                additional_queries={[
+                                    {
+                                        field: 'form_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+                    </Tabs> */}
+                </>
+            )}
+        </section>
+    );
+}
+
+export default withRouter(ActionDetail);

package/core/lib/models/actions/components/custom-actions/custom-actions.js

@@ -0,0 +1,186 @@
+/**
+ *
+ * Component would load the action linked to the menu and add the functionality
+ * 
+ * Can support few types of actions 
+ * 
+ * Dropdown 
+ * Header
+ * Table Row
+ * Footer
+ * 
+ * 
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Actions, Scripts } from '../../..';
+
+import { ExecuteScript } from "../../../../utils/script.utils";
+
+import { Select, Button, Menu, Dropdown } from 'antd';
+
+import * as Models from './../../../';
+
+import * as Utils from './../../../../utils/'
+
+import { DownOutlined } from '@ant-design/icons';
+
+let baseModels = require('../../../../../lib/models/')
+
+
+/**
+ * Component for selecting head
+ *
+ * @param {*} param0
+ * @returns
+ */
+function CustomActions({ menu, record = {}, position = "header" }) {
+
+    let models = {
+        ...baseModels,
+        ...Models
+        // ...businessModels
+    }
+
+    let [options, setOptions] = useState([]);
+
+    useEffect(() => {
+        loadActions();
+    }, [])
+
+    /**
+     * Load the matching heads
+     */
+    function loadActions(table) {
+
+        var queries = [{
+            field: 'menu_id',
+            value: menu.id
+        }, {
+            field: 'active',
+            value: true
+        }]
+
+        Actions.get(queries).then(async (result) => {
+
+            var actions = await Promise.all(result.actions.map((action) => loadScript(action)));
+
+            setOptions(actions);
+
+            // console.log(result);
+
+        })
+    }
+
+
+    /**
+     * Load the Script statement
+     * 
+     * @param {*} script_id 
+     */
+    const loadScript = (action) => {
+
+        return Scripts.getRecord(action.on_click_script_id).then((result) => {
+
+            return {
+                ...action,
+                on_click: result.value
+            }
+
+        })
+    }
+
+    async function onClick(option) {
+
+        // On Submit of form , execute the script
+        await executeOnSubmitScript(option);
+
+    }
+
+    /**
+     * 
+     * 
+     * @param {*} values 
+     * @returns 
+     */
+    async function executeOnSubmitScript(option) {
+
+        var scripts = [];
+
+        if (option.on_click) {
+            scripts.push(option.on_click);
+        }
+
+        if (option.on_click) {
+
+            return await ExecuteScript({
+                formContent: {}, scripts, context: {
+                    ...models,
+                    ...Utils
+                }, contextName: 'models'
+            });
+
+        } else {
+
+            return new Promise(function (resolve, reject) {
+                resolve('start of new Promise');
+            });
+        }
+    }
+
+
+
+    /**
+     * 
+     */
+    const renderButtons = (actions) => {
+
+        const menu = (
+            <Menu>
+
+                {
+                    actions.map((option) => {
+                        return <Menu.Item>
+                            <Button onClick={() => onClick(option)} size={'small'}>{option.caption || option.name}</Button>
+                        </Menu.Item>
+                    })
+                }
+
+            </Menu>
+        );
+
+        return (<Dropdown overlay={menu} trigger={['click']}>
+            <Button size="small" icon={<DownOutlined />}>
+
+
+                Actions
+
+
+            </Button>
+        </Dropdown>)
+
+    }
+
+    return (
+        <div className="custom-actions">
+
+            {
+                position === "header"
+                    ?
+                    <>
+
+                        {renderButtons(options)}
+
+                    </>
+                    :
+                    <>
+                        {options.map((option) => <Button onClick={() => onClick(option)} size={'small'}>{option.caption || option.name}</Button>)}
+                    </>
+            }
+
+        </div>
+    );
+}
+
+export default (CustomActions);