ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

package/core/lib/components/portlet-table/portlet-table.js

@@ -1,63 +1,63 @@
-/**
- * Component used for Table
- *
- * @author Ashique
- *
- * Ensure to follow a minimal standard
- */
-
-import React, { useState, useEffect } from "react";
-
-import TableData from "./components/table-data/table-data";
-
-import TableActions from "./components/table-actions/table-actions";
-
-import "./portlet-table.scss";
-
-export default function PortletTable({
-  columns = [],
-  records = [],
-  actions = [],
-}) {
-  useEffect(() => {
-    adjustWidth();
-  }, []);
-
-  function adjustWidth() {
-    // According to action width
-    // width of table is assigned
-
-    const tableBody = document.getElementsByClassName("portlet-table")[0];
-
-    if (tableBody) {
-      var bodyWidth = tableBody.clientWidth;
-      var action = document.getElementsByClassName("actions-table")[0];
-
-      var actionWidth = 0;
-
-      if (action) {
-        actionWidth = action.clientWidth;
-      }
-
-      var percent = bodyWidth - actionWidth;
-
-      var tableContent = document.getElementsByClassName("table-data")[0];
-
-      tableContent.setAttribute("style", "width:" + percent + "px");
-    }
-  }
-
-  return (
-    <div className="portlet-table">
-      {/* Table Data */}
-      <TableData columns={columns} records={records} />
-      {/* Table Data Ends */}
-
-      {/* Table Actions */}
-      {actions.length ? (
-        <TableActions records={records} actions={actions} />
-      ) : null}
-      {/* Table Actions Ends */}
-    </div>
-  );
-}
+/**
+ * Component used for Table
+ *
+ * @author Ashique
+ *
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from "react";
+
+import TableData from "./components/table-data/table-data";
+
+import TableActions from "./components/table-actions/table-actions";
+
+import "./portlet-table.scss";
+
+export default function PortletTable({
+  columns = [],
+  records = [],
+  actions = [],
+}) {
+  useEffect(() => {
+    adjustWidth();
+  }, []);
+
+  function adjustWidth() {
+    // According to action width
+    // width of table is assigned
+
+    const tableBody = document.getElementsByClassName("portlet-table")[0];
+
+    if (tableBody) {
+      var bodyWidth = tableBody.clientWidth;
+      var action = document.getElementsByClassName("actions-table")[0];
+
+      var actionWidth = 0;
+
+      if (action) {
+        actionWidth = action.clientWidth;
+      }
+
+      var percent = bodyWidth - actionWidth;
+
+      var tableContent = document.getElementsByClassName("table-data")[0];
+
+      tableContent.setAttribute("style", "width:" + percent + "px");
+    }
+  }
+
+  return (
+    <div className="portlet-table">
+      {/* Table Data */}
+      <TableData columns={columns} records={records} />
+      {/* Table Data Ends */}
+
+      {/* Table Actions */}
+      {actions.length ? (
+        <TableActions records={records} actions={actions} />
+      ) : null}
+      {/* Table Actions Ends */}
+    </div>
+  );
+}

package/core/lib/components/portlet-table/portlet-table.scss

