Merge pull request #257 from hpi-swt2/178-keep-search-query

Keep search query when navigating between tabs

app/controllers/search_controller.rb

@@ -1,6 +1,7 @@
 class SearchController < ApplicationController
   def index
     return if params[:query].nil?
+    return if params[:query].empty?
 
     @exact_results = add_results_for(params[:query])
     @more_results = more_results(params, @exact_results)

app/javascript/packs/search.js

@@ -2,6 +2,7 @@ function textEntered(field) {
   if (!field) {
     field = document.getElementById("search");
   }
+  localStorage.setItem('query', field.value ?? '');
   const btn = document.getElementById("cancel");
   if (field.value === "") {
     btn.style.visibility = "hidden";
@@ -10,4 +11,4 @@ function textEntered(field) {
   }
 }
 
-window.textEntered = textEntered;
+window.textEntered = textEntered

app/javascript/packs/search_button.js

@@ -0,0 +1,7 @@
+function redirectWithQuery(path) {
+    const query = localStorage.getItem('query')
+    const url = path + '?query=' + (query ?? '')
+    window.location.href = url;
+  }
+
+window.redirectWithQuery = redirectWithQuery

app/views/layouts/_bottombar.html.erb

@@ -1,15 +1,16 @@
+<%= javascript_pack_tag 'search_button', 'data-turbolinks-track': 'reload' %>
 <nav class="navbar navbar-expand-lg navbar-dark navbar-custom-bottom vw-100 p-1">
   <div class="container-fluid">
       <ul class="navbar-nav mx-auto flex-row w-75 justify-content-between">
         <li class="<%= 'active' if current_page?(search_path) %> nav-item">
-          <%= link_to search_path, class: 'nav-link d-flex flex-column align-items-center' do %>
+          <button class="btn nav-link d-flex flex-column align-items-center" onclick="redirectWithQuery('<%=search_path%>')">
             <i class="fas fa-search fa-lg"></i> <span>Search</span>
-          <% end %>
+          </button>
         </li>
         <li class="<%= 'active' if current_page?(map_path) %> nav-item">
-          <%= link_to map_path, class: 'nav-link d-flex flex-column align-items-center', data: {turbolinks: false} do %>
+          <button class="btn nav-link d-flex flex-column align-items-center" onclick="redirectWithQuery('<%=map_path%>')">
             <i class="fas fa-map fa-lg"></i> <span>Map</span>
-          <% end %>
+          </button>
         </li>
         <li class="<%= 'active' if !current_page?(map_path) && !current_page?(search_path) %> nav-item">
           <%= link_to protected_path, class: 'nav-link d-flex flex-column align-items-center' do %>

app/views/layouts/_navbar.html.erb

@@ -1,20 +1,17 @@
+<%= javascript_pack_tag 'search_button', 'data-turbolinks-track': 'reload' %>
 <nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
   <div class="container-fluid">
     <a class="navbar-brand"><i class="fas fa-compass"></i> HPI Compass Portal</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" id="toggle-navigation" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
-          <%= link_to search_path, class: 'nav-link' do %>
-            <i class="fas fa-search"></i> Search
-          <% end %>
+          <button class="btn nav-link" onclick="redirectWithQuery('<%=search_path%>')"><i class="fas fa-search"></i> Search</button>
         </li>
         <li class="nav-item">
-          <%= link_to map_path, class: 'nav-link', data: {turbolinks: false} do %>
-            <i class="fas fa-map"></i> Map
-          <% end %>
+          <button class="btn nav-link" onclick="redirectWithQuery('<%=map_path%>')"><i class="fas fa-map"></i> Map</button>
         </li>
         <li class="nav-item">
           <%= link_to protected_path, class: 'nav-link' do %>

features/scenarios/search/persist_search_query.feature

@@ -0,0 +1,16 @@
+Feature: Persist search query
+  Background:
+    Given a chair was created
+
+  Scenario: persist search query when navigating from search to map page
+    Given I am on the search page
+    When I enter "Chair"
+    And I navigate to the "Map" page
+    Then I can still see the search query "Chair" in the search bar
+
+  Scenario: show search results when navigating from map to search page
+    Given I am on the map page
+    When I enter "Chair"
+    And I navigate to the "Search" page
+    Then I can still see the search query "Chair" in the search bar
+    Then I see Enterprise Platform and Integration Concepts in the list for exact-results

features/step_definitions/search/places_steps.rb

@@ -1,3 +1,18 @@
 When('I am on the search page') do
   visit search_path
 end
+
+When('I am on the map page') do
+  visit map_path
+end
+
+When('I navigate to the {string} page') do |string|
+  if page.has_css? "button.navbar-toggler"
+    click_button 'toggle-navigation'
+  end
+  click_button string
+end
+
+Then('I can still see the search query {string} in the search bar') do |string|
+  expect(page).to have_field('search', with: string)
+end

spec/features/map/access_map_page_spec.rb

@@ -7,7 +7,7 @@
 
   it "is accessible through navbar" do
     visit root_path
-    expect(page).to have_link(nil, href: map_path)
+    expect(page).to have_selector(:link_or_button, 'Map')
   end
 
   it "contains a leaflet container" do