Chenge selectbox style

Author: ishikawa999

app/controllers/custom_message_settings_controller.rb

@@ -10,31 +10,31 @@ def edit
 
   def update
     original_custom_messages = @setting.custom_messages
-    languages = (original_custom_messages ? original_custom_messages.keys.map(&:to_s) : [])
+    languages = (original_custom_messages.try(:keys) ? original_custom_messages.keys.map(&:to_s) : [])
 
     if custom_message_setting_params[:custom_messages]
-      messages = original_custom_messages.merge({@lang => CustomMessageSetting.to_nested_hash(custom_message_setting_params[:custom_messages].to_unsafe_h.to_hash) })
+      messages = original_custom_messages.merge({@lang => CustomMessageSetting.nested_hash(custom_message_setting_params[:custom_messages].to_unsafe_h.to_hash) })
     elsif custom_message_setting_params[:custom_messages_yaml]
       messages = custom_message_setting_params[:custom_messages_yaml]
     else
-      message = {@lang => {}}
+      messages = {@lang => {}}
     end
+
     if @setting.update_custom_messages(messages)
       flash[:notice] = l(:notice_successful_update)
       new_custom_messages = @setting.custom_messages
       if new_custom_messages.present?
         languages += new_custom_messages.keys.map(&:to_s)
         CustomMessageSetting.reload_translations!(languages)
       end
-      redirect_to edit_custom_message_settings_path
+      redirect_to edit_custom_message_settings_path(tab: params[:tab])
     else
       @lang ||= User.current.language
       render :edit
     end
   end
 
   private
-
   def set_custom_message_setting
     @setting = CustomMessageSetting.find_or_default
   end

app/helpers/custom_message_settings_helper.rb

@@ -1,25 +1,15 @@
 module CustomMessageSettingsHelper
-  def available_messages(lang)
-    messages = I18n.backend.translations[lang.to_sym]
-    if messages.nil?
-      CustomMessageSetting.reload_translations!([lang])
-      messages = I18n.backend.translations[lang.to_sym] || {}
-    end
-
-    CustomMessageSetting.flatten_hash(messages)
-  end
+  def available_message_options(setting, lang)
+    options = [['', '']] +
+                CustomMessageSetting.available_messages(lang).map{|k, v| ["#{k}: #{v}", k]}
 
-  def available_message_options(lang)
-    [['', '']] +
-    available_messages(lang).map do |k, v|
-      ["#{k}: #{v}", k]
-    end
+    options_for_select(options, disabled: setting.custom_messages_to_flatten_hash(lang).keys)
   end
 
   def normal_mode_input_fields(setting, lang)
     return '' if setting.value[:custom_messages].is_a?(String) || setting.value[:custom_messages].blank?
     content = ''
-    custom_messages_hash = CustomMessageSetting.flatten_hash(setting.custom_messages[lang.to_s] || {})
+    custom_messages_hash = setting.custom_messages_to_flatten_hash(lang.to_s)
     custom_messages_hash.each do |k, v|
       content += content_tag(:p) do
         content_tag(:label, k) +

app/models/custom_message_setting.rb

@@ -1,5 +1,4 @@
 class CustomMessageSetting < Setting
-
   before_validation :change_format_to_hash
   validate :custom_message_keys_are_available
 
@@ -15,6 +14,10 @@ def custom_messages(lang=nil)
     end
   end
 
+  def custom_messages_to_flatten_hash(lang=nil)
+    self.class.flatten_hash(custom_messages(lang))
+  end
+
   def custom_messages_to_yaml
     if self.custom_messages.blank?
       ''
@@ -31,8 +34,12 @@ def update_custom_messages(messages)
   end
 
   def self.available_messages(lang='en')
-    list = I18n.backend.translations[self.find_language(lang).to_sym] || {}
-    self.flatten_hash(list)
+    messages = I18n.backend.translations[self.find_language(lang).to_sym] || {}
+    if messages.nil?
+      CustomMessageSetting.reload_translations!([lang])
+      messages = I18n.backend.translations[lang.to_sym] || {}
+    end
+    self.flatten_hash(messages)
   end
 
   def self.flatten_hash(hash=nil)
@@ -45,7 +52,7 @@ def self.flatten_hash(hash=nil)
     end
   end
 
