[FEATURE] refactor select component

Author: Nils Henning

app/concepts/matestack/ui/core/form/checkbox/checkbox.rb

@@ -15,7 +15,7 @@ def response
       if checkbox_options
         checkbox_options.to_a.each do |item|
           input html_attributes.merge(
-            attributes: vue_attributes.merge(ref: "select.multiple.#{attr_key}"), 
+            attributes: vue_attributes, 
             type: :checkbox,
             id: "#{id_for_item(item_value(item))}",
             name: item_name(item),
@@ -35,7 +35,7 @@ def response
     def vue_attributes
       (options[:attributes] || {}).merge({
         "@change": change_event,
-        ref: "input.#{attr_key}",
+        ref: "select.multiple.#{attr_key}",
         'init-value': init_value,
         'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
         'value-type': value_type,

app/concepts/matestack/ui/core/form/input/input.rb

@@ -43,6 +43,10 @@ def custom_options_validation
       raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
     end
 
+    def attr_key
+      super + "#{'[]' if multiple && type == :file}"
+    end
+
     private
 
     def parse_value(value)

app/concepts/matestack/ui/core/form/radio/radio.rb

@@ -8,12 +8,12 @@ class Radio < Matestack::Ui::Core::Component::Static
     include Matestack::Ui::Core::Form::HasErrors
 
     requires :key
-    optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :radio_options }
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :radio_options }
 
     def response
       radio_options.to_a.each do |item|
         input html_attributes.merge(
-          attributes: vue_attributes.merge(ref: "select.#{attr_key}"), 
+          attributes: vue_attributes, 
           type: :radio,
           id: "#{id_for_item(item_value(item))}",
           name: item_name(item),
@@ -51,10 +51,6 @@ def item_label(item)
       item.is_a?(Array) ? item.first : item
     end
 
-    def checked_value
-      value || 1
-    end
-
     def v_model_type
       if radio_options && item_value(radio_options.first).is_a?(Integer)
         'v-model.number'
@@ -68,7 +64,7 @@ def change_event
     end
 
     def id_for_item(value)
-      "#{html_attributes[:id]}_#{value}"
+      "#{html_attributes[:id] || attr_key}_#{value}"
     end
 
   end

app/concepts/matestack/ui/core/form/select/select.haml

@@ -1,47 +1,9 @@
-- if options[:label]
-
-  %label=options[:label]
-
-- if options[:type] == :dropdown
-
-  %select{@tag_attributes,
-    "#{model_binding}" => input_key,
-    ref: "select.#{attr_key}",
-    "@change": "inputChanged(\"#{attr_key}\")",
-    "init-value": init_value,
-    "value-type": options_type}
-    %option{disabled: true}= options[:placeholder]
-    - if options[:options].is_a?(Hash)
-      - options[:options].each do |key, value|
-        %option{value: key}=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |option|
-        %option{value: option}=option
-  = render_errors
-
-- if options[:type] == :radio
-
-  %div{id: component_id, ref: "select.#{attr_key}", "init-value": init_value}
-    - if options[:options].is_a?(Hash)
-      - options[:options].each do |key, value|
-        %input{@tag_attributes.except(:id),
-        type: :radio,
-        id: id_for_option(value),
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: "#{attr_key}_#{key}",
-        value: key}/
-        %label{for: id_for_option(value)}=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |value|
-        %input{@tag_attributes.except(:id),
-        type: :radio,
-        id: id_for_option(value),
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: "#{attr_key}_#{value}",
-        value: value}/
-        %label{for: id_for_option(value)}=value
-  = render_errors
+- if input_label
+  %label= input_label
+
+%select{html_attributes.merge(vue_attributes)}
+  - if placeholder
+    %option{value: 'null', disabled: true, selected: init_value.nil?}= placeholder
+  - select_options.to_a.each do |item|
+    %option{value: item_value(item), disabled: item_disabled(item)}= item_label(item)
+= render_errors

app/concepts/matestack/ui/core/form/select/select.rb

@@ -5,74 +5,83 @@ class Select < Matestack::Ui::Core::Component::Static
     include Matestack::Ui::Core::Form::Utils
     include Matestack::Ui::Core::Form::HasErrors
 
+    html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
+
     requires :key
-    requires options: { as: :select_options }
+    optional :multiple, :init, :placeholder, :disabled_values,
+      for: { as: :input_for }, 
+      label: { as: :input_label }, 
+      options: { as: :select_options }
 
-    def setup
-      if @tag_attributes[:id].nil?
-        @tag_attributes[:id] = attr_key
-      end
+    # def response
+    #   radio_options.to_a.each do |item|
+    #     input html_attributes.merge(
+    #       attributes: vue_attributes.merge(ref: "select.#{attr_key}"), 
+    #       type: :radio,
+    #       id: "#{id_for_item(item_value(item))}",
+    #       name: item_name(item),
+    #       value: item_value(item),
+    #     )
+    #     label text: item_label(item), for: id_for_item(item_value(item))
+    #   end
+    #   render_errors
+    # end
+
+    # def html_options
+    #   html_attributes.merge(
+    #     attributes: vue_attributes,
+    #   )
+    # end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: vue_ref,
+        'init-value': init_value || [],
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        'value-type': value_type,
+        "#{v_model_type}": input_key,
+      })
     end
 
