@visns-studio/visns-components 1.5.3 → 1.5.5

package/components/crm/visns-data-grid.jsx

@@ -480,70 +480,90 @@ const DataGrid = forwardRef(
 
 		const renderSetting = (s, d) => {
 			let iconStyle = {};
+			let allow = true;
 
 			if (s.active) {
 				if (
 					d.hasOwnProperty(s.active.id) &&
-					!s.active.hasOwnProperty("type") &&
-					d[s.active.id] === s.active.value
+					(!s.active.hasOwnProperty("type") ||
+						d[s.active.id] === s.active.value)
+				) {
+					iconStyle = {
+						color: s.active.colour,
+					};
+				} else if (
+					s.active.type === "greater" &&
+					d[s.active.id] > s.active.value
+				) {
+					iconStyle = {
+						color: s.active.colour,
+					};
+				} else if (
+					s.active.type === "not null" &&
+					d[s.active.id] !== null
 				) {
 					iconStyle = {
 						color: s.active.colour,
 					};
-				} else if (s.active.hasOwnProperty("type")) {
-					switch (s.active.type) {
-						case "greater":
-							if (d[s.active.id] > s.active.value) {
-								iconStyle = {
-									color: s.active.colour,
-								};
-							}
-							break;
-						case "not null":
-							if (d[s.active.id] !== null) {
-								iconStyle = {
-									color: s.active.colour,
-								};
-							}
-							break;
-						default:
-							break;
-					}
 				}
 			}
 
-			const getIconComponent = (IconComponent) => (
-				<IconComponent
-					data-tooltip-id="system-tooltip"
-					data-tooltip-content={
-						iconStyle && iconStyle.color ? s.active.title : s.title
-					}
-					strokeWidth={2}
-					size={18}
-					className="tdaction"
-					style={iconStyle}
-				/>
-			);
+			const handleIconClick = (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				handleSettingClick(s, d);
+			};
 
-			switch (s.id) {
-				case "archive":
-					return getIconComponent(ShippingBoxV1);
-				case "complete":
-					return getIconComponent(Check);
-				case "copy":
-					return getIconComponent(Copy);
-				case "delete":
-					return getIconComponent(Backspace);
-				case "family":
-					return getIconComponent(Network);
-				case "primary":
-					return getIconComponent(Ribbon);
-				case "ssa":
-					return getIconComponent(Clock);
-				case "update":
-					return getIconComponent(Edit);
-				default:
-					return null;
+			const tooltipContent =
+				iconStyle && iconStyle.color ? s.active.title : s.title;
+
+			if (s.hide && s.hide.id && s.hide.value > 0) {
+				if (
+					d.hasOwnProperty(s.hide.id) &&
+					d[s.hide.id] === s.hide.value
+				) {
+					allow = false;
+				}
+			}
+
+			if (allow) {
+				switch (s.id) {
+					case "archive":
+						return getIconComponent(ShippingBoxV1);
+					case "complete":
+						return getIconComponent(Check);
+					case "copy":
+						return getIconComponent(Copy);
+					case "delete":
+						return getIconComponent(Backspace);
+					case "family":
+						return getIconComponent(Network);
+					case "primary":
+						return getIconComponent(Ribbon);
+					case "ssa":
+						return getIconComponent(Clock);
+					case "update":
+						return getIconComponent(Edit);
+					default:
+						return null;
+				}
+			} else {
+				return null;
+			}
+
+			function getIconComponent(IconComponent) {
+				return (
+					<span key={`setting-${s.id}`} onClick={handleIconClick}>
+						<IconComponent
+							data-tooltip-id="system-tooltip"
+							data-tooltip-content={tooltipContent}
+							strokeWidth={2}
+							size={18}
+							className="tdaction"
+							style={iconStyle}
+						/>
+					</span>
+				);
 			}
 		};
 
@@ -1342,18 +1362,9 @@ const DataGrid = forwardRef(
 					render: ({ data }) => {
 						return (
 							<div className="tdactions">
-								{settings.map((setting) => (
-									<span
-										key={`setting-${setting.id}`}
-										onClick={(e) => {
-											e.preventDefault();
-											e.stopPropagation();
-											handleSettingClick(setting, data);
-										}}
-									>
-										{renderSetting(setting, data)}
-									</span>
-								))}
+								{settings.map((setting) =>
+									renderSetting(setting, data)
+								)}
 							</div>
 						);
 					},

package/components/crm/visns-navigation.jsx

@@ -1,230 +1,288 @@
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
-    ArrowCycle,
-    BookClose,
-    Bug,
-    Calendar,
-    Clipboard,
-    DoubleSword,
-    Draft,
-    Grid,
-    LightBulb,
-    PeopleGroup,
-    Person,
-    SettingsVertical,
-    SignOut,
-    Shield,
-    Ticket,
+	ArrowCycle,
+	BookClose,
+	Bug,
+	Calendar,
+	Clipboard,
+	DoubleSword,
+	Draft,
+	Grid,
+	LightBulb,
+	PeopleGroup,
+	Person,
+	SettingsVertical,
+	SignOut,
+	Shield,
+	Ticket,
 } from "akar-icons";
 
 import CustomFetch from "./visns-fetch";
 import Notification from "./visns-notification";
 
 function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
-    const location = useLocation();
-    const currentPage = location.pathname.substr(1) || "dashboard";
-    const [navData, setNavData] = useState(navConfig);
-    const [isScrolled, setIsScrolled] = useState(false);
-    const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
-
-    const handleLogout = () => {
-        CustomFetch("/logout", "GET", {}, () => {
-            setSystemAuth(false);
-            navigate("/login");
-        });
-    };
-
-    const renderSetting = (n) => {
-        const iconComponents = {
-            bug: Bug,
-            calendar: Calendar,
-            person: Person,
-            shield: Shield,
-            signOut: SignOut,
-        };
-
-        if (n.id === "notifications") {
-            return (
-                <li>
-                    <Notification setSystemAuth={setSystemAuth} />
-                </li>
-            );
-        } else if (n.id === "logout") {
-            const IconComponent = iconComponents[n.icon];
-            return (
-                <li>
-                    <button
-                        title={n.label}
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
-                        onClick={handleLogout}
-                    >
-                        <IconComponent size={19} strokeWidth={2} />
-                    </button>
-                </li>
-            );
-        } else {
-            const IconComponent = iconComponents[n.icon];
-
-            return (
-                <li>
-                    <Link
-                        to={n.url}
-                        data-tooltip-id="system-tooltip"
-                        data-tooltip-content={n.label}
-                        className="tooltip"
-                        target={n.target ? n.target : "_self"}
-                    >
-                        <IconComponent size={19} strokeWidth={2} />
-                    </Link>
-                </li>
-            );
-        }
-    };
-
-    const renderNav = (n) => {
-        const iconComponents = {
-            arrowCycle: ArrowCycle,
-            bookClose: BookClose,
-            calendar: Calendar,
-            clipboard: Clipboard,
-            doubleSword: DoubleSword,
-            draft: Draft,
-            grid: Grid,
-            lightBulb: LightBulb,
-            peopleGroup: PeopleGroup,
-            settingsVertical: SettingsVertical,
-            ticket: Ticket,
-        };
-
-        const IconComponent = iconComponents[n.icon];
-
-        const renderChildren = () => {
-            if (n.children && n.children.length > 0) {
-                return (
-                    <ul>
-                        {n.children.map((child, childKey) => (
-                            <li
-                                className="sub-nav-item"
-                                key={`nav-child-${childKey}`}
-                            >
-                                <Link to={child.url} title={child.label}>
-                                    {child.label}
-                                </Link>
-                            </li>
-                        ))}
-                    </ul>
-                );
-            }
-            return null;
-        };
-
-        return (
-            <li className={n.class}>
-                {n.url ? (
-                    <Link to={n.url}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </Link>
-                ) : (
-                    <span title={n.label}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </span>
-                )}
-                {renderChildren()}
-            </li>
-        );
-    };
-
-    useEffect(() => {
-        const permissions = userProfile.roles[0].permissions;
-
-        setNavData((prevNavData) => {
-            const updatePermissions = (nav) => {
-                const matchingPermission = permissions.find(
-                    (permission) => permission.name === nav.permissionKey
-                );
-
-                if (matchingPermission) {
-                    return {
-                        ...nav,
-                        permission: true,
-                    };
-                }
-
-                return nav;
-            };
-
-            const updatedNavigations =
-                prevNavData.navigations.map(updatePermissions);
-            const updatedSettings = prevNavData.settings.map(updatePermissions);
-
-            return {
-                ...prevNavData,
-                navigations: updatedNavigations,
-                settings: updatedSettings,
-            };
-        });
-    }, [userProfile]);
-
-    useEffect(() => {
-        setNavData((prevNavData) => ({
-            ...prevNavData,
-            navigations: prevNavData.navigations.map((nav) =>
-                nav.id === currentPage
-                    ? { ...nav, class: "nav-item active" }
-                    : { ...nav, class: "nav-item" }
-            ),
-        }));
-    }, [currentPage]);
-
-    useEffect(() => {
-        function handleScroll() {
-            setIsScrolled(window.scrollY > 0);
-        }
-
-        window.addEventListener("scroll", handleScroll);
-        return () => {
-            window.removeEventListener("scroll", handleScroll);
-        };
-    }, []);
-
-    return (
-        <header className="header">
-            <div className="hwrap">
-                <div className="logo">
-                    <Link to="/">
-                        <img src={logo} alt="Visns Studio CRM" />
-                    </Link>
-                </div>
-                <div className="navwrap">
-                    <ul className={appNavClasses}>
-                        {navData.navigations.map((nav, navKey) =>
-                            nav.permission === true ||
-                            nav.permissionKey === "" ? (
-                                <React.Fragment key={`nav-item-${navKey}`}>
-                                    {renderNav(nav)}
-                                </React.Fragment>
-                            ) : null
-                        )}
-                    </ul>
-                </div>
-                <div className="hactions">
-                    <ul>
-                        {navData.settings.map((setting, settingKey) =>
-                            setting.permission === true ? (
-                                <React.Fragment key={`setting-${settingKey}`}>
-                                    {renderSetting(setting)}
-                                </React.Fragment>
-                            ) : null
-                        )}
-                    </ul>
-                </div>
-            </div>
-        </header>
-    );
+	const location = useLocation();
+	const navigate = useNavigate();
+	const currentPage = location.pathname.substr(1) || "dashboard";
+	const [navData, setNavData] = useState(navConfig);
+	const [isScrolled, setIsScrolled] = useState(false);
+	const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
+
+	const handleLogout = () => {
+		CustomFetch("/logout", "GET", {}, () => {
+			setSystemAuth(false);
+			navigate("/login");
+		});
+	};
+
+	const renderSetting = (n) => {
+		const iconComponents = {
+			bug: Bug,
+			calendar: Calendar,
+			person: Person,
+			shield: Shield,
+			signOut: SignOut,
+		};
+
+		if (n.id === "notifications") {
+			return (
+				<li>
+					<Notification setSystemAuth={setSystemAuth} />
+				</li>
+			);
+		} else if (n.id === "logout") {
+			const IconComponent = iconComponents[n.icon];
+			return (
+				<li>
+					<button
+						title={n.label}
+						data-tooltip-id="system-tooltip"
+						data-tooltip-content={n.label}
+						onClick={handleLogout}
+					>
+						<IconComponent size={19} strokeWidth={2} />
+					</button>
+				</li>
+			);
+		} else {
+			const IconComponent = iconComponents[n.icon];
+
+			return (
+				<li>
+					<Link
+						to={n.url}
+						data-tooltip-id="system-tooltip"
+						data-tooltip-content={n.label}
+						className="tooltip"
+						target={n.target ? n.target : "_self"}
+					>
+						<IconComponent size={19} strokeWidth={2} />
+					</Link>
+				</li>
+			);
+		}
+	};
+
+	const renderNav = (n) => {
+		const iconComponents = {
+			arrowCycle: ArrowCycle,
+			bookClose: BookClose,
+			calendar: Calendar,
+			clipboard: Clipboard,
+			doubleSword: DoubleSword,
+			draft: Draft,
+			grid: Grid,
+			lightBulb: LightBulb,
+			peopleGroup: PeopleGroup,
+			settingsVertical: SettingsVertical,
+			ticket: Ticket,
+		};
+
+		const IconComponent = iconComponents[n.icon];
+
+		const renderChildren = () => {
+			if (n.children && n.children.length > 0) {
+				return (
+					<ul>
+						{n.children.map(
+							(child, childKey) =>
+								child.permission === true && (
+									<li
+										className="sub-nav-item"
+										key={`nav-child-${childKey}`}
+									>
+										<Link
+											to={child.url}
+											title={child.label}
+										>
+											{child.label}
+										</Link>
+									</li>
+								)
+						)}
+					</ul>
+				);
+			}
+			return null;
+		};
+
+		return (
+			<li className={n.class}>
+				{n.url ? (
+					<Link to={n.url}>
+						<IconComponent strokeWidth={2} size={18} />
+						{n.label}
+					</Link>
+				) : (
+					<span title={n.label}>
+						<IconComponent strokeWidth={2} size={18} />
+						{n.label}
+					</span>
+				)}
+				{renderChildren()}
+			</li>
+		);
+	};
+
+	useEffect(() => {
+		const permissions = userProfile.roles[0].permissions.map(
+			(permission) => permission.name
+		);
+
+		setNavData((prevNavData) => {
+			const updatePermissions = (nav) => {
+				if (nav.children && nav.children.length > 0) {
+					const updatedChildren = nav.children
+						.map(updatePermissions)
+						.filter(Boolean);
+					const childPermission = updatedChildren.length > 0;
+
+					if (nav.permissionKey) {
+						const matchingPermission = permissions.includes(
+							nav.permissionKey
+						);
+
+						return {
+							...nav,
+							permission: matchingPermission,
+							children: updatedChildren,
+						};
+					} else {
+						return {
+							...nav,
+							permission: childPermission,
+							children: updatedChildren,
+						};
+					}
+				}
+
+				if (nav.permissionKey) {
+					const matchingPermission = permissions.includes(
+						nav.permissionKey
+					);
+
+					return {
+						...nav,
+						permission: matchingPermission,
+					};
+				}
+
+				return {
+					...nav,
+					permission: true,
+				};
+			};
+
+			const updatedNavigations = prevNavData.navigations
+				.map(updatePermissions)
+				.filter(Boolean);
+			const updatedSettings = prevNavData.settings
+				.map(updatePermissions)
+				.filter(Boolean);
+
+			return {
+				...prevNavData,
+				navigations: updatedNavigations,
+				settings: updatedSettings,
+			};
+		});
+	}, [userProfile]);
+
+	useEffect(() => {
+		setNavData((prevNavData) => {
+			const updateNavItems = (nav) => {
+				const cleanUrl = (url) => {
+					return url && url.startsWith("/") ? url.substr(1) : url;
+				};
+
+				const currentUrl = cleanUrl(currentPage);
+
+				if (
+					cleanUrl(nav.url) === currentUrl ||
+					(nav.children &&
+						nav.children.some(
+							(child) => cleanUrl(child.url) === currentUrl
+						))
+				) {
+					return { ...nav, class: "nav-item active" };
+				} else {
+					return { ...nav, class: "nav-item" };
+				}
+			};
+
+			return {
+				...prevNavData,
+				navigations: prevNavData.navigations.map(updateNavItems),
+			};
+		});
+	}, [currentPage]);
+
+	useEffect(() => {
+		function handleScroll() {
+			setIsScrolled(window.scrollY > 0);
+		}
+
+		window.addEventListener("scroll", handleScroll);
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, []);
+
+	return (
+		<header className="header">
+			<div className="hwrap">
+				<div className="logo">
+					<Link to="/">
+						<img src={logo} alt="Visns Studio CRM" />
+					</Link>
+				</div>
+				<div className="navwrap">
+					<ul className={appNavClasses}>
+						{navData.navigations.map((nav, navKey) =>
+							nav.permission === true ||
+							nav.permissionKey === "" ? (
+								<React.Fragment key={`nav-item-${navKey}`}>
+									{renderNav(nav)}
+								</React.Fragment>
+							) : null
+						)}
+					</ul>
+				</div>
+				<div className="hactions">
+					<ul>
+						{navData.settings.map((setting, settingKey) =>
+							setting.permission === true ? (
+								<React.Fragment key={`setting-${settingKey}`}>
+									{renderSetting(setting)}
+								</React.Fragment>
+							) : null
+						)}
+					</ul>
+				</div>
+			</div>
+		</header>
+	);
 }
 
 export default Navigation;

package/package.json

@@ -1,55 +1,55 @@
 {
-    "dependencies": {
-        "@inovua/reactdatagrid-community": "^5.9.4",
-        "@inovua/reactdatagrid-enterprise": "^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",
-        "quill-image-uploader": "^1.3.0",
-        "react-confirm-alert": "^3.0.6",
-        "react-datepicker": "^4.14.0",
-        "react-dropzone": "^14.2.3",
-        "react-number-format": "^5.2.2",
-        "react-promise-tracker": "^2.1.1",
-        "react-quill": "^2.0.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": "^17.0.1",
-        "react-dom": "^17.0.1"
-    },
-    "name": "@visns-studio/visns-components",
-    "version": "1.5.3",
-    "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"
+	"dependencies": {
+		"@inovua/reactdatagrid-community": "^5.9.4",
+		"@inovua/reactdatagrid-enterprise": "^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",
+		"quill-image-uploader": "^1.3.0",
+		"react-confirm-alert": "^3.0.6",
+		"react-datepicker": "^4.14.0",
+		"react-dropzone": "^14.2.3",
+		"react-number-format": "^5.2.2",
+		"react-promise-tracker": "^2.1.1",
+		"react-quill": "^2.0.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": "^17.0.1",
+		"react-dom": "^17.0.1"
+	},
+	"name": "@visns-studio/visns-components",
+	"version": "1.5.5",
+	"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"
 }