@visns-studio/visns-components 1.0.0

package/components/visns-loader.jsx

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { usePromiseTracker } from 'react-promise-tracker';
+
+function VisnsLoader(props) {
+    const { promiseInProgress } = usePromiseTracker();
+    const [loaderStyle, setLoaderStyle] = useState({
+        opacity: 0,
+    });
+
+    useEffect(() => {
+        setLoaderStyle({
+            opacity: promiseInProgress === true ? 1 : 0,
+        });
+    }, [promiseInProgress]);
+
+    return (
+        <div className="preloader" style={loaderStyle}>
+            <div className="preloader__icn">
+                <div className="preloader__cut">
+                    <div className="preloader__donut"></div>
+                </div>
+            </div>
+            <span>Processing Data</span>
+        </div>
+    );
+}
+
+export default VisnsLoader;

package/components/visns-multi-select.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import SelectList from './visns-select-list';
+import Select, { createFilter } from 'react-select';
+
+function MultiSelect(props) {
+    const { inputValue, onChange, options, settings, multi } = props;
+    const [selectOptions, setSelectOptions] = useState([]);
+
+    useEffect(() => {
+        let _options = [];
+
+        options.forEach((a) => {
+            let _optionItem = {
+                value: a.id,
+                label: a.label,
+            };
+
+            if (a.hasOwnProperty('description')) {
+                _optionItem = {
+                    ..._optionItem,
+                    description: a.description,
+                };
+            }
+
+            if (a.hasOwnProperty('rate')) {
+                _optionItem = {
+                    ..._optionItem,
+                    rate: a.rate,
+                };
+            }
+
+            if (a.hasOwnProperty('buy_price')) {
+                _optionItem = {
+                    ..._optionItem,
+                    buy_price: a.buy_price,
+                };
+            }
+
+            if (a.hasOwnProperty('sell_price')) {
+                _optionItem = {
+                    ..._optionItem,
+                    sell_price: a.sell_price,
+                };
+            }
+
+            _options.push(_optionItem);
+        });
+
+        setSelectOptions(_options);
+    }, [options]);
+
+    return (
+        <Select
+            isClearable
+            isSearchable
+            isMulti={multi}
+            filterOption={createFilter({ ignoreAccents: false })}
+            components={{ SelectList }}
+            options={selectOptions}
+            onChange={(inputValue, action) => {
+                onChange(inputValue, action, settings.id);
+            }}
+            className="visns__ms"
+            styles={{
+                menu: (provided) => ({ ...provided, zIndex: 9999 }),
+                control: (base) => ({
+                    ...base,
+                    minHeight: '52px',
+                }),
+            }}
+            value={inputValue}
+        />
+    );
+}
+
+export default MultiSelect;

package/components/visns-notification.jsx

