@visns-studio/visns-components 4.5.7 → 4.5.8

package/components/crm/Navigation.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
     ArrowCycle,
@@ -31,6 +31,7 @@ import {
     Person,
     Question,
     QuestionFill,
+    Search,
     SettingsVertical,
     ShippingBoxV1,
     SignOut,
@@ -44,16 +45,178 @@ 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,
-    searchComponent,
     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';
@@ -61,7 +224,6 @@ function Navigation({
     const [isScrolled, setIsScrolled] = useState(false);
     const [navData, setNavData] = useState(navConfig);
 
-    // const appNavClasses = isScrolled ? styles['app-nav'] : styles['app-nav'];
     const appNavClasses = styles['app-nav'];
 
     const handleLogout = () => {
@@ -150,6 +312,7 @@ function Navigation({
             peopleMultiple: PeopleMultiple,
             question: Question,
             questionFill: QuestionFill,
+            search: Search,
             settingsVertical: SettingsVertical,
             signOut: SignOut,
             shippingBoxV1: ShippingBoxV1,
@@ -160,6 +323,7 @@ function Navigation({
         };
 
         const IconComponent = iconComponents[n.icon];
+
         let navItemClasses;
 
         if (n.class.includes('active')) {
@@ -366,7 +530,19 @@ function Navigation({
             </aside>
             <main className={styles.content}>
                 <div className={styles['content-header']}>
-                    {searchComponent}
+                    {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={

package/components/crm/styles/Navigation.module.css

@@ -900,3 +900,79 @@
         padding: 0 1rem;
     }
 }
+
+.globalsearch {
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: center;
+    width: 50%;
+
+    button {
+        width: max-content;
+        padding: 0.15rem 0.65rem;
+        margin: 0 0.5rem;
+        border: none;
+        background: var(--primary-color);
+        appearance: none;
+        border-radius: 0.375rem;
+
+        svg {
+            display: block;
+            color: white;
+            width: 100%;
+            max-width: 20px;
+        }
+    }
+}
+
+.AutocompletePlace-results {
+    z-index: 999;
+}
+
+.AutocompletePlace {
+    position: relative;
+
+    > svg {
+        position: absolute;
+        right: 0.5em;
+        top: 0.5em;
+        color: var(--paragraph-color);
+        cursor: pointer;
+    }
+
+    .toggleActive {
+        color: var(--highlight-color);
+    }
+}
+
+.AutocompletePlace-input {
+    padding: 0.65rem 3rem 0.65rem 0.95rem !important;
+    height: 38px;
+}
+
+.AutocompletePlace-results {
+    width: 400px;
+    position: absolute;
+    background-color: white;
+    padding: 0;
+    margin: 0;
+    border: 1px solid rgba(var(--primary-color), 0.25);
+    border-radius: var(--br);
+    overflow: hidden;
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.AutocompletePlace-items {
+    list-style: none;
+    border-bottom: 1px solid rgba(var(--primary-color-rgb), 0.1);
+    cursor: pointer;
+    padding: 10px 10px;
+}
+
+.AutocompletePlace-items:hover {
+    background-color: rgba(var(--paragraph-color-rgb), 0.065);
+}

package/package.json

@@ -14,7 +14,7 @@
         "axios": "^1.7.2",
         "dayjs": "^1.11.12",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.3.18",
+        "framer-motion": "^11.3.19",
         "html-react-parser": "^5.1.12",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.5.7",
+    "version": "4.5.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {