From df240bc7c422867d6aecbb1fa03302ae7bcbc62f Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 17 Feb 2022 16:42:58 +0100
Subject: [PATCH] fix(ui) - filters show no results message, filter modal
 options

---
 .../FilterAutoComplete/FilterAutoComplete.css |  4 +-
 .../FilterAutoComplete/FilterAutoComplete.tsx | 43 +++++++++----------
 .../FilterSelection/FilterSelection.tsx       |  7 ++-
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
index bb9f17313..51bbd55ce 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css
@@ -48,14 +48,14 @@
   border-radius: 0 0 3px 3px;
   border: solid thin $gray-light !important;
   box-shadow: 0 2px 2px 0 $gray-light;
-  /* padding: 20px; */
+  min-height: 50px;
   background-color: white;
   max-height: 350px;
   overflow-y: auto;
   position: absolute;
   top: 28px;
   left: 0;  
-  width: 500px;
+  width: 400px;
   z-index: 99;
 }
 
diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
index e5336a353..333188b3e 100644
--- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
+++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx
@@ -58,7 +58,7 @@ function FilterAutoComplete(props: Props) {
     }).finally(() => setLoading(false));
   }
 
-  const debouncedRequestValues = React.useCallback(debounce(requestValues, 500), []);
+  const debouncedRequestValues = React.useCallback(debounce(requestValues, 300), []);
 
   const onInputChange = ({ target: { value } }) => {
     setQuery(value);
@@ -86,17 +86,12 @@ function FilterAutoComplete(props: Props) {
   const onItemClick = (e, item) => {
     e.stopPropagation();
     e.preventDefault();
-    // const { onSelect, name } = this.props;
 
-    
     if (query !== item.value) {
       setQuery(item.value); 
     }
-    // this.setState({ query: item.value, ddOpen: false})
+
     props.onSelect(e, item);
-    // setTimeout(() => {
-    //   setShowModal(false)
-    // }, 10)
   }
 
   return (
@@ -106,7 +101,6 @@ function FilterAutoComplete(props: Props) {
           name="query"
           onChange={ onInputChange }
           onBlur={ onBlur }
-          // onFocus={ () => setShowModal(true)}
           value={ query }
           autoFocus={ true }
           type="text"
@@ -119,7 +113,6 @@ function FilterAutoComplete(props: Props) {
         />
         <div
           className={stl.right}
-          // onClick={showOrButton ? onRemoveValue : onAddValue}
         >
           { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="12" /></div> }
           { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
@@ -128,21 +121,27 @@ function FilterAutoComplete(props: Props) {
 
       { !showOrButton && <div className="ml-3">or</div> }
 
-      { (showModal && (options.length > 0) || loading) &&  (
+      { showModal && (
         <div className={ stl.menu }>
           <Loader loading={loading} size="small">
-            {
-              options.map((item, i) => (
-                <div
-                  key={item.value + '_'  + i}
-                  className={ cn(stl.filterItem) }
-                  id="filter-item" onClick={ (e) => onItemClick(e, item) }
-                >
-                  { icon && <Icon name={ icon } size="16" marginRight="8" /> }
-                  <span className={ stl.label }>{ item.value }</span>
-                </div>             
-              ))
-            }
+            { options.length === 0 ? (
+              <div className="p-4 w-full">No results found!</div>
+            ) : (
+              <div>
+                {
+                  options.map((item, i) => (
+                    <div
+                      key={item.value + '_'  + i}
+                      className={ cn(stl.filterItem) }
+                      id="filter-item" onClick={ (e) => onItemClick(e, item) }
+                    >
+                      { icon && <Icon name={ icon } size="16" marginRight="8" /> }
+                      <span className={ stl.label }>{ item.value }</span>
+                    </div>             
+                  ))
+                }
+              </div>
+            )} 
           </Loader>
         </div>
       )}
diff --git a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
index d7279f949..33bbbe3ad 100644
--- a/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
+++ b/frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx
@@ -4,9 +4,12 @@ import LiveFilterModal from '../LiveFilterModal';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import { Icon } from 'UI';
 import { connect } from 'react-redux';
+import { dashboard as dashboardRoute, isRoute } from "App/routes";
+
+const DASHBOARD_ROUTE = dashboardRoute();
 
 interface Props {
-  filter: any; // event/filter
+  filter?: any; // event/filter
   onFilterClick: (filter) => void;
   children?: any;
   isLive?: boolean;
@@ -40,7 +43,7 @@ function FilterSelection(props: Props) {
       </OutsideClickDetectingDiv>
       {showModal && (
         <div className="absolute left-0 top-20 border shadow rounded bg-white z-50">
-          { isLive ? <LiveFilterModal onFilterClick={onFilterClick}  /> : <FilterModal onFilterClick={onFilterClick} /> }
+          { (isLive && !isRoute(DASHBOARD_ROUTE, window.location.pathname)) ? <LiveFilterModal onFilterClick={onFilterClick}  /> : <FilterModal onFilterClick={onFilterClick} /> }
         </div>
       )}
     </div>