@visns-studio/visns-components 5.7.0 → 5.7.1

package/src/components/crm/QuickAction.jsx

@@ -1,98 +1,260 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, {
+    useEffect,
+    useRef,
+    useState,
+    useCallback,
+    useMemo,
+} from 'react';
+import { useNavigate } from 'react-router-dom';
 import Popup from 'reactjs-popup';
-import { Search } from 'akar-icons';
+import { Search, Cross, Thunder } from 'akar-icons';
 
 import CustomFetch from './Fetch';
 import Form from './Form';
 
 import styles from './styles/QuickAction.module.scss';
 
-const QuickAction = ({ childRef, setting }) => {
+// Debounce hook to limit API calls
+function useDebounce(value, delay) {
+    // Using React hooks directly since they're imported at the top level
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+
+    React.useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+
+    return debouncedValue;
+}
+
+// Memoized ResultSection component to prevent unnecessary re-renders
+const ResultSection = React.memo(({ title, data, onSelectResult }) => {
+    if (!data?.length) return null;
+
+    return (
+        <>
+            <div className={styles.resultItem}>
+                <h3>{title}</h3>
+            </div>
+            {data.map((result) => (
+                <div
+                    key={result.id}
+                    className={styles.resultItem}
+                    onClick={() => onSelectResult(title, result)}
+                    title={
+                        title === 'Contacts'
+                            ? `${result.firstname} ${result.surname}`
+                            : result.name || result.project_name
+                    }
+                >
+                    <p>
+                        {title === 'Contacts'
+                            ? `${result.firstname} ${result.surname}`
+                            : result.name || result.project_name}
+                    </p>
+                </div>
+            ))}
+        </>
+    );
+});
+
+ResultSection.displayName = 'ResultSection';
+
+const QuickAction = ({ setting }) => {
     const navigate = useNavigate();
-    const location = useLocation();
     const searchBarRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const [selectedResultIndex, setSelectedResultIndex] = useState(-1);
 
     /** State Variables */
     const [search, setSearch] = useState('');
     const [searchResults, setSearchResults] = useState([]);
     const [showSearchResults, setShowSearchResults] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
     const [modalShow, setModalShow] = useState(false);
     const [formType, setFormType] = useState('create');
     const [formId, setFormId] = useState(0);
     const [form, setForm] = useState({});
 
+    // Debounce search input to prevent excessive API calls
+    const debouncedSearchTerm = useDebounce(search, 300);
+
     /** Helper Functions */
-    const fetchSearchResults = async () => {
-        try {
-            const res = await CustomFetch(setting.search.url, 'POST', {
-                search,
+    const fetchSearchResults = useCallback(
+        async (searchTerm) => {
+            if (!searchTerm || searchTerm.trim() === '') return;
+
+            setIsSearching(true);
+            try {
+                const res = await CustomFetch(setting.search.url, 'POST', {
+                    search: searchTerm,
+                });
+                setSearchResults(res.data);
+                setShowSearchResults(true);
+            } catch (e) {
+                console.error('Search error:', e);
+            } finally {
+                setIsSearching(false);
+            }
+        },
+        [setting.search.url]
+    );
+
+    // Flatten search results for keyboard navigation
+    const flattenedResults = useMemo(() => {
+        const flattened = [];
+        if (searchResults && setting.search.types) {
+            setting.search.types.forEach((type) => {
+                if (searchResults[type.id]?.length) {
+                    searchResults[type.id].forEach((result) => {
+                        flattened.push({
+                            type: type.title,
+                            result,
+                        });
+                    });
+                }
             });
-            setSearchResults(res.data);
-            setSearch('');
-        } catch (e) {
-            console.error(e);
         }
-    };
+        return flattened;
+    }, [searchResults, setting.search.types]);
 
-    const handleSearch = (e) => {
+    const handleSearchChange = useCallback((e) => {
         const value = e.target.value;
         setSearch(value);
-        if (e.key === 'Enter') fetchSearchResults();
-    };
-
-    const handleSelectResult = (type, result) => {
-        const url = setting.search.types.find((t) => t.title === type)?.url;
-        if (url) {
-            const key = setting.search.types.find((t) => t.title === type)?.key;
-            if (key && result[key]) {
-                navigate(`${url}/${result[key]}`);
-            } else {
-                navigate(url);
-            }
+        setSelectedResultIndex(-1);
+
+        // Show empty results container when typing
+        if (value.trim() !== '') {
+            setShowSearchResults(true);
         }
+    }, []);
+
+    const handleSearchKeyDown = useCallback(
+        (e) => {
+            // Handle keyboard navigation
+            if (showSearchResults) {
+                switch (e.key) {
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        setSelectedResultIndex((prev) =>
+                            prev < flattenedResults.length - 1 ? prev + 1 : prev
+                        );
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        setSelectedResultIndex((prev) =>
+                            prev > 0 ? prev - 1 : 0
+                        );
+                        break;
+                    case 'Enter':
+                        e.preventDefault();
+                        if (
+                            selectedResultIndex >= 0 &&
+                            selectedResultIndex < flattenedResults.length
+                        ) {
+                            const { type, result } =
+                                flattenedResults[selectedResultIndex];
+                            handleSelectResult(type, result);
+                        } else if (search.trim() !== '') {
+                            fetchSearchResults(search);
+                        }
+                        break;
+                    case 'Escape':
+                        e.preventDefault();
+                        setShowSearchResults(false);
+                        searchInputRef.current?.blur();
+                        break;
+                    default:
+                        break;
+                }
+            } else if (e.key === 'Enter' && search.trim() !== '') {
+                e.preventDefault();
+                fetchSearchResults(search);
+            }
+        },
+        [
+            showSearchResults,
+            selectedResultIndex,
+            flattenedResults,
+            search,
+            fetchSearchResults,
+        ]
+    );
+
+    const clearSearch = useCallback(() => {
+        setSearch('');
         setSearchResults([]);
-    };
-
-    const handleButtonClick = (buttonSetting) => {
-        // Check if the form object is identical to the current form
-        if (JSON.stringify(buttonSetting.form) === JSON.stringify(form)) {
-            modalOpen('create', 0); // Call modalOpen if they are the same
-        } else {
-            setForm(buttonSetting.form); // Otherwise, update the form state
-        }
-    };
+        setShowSearchResults(false);
+        searchInputRef.current?.focus();
+    }, []);
+
+    const handleSelectResult = useCallback(
+        (type, result) => {
+            const typeObj = setting.search.types.find((t) => t.title === type);
+            if (typeObj?.url) {
+                if (typeObj.key && result[typeObj.key]) {
+                    navigate(`${typeObj.url}/${result[typeObj.key]}`);
+                } else {
+                    navigate(typeObj.url);
+                }
+            }
+            setSearchResults([]);
+            setShowSearchResults(false);
+            setSearch('');
+        },
+        [navigate, setting.search.types]
+    );
 
-    const modalClose = () => setModalShow(false);
-    const modalOpen = (ft, fi) => {
+    const handleButtonClick = useCallback(
+        (buttonSetting) => {
+            // Check if the form object is identical to the current form
+            if (JSON.stringify(buttonSetting.form) === JSON.stringify(form)) {
+                modalOpen('create', 0); // Call modalOpen if they are the same
+            } else {
+                setForm(buttonSetting.form); // Otherwise, update the form state
+            }
+        },
+        [form]
+    );
+
+    const modalClose = useCallback(() => setModalShow(false), []);
+
+    const modalOpen = useCallback((ft, fi) => {
         setModalShow(true);
         setFormType(ft);
         setFormId(fi);
-    };
+    }, []);
 
-    const childDropdownCallback = (data) => {
+    const childDropdownCallback = useCallback((data) => {
         setForm((prevForm) => {
             const updatedFields = prevForm.fields.map((field) =>
                 field.id === data.id ? { ...field, options: data.data } : field
             );
             return { ...prevForm, fields: updatedFields };
         });
-    };
+    }, []);
 
     /** Effect Hooks */
+    // Effect to fetch search results when debounced search term changes
     useEffect(() => {
-        if (form?.fields?.length) {
-            modalOpen('create', 0);
+        if (debouncedSearchTerm && debouncedSearchTerm.trim() !== '') {
+            fetchSearchResults(debouncedSearchTerm);
         }
-    }, [form]);
+    }, [debouncedSearchTerm, fetchSearchResults]);
 
+    // Effect to open modal when form is set
     useEffect(() => {
-        const hasSearchResults = setting.search.types.some(
-            (type) => searchResults[type.id]?.length > 0
-        );
-        setShowSearchResults(hasSearchResults);
-    }, [searchResults]);
+        if (form?.fields?.length) {
+            modalOpen('create', 0);
+        }
+    }, [form, modalOpen]);
 
+    // Effect to handle clicks outside search results
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (
@@ -102,40 +264,51 @@ const QuickAction = ({ childRef, setting }) => {
                 setShowSearchResults(false);
             }
         };
+
         document.addEventListener('mousedown', handleClickOutside);
         return () =>
             document.removeEventListener('mousedown', handleClickOutside);
     }, []);
 
-    /** Component Structure */
-    const ResultSection = ({ title, data }) => {
-        if (!data?.length) return null;
-        return (
-            <>
-                <div className={styles.resultItem}>
-                    <h3>{title}</h3>
-                </div>
-                {data.map((result) => (
-                    <div
-                        key={result.id}
-                        className={styles.resultItem}
-                        onClick={() => handleSelectResult(title, result)}
-                    >
-                        <p>
-                            {title === 'Contacts'
-                                ? `${result.firstname} ${result.surname}`
-                                : result.name || result.project_name}
-                        </p>
-                    </div>
-                ))}
-            </>
-        );
-    };
+    // Effect to scroll selected result into view
+    useEffect(() => {
+        if (selectedResultIndex >= 0 && showSearchResults) {
+            // Target all result items within the search results container
+            const resultElements = document.querySelectorAll(
+                '.AutocompletePlace-results .resultItem, .AutocompletePlace-results .' +
+                    styles.resultItem
+            );
+
+            if (resultElements[selectedResultIndex + 1]) {
+                // +1 to skip the header
+                resultElements[selectedResultIndex + 1].scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'nearest',
+                });
+
+                // Add selected class to highlight the item
+                resultElements.forEach((el, i) => {
+                    if (i === selectedResultIndex + 1) {
+                        el.classList.add(styles.selected);
+                    } else {
+                        el.classList.remove(styles.selected);
+                    }
+                });
+            }
+        }
+    }, [selectedResultIndex, showSearchResults, styles.selected]);
 
     return (
         <>
             <div className={styles.quickActions}>
-                <span>Quick Actions</span>
+                <span
+                    className={styles.actionIcon}
+                    title="Quick Actions"
+                    data-tooltip-id="system-tooltip"
+                    data-tooltip-content="Quick Actions"
+                >
+                    <Thunder strokeWidth={2} size={18} />
+                </span>
                 {setting.buttons.map((b) => (
                     <button
                         key={`button-${b.id}`}
@@ -153,29 +326,83 @@ const QuickAction = ({ childRef, setting }) => {
 
                 <div className={styles.searchBar} ref={searchBarRef}>
                     <input
+                        ref={searchInputRef}
                         type="text"
-                        placeholder="Search..."
+                        placeholder="Search contacts, companies..."
                         value={search}
-                        onChange={handleSearch}
-                        onKeyDown={handleSearch}
+                        onChange={handleSearchChange}
+                        onKeyDown={handleSearchKeyDown}
+                        onFocus={() =>
+                            search.trim() !== '' && setShowSearchResults(true)
+                        }
+                        style={{
+                            transition: 'all 0.2s ease',
+                        }}
                     />
                     <div className={styles.iconContainer}>
-                        <Search
-                            strokeWidth={2}
-                            size={18}
-                            className={styles.searchIcon}
-                        />
+                        {search ? (
+                            <Cross
+                                strokeWidth={2}
+                                size={16}
+                                className={styles.searchIcon}
+                                onClick={clearSearch}
+                                style={{ cursor: 'pointer' }}
+                            />
+                        ) : (
+                            <Search
+                                strokeWidth={2}
+                                size={18}
+                                className={styles.searchIcon}
+                            />
+                        )}
                     </div>
 
                     {showSearchResults && (
-                        <div className={styles.searchResults}>
-                            {setting.search.types.map((t) => (
-                                <ResultSection
-                                    key={t.id}
-                                    title={t.title}
-                                    data={searchResults[t.id]}
-                                />
-                            ))}
+                        <div
+                            className="AutocompletePlace-results"
+                            style={{
+                                position: 'absolute',
+                                zIndex: 9999,
+                                width: '100%',
+                                top: '100%',
+                            }}
+                        >
+                            {isSearching ? (
+                                <div className={styles.resultItem}>
+                                    <p>Searching...</p>
+                                </div>
+                            ) : flattenedResults.length > 0 ? (
+                                setting.search.types.map((t) => (
+                                    <ResultSection
+                                        key={t.id}
+                                        title={t.title}
+                                        data={searchResults[t.id]}
+                                        onSelectResult={handleSelectResult}
+                                    />
+                                ))
+                            ) : (
+                                search.trim() !== '' && (
+                                    <div className={styles.resultItem}>
+                                        <p>No results found for "{search}"</p>
+                                    </div>
+                                )
+                            )}
+                            {flattenedResults.length > 0 && (
+                                <div
+                                    className={styles.resultItem}
+                                    style={{
+                                        textAlign: 'center',
+                                        fontSize: '12px',
+                                        color: 'var(--paragraph-color)',
+                                        opacity: 0.7,
+                                    }}
+                                >
+                                    <p>
+                                        Use ↑↓ arrows to navigate, Enter to
+                                        select
+                                    </p>
+                                </div>
+                            )}
                         </div>
                     )}
                 </div>