Ignore:
Timestamp:
01/21/25 03:08:24 (3 days ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
0c6b92a
Message:

F4 Finalna Verzija

Location:
imaps-frontend/src/components/SearchBar
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/components/SearchBar/SearchBar.jsx

    r0c6b92a r79a0317  
    66import styles from "./SearchBar.module.css";
    77
    8 function SearchBar({ map, handleDirectionsSubmit, setIsPanelOpen, setSelectedRoom, availableShapes,handleFloorChange }) {
     8function SearchBar({
     9                     map,
     10                     handleDirectionsSubmit,
     11                     setIsPanelOpen,
     12                     setSelectedRoom,
     13                     availableShapes,
     14                     handleFloorChange,
     15                   }) {
    916  const [isExpanded, setIsExpanded] = useState(false);
    1017  const [from, setFrom] = useState("");
    … …  
    1421  const [dropdownVisible, setDropdownVisible] = useState(false);
    1522  const [inputFieldType, setInputFieldType] = useState("");
    16   const dropdownRef = useRef(null);
    17 
    18   const toggleExpanded = () => {
    19     setIsExpanded(!isExpanded);
    20   };
    21 
    22   function searchRoom() {
    23     let foundRoom = availableShapes.find(sh => sh.info.name === from)
    24     console.log("map fnum",map.floorNum)
    25     if(foundRoom.floorNum !== map.floorNum){
     23
     24  const wrapperRef = useRef(null);
     25  const dropdownContainerRef = useRef(null);
     26  const activeInputRef = useRef(null); // Track the currently focused input field
     27
     28  const toggleExpanded = () => setIsExpanded(!isExpanded);
     29
     30  const handleClickOutside = (event) => {
     31    if (
     32        wrapperRef.current &&
     33        !wrapperRef.current.contains(event.target) &&
     34        dropdownContainerRef.current &&
     35        !dropdownContainerRef.current.contains(event.target)
     36    ) {
     37      setDropdownVisible(false);
     38    }
     39  };
     40
     41  useEffect(() => {
     42    document.addEventListener("mousedown", handleClickOutside);
     43    return () => {
     44      document.removeEventListener("mousedown", handleClickOutside);
     45    };
     46  }, []);
     47
     48  const searchRoom = () => {
     49    const foundRoom = availableShapes.find((sh) => sh.info.name === from);
     50    if (foundRoom && foundRoom.floorNum !== map.floorNum) {
    2651      handleFloorChange(foundRoom.floorNum);
    2752    }
    28 
    29 
    30     console.log("FOUND ROOM: " + foundRoom)
    3153    map.highlightShape(from);
    3254    setSelectedRoom(foundRoom);
    3355    setIsPanelOpen(true);
    34   }
    35 
    36   const handleInputFocus = (field) => {
     56  };
     57
     58  const handleInputFocus = (field, inputRef) => {
    3759    if (availableOptions.length === 0 && map) {
    3860      setAvailableOptions(
    … …  
    4264      );
    4365    }
     66    setInputFieldType(field);
    4467    setDropdownVisible(true);
    45     setInputFieldType(field);
     68    activeInputRef.current = inputRef; // Set the active input ref
    4669  };
    4770
    … …  
    6992    if (!dropdownVisible || filteredOptions.length === 0) return null;
    7093
    71     const position = dropdownRef.current?.getBoundingClientRect() || { top: 0, left: 0, width: 0 };
     94    const position = activeInputRef.current?.getBoundingClientRect() || {
     95      top: 0,
     96      left: 0,
     97      width: 0,
     98    };
    7299
    73100    return ReactDOM.createPortal(
    74101        <ul
     102            ref={dropdownContainerRef}
    75103            className={styles.dropdown}
    76104            style={{
    77105              position: "absolute",
    78               top: position.top + position.height,
    79               left: position.left,
     106              top: position.top + position.height + window.scrollY,
     107              left: position.left + window.scrollX,
    80108              width: position.width,
    81109            }}
    … …  
    91119          ))}
    92120        </ul>,
    93         document.body // Portal renders outside the parent hierarchy
     121        document.body
    94122    );
    95123  };
    96124
    97125  return (
    98       <div className={styles.wrapper}>
     126      <div className={styles.wrapper} ref={wrapperRef}>
    99127        {!isExpanded ? (
    100128            <div className={styles.searchBar}>
    … …  
    104132                  placeholder="Search location"
    105133                  aria-label="Search"
    106                   ref={dropdownRef} // Attach the input to calculate dropdown position
    107                   onFocus={() => handleInputFocus("from")}
     134                  onFocus={(e) => handleInputFocus("from", e.target)}
    108135                  onChange={handleInputChange(setFrom)}
    109136                  value={from}
    … …  
    111138              {renderDropdown()}
    112139              <div className={styles.buttons}>
    113                 <button type="button" className={styles.iconButton} onClick={searchRoom}>
     140                <button
     141                    type="button"
     142                    className={styles.iconButton}
     143                    onClick={searchRoom}
     144                >
    114145                  <img src={searchIcon} alt="Search Icon" />
    115146                </button>
    116                 <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
     147                <button
     148                    type="button"
     149                    className={styles.iconButton}
     150                    onClick={toggleExpanded}
     151                >
    117152                  <img src={routeIcon} alt="Route Icon" />
    118153                </button>
    … …  
    127162                    aria-label="From"
    128163                    value={from}
    129                     onFocus={() => handleInputFocus("from")}
     164                    onFocus={(e) => handleInputFocus("from", e.target)}
    130165                    onChange={handleInputChange(setFrom)}
    131166                    className={styles.inputField}
    132                     ref={inputFieldType === "from" ? dropdownRef : null}
    133167                />
    134168                <input
    … …  
    137171                    aria-label="To"
    138172                    value={to}
    139                     onFocus={() => handleInputFocus("to")}
     173                    onFocus={(e) => handleInputFocus("to", e.target)}
    140174                    onChange={handleInputChange(setTo)}
    141175                    className={styles.inputField}
    142                     ref={inputFieldType === "to" ? dropdownRef : null}
    143176                />
    144177                {renderDropdown()}
    … …  
    152185                  <img src={searchIcon} alt="Submit Directions" />
    153186                </button>
    154                 <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
     187                <button
     188                    type="button"
     189                    className={styles.iconButton}
     190                    onClick={toggleExpanded}
     191                >
    155192                  <img src={closeIcon} alt="Close Icon" />
    156193                </button>

  • imaps-frontend/src/components/SearchBar/SearchBar.module.css

    r0c6b92a r79a0317  
    2626.inputField {
    2727  flex-grow: 1;
    28   padding: 10px 15px;
     28  /*padding: 10px 15px;*/
    2929  font-size: 16px;
    3030  border: 1px solid #ddd;
    … …  
    3333  margin-right: 10px;
    3434  min-width: 0;
    35 
     35  margin-top: 12px;
    3636}
    3737
Note: See TracChangeset for help on using the changeset viewer.