ui-soxo-bootstrap-core 2.4.24

package/core/lib/models/process/components/process-detail/process-detail.js

@@ -0,0 +1,140 @@
+/**
+ * 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, Descriptions, Skeleton, Tabs, Space, Row } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+import './process-detail.scss';
+
+import GenericList from './../../../../modules/generic/generic-list/generic-list';
+
+import { ReloadOutlined, OrderedListOutlined, PicCenterOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+
+
+import { Steps } from '../../../../models';
+
+const { Title } = Typography;
+
+const { TabPane } = Tabs;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function ProcessDetail({ 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 Process" key="0">
+                            <GenericList
+                                model={Steps}
+                                config={
+                                    { orderBy: 'order' }
+                                }
+                                additional_queries={[
+                                    {
+                                        field: 'process_id',
+                                        value: params.id,
+                                    },
+                                ]}
+                            />
+                        </TabPane>
+                    </Tabs>
+                </>
+            )}
+        </section>
+    );
+}
+
+export default withRouter(ProcessDetail);

package/core/lib/models/process/components/process-timeline/process-timeline.js

@@ -0,0 +1,140 @@
+
+import React, { useEffect, useState, Fragment } from "react";
+
+import { Button, Skeleton, Timeline, Typography } from 'antd';
+
+import { Steps, Forms, Columns, Scripts, ProcessTransactions, StepTransactions } from '../../..';
+
+import { SettingOutlined, ExclamationCircleOutlined, CheckCircleOutlined } from '@ant-design/icons'
+
+import { Location } from "../../../../utils";
+
+
+export default function ProcessTimeline({ step, record }) {
+
+    let { process_transaction_id, } = Location.search();
+
+    const [steps, setSteps] = useState([])
+
+    const [transactions, setTransactions] = useState([]);
+
+    useEffect(() => {
+
+        getStepTransactions().then((transactions) => {
+
+            getProcess(step, transactions);
+
+        });
+
+
+        return () => {
+
+        }
+
+    }, [])
+
+    /**
+     * Get the process
+     * 
+     * @param {*} step 
+     * @param {*} transactions 
+     */
+    function getProcess(step, transactions) {
+
+        var queries = [{
+            field: 'process_id',
+            value: step.process_id
+        }, {
+            field: 'active',
+            value: true
+        }]
+
+        Steps.get(queries).then((result) => {
+
+            var modified_steps = Steps.orderArray(result.steps, 'order').map((step) => {
+
+                var matching = transactions.filter((ele) => ele.step_id === step.id)
+
+                if (matching.length) {
+
+                    step = {
+                        ...step,
+                        complete: true,
+                        transactions: matching
+                    }
+
+                } else {
+
+
+                }
+
+                return step;
+            });
+
+            setSteps(modified_steps);
+
+            console.log(modified_steps);
+        })
+
+    }
+
+    /**
+     * Get the step transaction
+     */
+    function getStepTransactions() {
+
+        var queries = [{
+            field: 'process_transaction_id',
+            value: process_transaction_id
+        }]
+
+        return StepTransactions.get(queries).then((result) => {
+
+            console.log(result);
+
+            return result.step_transactions;
+
+        })
+    }
+
+    // color={Candidates.status === 'Schedule Pending' ? 'green' : 'gray'}
+    // dot={Candidates.status === 'Schedule Pending' ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
+
+
+    return (<>
+
+        <Timeline>
+
+            {
+                steps.sort((record) => record.order).map((entry) => {
+
+                    return (<Timeline.Item color={entry.complete ? 'green' : 'gray'} dot={entry.complete ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}>
+                        {entry.name}
+
+
+                        <p>
+                            <small>
+                                {
+                                    entry.complete
+                                        ?
+                                        <>
+
+                                            Completed at {entry.transactions[0].created_at}
+
+                                        </>
+                                        :
+                                        null
+                                }
+                            </small>
+                        </p>
+
+                    </Timeline.Item>)
+
+                })
+            }
+
+        </Timeline>
+
+    </>)
+
+}

package/core/lib/models/process/components/task-detail/task-detail.js