-  def self.to_nested_hash(hash=nil)
+  def self.nested_hash(hash=nil)
     hash = self.to_hash unless hash
     new_hash = {}
     hash.each do |key, value|
@@ -78,6 +85,7 @@ def self.find_language(language=nil)
 
   def custom_message_keys_are_available
     return false if self.value[:custom_messages].is_a?(Hash) == false || self.errors.present?
+
     custom_messages_hash = {}
     custom_messages.values.each do |hash|
       custom_messages_hash = self.class.flatten_hash(custom_messages_hash.merge(hash))
@@ -91,15 +99,15 @@ def custom_message_keys_are_available
   end
 
   def change_format_to_hash
-    begin
-      if self.value[:custom_messages].is_a?(Hash)
-        YAML.dump(self.value[:custom_messages])
-      else
-        self.value = {custom_messages: YAML.load(self.value[:custom_messages])}
-      end
-    rescue => e
-      self.errors.add(:base, e.message)
-      return false
+    if self.value[:custom_messages].is_a?(Hash)
+      YAML.dump(self.value[:custom_messages])
+    else
+      custom_messages = YAML.load(self.value[:custom_messages])
+      raise l(:error_invalid_yaml_format) unless custom_messages.is_a?(Hash)
+      self.value = {custom_messages: custom_messages}
     end
+  rescue => e
+    self.errors.add(:base, e.message)
+    false
   end
 end

app/views/custom_message_settings/_messages.html.erb

@@ -1,5 +1,5 @@
 <% lang ||= 'en' %>
-<div><%= l(:text_placeholder_choose_key) %><%= select_tag 'select-key', options_for_select(available_message_options(lang)), id: 'key-selector' %></div>
+<div><%= select_tag 'select-key', available_message_options(@setting, lang), id: 'key-selector' %></div>
 <br>
 <div class='tabular'>
   <%= normal_mode_input_fields(@setting, lang) %>
@@ -8,7 +8,11 @@
 <%= javascript_tag do %>
 $(document).ready(function() {
   $("#key-selector").select2({
-    width: '100%'
+    width: '100%',
+    placeholder: '<%= l(:text_placeholder_choose_key) %>',
+    templateResult: function(option) {
+return $('<span class="key">' + option.id + ':</span> <span>' + option.text.replace(/.*: /, '') + '</span>');
+    }
   });
 });
 
@@ -27,7 +31,14 @@ $('#key-selector').on('select2:select', function (e) {
        href: '#',
        onclick: '$(this).closest("p").remove();; return false;'
     }).appendTo($('#edit-custom-messages .tabular p:first'));
-    $('#key-selector').val('');
+    $('#key-selector option[value="' + data.id + '"]').prop("disabled", true).change();
+    $("#key-selector").select2({
+      width: '100%',
+      placeholder: '<%= l(:text_placeholder_choose_key) %>',
+      templateResult: function(option) {
+  return $('<span class="key">' + option.id + ':</span> <span>' + option.text.replace(/.*: /, '') + '</span>');
+      }
+    });
   }
 });
 <% end %>

app/views/custom_message_settings/_normal_tab.html.erb

@@ -1,4 +1,5 @@
 <%= form_tag custom_message_settings_path, method: :patch do %>
+  <%= hidden_field_tag :tab, 'normal' %>
   <label><%= l(:field_language) %>: </label><%= select_tag 'lang', options_for_select(languages_options, @lang), include_blank: true, data: {remote: true, url: url_for(action: :edit)} %>
   <hr>
 

app/views/custom_message_settings/_yaml_tab.html.erb

@@ -1,4 +1,5 @@
 <%= form_tag custom_message_settings_path, method: :patch do %>
+  <%= hidden_field_tag :tab, 'yaml' %>
   <div class='help-message wiki'>
     <p><%= l(:text_help_for_input_format) %></p>
     <p><%= l(:text_placeholder_template_case) %></p>

assets/stylesheets/custom_messages.css

@@ -24,4 +24,14 @@
   pointer-events: none;
   cursor: default;
   text-decoration: none;
+}
+
+.select2-container--default .select2-results__option span.key {
+  color: gray;
+}
+.select2-container--default .select2-results__option[aria-disabled=true] {
+  background: #ccc;
+}
+.select2-container--default .select2-results__option[aria-disabled=true] span {
+  color: white;
 }