ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/menu-context/menu-context.js

@@ -0,0 +1,70 @@
+/**
+ * 
+ * Store as an initial local store for the app
+ * 
+ * All the data that is needed accross the app like user, openProperties etc goes from here.
+ * 
+ */
+
+import React, { useEffect, useState, createContext, useReducer } from 'react';
+
+
+
+/**
+ * Initial State to be stored
+ * accross the app
+ * 
+ * For now maintaining only user data 
+ * 
+ * #todo Compare the setup with state manager utility 
+ * 
+ */
+const initialState = {
+    menu: {}
+};
+
+/**
+ * Context for sharing state accross app
+ */
+export const MenuGlobalContext = createContext(initialState);
+
+let app = {};
+
+/**
+ *  Provider links the reducer and context
+ */
+export const GlobalMenuProvider = ({ children, menu }) => {
+
+    // console.log(menu);
+
+    // Store that is accessible accross the app
+    // let store = { user: state.user, slot: state.slot, dispatch: dispatch, selectedLocation: state.selectedLocation }
+    let store = {
+        menu
+    };
+
+    return (<MenuGlobalContext.Provider value={store}>
+        {children}
+    </MenuGlobalContext.Provider>)
+
+}
+
+/**
+ * Reducer for managing the state
+ * 
+ * @param state 
+ * @param action 
+ */
+export const AppReducer = (state, action) => {
+
+    switch (action.type) {
+
+
+        case 'menu':
+
+            return { ...state, menu: action.payload };
+
+        default:
+            return state;
+    }
+}

package/core/lib/components/menu-template/menu-template.js