-    def attr_key
-      key.to_s
+    def vue_ref
+      "select#{'.multiple' if multiple}.#{attr_key}"
     end
 
-    def option_values
-      values = select_options if select_options.is_a?(Array)
-      values = select_options.keys if select_options.is_a?(Hash)
-      return values
+    def value_type
+      item_value(select_options.first).is_a?(Integer) ? Integer : nil
     end
 
-    def options_type
-      return Integer if option_values.first.is_a?(Integer)
-      return String if option_values.first.is_a?(String)
+    def item_value(item)
+      item.is_a?(Array) ? item.last : item
     end
 
-    def model_binding
+    def item_name(item)
+      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
+    end
 
-      if option_values.first.is_a?(Integer)
-        return "v-model.number"
-      else
-        return "v-model"
-      end
+    def item_disabled(item)
+      disabled_values.present? && disabled_values.include?(item_value(item))
     end
 
-    def init_value
-      unless options[:init].nil?
-        return options[:init]
-      end
+    def item_label(item)
+      item.is_a?(Array) ? item.first : item
+    end
 
-      unless options[:for].nil?
-        value = options[:for].send(key)
-        if [true, false].include? value
-          value ? 1 : 0
-        else
-          return value
-        end
+    def v_model_type
+      if select_options && item_value(select_options.first).is_a?(Integer) && !multiple
+        'v-model.number'
       else
-        unless @included_config.nil? && @included_config[:for].nil?
-          if @included_config[:for].respond_to?(key)
-            value = @included_config[:for].send(key)
-            if [true, false].include? value
-              value ? 1 : 0
-            else
-              return value
-            end
-          else
-            if @included_config[:for].is_a?(Symbol) || @included_config[:for].is_a?(String)
-              return nil
-            end
-            if @included_config[:for].is_a?(Hash)
-              return @included_config[:for][key]
-            end
-          end
-        end
+        'v-model'
       end
     end
 
-    def id_for_option value
-      return "#{@tag_attributes[:id]}_#{value}"
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def id_for_item(value)
+      "#{html_attributes[:id]}_#{value}"
     end
 
   end

app/concepts/matestack/ui/core/form/utils.rb

@@ -1,7 +1,7 @@
 module Matestack::Ui::Core::Form::Utils
 
   def input_key
-    "data['#{key.to_s}']"
+    "data['#{attr_key.to_s}']"
   end
 
   def input_wrapper
@@ -18,9 +18,9 @@ def input_wrapper
 
   def attr_key
     if input_wrapper.nil?
-      return "#{key.to_s}#{'[]' if multiple}"
+      return "#{key.to_s}"
     else
-      return "#{input_wrapper}.#{key.to_s}#{'[]' if multiple}"
+      return "#{input_wrapper}.#{key.to_s}"
     end
   end
 

app/concepts/matestack/ui/core/view/view.rb

@@ -9,10 +9,6 @@ class View < Matestack::Ui::Core::Component::Static
     optional view: { as: :view_path } # Specify a view path to render
     optional partial: { as: :partial_path } # Specifiy a partial to render
 
-    def vue_js_component_name
-      'matestack-ui-core-rails-view'
-    end
-
     def include_partial
       controller = @view_context.present? ? @view_context.controller : options[:matestack_context][:controller]
       if view_path

app/lib/matestack/ui/dynamic_component.rb

@@ -1 +1,2 @@
 Matestack::Ui::DynamicComponent = Matestack::Ui::Core::Component::Dynamic
