ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,136 @@
+/**
+ * Component used for Table 
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect,useContext } from 'react';
+
+import { GlobalContext } from '../../Store';
+
+import './table-wrapper.scss';
+
+
+import { getExportData } from './../../utils/generic/generic.utils';
+
+import { ExportReactCSV } from './../../modules/generic/generic-list/ExportReactCSV';
+
+export default function TableWrapper({ columns = [], records = [] }) {
+
+    // Get the export data 
+    let exportData = getExportData(records, columns);
+
+      const { state } = useContext(GlobalContext);
+
+       useEffect(() => {
+         
+         }, [state.theme]);
+
+    return (<div className='table-wrapper'>
+
+        <div className='page-header' >
+
+            {/*table data export to csc component*/}
+            {/* {records && <ExportReactCSV csvData={exportData} />} */}
+
+        </div>
+
+
+        <table className="styled-table">
+
+            <TableHeader columns={columns}  />
+
+            <tbody>
+
+                {
+                    records.map((row, index) => {
+
+                        return (<TableRow index={index} key={index} row={row} columns={columns} />)
+
+                    })
+                }
+
+            </tbody>
+        </table>
+    </div>)
+
+}
+
+/**
+ * The Table Header Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableHeader({ columns }) {
+    
+      const { state } = useContext(GlobalContext)
+
+    return (
+        <thead style= {{ background: state.theme.colors.headerBg, color: state.theme.colors.headerText }}>
+            <tr>
+                {columns.map((column, key) => {
+
+                    return (<TableHeaderColumn key={key} column={column} />)
+                })}
+
+            </tr>
+        </thead>
+    )
+}
+
+
+function TableHeaderColumn({ column }) {
+
+
+    return (<th>
+        {column.title}
+    </th>
+    )
+}
+
+
+
+
+/**
+ * Table Row Element
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableRow({ row, columns, index: rowIndex }) {
+
+    console.log(row, columns);
+    return (<tr>
+
+        {
+            columns.map((column, index) => {
+
+                return (<TableField rowIndex={rowIndex} key={index} row={row} column={column} />)
+
+            })
+        }
+
+    </tr>)
+}
+
+
+/**
+ * 
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+function TableField({ row, column, rowIndex }) {
+
+    console.log(row[column.field]);
+
+    return (<td className={`${rowIndex}-${rowIndex}`}>
+
+        {column.render ? column.render(row, column, rowIndex) : row[column.field]}
+
+    </td>)
+
+}

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

@@ -0,0 +1,72 @@
+.table-wrapper {
+    .page-header {
+        justify-content: flex-end;
+
+        margin: 5px;
+    }
+}
+
+table {
+    width: 100%;
+
+    &.styled-table {
+        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: #009879;
+            color: #ffffff;
+            text-align: left;
+            position: sticky;
+            top: 0;
+            z-index: 99;
+            position: -webkit-sticky;
+        }
+
+        th,
+        td {
+            padding: 6px;
+            font-size: 10px;
+        }
+
+        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/ui_elements/Loader.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Spin, Icon } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons'
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+export default function Loader(props){
+    return(
+        <div className='loader-wrapper'>
+            {props.scanFlag ? <Spin indicator={antIcon} /> : <Spin tip="Loading..."/> }
+            {/* <Spin tip="Loading..."/>  */}
+        </div>
+    )
+}

package/core/lib/components/ui_elements/Notify.js

@@ -0,0 +1,13 @@
+import React, { useState, useEffect } from 'react';
+
+
+import { notification } from 'antd';
+
+const Notify = (type, msg, description = '') => {
+  notification[type]({
+    message: msg,
+    description: description
+  });
+};
+
+export default Notify

