ui-soxo-bootstrap-core 2.4.24

package/core/lib/models/steps/components/step-add/step-add.js

@@ -0,0 +1,261 @@
+import React, { useEffect, useState, useContext } from 'react';
+
+import { Form, Input, Button, Select, Typography, Skeleton, Radio, InputNumber } from 'antd';
+
+import { GlobalContext } from '../../../../Store';
+
+import { Steps, Process, Forms, Pages, Roles } from '../../../../models/';
+
+const { Title } = Typography;
+
+const { Option } = Select;
+
+export default function StepAdd({ model, edit, history, additional_queries = [], formContent = {}, callback, ...props }) {
+
+    const [loading, setLoading] = useState(false);
+
+    const [form] = Form.useForm();
+
+    const [process, setProcess] = useState([]);
+
+    const [steps, setSteps] = useState([]);
+
+    const { user } = useContext(GlobalContext);
+
+    const [forms, setForms] = useState([]);
+
+    const [pages, setPages] = useState([]);
+
+    const [roles, setRoles] = useState([]);
+
+    useEffect(() => {
+
+        getProcess();
+
+        getSteps();
+
+        getForms();
+
+        getPages();
+
+        getRoles();
+
+    }, []);
+
+    /**
+     * Load the Process
+     */
+    const getProcess = () => {
+
+        Process.get([]).then((result) => {
+            // console.log(result);
+
+            setProcess(result.process);
+        });
+    };
+
+    /**
+     * Load the Sub Process
+     */
+    const getSteps = () => {
+
+        model.get([]).then((result) => {
+            // console.log(result);
+
+            setSteps(result.steps);
+        });
+    };
+
+    const getForms = () => {
+
+        Forms.get().then((result) => {
+
+            setForms(result.forms);
+        })
+    }
+
+    const getPages = () => {
+
+        Pages.get().then((result) => {
+
+            setPages(result.pages);
+        })
+    }
+
+    const getRoles = () => {
+
+        Roles.get().then((result) => {
+
+            setRoles(result.roles);
+        })
+    }
+
+    const onSubmit = (values) => {
+        // console.log(values);
+
+        setLoading(true);
+
+        // Add the mapping id
+        additional_queries.forEach(({ field, value }) => {
+
+            values = {
+                ...values,
+                [field]: value
+            }
+        })
+
+        // Params
+        if (formContent.id) {
+            // Update of model
+            model.update(formContent.id, values, user).then(() => {
+                // Location.back();
+
+                callback();
+
+            });
+        } else {
+            // add new model
+            model.add(values, user).then(() => {
+                // Location.back();
+                callback();
+
+            });
+        }
+    };
+
+    return (
+        <section className="collection-add">
+            <Title level={4}>{edit ? 'Edit' : 'Add'} Step</Title>
+
+            {loading ? (
+                <Skeleton />
+            ) : (
+                <Form initialValues={formContent} form={form} layout="vertical" onFinish={onSubmit}>
+
+                    {/* Name */}
+                    <Form.Item name="name" label="Name" required>
+                        <Input placeholder="Enter name" />
+                    </Form.Item>
+                    {/* Name Ends */}
+
+                    {/* Description */}
+                    <Form.Item name="description" label="Description" required>
+                        <Input placeholder="Enter description" />
+                    </Form.Item>
+                    {/* Description Ends */}
+
+                    {/* Identifier */}
+                    <Form.Item name="identifier" label="Identifier" required>
+                        <Input placeholder="Enter identifier" />
+                    </Form.Item>
+                    {/* Identifier Ends */}
+
+                    {/* Active */}
+                    <Form.Item label="Active" name="active" required>
+                        <Radio.Group style={{ width: '100%' }}>
+                            {[true, false].map((model) => (
+                                <Radio value={model}>{model ? 'Yes' : 'No'}</Radio>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    {/* Active Ends */}
+
+
+                    {/* Start/Stop */}
+                    <Form.Item label="Stage" name="stage">
+                        <Radio.Group style={{ width: '100%' }}>
+                            {['start', 'stop'].map((model) => (
+                                <Radio value={model}>{model}</Radio>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    {/* Start/Stop Ends */}
+
+                    {/* Order */}
+                    <Form.Item name="order" label="Order" required>
+                        <InputNumber placeholder="Enter order" />
+                    </Form.Item>
+                    {/* Order Ends */}
+
+                    {/* Model Identifier */}
+                    <Form.Item name="model_identifier" label="Moder Identifier" required>
+                        <Input placeholder="Enter Model Identifier" />
+                    </Form.Item>
+                    {/* Model Identifier Ends */}
+
+                    {/* Submit Model Identifier */}
+                    <Form.Item name="submit_model_identifier" label="Submit Moder Identifier">
+                        <Input placeholder="Enter Submit Model Identifier" />
+                    </Form.Item>
+                    {/* Submit Model Identifier Ends */}
+
+                    {/* Type */}
+                    <Form.Item name="type" label="Type" required>
+                        <Radio.Group style={{ width: '100%' }}>
+                            {['hierarchical', 'parallel'].map((model) => (
+                                <Radio value={model}>{model}</Radio>
+                            ))}
+                        </Radio.Group>
+                    </Form.Item>
+                    {/* Order Ends */}
+
+                    {/* Process */}
+                    <Form.Item label="Trigger Process (On Completion)" name="trigger_process_ids">
+                        <Select style={{ width: '100%' }} mode="multiple">
+                            {process.map((record) => (
+                                <Option value={record.id}>{record.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Process Ends */}
+
+                    {/* Sub Process Ids */}
+                    <Form.Item label="Trigger Sub Process (On Completion)" name="trigger_sub_process_ids">
+                        <Select style={{ width: '100%' }} mode="multiple">
+                            {steps.map((record) => (
+                                <Option value={record.id}>{record.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Sub Process Ids Ends */}
+
+                    {/* Forms */}
+                    <Form.Item label="Form" name="form_id">
+                        <Select style={{ width: '100%' }}>
+                            {forms.map((record) => (
+                                <Option value={record.id}>{record.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Forms Ends */}
+
+                    {/* Pages */}
+                    <Form.Item label="Page" name="page_id">
+                        <Select style={{ width: '100%' }} allowClear>
+                            {pages.map((record) => (
+                                <Option value={record.id}>{record.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Pages Ends */}
+
+                    {/* Pages */}
+                    <Form.Item label="Role" name="role_id">
+                        <Select mode="multiple" style={{ width: '100%' }}>
+                            {roles.map((record) => (
+                                <Option value={record.id}>{record.name}</Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
+                    {/* Pages Ends */}
+
+                    <Form.Item>
+                        <Button loading={loading} htmlType={'submit'} type="primary">
+                            Submit
+                        </Button>
+                    </Form.Item>
+                </Form>
+            )}
+        </section>
+    );
+}

package/core/lib/models/steps/components/step-detail/step-detail.js

@@ -0,0 +1,157 @@
+/**
+ * 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, Skeleton, Tabs, Space, Row } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+import './step-detail.scss';
+
+import GenericList from './../../../../modules/generic/generic-list/generic-list';
+
+import { ReloadOutlined } from '@ant-design/icons';
+
+import { Checklists, Steps } from './../../../../models'
+
+const { Title } = Typography;
+
+const { TabPane } = Tabs;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function StepDetail({ match, model, columns: cols, schema = { custom_actions: [] }, disableEdit = schema.disableEdit }) {
+
+    const [record, setRecords] = 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) => {
+            setRecords(result);
+
+            setLoading(false);
+        });
+    };
+
+    function refresh() {
+        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>
+                    </div>
+
+                    <Tabs>
+
+                        <TabPane tab="Sub Steps" key="0">
+                            <GenericList
+                                model={Steps}
+                                //  config={
+                                //      { orderBy: 'order' }
+                                //  }
+                                additional_queries={[
+                                    {
+                                        field: 'header_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+
+
+
+                        <TabPane tab="Checklists" key="1">
+                            <GenericList
+                                model={Checklists}
+                                //  config={
+                                //      { orderBy: 'order' }
+                                //  }
+                                additional_queries={[
+                                    {
+                                        field: 'step_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+                    </Tabs>
+                </>
+            )}
+        </section>
+    );
+}
+
+export default withRouter(StepDetail);