@visns-studio/visns-components 1.0.1-2.1 → 1.0.1

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

@@ -1,42 +1,12 @@
-/** CMS Components */
-import CmsForm from "./components/cms/visns-form";
-import DataGrid from "./components/cms/visns-data-grid";
-import DropZone from "./components/cms/visns-dropzone";
-import SortableList from "./components/cms/sorting/list";
+import React from "react";
+import ReactDOM from "react-dom";
+import DataGrid from "./components/visns-data-grid";
+import Fetch from "./components/visns-fetch";
 
-/** CRM Components */
-import AsyncSelect from "./components/crm/visns-async-select";
-import Autocomplete from "./components/crm/visns-autocomplete";
-import Call from "./components/crm/visns-call";
-import CustomFetch from "./components/crm/visns-fetch";
-import Download from "./components/crm/visns-download";
-import Field from "./components/crm/visns-field";
-import Form from "./components/crm/visns-form";
-import Loader from "./components/crm/visns-loader";
-import MultiSelect from "./components/crm/visns-multi-select";
-import Notification from "./components/crm/visns-notification";
-import SelectList from "./components/crm/visns-select-list";
-import Select from "./components/crm/visns-select";
-import Table from "./components/crm/visns-data-grid";
-import TableFilter from "./components/crm/visns-table-filter";
-
-export {
-	AsyncSelect,
-	Autocomplete,
-	Call,
-	CmsForm,
-	CustomFetch,
-	DataGrid,
-	Download,
-	DropZone,
-	Field,
-	Form,
-	Loader,
-	MultiSelect,
-	Notification,
-	SelectList,
-	Select,
-	SortableList,
-	Table,
-	TableFilter,
-};
+ReactDOM.render(
+	<React.Fragment>
+		<DataGrid />
+		<Fetch />
+	</React.Fragment>,
+	document.getElementById("root")
+);

package/package.json

@@ -9,30 +9,22 @@
 		"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-slugify": "^3.0.2",
-		"react-sortable-hoc": "^2.0.0",
 		"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"
 	},
-	"devDependecies": {
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
-	},
-	"peerDependencies": {
-		"react": ">=18.2.0",
-		"react-dom": ">=18.2.0"
-	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.0.12.1",
+	"version": "1.0.1",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},

package/components/cms/sorting/item.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { SortableElement } from 'react-sortable-hoc';
-import { ChevronVertical } from 'akar-icons';
-
-const SortableItem = (props) => {
-    const { value, index } = props;
-
-    return (
-        <li>
-            <ChevronVertical strokeWidth={1} size={26} />
-            {value.label}
-            {value.hasOwnProperty('image_url') && value.image_url !== '' ? (
-                <div className="sortimg">
-                    <img src={value.image_url} />
-                </div>
-            ) : null}
-        </li>
-    );
-};
-
-export default SortableElement(SortableItem);

package/components/cms/sorting/list.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import VisnsSortableItem from './item';
-import { SortableContainer } from 'react-sortable-hoc';
-
-const SortableList = (props) => {
-    const { items } = props;
-
-    return (
-        <ul className="sortlist">
-            {items.map((value, index) => (
-                <VisnsSortableItem
-                    key={`item-${index}`}
-                    index={index}
-                    value={value}
-                />
-            ))}
-        </ul>
-    );
-};
-
-export default SortableContainer(SortableList);