Merge pull request #180 from af83/5367-add-color-input

Add a ColorSelectInput. Refs #5367 

7 files changed, 93 insertions, 18 deletions

diff --git a/app/assets/javascripts/forms.coffee b/app/assets/javascripts/forms.coffee
index 12d82fef1..b7ae3c6ca 100644
--- a/app/assets/javascripts/forms.coffee
+++ b/app/assets/javascripts/forms.coffee
@@ -32,14 +32,25 @@ isEdge = !isIE && !!window.StyleMedia
 
 @colorSelector = ->
   $('.form-group .dropdown.color_selector').each ->
-    selectedStatus = $(this).children('.dropdown-toggle').children('.fa-circle')
-
+    selectedStatusColor = $(this).children('.dropdown-toggle').children('.fa-circle')
+    selectedStatusLabel = $(this).children('.dropdown-toggle')
+    self = this
     $(this).on 'click', "input[type='radio']", (e) ->
       selectedValue = e.currentTarget.value
+      selectedText = $(e.currentTarget).parent()[0].textContent
+      if e.currentTarget.getAttribute("data-for")
+        hidden = $("[name=\"#{e.currentTarget.getAttribute("data-for")}\"]")
+
       if selectedValue == ''
-        $(selectedStatus).css('color', 'transparent')
+        $(selectedStatusColor).css('color', 'transparent')
+        $(selectedStatusLabel).contents().filter( -> this.nodeType == 3 ).filter(':first').text = ""
+        hidden?.val ""
       else
-        $(selectedStatus).css('color', selectedValue)
+        $(selectedStatusColor).css('color', selectedValue)
+        $(selectedStatusLabel).contents().filter( -> this.nodeType == 3 ).first().replaceWith selectedText
+        hidden?.val selectedValue
+        
+      $(self).find('.dropdown-toggle').click()
 
 $ ->
   togglableFilter()
diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass
index b6b91b2a5..340467e77 100644
--- a/app/assets/stylesheets/_layout.sass
+++ b/app/assets/stylesheets/_layout.sass
@@ -28,6 +28,7 @@ body
   // width: 75%
   border-bottom: 1px solid rgba($blue, 0.5)
   margin: 30px auto 45px auto
+  clear: both
 
 .content_header
   font-size: 2.2rem
diff --git a/app/inputs/color_select_input.rb b/app/inputs/color_select_input.rb
new file mode 100644
index 000000000..f92c80a22
--- /dev/null
+++ b/app/inputs/color_select_input.rb
@@ -0,0 +1,44 @@
+class ColorSelectInput < SimpleForm::Inputs::CollectionInput
+  enable :placeholder
+
+  def input(wrapper_options = {})
+    selected_color = object.send(attribute_name)
+    label = if selected_color
+      collection.find{|i| i.is_a?(Enumerable) && i.last == selected_color}.try(:first)
+    end
+
+    out = @builder.hidden_field attribute_name, value: selected_color
+    tag_name = ActionView::Helpers::Tags::Base.new( ActiveModel::Naming.param_key(object), attribute_name, :dummy ).send(:tag_name)
+    select = <<-eos
+  <div class="dropdown color_selector">
+    <button type='button' class="btn btn-default dropdown-toggle" data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'
+      ><span
+        class='fa fa-circle mr-xs'
+        style='color: #{selected_color == nil ? 'transparent' : selected_color}'
+        >
+      </span>
+      #{label}
+      <span class='caret'></span>
+    </button>
+
+    <div class="form-group dropdown-menu" aria-labelledby='dpdwn_color'>
+    eos
+
+    collection.each do |color|
+      name = nil
+      name, color = color if color.is_a?(Enumerable)
+      select += <<-eos
+        <span class="radio" key=#{color} >
+          <label>
+            <input type='radio' class='color_selector' value='#{color}' data-for='#{tag_name}'/>
+            <span class='fa fa-circle mr-xs' style='color: #{color == nil ? 'transparent' : color}'></span>
+            #{name}
+          </label>
+        </span>
+      eos
+    end
+    select += "</div></div>"
+
+    out + select.html_safe
+  end
+end
diff --git a/app/models/chouette/purchase_window.rb b/app/models/chouette/purchase_window.rb
index 5368d790a..9f68d4408 100644
--- a/app/models/chouette/purchase_window.rb
+++ b/app/models/chouette/purchase_window.rb
@@ -16,9 +16,13 @@ module Chouette
 
     scope :contains_date, ->(date) { where('date ? <@ any (date_ranges)', date) }
 
