@visns-studio/visns-components 1.5.4 → 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

@@ -105,16 +105,22 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
 			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>
-						))}
+						{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>
 				);
 			}
@@ -140,27 +146,60 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
 	};
 
 	useEffect(() => {
-		const permissions = userProfile.roles[0].permissions;
+		const permissions = userProfile.roles[0].permissions.map(
+			(permission) => permission.name
+		);
 
 		setNavData((prevNavData) => {
 			const updatePermissions = (nav) => {
-				const matchingPermission = permissions.find(
-					(permission) => permission.name === nav.permissionKey
-				);
+				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
+					);
 
-				if (matchingPermission) {
 					return {
 						...nav,
-						permission: true,
+						permission: matchingPermission,
 					};
 				}
 
-				return nav;
+				return {
+					...nav,
+					permission: true,
+				};
 			};
 
-			const updatedNavigations =
-				prevNavData.navigations.map(updatePermissions);
-			const updatedSettings = prevNavData.settings.map(updatePermissions);
+			const updatedNavigations = prevNavData.navigations
+				.map(updatePermissions)
+				.filter(Boolean);
+			const updatedSettings = prevNavData.settings
+				.map(updatePermissions)
+				.filter(Boolean);
 
 			return {
 				...prevNavData,
@@ -171,14 +210,32 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
 	}, [userProfile]);
 
 	useEffect(() => {
-		setNavData((prevNavData) => ({
-			...prevNavData,
-			navigations: prevNavData.navigations.map((nav) =>
-				nav.id === currentPage
-					? { ...nav, class: "nav-item active" }
-					: { ...nav, class: "nav-item" }
-			),
-		}));
+		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(() => {

package/package.json

@@ -35,7 +35,7 @@
 		"react-dom": "^17.0.1"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.5.4",
+	"version": "1.5.5",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},