ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/notice-board/notice-board.js

@@ -0,0 +1,132 @@
+
+import React, { useState, useEffect, useContext } from "react";
+
+
+import { Typography } from 'antd';
+
+import "./notice-board.scss";
+
+import { GlobalContext } from "./../../Store";
+
+import moment from 'moment';
+
+// var welcomeLogo = require('./../../../assets/welcome-image.png');
+
+var welcomeLogo = require('./../../../lib/assets/plant.png');
+
+const { Title, Text } = Typography;
+
+
+/**
+ * Function would act as the notice board 
+ */
+export default function NoticeBoard({ steps = [] }) {
+
+    const { user = {} } = useContext(GlobalContext);
+
+    useEffect(() => {
+
+        checkPasswordSecurity();
+
+    }, []);
+
+    /**
+     * 
+     */
+    function checkPasswordSecurity() {
+
+        if (user.passwordChanged) {
+
+        }
+    }
+
+    let hours = (new Date()).getHours();
+
+    let day = 'morning';
+
+    if (hours < 11) {
+
+        day = 'morning';
+
+    } else if (hours > 11 && hours < 16) {
+
+        day = 'afternoon';
+
+
+    } else if (hours > 16 && hours < 21) {
+
+        day = 'evening';
+
+    } else {
+
+        day = 'night';
+
+    }
+
+    var a = moment('2021/5/28');
+
+    var b = moment();
+
+    var days = a.diff(b, 'days') // 1
+
+
+    return (
+        <section className="notice-board">
+
+            <div className="welcome-block card">
+                <div className="content-block">
+
+                    <Title level={4}>
+                        Hello,
+                    </Title>
+
+                    <Title level={3}>
+                        {user.name}
+                    </Title>
+                    <p>Welcome back . Wishing you a good day and good health. </p>
+                </div>
+                <div className="image-block">
+                    {/* <img
+                        className="welcome-logo"
+                        style={{ width: '100px' }}
+                        src={welcomeLogo}
+                        alt="Logo"
+                    /> */}
+                </div>
+            </div>
+
+            {/* Change Password Block */}
+            {/* {
+                !user.passwordChanged
+                    ?
+                    <Link to="/change-password">
+
+                        <div className="change-password-notice card">
+
+                            <Title level={5}>
+                                Change your password
+                            </Title>
+
+                            <p>
+                                To ensure the security of your account please change your password . You have <h3>
+                                    {days}
+                                </h3> days remaining to complete this process.
+                            </p>
+
+                            <Link to="/change-password">
+                                Do it Now
+                            </Link>
+
+                        </div>
+
+                    </Link> : null
+            } */}
+
+            {/* Change Password Block Ends*/}
+
+
+        </section>
+    );
+}
+
+

package/core/lib/components/notice-board/notice-board.scss

@@ -0,0 +1,65 @@
+// Notice Board
+
+.notice-board {
+    .welcome-block {
+        display: flex;
+        border: 1px solid rgb(239, 239, 239);
+        width: 50%;
+        border-radius: 4px;
+        justify-content: space-between;
+        margin-left: 20px;
+        margin-top: 0px;
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+        }
+        .content-block {
+            display: "flex";
+            flex-direction: "column";
+
+            h2.ant-typography {
+                color: #228c48;
+            }
+            h3.ant-typography {
+                margin-top: 0px;
+            }
+
+            .sub-title {
+                @media only screen and (max-width: 768px) {
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .change-password-notice {
+        @media only screen and (min-width: 768px) {
+            max-width: 50%;
+        }
+
+        // max-width: 50%;
+
+        background-color: black;
+        border-radius: 4px;
+        /* margin: 0px; */
+        background: #161f26;
+        border: none;
+        margin: 14px 0px;
+        color: black;
+        box-shadow: 0px 0px 4px 2px #6f6f6f70;
+
+        h3 {
+            display: inline;
+            font-size: 18px;
+            color: orange;
+        }
+
+        h5.ant-typography {
+            color: #22c822;
+        }
+
+        p {
+            color: white;
+            font-size: 14px;
+        }
+    }
+}

package/core/lib/components/page-container/page-container.js

@@ -0,0 +1,55 @@
+
+import React, { useEffect, useState } from 'react';
+
+import { Skeleton, Title } from './../../elements/'
+
+import { Space, Typography, Button } from 'antd';
+
+// import { CustomActions } from '../../..';
+
+import './page-container.scss';
+
+// const { Title } = Typography;
+
+/**
+ * 
+ * Page Container
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export default function PageContainer({ title, loading, onRefresh, children, context, menu = {} }) {
+
+    return (<div className='page-container'>
+
+        <div className="page-header">
+
+            <Title level={4}>
+                {title}
+            </Title>
+
+
+            <div className="page-actions">
+
+                <Button
+                    size={'small'}
+                    onClick={onRefresh}
+                    type="secondary">
+                    Refresh
+                </Button>
+
+                {/* <CustomActions menu={menu} record={context} /> */}
+
+            </div>
+
+        </div>
+
+        {/* For loading we have to show skeleton */}
+        {loading ? <Skeleton /> : children}
+
+        {/* Entire Children */}
+        {/* {children} */}
+        {/* Entire Children Ends */}
+
+    </div>)
+}