package/core/lib/components/ui_elements/PlaceHolder.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { Skeleton } from 'antd'
+
+export default function PlaceHolder(props){
+    return(
+        <div className="skeleton-wrapper">
+            {
+                props.type == "listing" && [0,1,2,3,4].map((item, index) => <div className="card" key={index}>
+                <Skeleton  paragraph={{ rows: 3 }}/>
+            </div>)
+            }
+            {
+                props.type == "report" &&<div className="detail-skeleton-wrapper">
+                    <div className="title">
+                        <Skeleton  paragraph={{ rows: 1 }}/>
+                    </div>
+                    <div className="card">
+                        <Skeleton  paragraph={{ rows: 1 }}/>
+                    </div>
+                </div>
+            }
+            {/* {
+                props.listFlag ? null : <Skeleton avatar paragraph={{ rows: 2}} />
+            }
+            <Skeleton avatar={props.listFlag} paragraph={{ rows: 2 }} />
+            <Skeleton avatar={props.listFlag} paragraph={{ rows: 2 }} />
+            <Skeleton avatar={props.listFlag} paragraph={{ rows: 2 }} />
+            {
+                props.listFlag ? <><Skeleton avatar={props.listFlag} paragraph={{ rows: 2 }} /><Skeleton avatar={props.listFlag} paragraph={{ rows: 1 }} /> </>: null
+            } */}
+      </div>
+    )
+}

package/core/lib/components/web-camera/web-camera.js

@@ -0,0 +1,162 @@
+
+// /**
+//  * Camera Component would save the photo with location
+//  */
+
+// import React, { useState, useEffect, useContext } from "react";
+
+// import { Typography, Button } from 'antd';
+
+// import useGeolocation from 'react-hook-geolocation'
+
+// import { Attachments } from '../../../core/models/';
+
+// import { Empty } from 'antd';
+
+// import Camera from "../camera/camera";
+
+// import './web-camera.scss';
+
+// const { Title } = Typography;
+
+// export default function WebCamera({ onChange }) {
+
+//     // Response
+//     const [response, setReponse] = useState(null);
+
+//     const geolocation = useGeolocation({
+//         enableHighAccuracy: true,
+//         maximumAge: 15000,
+//         timeout: 12000
+//     })
+
+//     const [loading, setLoading] = useState(false);
+
+//     const [visible, setVisible] = useState(false);
+
+//     function handleTakePhoto(dataUri) {
+
+//         setVisible(false);
+
+//         setLoading(true);
+
+//         Attachments.uploadBase64(dataUri).then((result) => {
+
+//             onChange({ result, geolocation });
+
+//             setLoading(false);
+
+//         })
+//     }
+
+//     /**
+//      * Read the fingerprint
+//      */
+//     function readFingerPrint() {
+
+//         setLoading(true);
+
+//         let formBody = {
+//             Timeout: 10000,
+//             Quality: "50",
+//             "licstr=": "hE/78I5oOUJnm5fa5zDDRrEJb5tdqU71AVe+/Jc2RK0=",
+//             "templateFormat=": "ISO",
+//             "imageWSQRate=": "0.75",
+//         };
+
+//         fetch("https://localhost:8443/SGIFPCapture", { method: 'POST', body: formBody })
+//             .then((res) => res.json())
+//             .then((json) => {
+
+//                 console.log(json);
+
+//                 setReponse(json);
+
+//                 setLoading(false);
+
+//             });
+//     }
+
+//     useEffect(() => {
+
+//         return () => {
+
+//         }
+
+//     }, [])
+
+//     return (<div className="web-camera">
+
+//         <Title level={5}>
+//             Web Camera
+//         </Title>
+
+//         <div className="web-camera-container">
+
+//             <div className="web-camera-box">
+//                 {response ? <div className="image-container"><img src={`data:image/png;base64,${response.BMPBase64}`} /></div> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
+//             </div>
+
+//             <div className="actions">
+
+//                 <Button onClick={() => { readFingerPrint(true); }}>
+//                     {loading ? 'Loading' : 'Read'}
+//                 </Button>
+
+//                 <Button onClick={() => { readFingerPrint(true); }}>
+//                     Clear
+//                 </Button>
+
+//                 <Button onClick={() => { readFingerPrint(true); }}>
+//                     Retake
+//                 </Button>
+
+
+
+//             </div>
+
+//         </div>
+
+//     </div>)
+// }
+// <div className="core-camera">
+
+// <>
+
+//     {selected && <ImagePreview dataUri={selected} />}
+
+//     <Button className="camera-trigger" onClick={() => { setVisible(true); }}>
+//         {loading ? 'Loading' : 'Open Camera'}
+//     </Button>
+
+//     <Modal
+//         width={'50%'}
+//         header={null}
+//         className="camera-modal"
+//         visible={visible}
+//         title={'Camera'}
+//         footer={null}
+//         onCancel={() => { setVisible(false); }}
+//     >
+
+//         <Camera
+//             isImageMirror={false}
+//             // idealFacingMode={FACING_MODES.ENVIRONMENT}
+//             onTakePhoto={(dataUri) => { handleTakePhoto(dataUri); }}
+//         />
+
+//         <div className="geotag">
+
+//             {/* <p>
+//                 Latitude : {geolocation.latitude}
+//             </p>
+
+//             <p>
+//                 Latitude : {geolocation.longitude}
+//             </p> */}
+//         </div>
+
+//     </Modal>
+// </>
+
+// </div>