@@ -1,90 +1,90 @@
-.portlet-table {
-    padding: 0px !important;
-
-    // overflow-y: scroll;
-    display: flex;
-
-    .table-data {
-        overflow-y: scroll;
-        padding: 0px;
-    }
-
-    .actions-table {
-        th,
-        td {
-            white-space: nowrap;
-            padding: 6px;
-            // font-size: 10px;
-        }
-    }
-
-    table.table-body {
-        width: 100%;
-
-        border-collapse: collapse;
-        // margin: 25px 0;
-        font-size: 0.9em;
-        font-family: sans-serif;
-        min-width: 400px;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-        overflow: scroll;
-
-        thead tr {
-            background-color: #fafafa;
-            // background-color: #009879;
-            // color: #ffffff;
-            text-align: left;
-            position: sticky;
-            top: 0;
-            z-index: 99;
-            position: -webkit-sticky;
-        }
-
-        th,
-        td {
-            white-space: nowrap;
-            padding: 6px;
-            // font-size: 10px;
-        }
-
-        th {
-            padding: 9px 14px;
-            border-bottom: 1px solid #e0e0e0;
-        }
-
-        tbody tr {
-            // height: 60px;
-
-            cursor: pointer;
-            border-bottom: 1px solid #dddddd;
-            &:hover {
-                background-color: #f1faff;
-            }
-            &:nth-of-type(even) {
-                background-color: #f3f3f3;
-            }
-            &:last-of-type {
-                border-bottom: 2px solid #009879;
-            }
-            &.active-row {
-                font-weight: bold;
-                color: #009879;
-            }
-            td {
-                &.quantity {
-                    width: 100px;
-                }
-            }
-        }
-
-        &.cart {
-            thead tr {
-                background-color: #003d98;
-            }
-            th,
-            td {
-                padding: 8px 12px;
-            }
-        }
-    }
-}
+.portlet-table {
+    padding: 0px !important;
+
+    // overflow-y: scroll;
+    display: flex;
+
+    .table-data {
+        overflow-y: scroll;
+        padding: 0px;
+    }
+
+    .actions-table {
+        th,
+        td {
+            white-space: nowrap;
+            padding: 6px;
+            // font-size: 10px;
+        }
+    }
+
+    table.table-body {
+        width: 100%;
+
+        border-collapse: collapse;
+        // margin: 25px 0;
+        font-size: 0.9em;
+        font-family: sans-serif;
+        min-width: 400px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+        overflow: scroll;
+
+        thead tr {
+            background-color: #fafafa;
+            // background-color: #009879;
+            // color: #ffffff;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 99;
+            position: -webkit-sticky;
+        }
+
+        th,
+        td {
+            white-space: nowrap;
+            padding: 6px;
+            // font-size: 10px;
+        }
+
+        th {
+            padding: 9px 14px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        tbody tr {
+            // height: 60px;
+
+            cursor: pointer;
+            border-bottom: 1px solid #dddddd;
+            &:hover {
+                background-color: #f1faff;
+            }
+            &:nth-of-type(even) {
+                background-color: #f3f3f3;
+            }
+            &:last-of-type {
+                border-bottom: 2px solid #009879;
+            }
+            &.active-row {
+                font-weight: bold;
+                color: #009879;
+            }
+            td {
+                &.quantity {
+                    width: 100px;
+                }
+            }
+        }
+
+        &.cart {
+            thead tr {
+                background-color: #003d98;
+            }
+            th,
+            td {
+                padding: 8px 12px;
+            }
+        }
+    }
+}

package/core/lib/components/progress-bar/progress-bar.js

@@ -1,58 +1,58 @@
-/**
- * Component used for Table Actions
- * 
- * @author Ashique
- * 
- * Ensure to follow a minimal standard
- */
-
-import React, { useState, useEffect, useContext } from "react";
-
-import PropTypes from "prop-types";
-
-import './progress-bar.scss';
-
-import { GlobalContext } from "../../Store";
-
-/**
- * ProgressBar Component
- * @param {boolean} isLoading - Indicates if loading is in progress
- * @returns JSX.Element
- */
-export default function ProgressBar({ isLoading }) {
-    // State to manage progress
-    const [progress, setProgress] = useState(0);
-
-    useEffect(() => {
-        let interval;
-
-        if (isLoading) {
-
-            setProgress(10); // Start progress
-
-            interval = setInterval(() => {
-                setProgress((prev) => (prev < 90 ? prev + 10 : prev)); // Increase gradually
-            }, 500);
-        } else {
-            setProgress(100); // Complete progress
-
-            setTimeout(() => setProgress(0), 500); // Hide after completion
-        }
-
-        return () => clearInterval(interval);
-    }, [isLoading]);
-
-    const { state } = useContext(GlobalContext);
-
-    return (
-        <div className="progress-bar-container">
-            <div className="progress-bar" style={{ width: `${progress}%`, background: state.theme.colors.progressBar }}>
-            </div>
-        </div>
-    );
-}
-
-ProgressBar.propTypes = {
-    isLoading: PropTypes.bool.isRequired,
-};
-
+/**
+ * Component used for Table Actions
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect, useContext } from "react";
+
+import PropTypes from "prop-types";
+
+import './progress-bar.scss';
+
+import { GlobalContext } from "../../Store";
+
+/**
+ * ProgressBar Component
+ * @param {boolean} isLoading - Indicates if loading is in progress
+ * @returns JSX.Element
+ */
+export default function ProgressBar({ isLoading }) {
+    // State to manage progress
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        let interval;
+
+        if (isLoading) {
+
+            setProgress(10); // Start progress
+
+            interval = setInterval(() => {
+                setProgress((prev) => (prev < 90 ? prev + 10 : prev)); // Increase gradually
+            }, 500);
+        } else {
+            setProgress(100); // Complete progress
+
+            setTimeout(() => setProgress(0), 500); // Hide after completion
+        }
+
+        return () => clearInterval(interval);
+    }, [isLoading]);
+
+    const { state } = useContext(GlobalContext);
+
+    return (
+        <div className="progress-bar-container">
+            <div className="progress-bar" style={{ width: `${progress}%`, background: state.theme.colors.progressBar }}>
+            </div>
+        </div>
+    );
+}
+
+ProgressBar.propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+};
+

package/core/lib/components/progress-bar/progress-bar.scss

@@ -1,15 +1,15 @@
-.progress-bar-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 3px;
-    // background: transparent;
-    z-index: 1000;
-
-    .progress-bar {
-        height: 100%;
-        // background: #24aeb8;
-        transition: width 0.3s ease-in-out;
-    }
-}
+.progress-bar-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    // background: transparent;
+    z-index: 1000;
+
+    .progress-bar {
+        height: 100%;
+        // background: #24aeb8;
+        transition: width 0.3s ease-in-out;
+    }
+}

