matestack-ui-core 1.3.0 → 2.0.0

data/lib/matestack/ui/vue_js/components/collection/filter.rb

@@ -0,0 +1,29 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+
+          class Filter < Matestack::Ui::VueJs::Components::Form::Form
+            vue_name 'matestack-ui-core-collection-filter'
+
+            required :id
+            required :filter_state
+
+            def vue_props
+              super.merge({
+                id: ctx.id
+              })
+            end
+
+            def for_option
+              OpenStruct.new(ctx.filter_state)
+            end
+
+          end
+          
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/filter_reset.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class FilterReset < Matestack::Ui::Component
+
+            def response
+              a '@click': 'resetFilter()' do
+                yield
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core → lib/matestack/ui/vue_js/components}/collection/helper.rb

@@ -1,6 +1,69 @@
-module Matestack::Ui::Core::Collection
+module Matestack::Ui::VueJs::Components::Collection
+  module Helper
+
+    def get_collection_filter collection_id, key=nil
+      filter_hash = {}
+      controller_params.each do |param_key, param_value|
+        if param_key.start_with?("#{collection_id}-filter-")
+          param_key.gsub("#{collection_id}-filter-", "")
+          filter_hash[param_key.gsub("#{collection_id}-filter-", "").to_sym] = JSON.parse(param_value)
+        end
+      end
+      if key.nil?
+        return filter_hash
+      else
+        return filter_hash[key]
+      end
+    end
+
+    def get_collection_order collection_id, key=nil
+      order_hash = {}
+      controller_params.each do |param_key, param_value|
+        if param_key.start_with?("#{collection_id}-order-")
+          param_key.gsub("#{collection_id}-order-", "")
+          order_hash[param_key.gsub("#{collection_id}-order-", "").to_sym] = param_value
+        end
+      end
+      if key.nil?
+        return order_hash
+      else
+        return order_hash[key]
+      end
+    end
+
+    # since ruby 3 changed hash <-> keyword argument transformation, we need to
+    # adjust this method call in order to stay compatible with ruby 2.x and ruby 3.x
+    def set_collection options_hash
+      _set_collection **options_hash
+    end
+
+    def _set_collection id: nil, init_offset: 0, init_limit: nil, base_count: nil, filtered_count: nil, data: nil
+      @collections = {} if @collections.nil?
+
+      collection_config = CollectionConfig.new(
+        id,
+        init_offset,
+        init_limit,
+        filtered_count,
+        base_count,
+        data,
+        controller_params,
+        get_collection_filter(id)
+      )
+
+      @collections[id.to_sym] = collection_config
+
+      return collection_config
+    end
+
+    def controller_params
+      return params.to_unsafe_h if defined? params
+      raise 'collection component is missing access to params or context'
+    end
+
+  end
 
-  CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :params) do
+  CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :params, :filter_state) do
 
     def paginated_data
       resulting_data = data
@@ -53,68 +116,12 @@ module Matestack::Ui::Core::Collection
       end
     end
 
-    def config
-      self.to_h.except(:context)
-    end
-
-  end
-
-  module Helper
-
-    def get_collection_filter collection_id, key=nil
-      filter_hash = {}
-      controller_params.each do |param_key, param_value|
-        if param_key.start_with?("#{collection_id}-filter-")
-          param_key.gsub("#{collection_id}-filter-", "")
-          filter_hash[param_key.gsub("#{collection_id}-filter-", "").to_sym] = param_value
-        end
-      end
-      if key.nil?
-        return filter_hash
-      else
-        return filter_hash[key]
-      end
-    end
-
-    def get_collection_order collection_id, key=nil
-      order_hash = {}
-      controller_params.each do |param_key, param_value|
-        if param_key.start_with?("#{collection_id}-order-")
-          param_key.gsub("#{collection_id}-order-", "")
-          order_hash[param_key.gsub("#{collection_id}-order-", "").to_sym] = param_value
-        end
-      end
-      if key.nil?
-        return order_hash
-      else
-        return order_hash[key]
-      end
-    end
-
-    def set_collection id: nil, init_offset: 0, init_limit: nil, base_count: nil, filtered_count: nil, data: nil
-      @collections = {} if @collections.nil?
-
-      collection_config = CollectionConfig.new(
-        id,
-        init_offset,
-        init_limit,
-        filtered_count,
-        base_count,
-        data,
-        controller_params,
-      )
-
-      @collections[id.to_sym] = collection_config
+    def filter_state
 
