ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,153 +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>
-    </>
-  );
-}
+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

@@ -1,79 +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;
-    }
+.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

@@ -1,16 +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 });
-    }
-    
+
+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 });
+    }
+    
 }