ui-soxo-bootstrap-core 2.4.24

package/core/lib/models/users/users.js

@@ -0,0 +1,120 @@
+
+
+import React from "react";
+
+import Base from './../base';
+
+import { Link } from 'react-router-dom';
+
+import UserAdd from './components/user-add/user-add';
+
+import { Tag } from 'antd';
+
+
+class Users extends Base {
+
+    constructor() {
+
+        super()
+
+        this.fields = [{
+            field: 'name',
+            caption: 'Name'
+        }, {
+            field: 'place',
+            caption: 'Place'
+        }, {
+            field: 'phone',
+            caption: 'Phone'
+        }, {
+            field: 'active',
+            caption: 'Active',
+            type: 'boolean'
+        }]
+
+        // this.columns = [];
+    }
+
+    get getEndpoint() {
+        return 'users'
+    }
+
+    get path() {
+        return `users`
+    }
+
+    get getName() {
+        return `users`
+    }
+
+    create = (id, values) => {
+
+        return this.addDocument(id, values);
+
+    }
+
+
+    get columns() {
+
+        return [
+            {
+                caption: 'Name',
+                field: 'name',
+                key: 'name',
+            },
+
+
+            {
+                caption: 'Email',
+                field: 'email',
+                key: 'email',
+            },
+
+            {
+                caption: 'Phone',
+                field: 'phone',
+                key: 'phone',
+            },
+
+        ];
+    }
+
+    /**
+     * 
+     * @returns 
+     */
+    registerUser = (body) => {
+        return this.loadFunction('createUser', body);
+    }
+
+
+    AddComponent = (props) => <UserAdd model={this} {...props} />;
+
+    ModalAddComponent = (props) => <UserAdd model={this} {...props} />;
+
+    /**
+ * Card Component for Staff
+ *
+ * @param {*} record
+ * @returns
+ */
+    Card = ({ record, redirect_to = 'users' }) => {
+        return (
+            <Link className="booking-card" to={`/${redirect_to}/${record['id']}`}>
+                <div className="card">
+                    <h2 className="">{record.name}</h2>
+
+                    <h3 className="title">{record.weight}</h3>
+
+                    <p className="address">
+                        Created on {record.created_at}
+                        <Tag color="magenta">{record['Consultant Name']}</Tag>
+                    </p>
+                </div>
+            </Link>
+        );
+    };
+
+}
+
+export default Users;

package/core/lib/modules/business/launch-page/launch-page.js

@@ -0,0 +1,29 @@
+
+import React, { useState, useContext, useEffect } from "react";
+
+import './launch-page.scss';
+
+
+
+export default function BrandLaunchPage({ multiple, callback, maxSize = 3, initial = [] }) {
+
+    useEffect(() => {
+
+    }, [])
+
+
+
+    return (<div className="brand-launch-page">
+
+
+        {/* <ApplicationBootstrap>
+
+            <h1>
+                Hello
+            </h1>
+
+        </ApplicationBootstrap> */}
+
+    </div>)
+}
+

package/core/lib/modules/business/launch-page/launch-page.scss

@@ -0,0 +1,6 @@
+
+
+.brand-launch-page{
+
+    
+}

package/core/lib/modules/business/slots/slots.js