package/core/lib/components/page-container/page-container.scss

@@ -0,0 +1,8 @@
+.page-container {
+    
+    .page-header {
+    }
+    .page-actions {
+        display: flex;
+    }
+}

package/core/lib/components/page-header/page-header.js

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+import './page-header.scss';
+
+
+import {
+    LeftOutlined
+} from '@ant-design/icons';
+
+import { BrowserRouter as Router, Route, Link, NavLink } from "react-router-dom";
+
+export default function Header(props) {
+
+    const { onBack } = props;
+
+    return (
+        <span className="header">
+            <span className="back-icon">
+                <LeftOutlined />
+            </span>
+        </span>
+    );
+}

package/core/lib/components/page-header/page-header.scss

@@ -0,0 +1,18 @@
+.header {
+    cursor: pointer;
+    // padding: 10px;
+    // border-radius: 4px;
+    // border: 1px solid #dcdcdc;
+    margin-right: 10px;
+    &:hover {
+      border-color: #c1c1c1;
+    }
+
+    .back-icon{
+      .fas {
+        font-size: 18px;
+        color: #000000;
+      }
+    }
+  }
+  

package/core/lib/components/pdf-viewer/pdf-viewer.js

@@ -0,0 +1,56 @@
+/**
+ *
+ * PDF Viewer
+ *
+ * @author Ashique Mohammed
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { Viewer, Worker } from '@react-pdf-viewer/core';
+
+import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
+
+import '@react-pdf-viewer/default-layout/lib/styles/index.css';
+
+// Import the styles
+import '@react-pdf-viewer/core/lib/styles/index.css';
+
+import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
+
+/**
+ * @param {Object}root0
+ * @param root0.url
+ * @param root0.defaultScale
+ * @param root0.props
+ * @returns {JSX.Element}  JSX content
+ */
+export default function PdfViewer({ url, defaultScale, ...props }) {
+  // Default layout
+  const defaultLayoutPluginInstance = defaultLayoutPlugin();
+
+  const [defaultValue, setDefaultValue] = useState(1.0);
+
+  useEffect(() => {
+    if (defaultScale) {
+      setDefaultValue(defaultScale);
+    }
+  }, [defaultScale]);
+
+  //
+  return (
+    <>
+      <Worker workerUrl={pdfjsWorker}>
+        <div className="pdf-viewer-container">
+          <Viewer
+            fileUrl={url}
+            plugins={[defaultLayoutPluginInstance]}
+            {...props}
+            /**setting default actual size ie, 100% for zoom property */
+            defaultScale={defaultValue}
+          />
+        </div>
+      </Worker>
+    </>
+  );
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Component used for Table Actions
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { CustomActions } from '../../..';
+
+import { TableField } from '../table-data/table-data';
+
+import './table-actions.scss';
+
+
+export default function TableActions({ columns = [], records = [], actions }) {
+
+    return (<>
+
+        {/* Actions Table */}
+        <div className="actions-table">
+            <table striped className="sortable">
+                <thead>
+                    <tr>
+                        <th className="action-header">
+                            <span className="fa fa-cog fa-lg">
+                                #
+                            </span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {
+                        records.map((record, rowKey) => (
+                            <tr className="table-row" key={rowKey}>
+
+                                {
+                                    actions.map((action) => {
+
+                                        return <TableField row={record} column={action} />
+
+                                    })
+                                }
+
+                                {/* <CustomActions record={record} /> */}
+                            </tr>
+                        ))
+                    }
+                </tbody>
+            </table>
+        </div>
+        {/* Actions Table Ends */}
+
+    </>)
+}
+

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,107 @@
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import './table-data.scss';
+
+
+export default function TableData({ columns = [], records = [] }) {
+
+    return (<div className='table-data'><table className="table-body">
+
+        <TableHeader columns={columns} />
+
+        <tbody>
+
+            {
+
+                records.map((row, index) => {
+
+                    return (<TableRow index={index} row={row} columns={columns} />)
+
+                })}
+
+        </tbody>
+    </table></div>)
+
+}
+
+/**
+ * The Table Header Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableHeader({ columns }) {
+
+    return (
+        <thead>
+            <tr>
+                {columns.map((column) => {
+
+                    return (<TableHeaderColumn column={column} />)
+                })}
+
+            </tr>
+        </thead>
+    )
+}
+
+
+function TableHeaderColumn({ column }) {
+
+
+    return (<th>
+        {column.title}
+    </th>
+    )
+}
+
+
+
+
+/**
+ * Table Row Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableRow({ row, columns, index }) {
+
+    return (<tr>
+
+        {
+            columns.map((column, columnIndex) => {
+
+                return (<TableField index={index} key={index} row={row} column={column} />)
+
+            })
+        }
+
+    </tr>)
+}
+
+
+/**
+ * 
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export function TableField({ row, column, index }) {
+
+    // console.log(row, column);
+
+    return (<td>
+
+        {column.render ? column.render(row, column, index) : row[column.dataIndex]}
+
+    </td>)
+
+}

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

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

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

@@ -0,0 +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;
+            }
+        }
+    }
+}