matestack-ui-core 0.7.2

data/app/concepts/matestack/ui/core/collection/content/content.rb

@@ -0,0 +1,18 @@
+module Matestack::Ui::Core::Collection::Content
+  class Content < Matestack::Ui::Core::Component::Dynamic
+
+    def setup
+      @rerender = true
+      @component_config = @component_config.except(:data, :paginated_data)
+    end
+
+    def response
+      components {
+        div @tag_attributes do
+          yield_components
+        end
+      }
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/content/next/next.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "next()"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/content/next/next.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Content::Next
+  class Next < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/content/page/link/link.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "goToPage(#{@options[:page]})"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/content/page/link/link.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Content::Page::Link
+  class Link < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/content/previous/previous.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "previous()"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/content/previous/previous.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Content::Previous
+  class Previous < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/filter/filter.js

@@ -0,0 +1,48 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from 'js/event-hub'
+import queryParamsHelper from 'js/helpers/query-params-helper'
+import componentMixin from 'component/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {
+      filter: {}
+    }
+  },
+  methods: {
+    submitFilter: function(){
+      var url;
+      var filter = this.filter
+      for (var key in this.filter) {
+        url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, this.filter[key], url)
+      }
+      url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", 0, url)
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+    },
+    resetFilter: function(){
+      var url;
+      for (var key in this.filter) {
+        url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, null, url)
+        this.filter[key] = null;
+        this.$forceUpdate();
+      }
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+    }
+  },
+  created: function(){
+    var self = this;
+    var queryParamsObject = queryParamsHelper.queryParamsToObject()
+    Object.keys(queryParamsObject).forEach(function(key){
+      if (key.startsWith(self.componentConfig["id"] + "-filter-")){
+        self.filter[key.replace(self.componentConfig["id"] + "-filter-", "")] = queryParamsObject[key]
+      }
+    })
+  }
+}
+
+let component = Vue.component('matestack-ui-core-collection-filter', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/collection/filter/filter.rb

@@ -0,0 +1,17 @@
+module Matestack::Ui::Core::Collection::Filter
+  class Filter < Matestack::Ui::Core::Component::Dynamic
+
+    def setup
+      @component_config = @component_config.except(:data, :paginated_data)
+    end
+
+    def response
+      components {
+        div @tag_attributes do
+          yield_components
+        end
+      }
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/filter/input/input.haml

@@ -0,0 +1,2 @@
+- if [:text, :number, :email, :date, :password].include?(options[:type])
+  %input{@tag_attributes}

data/app/concepts/matestack/ui/core/collection/filter/input/input.rb

@@ -0,0 +1,25 @@
+module Matestack::Ui::Core::Collection::Filter::Input
+  class Input < Matestack::Ui::Core::Component::Static
+
+    def setup
+      @tag_attributes.merge!({
+        "v-model#{'.number' if options[:type] == :number}": input_key,
+        type: options[:type],
+        class: options[:class],
+        id: component_id,
+        "@keyup.enter": "submitFilter()",
+        ref: "filter.#{attr_key}",
+        placeholder: options[:placeholder]
+      })
+    end
+
+    def input_key
+      'filter["' + options[:key].to_s + '"]'
+    end
+
+    def attr_key
+      return options[:key].to_s
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/filter/reset/reset.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "resetFilter()"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/filter/reset/reset.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Filter::Reset
+  class Reset < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/filter/submit/submit.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "submitFilter()"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/filter/submit/submit.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Filter::Submit
+  class Submit < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/helper.rb

@@ -0,0 +1,113 @@
+module Matestack::Ui::Core::Collection
+
+  CollectionConfig = Struct.new(:id, :init_offset, :init_limit, :filtered_count, :base_count, :data, :context) 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
+      (context[:params]["#{id}-offset".to_sym] ||= init_offset).to_i
+    end
+
+    def get_collection_limit
+      (context[: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 config
+      self.to_h.except(:context)
+    end
+
+  end
+
+  module Helper
+
+    def get_collection_filter collection_id, key=nil
+      filter_hash = {}
+      context[: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 = {}
+      context[: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,
+        context
+      )
+
+      @collections[id.to_sym] = collection_config
+
+      return collection_config
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/order/order.js

@@ -0,0 +1,56 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from 'js/event-hub'
+import queryParamsHelper from 'js/helpers/query-params-helper'
+import componentMixin from 'component/component'
+
+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.componentConfig["id"] + "-order-" + key, this.ordering[key])
+      url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", 0, url)
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+      this.$forceUpdate()
+    },
+    orderIndicator(key, indicators){
+      return indicators[this.ordering[key]]
+    },
+    resetFilter: function(){
+      var url;
+      for (var key in this.filter) {
+        url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-filter-" + key, null)
+        this.filter[key] = null;
+        this.$forceUpdate();
+      }
+      window.history.pushState({matestackApp: true, url: url}, null, url);
+      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+    }
+  },
+  created: function(){
+    var self = this;
+    var queryParamsObject = queryParamsHelper.queryParamsToObject()
+    Object.keys(queryParamsObject).forEach(function(key){
+      if (key.startsWith(self.componentConfig["id"] + "-order-")){
+        self.ordering[key.replace(self.componentConfig["id"] + "-order-", "")] = queryParamsObject[key]
+      }
+    })
+  }
+}
+
+let component = Vue.component('matestack-ui-core-collection-order', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/collection/order/order.rb

@@ -0,0 +1,17 @@
+module Matestack::Ui::Core::Collection::Order
+  class Order < Matestack::Ui::Core::Component::Dynamic
+
+    def setup
+      @component_config = @component_config.except(:data, :paginated_data)
+    end
+
+    def response
+      components {
+        div @tag_attributes do
+          yield_components
+        end
+      }
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/order/toggle/indicator/indicator.rb

@@ -0,0 +1,13 @@
+module Matestack::Ui::Core::Collection::Order::Toggle::Indicator
+  class Indicator < Matestack::Ui::Core::Component::Static
+
+    def response
+      components {
+        span @tag_attributes do
+          plain "{{orderIndicator( '#{@component_config[:key]}', {asc: '#{@component_config[:asc]}', desc: '#{@component_config[:desc]}'} ) }}"
+        end
+      }
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/collection/order/toggle/toggle.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click": "toggleOrder(\"#{@component_config[:key]}\")"}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/collection/order/toggle/toggle.rb

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Collection::Order::Toggle
+  class Toggle < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/matestack/ui/core/component/anonym-dynamic-component.js

@@ -0,0 +1,10 @@
+import Vue from 'vue/dist/vue.esm'
+import componentMixin from 'component/component'
+
+const componentDef = {
+  mixins: [componentMixin]
+}
+
+let component = Vue.component('matestack-ui-core-anonym-dynamic-component', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/component/children.haml

@@ -0,0 +1,2 @@
+- @children_cells.each do |key, cell|
+  = cell.call(:show)

data/app/concepts/matestack/ui/core/component/component.js

@@ -0,0 +1,59 @@
+import Vue from 'vue/dist/vue.esm'
+import axios from 'axios'
+import VRuntimeTemplate from "v-runtime-template"
+import matestackEventHub from 'js/event-hub'
+
+const componentMixin = {
+  props: ['componentConfig', 'params'],
+  data: function(){
+    return {
+      asyncTemplate: null
+    }
+  },
+  methods: {
+    onRerender: function(event){
+      if (this.$el.id === event+"__wrapper"){
+        this.rerender()
+      }
+    },
+    onMatestackUiCoreChannel: function(event){
+      if (this.componentConfig["rerender_on"] == event.message){
+        this.rerender()
+      }
+    },
+    rerender: function(){
+      var self = this;
+      self.params["component_key"] = self.componentConfig["component_key"]
+      axios({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        },
+        params: {"component_key": self.componentConfig["component_key"]}
+      })
+      .then(function(response){
+        self.asyncTemplate = response["data"];
+      })
+    },
+    rerenderWith: function(newParams){
+      Object.assign(this.params, newParams);
+      this.rerender()
+    }
+  },
+  created: function () {
+    const self = this
+    matestackEventHub.$on('rerender', self.onRerender)
+    matestackEventHub.$on('MatestackUiCoreChannel', self.onMatestackUiCoreChannel)
+  },
+  beforeDestroy: function() {
+    const self = this
+    matestackEventHub.$off('rerender', self.onRerender);
+    matestackEventHub.$off('MatestackUiCoreChannel', self.onMatestackUiCoreChannel)
+  },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
+}
+
+export default componentMixin