@@ -0,0 +1,231 @@
+import React, { useState, useEffect, useContext } from "react";
+
+import { Button, Empty, Card, Typography, Skeleton, message } from 'antd';
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+
+import './slots.scss';
+
+// import { Location } from '@soxo/bootstrap-core';
+
+import { Calendar } from 'antd';
+
+import moment from 'moment';
+
+const { Title, Text } = Typography;
+
+/**
+ *
+ * @returns
+ */
+export default function Slots() {
+
+    // var params = Location.search();
+
+    const [item, setItem] = useState();
+
+    const [today, setToday] = useState(moment());
+
+    
+    const [available, setAvailable] = useState([{ as_starttime: '10 AM' }, { as_starttime: '12 AM' }, { as_starttime: '13 AM' }]);
+
+    const [selected, setSelected] = useState({});
+
+    const [loading, setLoading] = useState(false);
+
+    const [appointment, setAppointment] = useState({});
+
+    useEffect(() => {
+        setLoading(false);
+
+    }, []);
+
+    /**
+     *
+     *
+     * @param {*} dt
+     */
+    function getSlots(dt, selected_item, callback) {
+        setLoading(true);
+
+    }
+
+    function onChange(value, mode) {
+        setToday(value);
+        setSelected({});
+        getSlots(value, item);
+    }
+
+    /**
+     *
+     * @param {*} slot
+     */
+    const selectSlot = (slot, key) => {
+        setSelected({ item: slot, key });
+    };
+
+    /**
+     *
+     */
+    const onSlotConfirm = () => {
+
+    };
+
+    return (
+        <>
+            <section className="slots page">
+                <div className="page-content">
+                    {/* <Title level={3}>Select an appointment</Title> */}
+
+                    <div className="calendar-wrapper">
+                        <div className="left">
+
+                            <div className="top-bar">
+
+                                <div className="selected-package-container">
+                                    {/* <SelectedPackage /> */}
+
+                                </div>
+
+                                <div className="notice-card card">
+
+                                    <Title level={5}>
+                                        <InfoCircleOutlined /> Note
+                                    </Title>
+
+                                    <p>
+                                        Choose a convenient date and time to conduct the screening.
+
+                                        {/* You have <h3>
+{days}
+</h3> days remaining to complete this process. */}
+                                    </p>
+
+                                    {/* <Link to="/change-password">
+                                        Learn More
+                                    </Link> */}
+
+                                </div>
+                            </div>
+
+
+
+                            <div className="time-slot-container">
+                                {loading ? (
+                                    <div className="loading-text">
+                                        <p>Loading slots</p>
+
+                                        <Skeleton />
+                                    </div>
+                                ) : (
+                                    <div className="calendar-container">
+                                        <Card className="calendar">
+                                            {/* Calendar */}
+                                            <Calendar
+                                                disabledDate={(current) => {
+                                                    return current.diff(moment(), 'hours') < 0;
+                                                }}
+                                                value={today}
+                                                fullscreen={false}
+                                                onChange={onChange}
+                                            />
+                                            {/* Calendar Ends */}
+                                        </Card>
+
+                                        <div className="calendar-slots">
+                                            <p>When do you want to schedule the appointment ?</p>
+
+                                            <div className="time-slots">
+                                                {available.map((entry, key) => (
+                                                    <div
+                                                        className={`item ${key === selected.key ? 'active' : ''} ${entry.booked ? 'booked' : ''}`}
+                                                        key={key}
+                                                        onClick={() => !entry.booked && selectSlot(entry, key)}
+                                                    >
+                                                        {/* {moment(entry.as_starttime).format('HH:mm A')} */}
+                                                        {entry.as_starttime}
+                                                    </div>
+                                                ))}
+                                            </div>
+                                            {available.length ? (
+                                                <>
+                                                    <Button type="primary" onClick={onSlotConfirm}>
+                                                        Proceed
+                                                    </Button>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Empty description={false} />
+                                                    <p className="text-center">No slots available</p>
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+/**
+ *
+ * @returns
+ */
+// function SelectedPackage() {
+//     var params = Location.search();
+
+//     const [selected, setSelected] = useState({});
+
+//     const [loading, setLoading] = useState(false);
+
+//     useEffect(() => {
+//         getItems();
+//     }, []);
+
+//     /**
+//      * Get the master data to show options for the user
+//      */
+//     function getItems() {
+//         setLoading(true);
+
+//         Items.getItems(params.da_packagetypevalue).then((result) => {
+
+//             console.log(result);
+
+//             // setSelected(result.filter((record) => record.itm_active === 'Y'));
+
+//             setSelected(result)
+
+//             setLoading(false);
+//         });
+//     }
+
+//     return (
+//         <div className="card card-shadow selected-package">
+//             <Title level={4}>Packages Selected</Title>
+
+//             {loading ? (
+
+//                 <>Loading</>
+//             )
+//                 : (
+//                     <>
+//                         <div className="section-content">
+//                             <div className="section-row">
+//                                 <div className="section-label">
+//                                     <Text type="secondary">{selected.itm_desc}</Text>
+//                                 </div>
+//                                 <div className="section-value">
+//                                     <strong>{selected.ir_rate}</strong>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </>
+//                 )}
+//         </div>
+//     );
+// }

package/core/lib/modules/business/slots/slots.scss

@@ -0,0 +1,108 @@
+/**
+**/
+
+.slots {
+    .calendar-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        margin: 10px 0px;
+
+        .left {
+            width: 100%;
+
+            .top-bar {
+                display: flex;
+                @media only screen and (max-width: 500px) {
+                    flex-direction: column-reverse;
+                }
+
+                .selected-package-container {
+                    width: 100%;
+                    margin-right: 10px;
+                    @media only screen and (max-width: 500px) {
+                        margin-right:0px
+                    }
+                }
+
+                .notice-card {
+                   flex-basis: 50%;
+                   margin:0px 0px;
+                }
+            }
+           
+
+
+            // max-width: 420px;
+            // flex-basis: 40%;
+        }
+
+        .time-slot-container {
+            padding: 10px;
+            @media only screen and (max-width: 500px) {
+                padding:0px;
+            }
+            // flex-basis: 60%;
+            button {
+                margin: 20px 10px;
+            }
+
+            .calendar-container {
+                display: flex;
+                @media only screen and (max-width: 500px) {
+                    flex-direction: column;
+                }
+                .calendar {
+                    flex-basis: 50%;
+                }
+
+                .calendar-slots {
+                    padding: 0px 10px;
+                    flex-basis: 50%;
+                    margin-top: 15px;
+                }
+            }
+        }
+
+        .loading-text {
+            padding: 0px 12px;
+        }
+
+        .time-slots {
+            flex-grow: 1;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+
+            .item {
+                width: 90px;
+                cursor: pointer;
+                border: 1px solid #d9d8d8;
+                padding: 12px;
+                margin: 4px 8px;
+                border-radius: 4px;
+                text-align: center;
+
+                &:hover {
+                    border-color: #a2a2a2;
+                }
+                &.active {
+                    color: white;
+                    background-color: #1a90ff;
+                    font-weight: bold;
+                    border-color: #1a90ff;
+
+                    &:hover {
+                        border-color: #1a90ff;
+                        // border: none;
+                    }
+                    // border-color: #8cbeee;
+                }
+
+                &.booked {
+                    background-color: #e7e7e7;
+                }
+            }
+        }
+    }
+}

package/core/lib/modules/forms/components/field-customizer/field-customizer.js

@@ -0,0 +1,139 @@
+/**
+ * Form Display Component 
+ * 
+ * @description Component to replace any custom form that you require to have in the project
+ * @author Ashique Mohammed
+ * @version 0.0.1
+ * @date 28/01/2023
+ * 
+ */
+
+import React, { useEffect, useState, Fragment, useContext } from "react";
+
+import { Input, Form, Switch, Modal } from 'antd';
+
+import { Button } from "../../../../elements";
+
+import { ConfirmModal } from './../../../../components/'
+
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+import ScriptInput from './../../../../components/script-input/script-input';
+
+import './field-customizer.scss';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 8 },
+};
+
+
+/**
+ * Customize the field to control its output , validity and more
+ */
+function FieldCustomizer({ field, onFieldUpdate, onFieldRemove, index }) {
+
+    const [form] = Form.useForm();
+
+    // Form Initial values for configuring
+    let formValues = field;
+
+    const [visible, setVisible] = useState(false);
+
+    /**
+     * On Submit of the form
+     * 
+     * @param {*} values 
+     */
+    const onFinish = (values) => {
+        console.log(values);
+
+        onFieldUpdate(index, field, values);
+
+        setVisible(false);
+    }
+
+    /**
+     * On edit of field
+     */
+    const onEdit = () => {
+        setVisible(true);
+    }
+
+    /**
+     * On delete of field
+     */
+    const onDelete = () => {
+
+        onFieldRemove(index);
+    }
+
+    return (<div className="field-customizer">
+
+        {/* <div className="actions">
+
+            <Button className={"field-editor"} size="small" onClick={onEdit}>
+                <EditOutlined style={{ fontSize: 12 }} />
+                Hello
+            </Button>
+
+            <ConfirmModal callback={onDelete} caption={<DeleteOutlined style={{ fontSize: 12 }} />}>
+                Delete
+            </ConfirmModal>
+
+        </div> */}
+
+        <Modal
+            width={'50%'}
+            header={null}
+            destroyOnClose
+            className=""
+            visible={visible}
+            title={'Configure Field'}
+            footer={null}
+            onCancel={() => { setVisible(false); }}>
+
+            <Form
+                name="form-configurator"
+                form={form}
+                {...layout}
+                onFinish={onFinish}
+                layout="vertical"
+
+                initialValues={{
+                    ...formValues,
+                    required: true
+                }}>
+
+                <Form.Item label="Caption" name="caption" required tooltip="Caption for the field">
+                    <Input placeholder="Enter Caption" />
+                </Form.Item>
+
+                <Form.Item label="Required" name="required" required tooltip="Is this a mandatory field?">
+                    <Switch placeholder="Select required" />
+                </Form.Item>
+
+                <Form.Item label="Field" name="field" required tooltip="Is this a mandatory field?">
+                    <Input placeholder="Enter field" />
+                </Form.Item>
+
+                <Form.Item label="On Change" name="on_change" required tooltip="Is this a mandatory field?">
+
+                    <ScriptInput callback={(script) => {
+
+                        console.log(script);
+
+                    }} />
+
+                </Form.Item>
+
+                {/* <Form.Item> */}
+                <Button htmlType="submit" type="primary">Submit</Button>
+                {/* </Form.Item> */}
+
+            </Form>
+        </Modal>
+    </div>)
+}
+
+export default FieldCustomizer;