-      return collection_config
     end
 
-    # try to get params from either controller params, when called in a rails legacy view or
-    # from cells context when called in a matestack app/page/component
-    def controller_params
-      return context[:params] if defined? context
-      return params.to_unsafe_h if defined? params
-      raise 'collection component is missing access to params or context'
+    def config
+      self.to_h.except(:context)
     end
 
   end

data/lib/matestack/ui/vue_js/components/collection/next.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class Next < Matestack::Ui::Component
+            
+            def response
+              a options.merge('@click': 'next()') do
+                yield
+              end
+            end
+            
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/order.js

@@ -0,0 +1,46 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from '../../event_hub'
+import queryParamsHelper from '../../helpers/query_params_helper'
+import componentMixin from '../mixin'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {
+      ordering: {}
+    }
+  },
+  methods: {
+    toggleOrder: function(key){
+      if (this.ordering[key] == undefined) {
+        this.ordering[key] = "asc"
+      } else if (this.ordering[key] == "asc") {
+        this.ordering[key] = "desc"
+      } else if (this.ordering[key] == "desc") {
+        this.ordering[key] = undefined
+      }
+      var url;
+      url = queryParamsHelper.updateQueryParams(this.props["id"] + "-order-" + key, this.ordering[key])
+      url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", 0, url)
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.props["id"] + "-update")
+      this.$forceUpdate()
+    },
+    orderIndicator(key, indicators){
+      return indicators[this.ordering[key]]
+    }
+  },
+  created: function(){
+    var self = this;
+    var queryParamsObject = queryParamsHelper.queryParamsToObject()
+    Object.keys(queryParamsObject).forEach(function(key){
+      if (key.startsWith(self.props["id"] + "-order-")){
+        self.ordering[key.replace(self.props["id"] + "-order-", "")] = queryParamsObject[key]
+      }
+    })
+  }
+}
+
+let component = Vue.component('matestack-ui-core-collection-order', componentDef)
+
+export default componentDef

data/lib/matestack/ui/vue_js/components/collection/order.rb

@@ -0,0 +1,28 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class Order < Matestack::Ui::VueJs::Vue
+            vue_name 'matestack-ui-core-collection-order'
+
+            required :id
+
+            def response
+              div do
+                yield
+              end
+            end
+
+            def vue_props
+              {
+                id: ctx.id
+              }
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/order_toggle.rb

@@ -0,0 +1,21 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class OrderToggle < Matestack::Ui::Component
+
+            required :key
+
+            def response
+              a '@click': "toggleOrder(\"#{ctx.key}\")" do
+                yield
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/order_toggle_indicator.rb

@@ -0,0 +1,30 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class OrderToggleIndicator < Matestack::Ui::Component
+
+            required :key, :asc, :desc
+            optional :default
+
+            def response
+              span do
+                span "v-if": "ordering['#{ctx.key}'] === undefined" do
+                  plain ctx.default
+                end
+                unescaped "{{
+                  orderIndicator(
+                    '#{ctx.key}',
+                    { asc: '#{ctx.asc}', desc: '#{ctx.desc}'}
+                  )
+                }}"
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/page.rb

@@ -0,0 +1,21 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class Page < Matestack::Ui::Component
+            
+            required :page
+            
+            def response
+              a options.merge('@click': "goToPage(#{ctx.page})") do
+                yield
+              end
+            end
+            
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/collection/previous.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class Previous < Matestack::Ui::Component
+            
+            def response
+              a options.merge('@click': 'previous()') do
+                yield
+              end
+            end
+            
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/base.rb

