ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,192 @@
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Link } from 'react-router-dom';
+
+import { Typography, Statistic, Tabs, Badge, Button } from 'antd';
+
+// import "./tasl-o.scss";
+
+import { GlobalContext } from './../../../../Store';
+
+import FirebaseUtils from './../../../../utils/firebase.utils';
+
+import './task-overview.scss';
+
+const { TabPane } = Tabs;
+
+const { Title } = Typography;
+
+let badges = {
+    kozhikode: 'error',
+    kannur: 'success',
+    malappuram: 'processing',
+};
+
+var cityCode = {
+    kozhikode: 'KL305',
+    kannur: 'KL306',
+    malappuram: 'KL307',
+};
+
+export default function TaskOverview({ steps = [] }) {
+
+    const [loader, setLoader] = useState(true);
+
+    // Cotent
+    const [content, setContent] = useState([]);
+
+    const { user } = useContext(GlobalContext);
+
+    useEffect(() => {
+        loadData(steps);
+    }, []);
+
+    function loadData(steps) {
+        setLoader(true);
+
+        // For each of the locations , we have to load the data of each step
+        Promise.all(user.locations.map((location) => getStepData(steps, location)))
+            .then((result) => {
+                console.log(result);
+
+                setContent(result);
+
+                setLoader(false);
+            })
+            .then(() => { });
+    }
+
+    /**
+     * Load the data
+     */
+    function getStepData(steps, location) {
+        var data = {
+            location: location,
+            steps: [],
+        };
+
+        return new Promise((resolve, reject) => {
+            return Promise.all(
+                steps
+                    .filter((step) => !step.isForm)
+                    .map((step) => {
+                        return loadLocationData(step, location).then((result) => {
+                            data.steps.push({
+                                step,
+                                ...result,
+                            });
+
+                            // return {
+                            //     location:location,
+                            //     step:step,
+                            //     result
+                            // }
+                        });
+                    })
+            ).then(() => {
+                resolve(data);
+            });
+        });
+    }
+
+    /**
+     * For the step load the location data
+     *
+     * @param {*} step
+     * @param {*} url
+     */
+    function loadLocationData(step, url) {
+        var queries = [];
+
+        let code = cityCode[url];
+
+        if (typeof step.queries === 'function') {
+            queries = step.queries({ user, code });
+        } else {
+            queries = step.queries;
+        }
+
+        // var queries = step.queries({ code });
+
+        if (step.path === '/inward_transfers') {
+            url = null
+        }
+
+        return FirebaseUtils.getRecordsLegacy(url, queries, step.model || 'requests').then((result) => {
+            // console.log(result);
+            setLoader(false);
+
+            return {
+                // location: url,
+                step,
+                result: result[step.model || 'requests'],
+            };
+        });
+    }
+
+    return (
+        <section className="task-overview">
+            {!loader ? (
+                <>
+                    <div className="list-header">
+                        <Title level={4}>Task Overview</Title>
+                    </div>
+
+                    {/* Content Begins */}
+
+                    {content.map((dealer, index) => {
+                        return (
+                            <div key={index}>
+                                <section className="dashboard dashboard-card">
+                                    <div className="list-subheader">
+                                        <Title level={5}>{dealer.location} Customers</Title>
+
+                                        <div>{/* <Button onClick={getData} type="secondary" size={'small'}>Refresh</Button> */}</div>
+                                    </div>
+
+                                    <div>
+                                        <div gutter={16} className="score">
+                                            {dealer.steps.map((step, key) => {
+                                                return step.submenus && step.submenus.length ? (
+                                                    step.submenus.map((submenu) => <Score url={dealer.location} data={submenu} />)
+                                                ) : (
+                                                    <Score url={dealer.location} data={step} />
+                                                );
+                                            })}
+                                        </div>
+                                    </div>
+                                </section>
+                            </div>
+                        );
+                    })}
+
+                    {/* Content Ends */}
+                </>
+            ) : null}
+        </section>
+    );
+}
+
+function Score({ data, url }) {
+    const { step } = data;
+
+    useEffect(() => {
+        // getData();
+
+        return () => { };
+    }, []);
+
+    // console.log(data);
+
+    return (
+        <>
+            <Link className="card dashboard-item" to={`${step.path}`}>
+                <Badge status={'success'} />
+
+                <Statistic className="" title={step.caption} value={data.result.length} />
+
+                {/* <small>{step.description}</small> */}
+            </Link>
+        </>
+    );
+}

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