@@ -0,0 +1,250 @@
+import React, { useState, Suspense, useEffect, lazy, Component } from 'react';
+
+import { BaseLoader } from './../../../lib/models/';
+
+import { GlobalContext } from '../../Store';
+
+import { GlobalMenuProvider } from './../menu-context/menu-context';
+
+import './menu-template.scss';
+
+export default class MenuTemplate extends Component {
+
+    constructor(props) {
+
+        super(props);
+
+        this.state = {
+            loading: false,
+            model: null,
+            view: [],
+            component: null,
+        };
+
+        this.loadedComponent = () => null;
+        this.loadedModel = () => null;
+        this.menuDetail = () => { };
+    }
+
+    /**
+     * 
+     */
+    componentDidMount() {
+
+        // console.log("Initialising menu", menu.name);
+
+        var genericComponents = require('./../../modules/');
+
+        var genericModels = require('./../../models/')
+
+        const { menu, callback, CustomComponents, CustomModels } = this.props;
+
+        var allComponents = {
+            ...genericComponents,
+            ...CustomComponents,
+        }
+
+        var allModels = {
+            ...genericModels,
+            ...CustomModels
+        }
+
+        let BaseModel = new BaseLoader(menu.model);
+
+        if (menu && menu.page && ((menu.page.identifier) || (menu.page.path))) {
+
+            let identifier = menu.page.identifier || menu.page.path;
+
+            if (identifier && allComponents[identifier]) {
+
+                this.loadedComponent = allComponents[identifier]
+
+            }
+        }
+
+
+        if (menu && menu.model_id) {
+
+            if (menu.model_id && allModels[menu.model.name]) {
+
+                this.loadedModel = allModels[menu.model.name]
+
+            } else {
+
+                // BaseModel = this.loadedModel[menu.model.name];
+
+                this.loadedModel = BaseModel
+
+            }
+        }
+
+        callback({ menu, model: this.loadedModel });
+
+        this.setState({ loading: true, component: this.loadedComponent, model: this.loadedModel });
+
+    }
+
+    render() {
+
+        const { props } = this;
+
+        const { menu } = this.props;
+
+        const { loading, model, menuDetail } = this.state;
+
+        const ComponentLoaderForParticulatMenu = this.loadedComponent;
+
+        // Parse the attrbutes for the menu to customize the menu
+        let attributes = {};
+
+        if (menu.attributes) {
+            if (typeof menu.attributes === 'string') {
+
+                attributes = JSON.parse(menu.attributes);
+            }
+        }
+
+        const { user, state } = useContext(GlobalContext);
+
+        return (
+            <div className="menu-template" style={{ background: state.theme.colors.colorTableBg }}>
+                {loading && ComponentLoaderForParticulatMenu && model ? (
+                    <GlobalMenuProvider menu={menu}>
+
+                        {/* Page Container */}
+                        {/* # Note
+                        
+                        Page Container can be bought here but here but have to bind with the refresh 
+                        action in the page . This would need to pass the handle as reference to the child
+                        This should avoid use of page container in every component 
+                        
+
+                        // Make sure note to make overruse this area
+
+                        */}
+                        {/* <PageContainer menu={menu} title={menu.caption}> */}
+
+                        {/* We extend the menu template to mould the components to control access to the page */}
+                        {/* <FingerprintProtected menu={menu}> */}
+
+                        <ComponentLoaderForParticulatMenu
+                            {...props}
+                            menu={menu}
+                            model={model}
+
+                            {...attributes}
+
+                            {...props}
+                            menuDetail={menuDetail}
+                        />
+
+                        {/* </FingerprintProtected> */}
+
+                        {/* </PageContainer> */}
+
+                    </GlobalMenuProvider>
+
+                ) : null}
+            </div>
+        );
+    }
+}
+
+
+
+
+
+// import LoadAsyncComponent from './../../Async/async';
+
+// export default function MenuTemplate({ menu, ...props }) {
+
+
+//     const [loading, setLoading] = useState(false);
+
+//     // Model
+//     const [model, setModel] = useState(() => null);
+
+//     const [view, setView] = useState([]);
+
+//     const [component, setComponent] = useState(() => null);
+
+//     useEffect(() => {
+//         // if (menu) {
+//         // }
+
+//         async function loadComponent() {
+//             // Path to the component
+//             // let path = menu.page.path;
+//             console.log(menu);
+
+//             const BaseModel = new BaseLoader(menu.model);
+
+//             // Load the component with path
+//             let loadedComponent = LoadAsyncComponent(() => require(`./../../../business/common/${menu.page.path}`));
+
+//             let loadedModel = require('./../../../models/');
+
+//             // const DynamicComponent = lazy(() => import(`./${component_path}`).catch(() => {}));
+//             //
+
+//             // let path = 'modules/common/resources/generic/generic-list/generic-list'
+
+//             // const DynamicComponent = lazy(() => import(`./../../../${path}`).catch(() => {}));
+
+//             // var component_url = `./../../../` + `/business/common/resources/generic/generic-list/generic-list`;
+
+//             // loadedcomponent = require(`${component_path}`);
+
+//             // loadedcomponent = LoadAsyncComponent(() => require(`${component_path}`));
+
+//             // var component_url = '/src/business/common/resources/generic/generic-list/generic-list';
+
+//             // loadedcomponent = await import(component_url);
+
+//             // loadedcomponent = DynamicComponent;
+
+//             // Load the models
+//             // loadedModel = require('./../../../models/');
+
+//             setComponent(loadedComponent);
+
+//             setModel(BaseModel);
+//             // setModel(loadedModel[menu.model.name]);
+
+//             setLoading(true);
+
+//             // list promises from menu
+//             // const componentPromises = [menu].map(async (menu) => {
+//             //     console.log(menu.page.path);
+
+//             //     const View = await importView(menu.page.path);
+
+//             //     console.log(View);
+
+//             //     return <View key={''} {...menu} />;
+//             // });
+
+//             // Promise.all(componentPromises).then(setView);
+//         }
+
+//         loadComponent();
+//     }, []);
+
+//     const ComponentLoaderForParticulatMenu = component;
+
+//     // const View = view;
+
+//     console.log(ComponentLoaderForParticulatMenu);
+
+//     return (
+//         // <Suspense fallback={<div>Loading...</div>}>{OtherComponent ? <OtherComponent menu={menu} model={model} {...props} menuDetail={menuDetail} /> : null}</Suspense>
+//         // <div className="menu-template">
+//         //     {View && model ? <View.default.WrappedComponent menu={menu} model={model} {...props} menuDetail={menuDetail} /> : null}
+//         // </div>
+//         loading && ComponentLoaderForParticulatMenu && model ? (
+//             <ComponentLoaderForParticulatMenu menu={menu} model={model} {...props} menuDetail={menuDetail} />
+//         ) : null
+//     );
+// }
+
+// const DynamicComponent = (subreddit) => lazy(() => import(`${subreddit}`).catch(() => {}));

package/core/lib/components/menu-template/menu-template.scss

@@ -0,0 +1,9 @@
+.menu-template {
+    margin-top:53px;
+    padding: 8px;
+
+    @media only screen and (max-width: 768px) {
+        padding: 16px;
+    }
+    // height: 100%;
+}

package/core/lib/components/modal-search/modal-search.js