-  def self.ransackable_scopes(auth_object = nil)
-    [:contains_date]
-  end
+    def self.ransackable_scopes(auth_object = nil)
+      [:contains_date]
+    end
+
+    def self.colors_i18n
+      Hash[*color.values.map{|c| [I18n.t("enumerize.purchase_window.color.#{c[1..-1]}"), c]}.flatten]
+    end
 
     def local_id
       "IBOO-#{self.referential.id}-#{self.id}"
@@ -28,4 +32,4 @@ module Chouette
     # end
 
   end
-end
\ No newline at end of file
+end
diff --git a/app/views/purchase_windows/_form.html.slim b/app/views/purchase_windows/_form.html.slim
index 8821ecc8a..2101ae6db 100644
--- a/app/views/purchase_windows/_form.html.slim
+++ b/app/views/purchase_windows/_form.html.slim
@@ -2,15 +2,7 @@
   .row
     .col-lg-12
       = f.input :name
-      // = f.input :color, as: :select, boolean_style: :inline, collection: Chouette::PurchaseWindow.color.values, input_html: {class: 'color_selector '}
-      div
-        .form-group
-          label.select.optional.col-sm-4.col-xs-5.control-label
-            = @purchase_window.class.human_attribute_name :color
-          div.col-sm-8.col-xs-7
-            span.fa.fa-circle style="color:#7F551B"
-
-      = f.input :color, as: :hidden, input_html: { value: '#7F551B' }
+      = f.input :color, as: :color_select, collection: Chouette::PurchaseWindow.colors_i18n
 
   .separator
 
diff --git a/config/locales/enumerize.en.yml b/config/locales/enumerize.en.yml
index bfd7b8c22..edc5b22e3 100644
--- a/config/locales/enumerize.en.yml
+++ b/config/locales/enumerize.en.yml
@@ -255,4 +255,15 @@ en:
       travel_agency: "Travel_agency"
       individual_subject_of_travel_itinerary: "Individual subject of travel itinerary"
       other_information: "Other information"
-
+    purchase_window:
+      color:
+        9B9B9B: "Grey"
+        FFA070: "Light orange"
+        C67300: "Orange"
+        7F551B: "Dark orange"
+        41CCE3: "Light blue"
+        09B09C: "Green"
+        3655D7: "Blue"
+        6321A0: "Purple"
+        E796C6: "Light pink"
+        DD2DAA: "Pink"
diff --git a/config/locales/enumerize.fr.yml b/config/locales/enumerize.fr.yml
index b2eab665d..c4995e3c3 100644
--- a/config/locales/enumerize.fr.yml
+++ b/config/locales/enumerize.fr.yml
@@ -253,3 +253,15 @@ fr:
       travel_agency: "Agence de voyage"
       individual_subject_of_travel_itinerary: "Voyageur individuel"
       other_information: "Autre source d'information"
+    purchase_window:
+      color:
+        9B9B9B: "Gris"
+        FFA070: "Orange clair"
+        C67300: "Orange"
+        7F551B: "Orange foncé"
+        41CCE3: "Bleu clair"
+        09B09C: "Vert"
+        3655D7: "Bleu"
+        6321A0: "Violet"
+        E796C6: "Rose pale"
+        DD2DAA: "Rose"