@visns-studio/visns-components 1.5.2 → 1.5.4

package/components/crm/visns-autocomplete.jsx

@@ -65,7 +65,15 @@ const VisnsAutocomplete = (props) => {
 	});
 
 	const handleItemClicked = (place) => {
-		setSearch(place.address + " " + place.text);
+		const address =
+			place.address !== undefined && place.address !== null
+				? place.address
+				: "";
+		const text =
+			place.text !== undefined && place.text !== null ? place.text : "";
+
+		const search = address && text ? `${address} ${text}` : text;
+		setSearch(search);
 		setResults([]);
 		onSelect(place, field);
 	};

package/components/crm/visns-form.jsx

@@ -269,22 +269,18 @@ function Form(props) {
 
 	const autocompleteSelect = (place, id) => {
 		const { address, text, context } = place;
-		const address1 =
-			address !== undefined && address ? address + " " + text : text;
-		let address2 = "";
-		let suburb = "";
-		let postcode = "";
-		let state = "";
-		let country = "";
-
-		if (context[1]) {
-			suburb = context[1].text;
-		}
 
-		if (context[0]) {
-			postcode = context[0].text;
-		}
+		const address1 = address
+			? text
+				? `${address} ${text}`
+				: address
+			: text;
+		const address2 = "";
+		const suburb = context[1]?.text || "";
+		const postcode = context[0]?.text || "";
 
+		let state = "";
+		let country = "";
 		if (context.length === 5) {
 			[state, country] = [context[3]?.text, context[4]?.text];
 		} else {
@@ -300,34 +296,19 @@ function Form(props) {
 			country,
 		};
 
-		if (formData.same_address === true) {
-			setFormData((prevState) => ({
-				...prevState,
-				...formDataUpdate,
-				postal_address1: address1,
-				postal_address2: address2,
-				postal_suburb: suburb,
-				postal_postcode: postcode,
-				postal_state: state,
-				postal_country: country,
-			}));
-		} else if (id === "address1") {
-			setFormData((prevState) => ({
-				...prevState,
-				...formDataUpdate,
-			}));
-		} else {
-			setFormData((prevState) => ({
-				...prevState,
-				...formDataUpdate,
-				postal_address1: address1,
-				postal_address2: address2,
-				postal_suburb: suburb,
-				postal_postcode: postcode,
-				postal_state: state,
-				postal_country: country,
-			}));
+		if (formData.same_address === true || id !== "address1") {
+			formDataUpdate.postal_address1 = address1;
+			formDataUpdate.postal_address2 = address2;
+			formDataUpdate.postal_suburb = suburb;
+			formDataUpdate.postal_postcode = postcode;
+			formDataUpdate.postal_state = state;
+			formDataUpdate.postal_country = country;
 		}
+
+		setFormData((prevState) => ({
+			...prevState,
+			...formDataUpdate,
+		}));
 	};
 
 	const handleSubmit = (e) => {

package/components/crm/visns-navigation.jsx

@@ -1,218 +1,231 @@
 import React, { useEffect, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import {
-    Bug,
-    DoubleSword,
-    Draft,
-    Grid,
-    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,
-            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"
-                    >
-                        <IconComponent size={19} strokeWidth={2} />
-                    </Link>
-                </li>
-            );
-        }
-    };
-
-    const renderNav = (n) => {
-        const iconComponents = {
-            doubleSword: DoubleSword,
-            draft: Draft,
-            grid: Grid,
-            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) => (
+							<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>
+	);
 }
 
 export default Navigation;

package/package.json

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