ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,221 @@
+
+import React, { useState, useEffect, useContext } from "react";
+
+import { GlobalContext } from './../../../../Store';
+
+import { Row, Button, Alert, Typography, Skeleton, Switch, Table, Space } from "antd";
+
+import { Steps, ProcessTransactions } from './../../../../models';
+
+import { OrderedListOutlined, PicCenterOutlined } from '@ant-design/icons';
+
+import './task-list.scss';
+
+
+const { Title } = Typography;
+
+/**
+ * Task List from Step
+ * 
+ * @param {*} param0 
+ */
+export default function TaskList({ match }) {
+
+    const [step, setStep] = useState({})
+
+    const { params } = match;
+
+    const { user, CustomModels } = useContext(GlobalContext);
+
+    const [loader, setLoader] = useState(true)
+
+    useEffect(() => {
+
+        loadStep();
+
+    }, [])
+
+    function loadStep() {
+
+        setLoader(true);
+
+        Steps.getRecord(params.id).then((result) => {
+
+            setStep(result);
+
+            setLoader(false);
+
+        })
+    }
+
+    return (
+        <section className="finance task-list">
+
+            <Title level={3}>
+                {step.name}
+            </Title>
+
+            <p>
+                {step.description}
+            </p>
+
+            {loader ? <Skeleton /> : <Tasks step={step} />}
+
+        </section>
+    );
+}
+
+
+const Tasks = ({ url, step }) => {
+
+    const { user, CustomModels } = useContext(GlobalContext);
+
+    let cardView = JSON.parse(localStorage.getItem('card-view'))
+
+    const [view, setView] = useState(cardView);
+
+    const [records, setRecords] = useState([]);
+
+    const [loader, setLoader] = useState(false);
+
+    // let models = require('./../../../../models/index');
+
+    let model = CustomModels[step.model_identifier];
+
+    let columns = model.getDefaultColumns(step);
+
+    useEffect(() => {
+
+        loadData(step);
+
+    }, [])
+
+
+    /**
+     * 
+     * 
+     * @param {*} step 
+     */
+    function loadData(step) {
+
+        console.log(step);
+
+        setLoader(true);
+
+        var queries = [{
+            field: 'step_id',
+            value: step.id
+        }];
+
+        ProcessTransactions.get(queries).then((result) => {
+
+            // Load model data
+            let promises = result.process_transactions.map(loadModelData);
+
+            Promise.all(promises).then((response) => {
+
+                console.log(response);
+
+                setRecords([...response]);
+
+                setLoader(false);
+
+            })
+        })
+    }
+
+    /**
+     * Load the model data
+     * 
+     * @param {*} param0 
+     * @returns 
+     */
+    function loadModelData(process_transaction) {
+
+        let model = CustomModels[process_transaction.model_identifier];
+
+        return model.getRecord(process_transaction.record_id).then((result) => {
+
+            return {
+                ...process_transaction,
+                [model.modelName]: result
+            }
+        })
+    }
+
+    function changeView(result) {
+        setView(result);
+
+        localStorage.setItem('card-view', result);
+    }
+
+    return (<>
+        <div className="list-header">
+
+            <p className="page-desc">
+                {loader ? 'Loading data' : `Found ${(records).length} results`}
+            </p>
+
+            <Space className="list-actions">
+
+                <Switch
+                    size={'small'}
+                    defaultChecked
+                    onChange={changeView}
+                    checked={view}
+                    checkedChildren={<OrderedListOutlined />}
+                    unCheckedChildren={<PicCenterOutlined />}
+                />
+
+                <Button onClick={() => { loadData(step) }} type="secondary" size={'small'}>Refresh</Button>
+            </Space>
+
+        </div>
+
+        <Row className="report-listing-wrapper">
+
+            {step.alert ? <Alert message={step.alert} type="info" showIcon /> : null}
+
+            {
+                loader
+                    ?
+                    (
+                        <Skeleton type="listing" />
+                    )
+                    :
+                    (
+                        <>
+                            {!view ? (
+                                <Table
+                                    className="table-exportable"
+                                    loading={loader}
+                                    size="small"
+                                    scroll={{ x: true, y: 750 }}
+                                    rowKey={(record) => record.id}
+                                    dataSource={records}
+                                    columns={columns}
+                                    pagination={false}
+                                ></Table>
+                            ) : (
+                                <CardList step={step} model={model} data={records} />
+                            )}
+                        </>
+                    )
+            }
+        </Row>
+    </>
+    )
+}
+
+/**
+ * List of Card : #Note : Should be a generic component
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function CardList({ model, data, step, ...props }) {
+    return data.map((record, index) => {
+        return <model.TaskCard redirect_to={`task/${step.id}`} index={index} key={index} record={record} {...record} {...props} />;
+    });
+}
+

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

@@ -0,0 +1,14 @@
+.task-list {
+    .list-header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .skeleton-wrapper {
+        width: 100%;
+    }
+
+    .ant-alert {
+        margin-bottom: 10px;
+    }
+}

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

@@ -0,0 +1,300 @@
+    
+import React, { useState, useEffect, useContext } from "react";
+
+import { Link } from 'react-router-dom'
+
+import { Typography, Statistic, Badge, Empty } from "antd";
+
+import { ProcessTransactions, Steps } from "../../../../models";
+
+import { GlobalContext } from './../../../../Store';
+
+const { Title } = Typography;
+
+export default function TaskOverview({ steps = [] }) {
+
+    const { user } = useContext(GlobalContext);
+
+    const [tasks, setTasks] = useState([]);
+
+    useEffect(() => {
+
+        // Load all the steps for this role 
+        loadSteps(user);
+
+    }, [])
+
+    /**
+     * Load the steps 
+     */
+    function loadSteps(user) {
+
+        var queries = [{
+            field: 'role_id',
+            operator: 'array-contains',
+            value: user.role_id
+        }, {
+            field: 'active',
+            value: true
+        }]
+
+        Steps.get(queries, { orderBy: 'order' }).then((result) => {
+
+            setTasks(result.steps);
+
+            // setTasks(Steps.orderArray(result.steps, 'order'));
+        })
+    }
+
+    return (
+        <section className="dashboard">
+
+            {tasks.length ? <>
+
+                <div className="list-header">
+
+                    <Title level={4}>Task Overview</Title>
+
+                </div>
+
+                <>
+
+                    <div gutter={16} className="score">
+
+                        {
+                            steps.sort((record) => record.order).map((step, key) => {
+
+                                return <Score step={step} key={key} />
+
+                            })
+                        }
+
+                    </div>
+
+                </>
+            </>
+                :
+                <Empty description={false} />
+            }
+
+
+        </section>
+    );
+}
+
+
+
+function Score({ step, url }) {
+
+    const [records, setRecords] = useState([]);
+
+    const [loader, setLoader] = useState(true);
+
+    useEffect(() => {
+
+        getData();
+
+        return () => {
+
+        }
+
+    }, [])
+
+    /**
+     * 
+     */
+    function getData() {
+
+        setLoader(true);
+
+        var queries = [{
+            field: 'step_id',
+            value: step.id
+        }];
+
+        ProcessTransactions.get(queries).then((result) => {
+
+            setRecords(result.process_transactions);
+
+        })
+    }
+
+    return (<Link className="card dashboard-item" to={`/list/${step.id}`}>
+
+        <Badge status={'success'} />
+
+        <Statistic className="" title={step.name} value={records.length} />
+
+        {/* <small>
+            {step.description}
+        </small> */}
+
+    </Link>)
+}
+
+
+// import React, { useState, useEffect, useContext } from "react";
+
+// import { Link } from 'react-router-dom'
+
+// import { Typography, Statistic, Tabs, Badge } from "antd";
+
+// import { GlobalContext } from './../../../../Store';
+
+// import FirebaseUtils from './../../../../utils/firebase.utils';
+
+// import { Steps } from "../../../../models";
+
+// const { TabPane } = Tabs;
+
+// const { Title } = Typography;
+
+
+// export default function TaskOverview({ steps = [] }) {
+
+//     const { user } = useContext(GlobalContext)
+
+//     const [tasks, setTasks] = useState();
+
+//     useEffect(() => {
+
+//         // Load all the steps for this role 
+//         loadSteps();
+
+//     }, [])
+
+//     /**
+//      * Load the steps 
+//      */
+//     function loadSteps() {
+
+//         Steps.get().then((result) => {
+
+//             setTasks(result.steps);
+//         })
+//     }
+
+
+//     return (
+//         <section className="dashboard">
+
+//             {steps.length ? <>
+
+//                 <div className="list-header">
+
+//                     <Title level={4}>Task Overview</Title>
+
+//                 </div>
+
+//                 <Tabs defaultActiveKey="0">
+
+//                     {
+//                         user.locations.map((location, index) => {
+
+//                             return (
+//                                 <TabPane tab={`${location} Customers`} key={index}>
+
+//                                     <>
+
+//                                         <div gutter={16} className="score">
+
+
+//                                             {
+//                                                 steps.filter((step) => !step.isForm).map((step, key) => {
+
+//                                                     return step.submenus && step.submenus.length ? step.submenus.map((submenu) => <Score url={location} step={submenu} />) : <Score url={location} step={step} />;
+
+//                                                 })
+//                                             }
+
+//                                         </div>
+
+//                                     </>
+//                                 </TabPane>
+//                             )
+//                         })
+//                     }
+
+//                 </Tabs>
+
+
+//             </> : null}
+
+
+
+
+
+
+//         </section>
+//     );
+// }
+
+
+
+// function Score({ step, url }) {
+
+
+//     const { user } = useContext(GlobalContext)
+
+//     const [requests, setRequests] = useState({ all: {}, requests: {} });
+
+//     const [loader, setLoader] = useState(true);
+
+
+//     useEffect(() => {
+
+//         getData();
+
+//         return () => {
+
+//         }
+
+//     }, [])
+
+
+//     function getData() {
+
+//         // console.log(user);
+
+//         setLoader(true);
+
+//         var queries = [];
+
+//         if (typeof step.queries === "function") {
+
+//             queries = step.queries({ user });
+
+//         } else {
+
+//             queries = step.queries;
+
+//         }
+
+
+//         FirebaseUtils.getRecords(queries, step.model || 'requests').then((result) => {
+
+//             setLoader(false);
+
+//             setRequests(result[step.model.name || 'requests']);
+
+//         });
+
+//     }
+
+
+
+
+//     return (<Link className="card dashboard-item" to={`${step.path}`}>
+
+//         <Badge status={'success'} />
+
+//         <Statistic className="" title={step.caption} value={requests.length} />
+
+//         {/* <small>
+//             {step.description}
+//         </small> */}
+
+//     </Link>)
+
+
+// }