add basic search

.gitignore

@@ -6,6 +6,7 @@
 
 # Ignore bundler config.
 /.bundle
+vendor/bundle/**/*.*
 
 # Ignore the default SQLite database.
 /db/*.sqlite3*

app/helpers/suit_form_builder.rb

@@ -10,9 +10,9 @@ def form_field(field, options = {}, &block)
     css_classes << 'FormField--required' if required
     css_classes << 'is-error' if field_errors.any?
     css_classes << options[:class_names]
-    # rubocop:disable HelperInstanceVariable
-    @template.content_tag :div, class: css_classes, &block
-    # rubocop:enable HelperInstanceVariable
+    # rubocop:disable Rails/HelperInstanceVariable
+    @template.tag.div(class: css_classes, &block)
+    # rubocop:enable Rails/HelperInstanceVariable
   end
 
   def label(method, text = nil, options = {})
@@ -41,9 +41,9 @@ def check_box(attribute, options = {}, checked_value = '1', unchecked_value = '0
     end
     label(attribute, class: 'FormField-check FormField-check--checkbox') do
       super(attribute, options.reverse_merge(class: 'FormField-checkInput'), checked_value, unchecked_value) +
-        # rubocop:disable HelperInstanceVariable
-        @template.content_tag(:span, label_text, class: 'FormField-checkLabel')
-      # rubocop:enable HelperInstanceVariable
+        # rubocop:disable Rails/HelperInstanceVariable
+        @template.tag.span(label_text, class: 'FormField-checkLabel')
+      # rubocop:enable Rails/HelperInstanceVariable
     end
   end
 

app/models/group_website.rb

@@ -2,7 +2,7 @@
 
 class GroupWebsite < ApplicationRecord
   belongs_to :group
-  validates :url, format: URI.regexp(%w[http https])
+  validates :url, format: URI::DEFAULT_PARSER.make_regexp(%w[http https])
   include Website
   delegate :name, prefix: true, to: :group
 end

app/models/initiative_website.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class InitiativeWebsite < ApplicationRecord
-  validates :url, format: URI.regexp(%w[http https])
+  validates :url, format: URI::DEFAULT_PARSER.make_regexp(%w[http https])
   include Website
 
   belongs_to :initiative

app/models/public_initiative.rb

@@ -3,7 +3,8 @@
 # The publicly available data of an initiative
 class PublicInitiative
   include ActionView::Helpers::DateHelper
-  delegate :name,
+  delegate :id,
+           :name,
            :description_what,
            :description_how,
            :description_further_information,
@@ -70,7 +71,7 @@ def websites
   end
 
   def last_updated
-    time_ago_in_words(timestamp) + ' ago'
+    "#{time_ago_in_words(timestamp)} ago"
   end
 
   def href
@@ -81,6 +82,7 @@ def href
   # rubocop:disable Metrics/AbcSize
   def as_json(_options = {})
     {
+      'id': id,
       'name': name,
       'description_what': description_what,
       'description_how': description_how,

app/views/home/index.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_packs_with_chunks_tag 'explore_tabs', 'data-turbolinks-track': 'reload' %>
+<%= javascript_packs_with_chunks_tag 'home', 'data-turbolinks-track': 'reload' %>
 <div class="Home-strapline">
   <p class="u-mb">We share community-based projects that work towards a Carbon Neutral Stroud District by 2030 and connect groups organising them.</p>
   <p class="u-mb">Share knowledge. Enable Change</p>
@@ -16,13 +16,9 @@
   <span class="Home-search_or">Or</span>
 
   <span class="Home-search">
-    <form action="/search" method="GET">
+    <form id="search">
       <div class="ButtonInput">
         <input type="search" name="q" placeholder="Search for a project" />
-        <button type="submit" class="Button">
-          <span class="u-mr">Go</span>
-          <img src="<%=asset_pack_path("media/icons/right_arrow.svg")%>">
-        </button>
       </div>
     </form>
   </span>
@@ -75,7 +71,7 @@
 
       <tbody>
         <% @initiatives.each do |initiative| %>
-          <tr class="Initiative Initiative-<%=initiative.publication_status%>">
+          <tr class="Initiative Initiative-<%=initiative.publication_status%>" data-content="initiative_<%=initiative.id %>">
             <td><%= link_to initiative.name, initiative_path(initiative) %></td>
             <td><%= initiative.location %></td>
             <td><%= initiative.status_name %></td>

frontend/packs/home.js

@@ -0,0 +1,80 @@
+function focusTab(tab) {
+  const name = tab.getAttribute("data-content");
+  document.querySelectorAll(".Explore-tab").forEach(el => {
+    el.classList.remove("Explore-tab_selected");
+  });
+  document.querySelectorAll(".Tab").forEach(el => {
+    el.classList.remove("Explore-tab_displayed");
+  });
+  tab.classList.add("Explore-tab_selected");
+  document
+    .querySelector(`[data-content=${name}-tab]`)
+    .classList.add("Explore-tab_displayed");
+  return false;
+}
+
+window.addEventListener("load", function() {
+  document.querySelectorAll(".Explore-tab").forEach(el => {
+    el.addEventListener("click", e => {
+      e.preventDefault();
+
+      focusTab(el);
+    });
+  });
+});
+
+window.addEventListener("load", () => {
+  document
+    .querySelector("#search")
+    .addEventListener("submit", e => e.preventDefault());
+  const initiatives = JSON.parse(
+    document.getElementById("map_data_json").innerText
+  ).initiatives;
+  const searchStrings = {};
+  initiatives.forEach(initiative => {
+    const initiativeString = Object.values(initiative)
+      .map(value => {
+        if (value != null && typeof value == "object") {
+          Object.values(value)
+            .toString()
+            .toLowerCase();
+        } else {
+          return value;
+        }
+      })
+      .toString()
+      .toLowerCase();
+    searchStrings[initiative.id] = initiativeString;
+  });
+
+  document
+    .querySelector("[type=search][name=q]")
+    .addEventListener("input", e => {
+      focusTab(document.querySelector("[data-content=initiatives]"));
+      const search = e.target.value.toLowerCase().split(" ");
+      const matches = [];
+
+      for (const initiativeId in searchStrings) {
+        const initiativeData = searchStrings[initiativeId];
+
+        const partialMatch = [];
+        search.forEach(item => {
+          if (initiativeData.includes(item)) {
+            partialMatch.push(initiativeId);
+          }
+        });
+        if (partialMatch.length == search.length) {
+          matches.push(initiativeId);
+        }
+      }
+
+      document.querySelectorAll(".Initiative").forEach(initiativeEl => {
+        initiativeEl.classList.add("u-hidden");
+      });
+      matches.forEach(initiativeId => {
+        document
+          .querySelector(`[data-content=initiative_${initiativeId}]`)
+          .classList.remove("u-hidden");
+      });
+    });
+});

frontend/styles/base/base.css

@@ -70,3 +70,7 @@ textarea {
   justify-content: center;
   width: 37px;
 }
+
+.u-hidden {
+  display: none;
+}