@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/Navigation.jsx

@@ -1,619 +0,0 @@
-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.css';
-
-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;