@@ -0,0 +1,45 @@
+import React, { useState, useEffect, useContext } from 'react';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+/**
+ *
+ * Routes defined for generic workflow
+ *
+ * @param {*} param0
+ */
+export default function TaskRoutes({ steps, list: List, form: Form }) {
+    return (
+        <div>
+            {steps.map((step, key) => {
+                return step.submenus && step.submenus.length ? (
+                    step.submenus.map((submenu) => (
+                        <Route
+                            key={key}
+                            exact
+                            path={`${submenu.path}`}
+                            component={({ ...routeParams }) =>
+                                submenu.isForm ? <Form {...routeParams} step={submenu} /> : <List {...routeParams} step={submenu} />
+                            }
+                        />
+                    ))
+                ) : (
+                    <RouteConfig key={key} list={List} form={Form} config={step} />
+                );
+
+                {
+                    /* return step.submenus && step.submenus.length ? step.submenus.map((submenu) => <RouteConfig list={List} form={Form} config={submenu} />) : <RouteConfig list={List} form={Form} config={step} />; */
+                }
+            })}
+        </div>
+    );
+}
+
+function RouteConfig({ config, list: List, form: Form }) {
+    return (
+        <Route
+            path={`${config.path}`}
+            component={({ ...routeParams }) => (config.isForm ? <Form {...routeParams} step={config} /> : <List {...routeParams} step={config} />)}
+        />
+    );
+}

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

@@ -0,0 +1,176 @@
+/**
+ * 
+ * 
+ * @description Component for Showing the status of this step 
+ * @author Ashique
+ */
+
+
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Tag, Button, message } from 'antd';
+
+import './task-status.scss';
+
+import DateUtils from '../../../../utils/date/date.utils';
+
+import { ConfirmModal } from './../../../../components/'
+
+import { CopyToClipBoard } from './../../../../elements/'
+
+import { StepTransactions } from '../../..';
+
+import { GlobalContext } from './../../../../Store';
+
+import TaskForm from './../task-form/task-form';
+
+
+/**
+ * 
+ */
+export default function TaskStatus({ id, color, step, step_transactions }) {
+
+    // let activeStepTransactions = step_transactions.filter((record) => record.cancelled_at === null)[-]
+    const { user = { locations: [] } } = useContext(GlobalContext);
+
+
+    /**
+     * Copy to clipboard
+     * 
+     * @param {*} step 
+     */
+    async function cancelStepTransaction({ step_transactions, remarks }) {
+
+        var formBody = {
+            cancellation_remarks: remarks,
+            cancelled_at: new Date()
+        }
+
+        await StepTransactions.update(step_transactions.id, formBody)
+
+        message.success("Step Transaction Cancelled", step_transactions.id);
+    }
+
+    return (<div className='task-status'>
+
+        <div>
+
+
+            {
+                step_transactions
+                    ?
+                    <>
+
+                        <small className='timeline'>
+                            {DateUtils.displayFirestoreTime(step_transactions.start_time)} -  {step_transactions.completed ? DateUtils.displayFirestoreTime(step_transactions.end_time) : 'Pending'}
+                        </small>
+
+                        {/* {
+                        step_transactions.completed
+                            ?
+                            <p>
+                                Time Taken : {DateUtils.getDuration(step_transactions.start_time, step_transactions.end_time)}
+                            </p>
+                            :
+                            null
+                    } */}
+
+
+                        {/* Roles the Step is assigned to  */}
+                        {
+                            step.role_id
+                                ?
+                                <p>
+                                    <Tag color={color}>
+
+                                        <small>{step.current_state}
+
+                                            {/* with {step.role.name} */}
+
+                                        </small>
+                                    </Tag>
+
+                                </p>
+                                :
+                                null
+                        }
+
+                        {step.roles ? <>
+
+                            Pending with {step.roles.map((role) => {
+                                return role.name
+                            })}
+
+
+                        </> : <></>}
+
+
+
+                        {/* {step.current_state === 'ongoing' ? <p>
+
+                        Waiting Since : {DateUtils.getPastTime(step_transactions.start_time,)}
+
+                    </p> : <></>} */}
+
+                        {/* Roles the Step is assigned to Ends */}
+                    </>
+                    :
+                    <>
+
+                        {/* <i className={`pending-tag ${step.current_state}`}>
+                        <small>
+                            {step.current_state}
+                        </small>
+                    </i> */}
+
+                        <Tag color={color}>
+                            {step.current_state}
+                        </Tag>
+
+                    </>
+            }
+            {/* Summary of Step Activity Ends */}
+
+        </div>
+
+
+        {/* Actions for Step Transactions */}
+        <div className='actions'>
+
+            {
+                step_transactions && user.isAdmin
+                    ?
+                    <>
+
+                        <CopyToClipBoard id={step_transactions.id} record={step_transactions} />
+
+                        <ConfirmModal caption='Cancel' callback={({ remarks }) => { cancelStepTransaction({ step_transactions, remarks }) }} />
+
+                    </>
+                    :
+                    null
+            }
+
+        </div>
+        {/* Actions for Step Transactions Ends */}
+
+
+        {/* Form for the Step */}
+        {/* {step.formEnabled && <Card className="task-form-card">
+
+            <h1>
+                Form Enabled Value {step.formEnabled} - {step.name}
+
+            </h1>
+
+            <TaskForm
+                record_id={id}
+                step={step}
+            />
+
+        </Card>} */}
+        {/* Form for the Step Ends */}
+
+    </div>)
+
+}

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

@@ -0,0 +1,11 @@
+.task-status {
+    display: flex;
+    justify-content: space-between;
+
+    .actions{
+        display: flex;
+    }
+    .timeline {
+        margin-bottom: 5px;
+    }
+}