From 9d8e2e9e97ff031cd05e030d43ec5ea2cb535180 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Wed, 12 May 2021 19:59:49 -0300
Subject: [PATCH] Navigator updates

---
 .../NavigatorSearchResultItemView.tsx         |  2 +-
 .../NavigatorSearchResultView.tsx             | 20 +++----
 .../views/search/NavigatorSearchView.tsx      | 52 ++++++++++++++-----
 .../views/search/NavigatorSearchView.types.ts |  6 +++
 4 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx b/src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
index b40a4cf1..81ae8b20 100644
--- a/src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
+++ b/src/views/navigator/views/search-result-item/NavigatorSearchResultItemView.tsx
@@ -56,7 +56,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
                         </div>
                     </div>
                     <div className="d-flex flex-row-reverse align-items-center">
-                        <i className="fas fa-info-circle" onClick={ openInfo }></i>
+                        <i className="fas fa-info-circle text-secondary" onClick={ openInfo }></i>
                         { roomData.habboGroupId > 0 && <i className="fas fa-users mr-2"></i> }
                         { roomData.doorMode !== RoomDataParser.OPEN_STATE && 
                             <i className={ 'mr-2 fas ' + classNames( {'fa-lock': roomData.doorMode === RoomDataParser.DOORBELL_STATE, 'fa-key': roomData.doorMode === RoomDataParser.PASSWORD_STATE })}></i>
diff --git a/src/views/navigator/views/search-result/NavigatorSearchResultView.tsx b/src/views/navigator/views/search-result/NavigatorSearchResultView.tsx
index da85031a..08ed6973 100644
--- a/src/views/navigator/views/search-result/NavigatorSearchResultView.tsx
+++ b/src/views/navigator/views/search-result/NavigatorSearchResultView.tsx
@@ -49,22 +49,16 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
     }
     
     return (
-        <div className="bg-white rounded mb-1 overflow-hidden">
+        <div className="bg-white rounded mb-2 overflow-hidden">
             <div className="d-flex flex-column">
-                <div className="d-flex align-items-center p-2 pb-0 mb-2">
-                    <div className="d-flex flex-grow-1">
-                        <button type="button" className="btn btn-primary btn-sm p-0 px-1 me-1" onClick={ toggleExtended }>
-                            <i className={ "fas " + (isExtended ? 'fa-minus' : 'fa-plus') }></i>
-                        </button>
-                        <div className="h5 m-0 text-black">{ LocalizeText(getResultTitle()) }</div>
-                    </div>
-                    <button type="button" className="btn btn-primary btn-sm p-0 px-1 ms-1" onClick={ toggleDisplayMode }>
-                        <i className={ "fas " + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
-                    </button>
+                <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>
+                    <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
+                    <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 row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
-                        { searchResult.rooms.length && searchResult.rooms.map((room, index) =>
+                    <div className={ 'nitro-navigator-result-list mt-1 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 } />
                             }) }
diff --git a/src/views/navigator/views/search/NavigatorSearchView.tsx b/src/views/navigator/views/search/NavigatorSearchView.tsx
index 18dbaef4..a9714d4e 100644
--- a/src/views/navigator/views/search/NavigatorSearchView.tsx
+++ b/src/views/navigator/views/search/NavigatorSearchView.tsx
@@ -1,21 +1,49 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { LocalizeText } from '../../../../utils/LocalizeText';
-import { NavigatorSearchViewProps } from './NavigatorSearchView.types';
+import { INavigatorSearchFilter, NavigatorSearchViewProps } from './NavigatorSearchView.types';
 
 export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
 {
+    const searchFilters: INavigatorSearchFilter[] = [
+        {
+            name: 'anything',
+            query: null
+        },
+        {
+            name: 'room.name',
+            query: 'roomname'
+        },
+        {
+            name: 'owner',
+            query: 'owner'
+        },
+        {
+            name: 'tag',
+            query: 'tag'
+        },
+        {
+            name: 'group',
+            query: 'group'
+        }
+    ];
+
+    const [ searchFilter, setSearchFilter ] = useState<INavigatorSearchFilter>(searchFilters[0]);
+    const [ searchString, setSearchString ] = useState<string>(null);
+
     return (
-        <div className="d-flex mb-1">
-            <div className="flex-grow-1 input-group">
-                <button type="button" className="btn btn-primary btn-sm dropdown-toggle">{ LocalizeText('navigator.filter.') }</button>
-                <ul className="dropdown-menu">
-                    <li>
-                        <p className="dropdown-item">{ LocalizeText('navigator.filter.') }</p>
-                    </li>
-                </ul>
-                <input type="text" className="form-control form-control-sm" />
+        <div className="d-flex w-100 mb-3">
+            <div>
+                <select className="form-select form-select-sm flex-shrink-1" onChange={ event => setSearchFilter(searchFilters[event.target.value]) }>
+                    { searchFilters.map((filter, index) =>
+                    {
+                        return <option value={ index }>{ LocalizeText('navigator.filter.' + filter.name) }</option>
+                    }) }
+                </select>
             </div>
-            <div className="ms-1 d-flex">
+            <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) } />
+            </div>
+            <div className="ms-2">
                 <button type="button" className="btn btn-primary btn-sm">
                     <i className="fas fa-search"></i>
                 </button>
diff --git a/src/views/navigator/views/search/NavigatorSearchView.types.ts b/src/views/navigator/views/search/NavigatorSearchView.types.ts
index 4ec704bb..e5d5a51b 100644
--- a/src/views/navigator/views/search/NavigatorSearchView.types.ts
+++ b/src/views/navigator/views/search/NavigatorSearchView.types.ts
@@ -2,3 +2,9 @@ export interface NavigatorSearchViewProps
 {
     
 }
+
+export interface INavigatorSearchFilter
+{
+    name: string;
+    query: string;
+}