@@ -0,0 +1,240 @@
+/**
+ * Task Form
+ */
+
+import React, { useEffect, useState, useContext, Fragment } from "react";
+
+import { Button, Skeleton, Tag, Typography } from 'antd';
+
+import { SyncOutlined } from '@ant-design/icons';
+
+import { Steps, Process, Columns, Scripts, ProcessTransactions, StepTranscations } from '../../..';
+
+import { Location } from '../../../../utils/location/location.utils';
+
+import { DateUtils } from "../../../../utils";
+
+import TaskStatus from './../task-status/task-status';
+
+import ProcessTimeline from "../process-timeline/process-timeline.js"
+
+import TaskForm from "../task-form/task-form";
+
+import './task-detail.scss';
+
+import { GlobalContext } from './../../../../Store';
+
+const { Title } = Typography;
+
+let baseModels = require('./../../../../models');
+
+export default function TaskDetail({ match, history }) {
+
+    let { record_id, process_transaction_id } = Location.search();
+
+    const [form, setForm] = useState({});
+
+    const [step, setStep] = useState({})
+
+    const [record, setRecord] = useState({});
+
+    const [model, setModel] = useState({});
+
+    const { CustomModels } = useContext(GlobalContext);
+
+    let models = {
+        ...baseModels,
+        ...CustomModels
+    }
+
+    const { params } = match;
+
+    const { step_id, id } = params;
+
+    const [loader, setLoader] = useState(true)
+
+    useEffect(() => {
+
+        // loadData();
+
+        loadStepConfiguration();
+
+    }, []);
+
+    /**
+     * Load the step configuration
+     */
+    async function loadStepConfiguration() {
+
+        const result = await Process.getProcessTimelineForStep(record_id, step_id, process_transaction_id);
+
+        setStep(result);
+
+        let instance = models[result.model_identifier]
+
+        // setModel(instance);
+
+        // Load the model data
+        loadModelData({ model: instance, record_id, process_transaction_id }).then(() => {
+
+            if (result.form_id) {
+
+                // If there is a form attached 
+                // result.form_id && loadForm(result);
+
+                setLoader(false);
+
+            } else {
+
+                setLoader(false);
+
+            }
+
+        });
+
+    }
+
+    function loadData() {
+
+        setLoader(true);
+
+        Steps.getRecord(step_id).then((result) => {
+
+            setStep(result);
+
+            let instance = models[result.model_identifier]
+
+            // setModel(instance);
+
+            // Load the model data
+            loadModelData({ model: instance, record_id, process_transaction_id }).then(() => {
+
+                if (result.form_id) {
+
+                    // If there is a form attached 
+                    // result.form_id && loadForm(result);
+
+                    setLoader(false);
+
+                } else {
+
+                    setLoader(false);
+
+                }
+
+            });
+        })
+    }
+
+
+    /**
+     * Load the model data
+     * 
+     * @param {*} param0 
+     * @returns 
+     */
+    async function loadModelData({ record_id, process_transaction_id }) {
+
+        // Process transaction
+        const process_transaction = await ProcessTransactions.getRecord(process_transaction_id);
+
+        // 
+        let model = models[process_transaction.model_identifier];
+
+        setModel(model);
+
+        return model.getRecord(record_id).then((result) => {
+
+            setRecord(result);
+        })
+    }
+
+    const { step_transactions = null } = step;
+
+    return (
+        <div className="task-form">
+
+            {/* <Header onBack={() => props.history.goBack()} /> */}
+
+            {
+                loader ?
+                    <Skeleton type="report" />
+                    :
+                    <Fragment>
+
+                        <>
+
+                            <div className="about-us page-content">
+                                <h1 className="page-heading">
+                                    {step.name}
+                                </h1>
+                            </div>
+                            <p>
+                                {step.description}
+                            </p>
+
+                            {model && <model.Card record={record} />}
+
+
+                            {/* Show the process timeline */}
+                            <ProcessTimeline record={record} step={step} />
+                            {/* Show the process timeline Ends */}
+
+                            <div gutter={0} className="detail-wrapper card">
+
+                                {/* Checklist  */}
+                                {step.checklists && step.checklists.length ? <>
+
+                                    <div className="checklist">
+
+                                        <Title level={4}>
+                                            Checklists
+                                        </Title>
+
+                                        <p>
+                                            Ensure to follow the below steps on completion of this step.
+                                        </p>
+
+                                        {step.checklists.map((entry, index) => {
+                                            return (<div className="step">
+
+
+                                                <h4>
+                                                    {index + 1}. {entry.title}
+                                                </h4>
+
+                                                <p>
+                                                    {entry.description}
+                                                </p>
+
+                                            </div>)
+
+                                        })}
+
+                                    </div>
+
+                                </> : null}
+
+                                {/* Checklist  Ends */}
+
+                                {/* Summary of Step Activity */}
+                                <TaskStatus step={step} step_transactions={step_transactions} />
+                                {/* Summary of Step Activity Ends */}
+
+
+                                <div className="step-form-container">
+                                    <TaskForm record_id={record_id} step={step} callback={() => {
+
+                                        history.goBack();
+
+
+                                    }} />
+                                </div>
+
+                            </div>
+                        </>
+                    </Fragment >}
+        </div >
+    )
+}
+

package/core/lib/models/process/components/task-detail/task-detail.scss

@@ -0,0 +1,27 @@
+.task-form {
+    .checklist {
+        margin: 10px 0px;
+        .step {
+            border-radius: 4px;
+            padding: 10px;
+            margin: 10px 0px;
+            background-color: aliceblue;
+            border: 1px solid #ceebff;
+        }
+    }
+
+    .form-footer {
+        display: flex;
+        justify-content: flex-end;
+    }
+    .configure-button {
+        // float: right;
+        padding: 10px;
+    }
+
+    .step-form-container {
+        display: flex;
+        justify-content: space-between;
+        
+    }
+}