Allowing filtering by title

app/controllers/spaces_controller.rb

@@ -8,6 +8,8 @@ class SpacesController < BaseControllers::AuthenticateController # rubocop:disab
   before_action :access_active_personal_list, only: %i[index show spaces_search]
 
   def index
+    params_for_search
+
     set_filterable_facility_categories
     set_filterable_space_types
     filter_spaces
@@ -217,6 +219,12 @@ def get_address_params(params)
     ) || {}
   end
 
+  def params_for_search
+    params.permit(
+      :search_for_title
+    )
+  end
+
   def space_params # rubocop:disable  Metrics/MethodLength
     params.require(:space).permit(
       :title,

app/javascript/controllers/index.js

@@ -4,6 +4,9 @@
 
 import { application } from "./application"
 
+import AutoSubmittingSearchFormController from "./auto_submitting_search_form_controller"
+application.register("auto-submitting-search-form", AutoSubmittingSearchFormController)
+
 import AutofilladdressController from "./autofilladdress_controller"
 application.register("autofilladdress", AutofilladdressController)
 

app/javascript/controllers/mapbox_controller.js

@@ -8,8 +8,6 @@ export default class extends Controller {
       "spaceType",
       "location",
       "searchBox",
-      "title",
-      "form",
       "filterCapsules",
       "searchArea"
   ]
@@ -68,8 +66,6 @@ export default class extends Controller {
   }
 
   updateFilterCapsules() {
-    const titleCapsule = this.titleTarget.value ? capsule_html(`"${this.titleTarget.value}"`) : '';
-
     const facilityCapsules = this.facilityTargets.map(t =>
       t.checked ? capsule_html(t.id) : ''
     ).join('');
@@ -78,7 +74,7 @@ export default class extends Controller {
       t.checked ? capsule_html(t.id) : ''
     ).join('');
 
-    this.filterCapsulesTarget.innerHTML = titleCapsule + facilityCapsules + spaceTypeCapsules;
+    this.filterCapsulesTarget.innerHTML = facilityCapsules + spaceTypeCapsules;
   }
 
   disableCapsule(event) {
@@ -98,11 +94,6 @@ export default class extends Controller {
       }
     });
 
-    if (!foundFilterToReset)  {
-      // Then it's the title serach capsule
-      this.titleTarget.value = '';
-    }
-
     this.updateFilterCapsules();
     this.loadNewMapPosition();
     this.updateUrl();
@@ -112,12 +103,10 @@ export default class extends Controller {
     const selectedFacilities = this.selectedFacilities();
     const selectedSpaceTypes = this.selectedSpaceTypes();
     const selectedLocation = this.selectedLocation();
-    const searchForTitle = this.titleTarget.value;
 
     this.setOrDeleteToUrl('selectedFacilities', selectedFacilities);
     this.setOrDeleteToUrl('selectedSpaceTypes', selectedSpaceTypes);
     this.setOrDeleteToUrl('selectedLocation', selectedLocation);
-    this.setOrDeleteToUrl('searchForTitle', searchForTitle);
     this.setOrDeleteToUrl('view_as', this.viewAs);
   }
 
@@ -180,12 +169,10 @@ export default class extends Controller {
     const selectedFacilities = url.searchParams.get('selectedFacilities');
     const selectedSpaceTypes = url.searchParams.get('selectedSpaceTypes');
     const selectedLocation = url.searchParams.get('selectedLocation');
-    const searchForTitle = url.searchParams.get('searchForTitle');
     this.setViewTo(url.searchParams.get("view_as") || "map");
 
     this.parseSelectedFacilities(selectedFacilities);
     this.parseSelectedSpaceTypes(selectedSpaceTypes);
-    this.parseSearchForTitle(searchForTitle);
 
     this.updateFilterCapsules();
 
@@ -203,13 +190,7 @@ export default class extends Controller {
     }
   }
 
-  parseSearchForTitle(searchForTitle) {
-    if(searchForTitle) {
-      this.titleTarget.value = searchForTitle;
-    } else {
-      this.titleTarget.value = '';
-    }
-  }
+
   parseSelectedFacilities(selectedFacilities) {
     if(!selectedFacilities) return;
 
@@ -256,14 +237,6 @@ export default class extends Controller {
       }
     });
 
-    this.titleTarget.oninput = () => {
-      this.debounce(
-          "titleSearch",
-          500,
-          () => this.runSearch()
-      );
-    }
-
     this.debounce = (name, time, callback) => {
       this.debounceTimeouts = this.debounceTimeouts || {};
 
@@ -295,14 +268,6 @@ export default class extends Controller {
     this.locationTarget.onchange = (event) => {
       this.getSearchCoordinatesFromGeoNorge(event)
     };
-
-    this.formTarget.onsubmit = (event) => {
-      // To stop the form from submitting, as that currently does nothing but refresh the page.
-      event.preventDefault()
-      this.clearDebounce("titleSearch")
-      this.getSearchCoordinatesFromGeoNorge(event)
-      this.hideSearchBox()
-    };
   }
 
   runSearch() {
@@ -415,7 +380,6 @@ export default class extends Controller {
       t.checked ? `space_types[]=${encodeURIComponent(t.name)}&` : ''
     ).join('');
 
-    const title = this.titleTarget.value;
 
     return [
       '/spaces_search?',
@@ -424,7 +388,6 @@ export default class extends Controller {
       `north_west_lng=${northWest.lng}&`,
       `south_east_lat=${southEast.lat}&`,
       `south_east_lng=${southEast.lng}&`,
-      `search_for_title=${title}&`,
       facilitiesString,
       spaceTypesString,
     ].join('');

app/views/spaces/index/_search_form.html.erb

@@ -1,9 +1,10 @@
-<%= form_with data: {
-  mapbox_target: 'form',
+<%= form_with url: spaces_path, method: :get, data: {
   controller: 'sync-fields-with-same-id',
   sync_fields_with_same_id_target: 'form'
 } do |form| %>
 
   <%= render 'spaces/index/search_form_fields', form: %>
 
+  <%= form.submit "Søk", class: "button submit fixed bottom-4" %>
+
 <% end %>

app/views/spaces/index/_search_form_fields.html.erb

@@ -4,6 +4,7 @@
   <div class="mt-2">
     <%= form.text_field :search_for_title,
                         value: params[:search_for_title],
+                        onchange: "this.form.requestSubmit()",
                         data: { mapbox_target: "title" },
                         class: "text_field shadow" %>
   </div>