package/core/lib/components/request-form/request-form.js

@@ -1,110 +1,110 @@
-/**
- * Generic Form create accepts an array of fields to update any resource
- */
-
-import React, { useState, useContext } from 'react';
-
-import { message } from 'antd';
-
-import { withRouter } from 'react-router-dom';
-
-// import './form-creator.scss'
-
-import { GlobalContext } from '../../Store';
-
-import FirebaseUtils from './../../utils/firebase.utils';
-
-import { FormCreator } from './../../../lib/components/';
-
-function RequestForm({
-    booking,
-    step,
-    model,
-    formContent,
-    modelIndex,
-    callback
-}) {
-    const [content, setContent] = useState(formContent);
-
-    const { user } = useContext(GlobalContext);
-
-    const onDataCollection = (values) => {
-        // If there is a customer validation that needs
-        // to be done , we have to handle it here
-        //
-        if (step.formValidation) {
-            if (step.formValidation.validation(formContent)) {
-                message.error(step.formValidation.message);
-
-                return new Promise((resolve, reject) => {
-                    resolve(true);
-                });
-            }
-        }
-
-        let params = {
-            [model]: {
-                ...content[model],
-                ...values
-            }
-        };
-
-        if (step.post_status) {
-            params[model].status = step.post_status;
-        }
-
-        if (step.extraParams) {
-            params = {
-                ...params,
-                // Note extra Params will override every previous value if the same key is used
-                ...step.extraParams(content, params[model])
-            };
-        }
-
-        // Building the notification object
-
-        if (step.notification) {
-            params.lastEvent = {
-                title: step.notification(content, user, values).title,
-                body: step.notification(content, user, values).body
-            };
-        }
-
-        return FirebaseUtils.updateRequestGeneric(
-            content.id,
-            params,
-            `${model} update :`,
-            values.remarks,
-            model
-        ).then(() => {
-            message.success(`${model} details updated`);
-
-            // Custom Actions to be done on submit
-
-            if (step.onSubmit) {
-                step.onSubmit &&
-                    step.onSubmit(content, params[model], booking).then(() => {
-                        callback(params, values);
-                    });
-            } else {
-                callback(params, values);
-            }
-        });
-    };
-
-    return (
-        <section className="request-form">
-            {step.fields && step.fields.length ? (
-                <FormCreator
-                    config={step}
-                    formContent={formContent[model]}
-                    modelIndex={modelIndex}
-                    model={model}
-                    onSubmit={onDataCollection}
-                />
-            ) : null}
-        </section>
-    );
-}
-
-export default withRouter(RequestForm);
+/**
+ * Generic Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useContext } from 'react';
+
+import { message } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+// import './form-creator.scss'
+
+import { GlobalContext } from '../../Store';
+
+import FirebaseUtils from './../../utils/firebase.utils';
+
+import { FormCreator } from './../../../lib/components/';
+
+function RequestForm({
+    booking,
+    step,
+    model,
+    formContent,
+    modelIndex,
+    callback
+}) {
+    const [content, setContent] = useState(formContent);
+
+    const { user } = useContext(GlobalContext);
+
+    const onDataCollection = (values) => {
+        // If there is a customer validation that needs
+        // to be done , we have to handle it here
+        //
+        if (step.formValidation) {
+            if (step.formValidation.validation(formContent)) {
+                message.error(step.formValidation.message);
+
+                return new Promise((resolve, reject) => {
+                    resolve(true);
+                });
+            }
+        }
+
+        let params = {
+            [model]: {
+                ...content[model],
+                ...values
+            }
+        };
+
+        if (step.post_status) {
+            params[model].status = step.post_status;
+        }
+
+        if (step.extraParams) {
+            params = {
+                ...params,
+                // Note extra Params will override every previous value if the same key is used
+                ...step.extraParams(content, params[model])
+            };
+        }
+
+        // Building the notification object
+
+        if (step.notification) {
+            params.lastEvent = {
+                title: step.notification(content, user, values).title,
+                body: step.notification(content, user, values).body
+            };
+        }
+
+        return FirebaseUtils.updateRequestGeneric(
+            content.id,
+            params,
+            `${model} update :`,
+            values.remarks,
+            model
+        ).then(() => {
+            message.success(`${model} details updated`);
+
+            // Custom Actions to be done on submit
+
+            if (step.onSubmit) {
+                step.onSubmit &&
+                    step.onSubmit(content, params[model], booking).then(() => {
+                        callback(params, values);
+                    });
+            } else {
+                callback(params, values);
+            }
+        });
+    };
+
+    return (
+        <section className="request-form">
+            {step.fields && step.fields.length ? (
+                <FormCreator
+                    config={step}
+                    formContent={formContent[model]}
+                    modelIndex={modelIndex}
+                    model={model}
+                    onSubmit={onDataCollection}
+                />
+            ) : null}
+        </section>
+    );
+}
+
+export default withRouter(RequestForm);