Navigator search

src/views/navigator/NavigatorView.scss

@@ -1,5 +1,10 @@
 .nitro-navigator {
     width: 400px;
+
+    .content-area {
+        height: 450px;
+        max-height: 450px;
+    }
 }
 
 @import './views/NavigatorViews';

src/views/navigator/NavigatorView.tsx

@@ -112,7 +112,7 @@ export const NavigatorView: FC<NavigatorViewProps> = props =>
                             }) }
                     </NitroCardTabsView>
                     <NitroCardContentView>
-                        <NavigatorSearchView />
+                        <NavigatorSearchView onSendSearch={ sendSearch } />
                         <NavigatorSearchResultSetView />
                     </NitroCardContentView>
                 </NitroCardView> }

src/views/navigator/views/search-result/NavigatorSearchResultView.scss

@@ -1,4 +1,7 @@
-.nitro-navigator-result-list {
+.nitro-navigator-search-result {
+    border: 1px solid #ced4da;
+
+    .nitro-navigator-result-list {
 
         .nitro-navigator-result {
             background: $grid-active-bg-color;
@@ -27,4 +30,6 @@
                 }
             }
         }
+    }
+    
 }

src/views/navigator/views/search-result/NavigatorSearchResultView.tsx

@@ -49,7 +49,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
     }
     
     return (
-        <div className="bg-white rounded mb-2 overflow-hidden">
+        <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
             <div className="d-flex flex-column">
                 <div className="d-flex align-items-center px-2 py-1 text-black">
                     <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
@@ -57,7 +57,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                     <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
                 </div>
                 { isExtended &&
-                    <div className={ 'nitro-navigator-result-list mt-1 row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
+                    <div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
                         { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
                             {
                                 return <NavigatorSearchResultItemView key={ index } roomData={ room } />

src/views/navigator/views/search/NavigatorSearchView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../utils/LocalizeText';
 import { INavigatorSearchFilter, NavigatorSearchViewProps } from './NavigatorSearchView.types';
 
@@ -27,13 +27,31 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
         }
     ];
 
-    const [ searchFilter, setSearchFilter ] = useState<INavigatorSearchFilter>(searchFilters[0]);
+    const [ searchFilter, setSearchFilter ] = useState<number>(0);
-    const [ searchString, setSearchString ] = useState<string>(null);
+    const [ searchString, setSearchString ] = useState<string>('');
+
+    const search = useCallback(() =>
+    {
+        props.onSendSearch(searchFilters[searchFilter].query, searchString);
+    }, [ searchFilter, searchString ]);
+
+    useEffect(() =>
+    {
+        search();
+    }, [ searchFilter ]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) =>
+    {
+        if (event.key === 'Enter')
+        {
+            search();
+        }
+    };
 
     return (
-        <div className="d-flex w-100 mb-3">
+        <div className="d-flex w-100 mb-2">
             <div>
-                <select className="form-select form-select-sm flex-shrink-1" onChange={ event => setSearchFilter(searchFilters[event.target.value]) }>
+                <select className="form-select form-select-sm flex-shrink-1" value={ searchFilter } onChange={ event => setSearchFilter(parseInt(event.target.value)) }>
                     { searchFilters.map((filter, index) =>
                     {
                         return <option value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
@@ -41,10 +59,10 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
                 </select>
             </div>
             <div className="ms-2 flex-grow-1">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') }  onChange={ event => setSearchString(event.target.value) } />
+                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchString }  onChange={ event => setSearchString(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
             </div>
             <div className="ms-2">
-                <button type="button" className="btn btn-primary btn-sm">
+                <button type="button" className="btn btn-primary btn-sm" onClick={ search }>
                     <i className="fas fa-search"></i>
                 </button>
             </div>

src/views/navigator/views/search/NavigatorSearchView.types.ts

@@ -1,6 +1,6 @@
 export interface NavigatorSearchViewProps
 {
-    
+    onSendSearch: (code: string, data: string) => void;
 }
 
 export interface INavigatorSearchFilter