Fix/Many controls in search empty state not working (#509)

* Node version fixed * Remove package-lock.json * package-lock.json removed * Google ads conversion tracking second iteration. * Preview param bug fix * fix(search): replace generic button with a link to alerts modal * Fix(search): clear filters button * feature(search): add clear keyword button * style(javascript): add todo comment * fix(search): hide browser-native clear button in search input --------- Co-authored-by: Alan Soto <[email protected]>
TelosLabs · Jan 26, 2024 · 7c3b5af · 7c3b5af
1 parent 8c6f3da
commit 7c3b5af
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 34 deletions.
diff --git a/app/components/search_bar/component.html.erb b/app/components/search_bar/component.html.erb
@@ -1,11 +1,35 @@
-<div id="search-bar" class="inset-x-0 z-20 px-6 py-4 sticky bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75">
-  <div class="flex flex-row items-center justify-center md:gap-5">
-    <div class="relative w-full max-w-xl h-46px">
-      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-        <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
-      </div>
-      <%= @form.search_field :keyword, value: "#{ params.dig('search', 'keyword') }", class: 'block pl-8 h-46px w-full py-3.5 px-4 rounded-6px text-base text-gray-3 focus:outline-none', placeholder: 'Try “Mental Health Nonprofits”'%>
-    </div>
-    <%= @form.submit 'Search', class: 'invisible w-0 md:w-36 p-0 md:visible md:flex cursor-pointer uppercase flex-row justify-center items-center bg-seafoam md:py-4 md:px-10 rounded-6px text-blue-dark text-base font-bold focus:outline-none mx-2'%>
+<div id="search-bar" class="sticky inset-x-0 z-20 flex items-center justify-center px-6 py-4 
+bg-gradient-to-r from-blue-gradient-2 to-blue-gradient-1 top-20 md:top-22.75 md:gap-5">
+  <%# Keyword input %>
+  <div class="relative w-full max-w-xl">
+    <span class="absolute inset-y-0 left-0 flex items-center px-3 pointer-events-none">
+      <%= inline_svg_tag "solid_search.svg", class: 'h-4 w-4 fill-current text-gray-2' %>
+    </span>
+
+    <%= @form.search_field(
+      :keyword,
+      value: "#{ params.dig('search', 'keyword') }",
+      class: "block px-10 h-46px w-full py-3.5 px-4 rounded-6px text-base text-gray-3 focus:outline-none",
+      id: "search-keyword-input",
+      placeholder: "Try \"Mental Health Nonprofits\"",
+      data: {
+        action: "input->search#displayClearKeywordButton",
+        search_target: "keywordInput"
+      }
+    ) %>
+
+    <button
+    type="button"
+    class="absolute inset-y-0 right-0 px-3 <%= "hidden" unless params.dig('search', 'keyword').present? %>"
+    data-search-target="clearKeywordButton"
+    data-action="click->search#clearKeywordInput">
+      <%= inline_svg_tag "x-icon.svg", class: "w-3.5 h-3.5 icon", aria_hidden: true %>
+    </button>
   </div>
+
+  <%# Search Button %>
+  <%= @form.submit(
+    'Search',
+    class: "invisible w-0 p-0 rounded-md text-blue-dark font-bold uppercase bg-seafoam md:py-4 md:px-10 md:w-36 md:visible focus:outline-none"
+  )%>
 </div>
diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js
@@ -1,21 +1,25 @@
 import { Controller } from "@hotwired/stimulus"
 import { useDebounce, useDispatch } from 'stimulus-use'
 
+// TODO: Refactor controller
 export default class extends Controller {
-  static get targets() {
-    return [
-      "input",
-      "customInput",
-      "form",
-      "pill",
-      "advancedFilters",
-      "pillsCounter",
-      "pillsCounterWrapper",
-      "filtersIcon",
-    ]
-  }
+  static targets = [
+    "keywordInput",
+    "clearKeywordButton",
+    "input",
+    "customInput",
+    "form",
+    "pill",
+    "advancedFilters",
+    "pillsCounter",
+    "pillsCounterWrapper",
+    "filtersIcon"
+  ]
+
+  static debounces = ["displayClearKeywordButton"]
 
   connect() {
+    useDebounce(this, { wait: 250 });
     useDispatch(this)
     this.updatePillsCounter()
     this.updateRadioButtonsClass()
@@ -28,6 +32,31 @@ export default class extends Controller {
     })
   }
 
+  // Keyword
+
+  displayClearKeywordButton() {
+    const classListAction = this.keywordInputTarget.value ? "remove" : "add";
+    this.clearKeywordButtonTarget.classList[classListAction]("hidden");
+  }
+
+  clearKeywordInput() {
+    const inputValue = this.keywordInputTarget.value;
+
+    if (!inputValue) return;
+
+    this.keywordInputTarget.value = "";
+    this.clearKeywordButtonTarget.classList.add("hidden");
+
+    if (this.keywordParamEqualsInputValue(inputValue)) {
+      this.submitForm();
+    }
+  }
+
+  keywordParamEqualsInputValue(inputValue) {
+    const url = new URL(window.location.href);
+    const keywordParam = url.searchParams.get("search[keyword]");
+    return keywordParam === inputValue;
+  }
 
   // Pills
   clearCheckedPills() {
@@ -80,13 +109,13 @@ export default class extends Controller {
 
   updateFiltersState() {
     this.updatePillsCounter()
-    if(this.advancedFiltersButton) {
+    if (this.advancedFiltersButton) {
       this.disableAdvancedFiltersButton(this.advancedFiltersButton)
     }
   }
 
   updateRadioButtonsClass() {
-    const buttons = document.querySelectorAll('input[name="search[distance]"]')    
+    const buttons = document.querySelectorAll('input[name="search[distance]"]')
     const buttons_array = [...buttons]
     buttons_array.forEach(button => {
       if (button.checked) {

diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
@@ -79,6 +79,10 @@
   }
 }
 
+svg.icon path {
+  fill: #3C4858;
+}
+
 button:disabled {
   color: #C2CEDB;
   cursor: default;
@@ -93,6 +97,28 @@ button:disabled {
   display: none;
 }
 
+/* Reset */
+
+input#search-keyword-input {
+  /* IE and Edge */
+  &::-ms-clear,
+  &::-ms-reveal {
+    display: none;
+    width : 0;
+    height: 0;
+  }
+
+  /* Chrome and Safari */
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    display: none;
+  }
+}
+
+/* Animations */
+
 .spinner {
   width: 50px;
   height: 50px;

diff --git a/app/views/searches/_filter.html.slim b/app/views/searches/_filter.html.slim
@@ -38,7 +38,6 @@ div class="bg-white rounded-3xl" data-search-target="advancedFilters"
         = render SelectMultiple::Component.new(name: 'search[beneficiary_groups]',items: beneficiary_groups, selected: selected_("advanced_filters", @top_10_beneficiary_subcategories.map, search.beneficiary_groups || []))
 
     div class="flex flex-row justify-between w-full px-6 py-5 border-t border-gray-8"
-      // For anchor and button tags stimulus uses the click event as default
-      button class="flex justify-center px-4 py-2 text-blue-medium text-left" type="button" data-action="search#clearAll modal#close" data-search-target="clearAllButton"
+      button class="flex justify-center px-4 py-2 text-blue-medium text-left" type="button" data-action="click->search#clearAll click->modal#close"
         | Clear Advanced Filters
-      = form.submit "Apply filters", class: "uppercase font-bold tracking-wider flex justify-center px-5 py-2.5 text-white rounded-md bg-blue-medium cursor-pointer", data: { action: 'modal#close search#applyAdvancedFilters', disable_with: false}
+      = form.submit "Apply filters", class: "uppercase font-bold tracking-wider px-5 py-2.5 text-white rounded-md bg-blue-medium cursor-pointer", data: { action: 'modal#close search#applyAdvancedFilters', disable_with: false}
diff --git a/app/views/searches/show.html.slim b/app/views/searches/show.html.slim
@@ -74,19 +74,23 @@
                 - else
                   div class="flex justify-center w-full"
                     = inline_svg_tag 'empty_state_4.svg', size: '278*279'
-                  div class="flex flex-col items-center justify-center w-full gap-4 px-12 mb-4 mb-16 text-grey-2"
+                  div class="flex flex-col items-center justify-center w-full gap-4 px-12 mb-16 text-grey-2"
                     p class="text-xl font-bold text-center "
                       | We couldn't find any nonprofits that matched your search.
                     p class="max-w-xs px-4 text-base text-center"
                       | Try searching for another keyword or editing your filters.
-                    button class="text-sm font-bold text-blue-medium" type="submit" data-action="click->search#clearAll"
+                    button class="text-sm font-bold text-blue-medium" type="submit" data-action="click->search#clearKeywordInput click->search#clearCheckedPills click->search#clearAll"
                       | Clear Filters
-                    / TODO: Open modal with this button
-                    - if user_signed_in?
-                      button class="mt-10 text-sm font-bold text-black" type="button" data-action="click->modal#open"
-                        | Create an Alert for this Search
-                    - else
-                      = link_to "Create an Alert for this Search", user_session_path, class: 'mt-10 text-sm font-bold text-black'
+
+                    = link_to( \
+                      new_alert_path( \
+                        filters: parse_filters(@search), \
+                        filters_list: list_of_filters(@search) \
+                      ), \
+                      class: "mt-10 text-sm font-bold text-black", \
+                      data: { turbo_frame: "modal" } \
+                    ) do
+                      | Create an Alert for this Search
           // Mobile map
           div class="hidden w-full h-85vh md:h-0" data-tabs-target="panel" data-controller="places" data-action="google-maps-callback@window->places#initMap" data-places-imageurl-value="#{asset_path 'markergc.png'}" data-places-clickedimageurl-value="#{asset_path 'markerinvgc.png'}"
             div class="w-full h-full" data-places-target="map"