@@ -0,0 +1,202 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import { TooltipWrapper } from 'react-tooltip';
+import { toast } from 'react-toastify';
+import { Bell, CircleX } from 'akar-icons';
+
+import CustomFetch from './visns-fetch';
+
+function Notification(props) {
+    let interval;
+    const navigate = useNavigate();
+    const wrapperRef = useRef(null);
+    const [containerClass] = useState('notibox');
+    const [divClass] = useState('notibox-item');
+    const [iconBellBlinkClass] = useState('cis-bell-exclamation noti');
+    const [iconBellClass] = useState('cis-bell-exclamation');
+    const [iconXClass] = useState('cis-x-circle noti-read');
+    const [actionClass] = useState('notibox-actions');
+    const [items, setItems] = useState([]);
+    const [show, setShow] = useState(false);
+    const { setSystemAuth } = props;
+
+    const fetchNotification = () => {
+        CustomFetch(
+            '/ajax/user/notifications',
+            'POST',
+            {},
+            function (result) {
+                setItems(result.data);
+            },
+            function (error) {
+                if (String(error) === 'CSRF token mismatch.') {
+                    window.open('/login');
+                } else {
+                    if (error === 'Unauthenticated.') {
+                        setSystemAuth(false);
+                    }
+
+                    toast.error(String(error));
+                }
+            }
+        );
+    };
+
+    const handleClick = (e) => {
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+            setShow(false);
+        }
+    };
+
+    const markAsRead = (e) => {
+        e.preventDefault();
+
+        let array = items;
+        let index = e.target.dataset.index;
+        let id = e.target.dataset.id;
+
+        if (index >= 0) {
+            array.splice(index, 1);
+            setItems(array);
+        }
+
+        let formData = {
+            id: id,
+        };
+
+        CustomFetch(
+            '/ajax/user/notification/markasread',
+            'POST',
+            formData,
+            function () {
+                fetchNotification();
+            }
+        );
+    };
+
+    const markAllAsRead = (e) => {
+        e.preventDefault();
+
+        let array = items;
+        setItems([]);
+
+        {
+            array.map((item) => {
+                let formData = {
+                    id: item.id,
+                };
+
+                CustomFetch(
+                    '/ajax/user/notification/markasread',
+                    'POST',
+                    formData,
+                    function () {
+                        fetchNotification();
+                    }
+                );
+            });
+        }
+    };
+
+    const toggleNotification = () => {
+        if (show === false) {
+            setShow(true);
+        } else {
+            setShow(false);
+        }
+    };
+
+    const showAllNotifications = () => {
+        navigate('/notifications');
+        setShow(false);
+    };
+
+    useEffect(() => {
+        fetchNotification();
+
+        interval = setInterval(() => {
+            fetchNotification();
+        }, 60000);
+
+        document.addEventListener('mousedown', handleClick, false);
+
+        return function cleanup() {
+            clearInterval(interval);
+
+            document.addEventListener('mousedown', handleClick, false);
+        };
+    }, []);
+
+    return (
+        <TooltipWrapper content="Notifications">
+            <a href="#" onClick={toggleNotification}>
+                <Bell
+                    size={19}
+                    strokeWidth={2}
+                    className={
+                        items.length > 0 ? iconBellBlinkClass : iconBellClass
+                    }
+                />
+            </a>
+
+            {show === true ? (
+                <div ref={wrapperRef}>
+                    {items.length > 0 ? (
+                        <div className={containerClass}>
+                            {items.map((item, index) => (
+                                <div className={divClass} key={item.id}>
+                                    <Bell
+                                        size={19}
+                                        strokeWidth={2}
+                                        className={iconBellClass}
+                                    />{' '}
+                                    {parse(item.data.label)}{' '}
+                                    <span>
+                                        [
+                                        {moment(item.created_at).format(
+                                            'DD/MM - H:mma'
+                                        )}
+                                        ]
+                                    </span>{' '}
+                                    <button onClick={markAsRead}>
+                                        <CircleX
+                                            size={24}
+                                            data-id={item.id}
+                                            data-index={index}
+                                            className={iconXClass}
+                                        />
+                                    </button>
+                                </div>
+                            ))}
+                            <div className={actionClass}>
+                                <button onClick={showAllNotifications}>
+                                    View All
+                                </button>
+                                <button onClick={markAllAsRead}>
+                                    Clear All
+                                </button>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className={containerClass}>
+                            <div className={divClass}>
+                                No new notifications available.
+                            </div>
+                            <div className={actionClass}>
+                                <button onClick={showAllNotifications}>
+                                    View All
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div></div>
+            )}
+        </TooltipWrapper>
+    );
+}
+
+export default Notification;

package/components/visns-select-list.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+
+function SelectList(props) {
+    const { options, children, maxHeight, getValue } = props;
+    const [value] = getValue();
+    const initialOffset = options.indexOf(value) * 50;
+
+    return (
+        <FixedSizeList
+            height={maxHeight}
+            itemCount={children.length}
+            itemSize={height}
+            initialScrollOffset={initialOffset}
+        >
+            {({ index, style }) => <div style={style}>{children[index]}</div>}
+        </FixedSizeList>
+    );
+}
+
+export default SelectList;

package/components/visns-select.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+function Select(props) {
+    const { className, dataOptions, inputValue, onChange, options, settings } =
+        props;
+
+    return (
+        <select
+            data-name={settings.id}
+            className={className}
+            onChange={onChange}
+            value={inputValue}
+            data-show={settings.show ? JSON.stringify(settings.show) : ''}
+        >
+            <option>Please select an option</option>
+            {options.map((item, index) => (
+                <option
+                    key={settings.id + '-' + item.id}
+                    value={item.id}
+                    {...dataOptions[index]}
+                >
+                    {item.label}
+                </option>
+            ))}
+        </select>
+    );
+}
+
+export default Select;

package/components/visns-table-filter.jsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from 'react';
+
+function TableFilter(props) {
+    const { filters, setFilters, setSettings } = props;
+    const [data, setData] = useState([]);
+
+    const filterTable = (e) => {
+        if (props.hasOwnProperty('setSettings') === true) {
+            setSettings((prevState) => {
+                if (prevState.ajaxSetting) {
+                    let _where = [];
+
+                    prevState.ajaxSetting.where.forEach((a) => {
+                        if (a.id === e.target.dataset.id) {
+                            let _push = true;
+
+                            _where.forEach((b) => {
+                                if (b.id === e.target.dataset.id) {
+                                    _push = false;
+                                }
+                            });
+
+                            if (_push === true) {
+                                _where.push({
+                                    id: e.target.dataset.id,
+                                    value: e.target.dataset.value,
+                                });
+                            }
+                        } else {
+                            _where.push(a);
+                        }
+                    });
+
+                    let _push = true;
+
+                    _where.forEach((a) => {
+                        if (a.id === e.target.dataset.id) {
+                            _push = false;
+                        }
+                    });
+
+                    if (_push === true) {
+                        _where.push({
+                            id: e.target.dataset.id,
+                            value: e.target.dataset.value,
+                        });
+                    }
+
+                    return {
+                        ...prevState,
+                        ajaxSetting: {
+                            ...prevState.ajaxSetting,
+                            where: _where,
+                        },
+                    };
+                } else {
+                    let w = prevState.where;
+
+                    prevState.where.forEach((a, b) => {
+                        if (e.target.dataset.id === a.id) {
+                            w[b].value = e.target.dataset.value;
+                        }
+                    });
+
+                    return { ...prevState, where: w };
+                }
+            });
+        }
+
+        let tempFilters = filters;
+
+        filters.map((item, index) => {
+            if (
+                e.target.dataset.hasOwnProperty('value') &&
+                parseInt(e.target.dataset.value) >= 0
+            ) {
+                if (parseInt(e.target.dataset.value) === parseInt(item.value)) {
+                    tempFilters[index].class = 'subactive';
+                    tempFilters[index].show = true;
+                } else {
+                    tempFilters[index].class = '';
+                    tempFilters[index].show = false;
+                }
+            } else {
+                if (e.target.dataset.id === item.id) {
+                    tempFilters[index].class = 'subactive';
+                    tempFilters[index].show = true;
+                } else {
+                    tempFilters[index].class = '';
+                    tempFilters[index].show = false;
+                }
+            }
+        });
+
+        setFilters(tempFilters);
+        setFilters((prevState) => [...prevState]);
+    };
+
+    useEffect(() => {
+        setData(filters);
+    }, [filters]);
+
+    return (
+        <ul>
+            {data.map((item, key) => (
+                <li key={'table-filter-' + key}>
+                    <a
+                        data-id={item.id}
+                        data-value={
+                            item.hasOwnProperty('value') ? item.value : ''
+                        }
+                        data-url={item.url || ''}
+                        onClick={filterTable}
+                        className={item.class}
+                    >
+                        {item.label}
+                    </a>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export default TableFilter;

package/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import DataGrid from "./components/visns-data-grid";
+import Fetch from "./components/visns-fetch";
+
+ReactDOM.render(
+	<React.Fragment>
+		<DataGrid />
+		<Fetch />
+	</React.Fragment>,
+	document.getElementById("root")
+);

package/package.json

@@ -0,0 +1,44 @@
+{
+	"dependencies": {
+		"@inovua/reactdatagrid-community": "^5.9.4",
+		"akar-icons": "^1.9.28",
+		"awesome-debounce-promise": "^2.1.0",
+		"axios": "^1.4.0",
+		"framer-motion": "^10.12.16",
+		"html-react-parser": "^4.0.0",
+		"lodash": "^4.17.21",
+		"moment": "^2.29.4",
+		"numeral": "^2.0.6",
+		"react": "^18.2.0",
+		"react-confirm-alert": "^3.0.6",
+		"react-datepicker": "^4.14.0",
+		"react-number-format": "^5.2.2",
+		"react-promise-tracker": "^2.1.1",
+		"react-quill": "^2.0.0",
+		"react-router-dom": "^6.13.0",
+		"react-select": "^5.7.3",
+		"react-toastify": "^9.1.3",
+		"react-toggle": "^4.1.3",
+		"react-tooltip": "^5.14.0",
+		"react-window": "^1.8.9",
+		"reactjs-popup": "^2.0.5"
+	},
+	"name": "@visns-studio/visns-components",
+	"version": "1.0.0",
+	"description": "Various packages to assist in the development of our Custom Applications.",
+	"main": "index.js",
+	"devDependencies": {},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/visnsstudio/visns-components.git"
+	},
+	"author": "Visns Studio",
+	"license": "ISC",
+	"bugs": {
+		"url": "https://github.com/visnsstudio/visns-components/issues"
+	},
+	"homepage": "https://github.com/visnsstudio/visns-components#readme"
+}