matestack-ui-vuejs 3.0.0.rc1

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

@@ -0,0 +1,45 @@
+import matestackEventHub from '../../event_hub'
+import queryParamsHelper from '../../helpers/query_params_helper'
+import componentHelpers from '../helpers'
+
+import formMixin from '../form/form'
+
+const componentDef = {
+  mixins: [formMixin],
+  template: componentHelpers.inlineTemplate,
+  methods: {
+    perform: function(){
+      var url;
+      var filter = this.data
+      for (var key in this.data) {
+        if(this.data[key] != null){
+          url = queryParamsHelper.updateQueryParams(this.props["id"] + "-filter-" + key, JSON.stringify(this.data[key]), url)
+        }
+      }
+      url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", 0, url)
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.props["id"] + "-update")
+    },
+    resetFilter: function(){
+      var url;
+      for (var key in this.data) {
+        url = queryParamsHelper.updateQueryParams(this.props["id"] + "-filter-" + key, null, url)
+        this.data[key] = null;
+      }
+      this.initValues();
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.props["id"] + "-update")
+    }
+  },
+  created: function(){
+    var self = this;
+    var queryParamsObject = queryParamsHelper.queryParamsToObject()
+    Object.keys(queryParamsObject).forEach(function(key){
+      if (key.startsWith(self.props["id"] + "-filter-")){
+        self.data[key.replace(self.props["id"] + "-filter-", "")] = JSON.parse(queryParamsObject[key])
+      }
+    })
+  }
+}
+
+export default componentDef

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 'v-on:click': 'vc.resetFilter()' do
+                yield
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,128 @@
+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, :filter_state) do
+
+    def paginated_data
+      resulting_data = data
+      resulting_data = resulting_data.offset(get_collection_offset) unless get_collection_offset == 0
+      resulting_data = resulting_data.limit(get_collection_limit) unless get_collection_limit == 0
+
+      return resulting_data
+    end
+
+    def get_collection_offset
+      (params["#{id}-offset".to_sym] ||= init_offset).to_i
+    end
+
+    def get_collection_limit
+      (params["#{id}-limit".to_sym] ||= init_limit).to_i
+    end
+
+    def pages
+      offset = get_collection_offset
+      limit = get_collection_limit
+      if filtered_count.present?
+        count = filtered_count
+      else
+        count = base_count
+      end
+      page_count = count/limit
+      page_count += 1 if count%limit > 0
+      return (1..page_count).to_a
+    end
+
+    def from
+      return get_collection_offset + 1 if to > 0
+      return 0 if to == 0
+    end
+
+    def to
+      current_to = get_collection_offset + get_collection_limit
+      if filtered_count.present?
+        if current_to > filtered_count
+          return filtered_count
+        else
+          return current_to
+        end
+      else
+        if current_to > base_count
+          return base_count
+        else
+          return current_to
+        end
+      end
+    end
+
+    def filter_state
+
+    end
+
+    def config
+      self.to_h.except(:context)
+    end
+
+  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('v-on:click': 'vc.next()') do
+                yield
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,45 @@
+import matestackEventHub from '../../event_hub'
+import queryParamsHelper from '../../helpers/query_params_helper'
+import componentMixin from '../mixin'
+import componentHelpers from '../helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  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]
+      }
+    })
+  }
+}
+
+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 'v-on:click': "vc.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": "vc.ordering['#{ctx.key}'] === undefined" do
+                  plain ctx.default
+                end
+                unescaped "{{
+                  vc.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('v-on:click': "vc.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('v-on:click': 'vc.previous()') do
+                yield
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,179 @@
+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
+
+            def component_attributes
+              super.merge("matestack-ui-core-ref": "#{form_context.component_uid}-#{component_id}")
+            end
+
+            def component_id
+              # defined in subclass
+            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
+              if ctx.id.present?
+                "'#{ctx.id}'"
+              else
+                "'#{key}'+vc.parentNestedFormRuntimeId"
+              end
+            end
+
+            def multiple
+              ctx.multiple
+            end
+
+            def placeholder
+              ctx.placeholder
+            end
+
+            # calculated attributes
+
+            def attributes
+              (options || {}).merge({
+                "matestack-ui-core-ref": scoped_ref("input.#{attribute_key}"),
+                ":id": id,
+                type: ctx.type,
+                multiple: ctx.multiple,
+                placeholder: ctx.placeholder,
+                'v-on:change': change_event,
+                'init-value': init_value,
+                '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 = "vc.inputChanged('#{attribute_key}');"
+              input_changed << "vc.filesAdded('#{attribute_key}');" if type == :file
+              input_changed
+            end
+
+            def input_key
+              "vc.parentFormData['#{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
+              "vc.parentFormErrors['#{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

data/lib/matestack/ui/vue_js/components/form/checkbox.js

@@ -0,0 +1,13 @@
+import formCheckboxMixin from "./checkbox_mixin";
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+const componentDef = {
+  mixins: [componentMixin, formCheckboxMixin],
+  template: componentHelpers.inlineTemplate,
+  data() {
+    return {};
+  }
+}
+
+export default componentDef;