@@ -0,0 +1,153 @@
+import React, { useState, useContext } from "react";
+
+import { Link } from "react-router-dom";
+
+import "./modal-search.scss";
+
+import FirebaseUtils from "./../../utils/firebase.utils";
+
+import { Modal, Input, Card } from "antd";
+
+import { GlobalContext } from "./../../Store";
+
+import {
+  SearchOutlined,
+  BulbOutlined,
+  UserOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+
+export default function ModalSearch() {
+  const { user } = useContext(GlobalContext);
+  //Hooks
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const [isResultsVisible, setResultsVisible] = useState(false);
+
+  const [results, setResults] = useState([]);
+
+  const [location, setLocation] = useState(user.locations[0]);
+
+  const [inputCount, setinputCount] = useState(10);
+
+  //Modal methods
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleOk = () => {
+    setIsModalVisible(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+    setResultsVisible(false);
+  };
+  const getResults = (query) => {
+    var queries = [
+      {
+        field: "Contact Number",
+        value: query,
+      },
+    ];
+
+    FirebaseUtils.getAllListing(
+      queries,
+      "bookings",
+      "bookings",
+      "bookingId"
+    ).then((result) => {
+      setResults(
+        result.all.filter((booking) => {
+          return !booking.isCancelled;
+        })
+      );
+    });
+  };
+
+  //Handle search query
+  const handleOnInputChange = (e) => {
+    setResultsVisible(true);
+    //Trigger getResults() only when 10 characters are given
+    setinputCount(e.target.value.length);
+    if (e.target.value.length == 10) {
+      getResults(e.target.value);
+    } else {
+      setResultsVisible(false);
+    }
+  };
+
+  //Results to render
+  let itemsToRender;
+  if (results) {
+    itemsToRender = results.map((item) => {
+      return (
+        <ul className="results-list">
+          <li key={item["Booking No"]}>
+            <span>
+              <UserOutlined style={{ paddingRight: "10px" }} />
+              {item["Name of the Customer"]}
+            </span>
+            <span>
+              <Link
+                to={`/${location}/bookings/${item["Booking No"]}`}
+                onClick={handleOk}
+              >
+                View Booking <RightOutlined />
+              </Link>
+            </span>
+          </li>
+        </ul>
+      );
+    });
+  }
+
+  return (
+    <>
+      <span className="show-search">
+        <SearchOutlined style={{ marginRight: "1em" }} onClick={showModal} />
+      </span>
+      <Modal
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[]}
+        className="spotlight-container spotlight-search"
+      >
+        <Input
+          size="large"
+          placeholder=""
+          autoFocus="on"
+          maxLength="10"
+          prefix={<SearchOutlined />}
+          onChange={handleOnInputChange}
+          placeholder={"Type to search"}
+          className={`search-box ${isResultsVisible ? "bottom-border-no-radius" : ""
+            }`}
+
+        />
+        <Card
+          className={`${isResultsVisible ? "visible-item" : "hidden-item"}`}
+        >
+          {itemsToRender.length != 0 ? (
+            itemsToRender
+          ) : (
+
+            <span className="light-text">No Results</span>
+          )}
+        </Card>
+        <span
+          className={`spotlight-search-tip ${isResultsVisible ? "hidden-item" : "visible-item"
+            }`}
+
+        >
+          {" "}
+          <BulbOutlined style={{ marginRight: "10px" }} />
+          {inputCount != 10
+            ? `Enter ${10 - inputCount} more numbers`
+            : "Search by phone number"}
+        </span>
+      </Modal>
+    </>
+  );
+}

package/core/lib/components/modal-search/modal-search.scss

@@ -0,0 +1,79 @@
+.spotlight-search
+{
+    .ant-modal-content {
+    background-color: transparent !important;
+    box-shadow: none !important;
+    &:focus {
+        outline: none;
+    }
+    }
+    .ant-modal-body {
+    padding: 0px !important;
+    background-color: transparent;
+    }
+
+    .search-box {
+    border-radius: 0.5rem !important;
+    border: none !important;
+    padding: 0.8em 1.2em !important;
+    }
+
+    .show-search{
+    margin-right: 1em;
+    }
+
+    .ant-modal-close {
+    display: none !important;
+    }
+    .ant-card {
+    border-radius: 0em 0em 0.5em 0.5em !important;
+    }
+    .ant-modal-footer {
+    display: none;
+    }
+    .bottom-border-no-radius {
+    border-radius: 0.5em 0.5em 0em 0em !important;
+    }
+    .visible-item {
+    display: block;
+    }
+    .hidden-item {
+    display: none;
+    }
+    .spotlight-container {
+    display: flex;
+    flex-direction: column;
+    }
+    .spotlight-search-tip {
+    position: absolute;
+    width: 500px;
+    left: 0;
+    top: 4.5em;
+    font-weight: bold;
+    color: #fff;
+    }
+    .ant-card-body {
+    padding-top: 0.5em !important;
+    }
+    .results-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    li {
+        font-weight: bold;
+        padding: 0.5em 0em 0.5em 0;
+        border-bottom: 1px solid #f5f5f5;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        &:last-child {
+        border: none;
+        padding-bottom: 0;
+        }
+    }
+    }
+    .light-text {
+    color: grey;
+    font-weight: bold;
+    }
+}