+Matestack::Ui::VueJsComponent = Matestack::Ui::Core::Component::Static

app/lib/matestack/ui/static_component.rb

@@ -1 +1,2 @@
 Matestack::Ui::StaticComponent = Matestack::Ui::Core::Component::Static
+Matestack::Ui::Component = Matestack::Ui::Core::Component::Static

spec/0.8/components/dynamic/form/form_spec.rb

@@ -243,7 +243,7 @@ class ExamplePage < Matestack::Ui::Page
           def response
             form form_config, :include do
               form_select id: "my-array-test-dropdown", key: :array_input, type: :dropdown, options: ["Array Option 1","Array Option 2"]
-              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "1": "Hash Option 1", "2": "Hash Option 2" }
+              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "Hash Option 1": 1, "Hash Option 2": 2 }
               form_submit do
                 button text: "Submit me!"
               end
@@ -267,7 +267,7 @@ def form_config
         select "Array Option 2", from: "my-array-test-dropdown"
         select "Hash Option 2", from: "my-hash-test-dropdown"
         expect_any_instance_of(FormTestController).to receive(:expect_params)
-          .with(hash_including(my_object: { array_input: "Array Option 2", hash_input: "2" }))
+          .with(hash_including(my_object: { array_input: "Array Option 2", hash_input: 2 }))
         click_button "Submit me!"
       end
 
@@ -276,7 +276,7 @@ class ExamplePage < Matestack::Ui::Page
           def response
             form form_config, :include do
               form_select id: "my-array-test-dropdown", key: :array_input, type: :dropdown, options: ["Array Option 1","Array Option 2"], init: "Array Option 1"
-              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "1": "Hash Option 1", "2": "Hash Option 2" }, init: "1"
+              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "Hash Option 1": 1, "Hash Option 2": 2 }, init: 1
               form_submit do
                 button text: "Submit me!"
               end
@@ -297,11 +297,11 @@ def form_config
 
         visit "/example"
         expect(page).to have_field("my-array-test-dropdown", with: "Array Option 1")
-        expect(page).to have_field("my-hash-test-dropdown", with: "1")
+        expect(page).to have_field("my-hash-test-dropdown", with: 1)
         select "Array Option 2", from: "my-array-test-dropdown"
         select "Hash Option 2", from: "my-hash-test-dropdown"
         expect_any_instance_of(FormTestController).to receive(:expect_params)
-          .with(hash_including(my_object: { array_input: "Array Option 2", hash_input: "2" }))
+          .with(hash_including(my_object: { array_input: "Array Option 2", hash_input: 2 }))
         click_button "Submit me!"
       end
 
@@ -322,7 +322,7 @@ def response
             form form_config, :include do
               form_input id: "description", key: :description, type: :text
               # TODO: Provide better Enum Options API
-              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses.invert, init: TestModel.statuses[@test_model.status]
+              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses, init: TestModel.statuses[@test_model.status]
               form_submit do
                 button text: "Submit me!"
               end
@@ -368,7 +368,7 @@ def response
             form form_config, :include do
               form_input id: "description", key: :description, type: :text
               # TODO: Provide better Enum Options API
-              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses.invert, init: TestModel.statuses[@test_model.status]
+              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses, init: TestModel.statuses[@test_model.status]
               form_submit do
                 button text: "Submit me!"
               end
@@ -413,7 +413,7 @@ def prepare
           def response
             form form_config, :include do
               # TODO: Provide better Enum Options API
-              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses.invert, init: TestModel.statuses[@test_model.status]
+              form_select id: "status", key: :status, type: :dropdown, options: TestModel.statuses, init: TestModel.statuses[@test_model.status]
               form_submit do
                 button text: "Submit me!"
               end
@@ -445,7 +445,7 @@ class ExamplePage < Matestack::Ui::Page
           def response
             form form_config, :include do
               form_select id: "my-array-test-dropdown", key: :array_input, type: :dropdown, options: ["Array Option 1","Array Option 2"], class: "form-control"
-              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "1": "Hash Option 1", "2": "Hash Option 2" }, class: "form-control"
+              form_select id: "my-hash-test-dropdown", key: :hash_input, type: :dropdown, options: { "Hash Option 1": 1, "Hash Option 2": 2 }, class: "form-control"
               form_submit do
                 button text: "Submit me!"
               end