@visns-studio/visns-components 4.7.2 → 4.7.3

package/src/components/crm/Navigation.jsx

@@ -0,0 +1,619 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import {
+    ArrowCycle,
+    BookClose,
+    BookOpen,
+    Briefcase,
+    Bug,
+    Calendar,
+    ChatDots,
+    Clipboard,
+    DoubleSword,
+    Draft,
+    Envelope,
+    File,
+    Folder,
+    FolderAdd,
+    Gear,
+    Grid,
+    Home,
+    HomeAlt1,
+    Inbox,
+    Info,
+    LightBulb,
+    Microphone,
+    Money,
+    Newspaper,
+    Paper,
+    PeopleGroup,
+    PeopleMultiple,
+    Person,
+    Question,
+    QuestionFill,
+    Search,
+    SettingsVertical,
+    ShippingBoxV1,
+    SignOut,
+    Shield,
+    StatisticUp,
+    TextAlignLeft,
+    Ticket,
+    Utensils,
+} from 'akar-icons';
+import CustomFetch from './Fetch';
+import Notification from './Notification';
+import styles from './styles/Navigation.module.scss';
+
+const SearchComponent = ({
+    navigate,
+    search,
+    setSearch,
+    searchResultShow,
+    searchResult,
+    setSearchResultShow,
+    setSearchResult,
+    navConfig,
+}) => {
+    const searchWrapperRef = useRef(null);
+
+    const handleClickSearch = (url) => {
+        if (url) {
+            setSearchResultShow(false);
+            navigate(url);
+        }
+    };
+
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            fetchSearchResult();
+        }
+    };
+
+    const handleSearch = (e) => {
+        e.preventDefault();
+        fetchSearchResult();
+    };
+
+    const handleSearchChange = (e) => {
+        setSearch(e.target.value);
+    };
+
+    const fetchSearchResult = useCallback(async () => {
+        try {
+            if (search.trim() === '') {
+                setSearchResultShow(false);
+                return;
+            }
+
+            const res = await CustomFetch(navConfig.search.url, 'POST', {
+                search,
+            });
+
+            if (res.data) {
+                const updatedSearchResult = searchResult.map((searchItem) => {
+                    const newData = res.data[searchItem.id] || [];
+                    return {
+                        ...searchItem,
+                        data: newData,
+                    };
+                });
+
+                setSearchResult(updatedSearchResult);
+                setSearchResultShow(true);
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    }, [
+        search,
+        navConfig.search.url,
+        searchResult,
+        setSearchResult,
+        setSearchResultShow,
+    ]);
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                searchWrapperRef.current &&
+                !searchWrapperRef.current.contains(event.target)
+            ) {
+                setSearchResultShow(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [searchWrapperRef, setSearchResultShow]);
+
+    const getNestedValues = (obj, keys) => {
+        return keys
+            .map((key) => obj[key])
+            .filter((value) => value)
+            .join(' ');
+    };
+
+    return (
+        <div className={styles.globalsearch} ref={searchWrapperRef}>
+            <input
+                type="text"
+                placeholder="Search"
+                value={search}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyPress}
+            />
+            {searchResultShow && (
+                <ul
+                    className={styles['AutocompletePlace-results']}
+                    style={{ marginTop: '40px' }}
+                >
+                    {searchResult.length > 0 &&
+                        searchResult.map(
+                            (searchItem, searchItemKey) =>
+                                searchItem.data.length > 0 && (
+                                    <React.Fragment
+                                        key={`search-category-${searchItem.id}-${searchItemKey}`}
+                                    >
+                                        <li
+                                            className={
+                                                styles[
+                                                    'AutocompletePlace-items'
+                                                ]
+                                            }
+                                        >
+                                            <strong>{searchItem.label}</strong>
+                                        </li>
+                                        <ul>
+                                            {searchItem.data.map((item) => (
+                                                <li
+                                                    key={`${searchItemKey}-${item.id}`}
+                                                    className={
+                                                        styles[
+                                                            'AutocompletePlace-items'
+                                                        ]
+                                                    }
+                                                    onClick={() => {
+                                                        handleClickSearch(
+                                                            `${searchItem.url}${item.id}`
+                                                        );
+                                                    }}
+                                                    data-type={searchItem.id}
+                                                    data-id={item.id}
+                                                >
+                                                    {getNestedValues(
+                                                        item,
+                                                        searchItem.key
+                                                    )}
+                                                </li>
+                                            ))}
+                                        </ul>
+                                    </React.Fragment>
+                                )
+                        )}
+                </ul>
+            )}
+            <button onClick={handleSearch}>
+                <Search strokeWidth={2} size={36} />
+            </button>
+        </div>
+    );
+};
+
+function Navigation({
+    children,
+    layout = 'full',
+    logo,
+    navConfig,
+    setSystemAuth,
+    themeType,
+    userProfile,
+}) {
+    const [search, setSearch] = useState('');
+    const [searchResultShow, setSearchResultShow] = useState(false);
+    const [searchResult, setSearchResult] = useState(
+        navConfig.search?.tables || []
+    );
+
+    const location = useLocation();
+    const navigate = useNavigate();
+    const currentPage = location.pathname.substr(1) || 'dashboard';
+    const [isOpen, setOpen] = useState(false);
+    const [isScrolled, setIsScrolled] = useState(false);
+    const [navData, setNavData] = useState(navConfig);
+
+    const appNavClasses = styles['app-nav'];
+
+    const handleLogout = () => {
+        CustomFetch('/logout', 'GET', {}, () => {
+            setSystemAuth(false);
+            navigate('/login');
+        });
+    };
+
+    const renderSetting = (n) => {
+        const iconComponents = {
+            bug: Bug,
+            calendar: Calendar,
+            draft: Draft,
+            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,
+            bookOpen: BookOpen,
+            briefcase: Briefcase,
+            calendar: Calendar,
+            chatDots: ChatDots,
+            clipboard: Clipboard,
+            doubleSword: DoubleSword,
+            draft: Draft,
+            envelope: Envelope,
+            file: File,
+            folder: Folder,
+            folderAdd: FolderAdd,
+            gear: Gear,
+            grid: Grid,
+            home: Home,
+            homeAlt1: HomeAlt1,
+            inbox: Inbox,
+            info: Info,
+            lightBulb: LightBulb,
+            microphone: Microphone,
+            money: Money,
+            newspaper: Newspaper,
+            paper: Paper,
+            peopleGroup: PeopleGroup,
+            peopleMultiple: PeopleMultiple,
+            question: Question,
+            questionFill: QuestionFill,
+            search: Search,
+            settingsVertical: SettingsVertical,
+            signOut: SignOut,
+            shippingBoxV1: ShippingBoxV1,
+            statisticUp: StatisticUp,
+            textAlignLeft: TextAlignLeft,
+            ticket: Ticket,
+            utensils: Utensils,
+        };
+
+        const IconComponent = iconComponents[n.icon];
+
+        let navItemClasses;
+
+        if (n.class.includes('active')) {
+            navItemClasses =
+                themeType === 'alternate'
+                    ? `${styles['nav-item-alternate']} ${styles.active}`
+                    : `${styles['nav-item']} ${styles.active}`;
+        } else {
+            navItemClasses =
+                themeType === 'alternate'
+                    ? styles['nav-item-alternate']
+                    : styles['nav-item'];
+        }
+
+        const renderChildren = () => {
+            if (n.children && n.children.length > 0) {
+                return (
+                    <ul>
+                        {n.children.map(
+                            (child, childKey) =>
+                                child.permission === true && (
+                                    <li key={`nav-child-${childKey}`}>
+                                        <Link
+                                            to={child.url}
+                                            title={child.label}
+                                        >
+                                            {child.label}
+                                        </Link>
+                                    </li>
+                                )
+                        )}
+                    </ul>
+                );
+            }
+            return null;
+        };
+
+        return (
+            <li className={navItemClasses}>
+                {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>
+        );
+    };
+
+    const getFirstRolePermissions = () => {
+        if (
+            userProfile.roles &&
+            userProfile.roles.length > 0 &&
+            userProfile.roles[0].permissions.length > 0
+        ) {
+            return userProfile.roles[0].permissions.map(
+                (permission) => permission.name
+            );
+        }
+        return [];
+    };
+
+    useEffect(() => {
+        const permissions = getFirstRolePermissions();
+
+        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) =>
+                    url && url.startsWith('/')
+                        ? url.substr(1).split('/')[0]
+                        : url
+                        ? url.split('/')[0]
+                        : '';
+                const currentUrl = cleanUrl(currentPage);
+                const navUrl = nav.url
+                    ? cleanUrl(nav.url)
+                        ? cleanUrl(nav.url)
+                        : 'dashboard'
+                    : '';
+
+                if (
+                    navUrl === currentUrl ||
+                    (nav.children &&
+                        nav.children.some(
+                            (child) => child.url === `/${currentPage}`
+                        ))
+                ) {
+                    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 layout === 'simple' || layout === 'cms' ? (
+        <div className={styles.cwrap}>
+            <aside
+                className={
+                    isOpen
+                        ? `${styles['aside--cms']} ${styles['aside--cms--open']}`
+                        : `${styles['aside--cms']}`
+                }
+            >
+                <div className={styles.logo}>
+                    <Link to="/">
+                        <img src={logo} alt="System Logo" />
+                    </Link>
+                </div>
+                <div className={styles.awrap}>
+                    <nav className={styles.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>
+                    </nav>
+                </div>
+            </aside>
+            <main className={styles.content}>
+                <div className={styles['content-header']}>
+                    {navConfig.search?.enable === true && (
+                        <SearchComponent
+                            navigate={navigate}
+                            search={search}
+                            setSearch={setSearch}
+                            searchResultShow={searchResultShow}
+                            searchResult={searchResult}
+                            setSearchResultShow={setSearchResultShow}
+                            setSearchResult={setSearchResult}
+                            navConfig={navConfig}
+                        />
+                    )}
+
+                    <div className={styles['content-title']}>
+                        <button
+                            className={
+                                isOpen
+                                    ? `${styles.mobmenu} ${styles['mobmenu--open']}`
+                                    : `${styles.mobmenu}`
+                            }
+                            onClick={() => setOpen(!isOpen)}
+                        >
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </button>
+                    </div>
+                    <div className={styles['hactions-alternate']}>
+                        <ul>
+                            {navData.settings.map((setting, settingKey) =>
+                                setting.permission === true ? (
+                                    <React.Fragment
+                                        key={`setting-${settingKey}`}
+                                    >
+                                        {renderSetting(setting)}
+                                    </React.Fragment>
+                                ) : null
+                            )}
+                        </ul>
+                    </div>
+                </div>
+                {children}
+            </main>
+        </div>
+    ) : (
+        <div className={styles.hwrap}>
+            <div className={styles.logo}>
+                <Link to="/">
+                    <img src={logo} alt="System Logo" />
+                </Link>
+            </div>
+            <div className={styles.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={
+                    themeType === 'alternate'
+                        ? styles['hactions-alternate']
+                        : styles.hactions
+                }
+            >
+                <ul>
+                    {navData.settings.map((setting, settingKey) =>
+                        setting.permission === true ? (
+                            <React.Fragment key={`setting-${settingKey}`}>
+                                {renderSetting(setting)}
+                            </React.Fragment>
+                        ) : null
+                    )}
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export default Navigation;