package/core/lib/components/modal-wrapper/modal-manager.js

@@ -0,0 +1,16 @@
+
+module.exports = {
+    _currentGlobalLoader: null,
+    registerModal: function (ref) {
+        this._currentGlobalLoader = ref;
+    },
+    openModal: function ({ ...args }) {
+        if (this._currentGlobalLoader) {
+            this._currentGlobalLoader.openModal({ ...args });
+        }
+    },
+    closeModal: function ({ ...args }) {
+        this._currentGlobalLoader.closeModal({ ...args });
+    }
+    
+}

package/core/lib/components/modal-wrapper/modal-wrapper.js

@@ -0,0 +1,108 @@
+/**
+ * Modal wrapper 
+ * Accepts various props such as isVisible(boolean), headerText, modalHeader, modalBody, modalFooter, closeModal(function)
+ * To render header, either pass modalHeader component or header text
+ * rest modalBody and modalFooter is optional
+ * 
+ * e.g. 
+ * <ModalWrap 
+ *    isVisible={isVisible}
+ *    headerText="tesfh" 
+ *    modalBody={() => (<h1> hudgdub</h1>)} 
+ *    closeModal={() => this.setState({ isVisible: false })}
+ * />
+ */
+
+import React, { Component } from 'react';
+
+import { Modal } from 'antd';
+
+import './modal-wrapper.scss';
+
+export default class ModalWrapper extends Component {
+
+    constructor(props) {
+
+        super(props);
+
+        this.state = {
+            ...props,
+            modals: [] // Array maintained for opening multiple modals at the same time
+        }
+    }
+
+    unsafe_componentwillreceiveprops(nextProps) {
+        if (this.state.isVisible != nextProps.isVisible) {
+            this.setState({ isVisible: nextProps.isVisible });
+        }
+    }
+
+    openModal = ({ ...args }) => {
+        let { modals } = this.state;
+        args.isVisible = true;
+        var index = modals.push({ ...args })
+        this.setState({ modals });
+    }
+
+
+    closeModal = (modal, key) => {
+        let { modals } = this.state;
+
+        modals.splice(key, 1);
+
+        this.setState({ modals });
+    }
+
+
+    render() {
+
+        const { modals, size = 'lg' } = this.state;
+
+        return (
+            <div className="modals-wrapper">
+                {
+                    modals.map((modal, key) =>
+
+                        <Modal key={key} size={size} isOpen={modal.isVisible} toggle={() => {
+                            console.log(modal, key);
+                            this.closeModal(modal, key)
+                        }
+                        } className={modal.className} backdrop={this.state.backdrop}>
+
+                            {/* {
+                                modal.modalHeader ?
+                                    <ModalHeader toggle={() => {
+                                        console.log(modal, key);
+                                        this.closeModal(modal, key)
+                                    }}>{modal.modalHeader()}</ModalHeader>
+                                    :
+                                    modal.headerText ?
+                                        <ModalHeader toggle={() => {
+                                            this.closeModal(modal, key)
+
+
+                                        }}>{modal.headerText}</ModalHeader>
+                                        : null
+                            } */}
+
+                            {
+                                modal.modalBody &&
+                                // <ModalBody>
+                                modal.modalBody()
+                                // </ModalBody>
+                            }
+
+                            {/* {
+                                modal.modalFooter &&
+                                <ModalFooter>
+                                    {modal.modalFooter()}
+                                </ModalFooter>
+                            } */}
+                        </Modal>
+                    )
+                }
+
+            </div>
+        )
+    }
+}

package/core/lib/components/modal-wrapper/modal-wrapper.scss

@@ -0,0 +1,14 @@
+
+.modal-body {
+    background: whitesmoke;
+    .form-settings {
+        position: absolute; // top: -5%;
+        top: -45px;
+        // right: 5%;
+        right: 60px;
+    }
+}
+
+.modal-backdrop.show{
+    opacity: .92;
+}