@@ -0,0 +1,167 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Base < Matestack::Ui::VueJs::Vue
+
+            optional :key, :type, :label, :init, :errors, :id, :multiple, :placeholder
+
+            def form_context
+              Matestack::Ui::VueJs::Components::Form::Context.form_context
+            end
+
+            # options/settings
+
+            def key
+              ctx.key
+            end
+
+            def type
+              ctx.type
+            end
+
+            def input_label
+              ctx.label
+            end
+
+            def init
+              ctx.init
+            end
+
+            def error_config
+              ctx.errors
+            end
+
+            def id
+              ctx.id || key
+            end
+
+            def multiple
+              ctx.multiple
+            end
+
+            def placeholder
+              ctx.placeholder
+            end
+
+            # calculated attributes
+
+            def attributes
+              (options || {}).merge({
+                ref: "input.#{attribute_key}",
+                id: id,
+                type: ctx.type,
+                multiple: ctx.multiple,
+                placeholder: ctx.placeholder,
+                '@change': change_event,
+                'init-value': init_value || (ctx.multiple ? [] : nil),
+                'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+              }).tap do |attrs|
+                attrs[:"#{v_model_type}"] = input_key unless type == :file
+              end
+            end
+
+            def attribute_key
+              key.to_s + "#{'[]' if ctx.multiple && ctx.type == :file}"
+            end
+
+            def name
+              attribute_key
+            end
+
+            def init_value
+              return init unless init.nil?
+              if form_context.for_option.respond_to?(key)
+                form_context.for_option.send(key)
+              end
+            end
+
+            def change_event
+              input_changed = "inputChanged('#{attribute_key}');"
+              input_changed << "filesAdded('#{attribute_key}');" if type == :file
+              input_changed
+            end
+
+            def input_key
+              "$parent.data['#{key}']"
+            end
+
+            # set v-model.number for all numeric init values or options
+            def v_model_type(item=nil)
+              if item.nil?
+                (type == :number || init_value.is_a?(Numeric)) ? 'v-model.number' : 'v-model'
+              else
+                item.is_a?(Integer) ? 'v-model.number' : 'v-model'
+              end
+            end
+          
+            # set value-type "Integer" for all numeric init values or options
+            def value_type(item=nil)
+              if item.nil?
+                (type == :number || init_value.is_a?(Numeric)) ? Integer : nil
+              else
+                item.is_a?(Integer)? Integer : nil
+              end
+            end
+
+            # error rendering
+
+            def display_errors?
+              if form_context.ctx.errors == false
+                error_config ? true : false
+              else
+                error_config != false
+              end
+            end
+
+            def error_key
+              "$parent.errors['#{key}']"
+            end
+
+            def error_class
+              get_from_error_config(:class) || 'error'
+            end
+
+            def error_tag
+              get_from_error_config(:tag) || :div
+              # error_config.is_a?(Hash) && error_config.dig(:tag) || :div
+            end
+
+            def input_error_class
+              get_from_error_config(:input, :class) || 'error'
+              # error_config.is_a?(Hash) && error_config.dig(:input, :class) || 'error'
+            end
+
+            def wrapper_tag
+              get_from_error_config(:wrapper, :tag) || :div
+              # error_config.is_a?(Hash) && error_config.dig(:wrapper, :tag) || :div
+            end
+
+            def wrapper_error_class
+              get_from_error_config(:wrapper, :class) || 'errors'
+              # error_config.is_a?(Hash) && error_config.dig(:wrapper, :class) || 'errors'
+            end
+
+            def get_from_error_config(*keys)
+              comp_error_config = error_config.dig(*keys) if error_config.is_a?(Hash)
+              form_error_config = form_context.ctx.errors.dig(*keys) if form_context.ctx.errors.is_a?(Hash)
+              comp_error_config || form_error_config
+            end
+
+            def render_errors
+              if display_errors?
+                Matestack::Ui::Component.new(wrapper_tag, class: wrapper_error_class, 'v-if': error_key) do
+                  Matestack::Ui::Component.new(error_tag, class: error_class, 'v-for': "error in #{error_key}") do
+                    plain vue.error
+                  end
+                end
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end