package/core/lib/components/web-camera/web-camera.scss

@@ -0,0 +1,28 @@
+.web-camera {
+    .web-camera-container {
+        display: flex;
+
+        .web-camera-box {
+            width: 100%;
+
+            .image-container {
+                // height: 150px;
+                img {
+                    max-width: 150px;
+                    // height: 150px;
+
+                    // width: 100%;
+                }
+            }
+        }
+        .actions {
+            display: flex;
+            flex-direction: column;
+            margin: 0px 10px;
+            button {
+                width: 100%;
+                margin-bottom: 10px;
+            }
+        }
+    }
+}

package/core/lib/core.md

@@ -0,0 +1,9 @@
+We have classified the core component library to the below 
+
+1. Elements
+2. Components
+3. Hooks
+4. Pages
+5. Utils
+
+

package/core/lib/elements/Elements.md

@@ -0,0 +1,3 @@
+
+
+Elements in this application . 

package/core/lib/elements/basic/LoggedUserRedirect.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom'
+function LoggedUserRed(ComposedComponent, extraInfo) {
+ class LoginAccessCrtl extends Component {
+   componentWillMount(){
+     let userDetail = JSON.parse(localStorage.getItem('userInfo'));
+     if(userDetail){
+       this.props.history.push( "/landing" );
+     }
+   }
+   render() {
+     if(!localStorage.getItem('userInfo')) {
+       return(<ComposedComponent/>)
+     }else {
+       return null
+     }
+   }
+ }
+  return (LoginAccessCrtl);
+}
+export default LoggedUserRed;

package/core/lib/elements/basic/PrivateRoute.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Route, Redirect } from 'react-router-dom';
+
+export default function PrivateRoute({ component: Component, ...rest }) {
+  return (
+    <Route
+      {...rest}
+      render={(props) => (JSON.parse(localStorage.getItem('userInfo')))
+        ? <Component {...props} />
+        :
+        <Redirect to='/login-phone' />
+      }
+    />
+  )
+}

package/core/lib/elements/basic/button/Button.md

@@ -0,0 +1,43 @@
+### Button
+
+This is a custom button component built on top of Ant Design's Button component.
+
+## Usage
+
+This is a Basic button
+
+```jsx
+import Button from "./button";
+
+<Button type="primary" size="large">
+  Click me!
+</Button>;
+```
+
+This is different variant button
+
+```jsx padded
+import Button from "./button";
+
+<>
+  <Button type="primary">
+  Click me!
+  </Button>
+
+  <Button type="Outlined" size="Small">
+    Click me!
+  </Button>
+
+  <Button type="danger" shape="round" size="Medium">
+    Click me!
+  </Button>
+
+  <Button type="dashed" shape="round" size="large">
+    Click me!
+  </Button>
+
+  <Button type="primary" shape="circle" size={"Small"}>
+    Button!
+  </Button>
+</>;
+```