CSS/JS component demo

app/assets/javascripts/application.js

@@ -66,7 +66,6 @@
 //= require users
 //= require votes
 //= require allow_participation
-//= require advanced_search
 //= require registration_form
 //= require suggest
 //= require forms
@@ -110,6 +109,7 @@
 //= require cookies
 //= require columns_selector
 //= require budget_edit_associations
+//= require advanced_search_component/advanced_search_component
 
 var initialize_modules = function() {
   "use strict";

app/assets/stylesheets/application.scss

@@ -25,3 +25,4 @@
 @import "autocomplete_overrides";
 @import "jquery-ui/sortable";
 @import "leaflet";
+@import "advanced_search_component/advanced_search_component";

app/assets/stylesheets/layout.scss

@@ -8,7 +8,6 @@
 // 06. Forms
 // 07. Callout
 // 08. User account
-// 09. Search
 // 10. Official levels
 // 11. Tables
 // 12. Social
@@ -1423,36 +1422,6 @@ form {
   }
 }
 
-// 09. Search
-// ----------
-
-.advanced-search {
-  float: left;
-  margin: $line-height 0;
-  position: inherit;
-
-  @include breakpoint(medium) {
-    float: right;
-    margin-bottom: 0;
-    margin-top: $line-height / 4;
-    position: absolute;
-    right: 0;
-  }
-}
-
-.advanced-search-form {
-
-  @include breakpoint(medium) {
-    > .column {
-      padding: 0;
-    }
-  }
-
-  select {
-    height: $line-height * 2;
-  }
-}
-
 // 10. Officials levels
 // --------------------
 

app/components/advanced_search_component.rb

@@ -0,0 +1,41 @@
+class AdvancedSearchComponent < ApplicationComponent
+  include SettingsHelper
+  attr_reader :search_path
+
+  def initialize(search_path)
+    @search_path = search_path
+  end
+
+  private
+
+    def official_level_search_options
+      options_for_select((1..5).map { |i| [setting["official_level_#{i}_name"], i] },
+                         advanced_search_terms[:official_level])
+    end
+
+    def date_range_options
+      options_for_select([
+        [t("shared.advanced_search.date_1"), 1],
+        [t("shared.advanced_search.date_2"), 2],
+        [t("shared.advanced_search.date_3"), 3],
+        [t("shared.advanced_search.date_4"), 4],
+        [t("shared.advanced_search.date_5"), "custom"]],
+        selected_date_range)
+    end
+
+    def selected_date_range
+      date_max.present? ? "custom" : date_min
+    end
+
+    def date_min
+      advanced_search_terms[:date_min]
+    end
+
+    def date_max
+      advanced_search_terms[:date_max]
+    end
+
+    def advanced_search_terms
+      params[:advanced_search] || {}
+    end
+end

app/views/shared/_advanced_search.html.erb → app/components/advanced_search_component/advanced_search_component.html.erb

@@ -4,7 +4,7 @@
 
 <div class="row advanced-search-form">
   <%= form_tag search_path, id: "advanced_search_form", method: :get do %>
-    <div id="js-advanced-search" data-advanced-search-terms="<%= @advanced_search_terms.present? %>" style="display: none">
+    <div id="js-advanced-search" data-advanced-search-terms="<%= advanced_search_terms.present? %>" style="display: none">
 
       <div class="small-12 column">
         <label for="search">
@@ -35,15 +35,15 @@
                 <%= t("shared.advanced_search.from") %> (<%= t("shared.advanced_search.date_placeholder") %>)
               </label>
               <%= text_field_tag "advanced_search[date_min]",
-                                  params[:advanced_search].try(:[], :date_min),
+                                  date_min,
                                   class: "js-calendar" %>
             </div>
             <div class="small-12 large-6 column">
               <label for="advanced_search_date_max">
                 <%= t("shared.advanced_search.to") %> (<%= t("shared.advanced_search.date_placeholder") %>)
               </label>
               <%= text_field_tag "advanced_search[date_max]",
-                                  params[:advanced_search].try(:[], :date_max),
+                                  date_max,
                                   class: "js-calendar" %>
             </div>
           </div>

app/components/advanced_search_component/advanced_search_component.scss

@@ -0,0 +1,26 @@
+.advanced-search {
+  float: left;
+  margin: $line-height 0;
+  position: inherit;
+
+  @include breakpoint(medium) {
+    float: right;
+    margin-bottom: 0;
+    margin-top: $line-height / 4;
+    position: absolute;
+    right: 0;
+  }
+}
+
+.advanced-search-form {
+
+  @include breakpoint(medium) {
+    > .column {
+      padding: 0;
+    }
+  }
+
+  select {
+    height: $line-height * 2;
+  }
+}

app/views/budgets/investments/index.html.erb

@@ -55,7 +55,7 @@
         </div>
       <% end %>
 
-      <%= render("shared/advanced_search", search_path: budget_investments_path(@budget)) %>
+      <%= render AdvancedSearchComponent.new(budget_investments_path(@budget)) %>
 
       <% if unfeasible_or_unselected_filter %>
         <ul class="no-bullet submenu">

app/views/debates/index.html.erb

@@ -54,7 +54,7 @@
         </div>
       </div>
 
-      <%= render "shared/advanced_search", search_path: debates_path(page: 1) %>
+      <%= render AdvancedSearchComponent.new(debates_path(page: 1)) %>
 
       <%= render "shared/order_links", i18n_namespace: "debates.index" %>
 

app/views/proposals/index.html.erb

@@ -75,8 +75,7 @@
       <% end %>
 
       <% unless params[:retired].present? || params[:selected].present? %>
-        <%= render "shared/advanced_search",
-                   search_path: proposals_path(page: 1) %>
+        <%= render AdvancedSearchComponent.new(proposals_path(page: 1)) %>
       <% end %>
 
       <% unless params[:selected].present? %>

config/application.rb

@@ -65,6 +65,7 @@ class Application < Rails::Application
     end
 
     config.assets.paths << Rails.root.join("app", "assets", "fonts")
+    config.assets.paths << Rails.root.join("app", "components")
     config.assets.paths << Rails.root.join("vendor", "assets", "fonts")
 
     # Add lib to the autoload path