matestack-ui-core 1.3.0 → 2.0.0

data/{app/concepts/matestack/ui/core/async → lib/matestack/ui/vue_js/components}/async.js

@@ -1,8 +1,8 @@
 import Vue from 'vue/dist/vue.esm'
 import axios from 'axios'
 import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -25,15 +25,15 @@ const componentDef = {
       }
       this.showing = true
       this.event.data = event_data
-      if(this.componentConfig["defer"] != undefined){
-        if(!isNaN(this.componentConfig["defer"])){
+      if(this.props["defer"] != undefined){
+        if(!isNaN(this.props["defer"])){
           this.startDefer()
         }
       }
-      if(this.componentConfig["hide_after"] != undefined){
+      if(this.props["hide_after"] != undefined){
         self.hideAfterTimeout = setTimeout(function () {
           self.hide()
-        }, parseInt(this.componentConfig["hide_after"]));
+        }, parseInt(this.props["hide_after"]));
       }
     },
     hide: function(){
@@ -45,7 +45,7 @@ const componentDef = {
       self.loading = true;
       setTimeout(function () {
         self.rerender()
-      }, parseInt(this.componentConfig["defer"]));
+      }, parseInt(this.props["defer"]));
     },
     rerender: function(){
       var self = this;
@@ -57,48 +57,48 @@ const componentDef = {
           'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
         },
         params: {
-          "component_key": self.componentConfig["component_key"],
-          "component_class": self.componentConfig["parent_class"]
+          "component_key": self.props["component_key"],
+          "component_class": self.props["parent_class"]
         }
       })
       .then(function(response){
         var tmp_dom_element = document.createElement('div');
         tmp_dom_element.innerHTML = response['data'];
-        var template = tmp_dom_element.querySelector('#' + self.componentConfig["component_key"]).outerHTML;
+        var template = tmp_dom_element.querySelector('#' + self.props["component_key"]).outerHTML;
         self.loading = false;
         self.asyncTemplate = template;
       })
       .catch(function(error){
         console.log(error)
-        matestackEventHub.$emit('async_rerender_error', { id: self.componentConfig["component_key"] })
+        matestackEventHub.$emit('async_rerender_error', { id: self.props["component_key"] })
       })
     }
   },
   created: function () {
     const self = this
-    self.registerEvents(this.componentConfig['show_on'], self.show)
-    self.registerEvents(this.componentConfig['hide_on'], self.hide)
-    self.registerEvents(this.componentConfig['rerender_on'], self.rerender)
-    if(this.componentConfig["show_on"] != undefined){
+    self.registerEvents(this.props['show_on'], self.show)
+    self.registerEvents(this.props['hide_on'], self.hide)
+    self.registerEvents(this.props['rerender_on'], self.rerender)
+    if(this.props["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["defer"] != undefined){
-      if(!isNaN(this.componentConfig["defer"])){
-        if (this.componentConfig["show_on"] == undefined){
+    if(this.props["defer"] != undefined){
+      if(!isNaN(this.props["defer"])){
+        if (this.props["show_on"] == undefined){
           this.startDefer()
         }
       }
     }
-    if(this.componentConfig["init_show"] == true){
+    if(this.props["init_show"] == true){
       this.showing = true
     }
   },
   beforeDestroy: function() {
     const self = this
     clearTimeout(self.hideAfterTimeout)
-    self.removeEvents(this.componentConfig["show_on"], self.show)
-    self.removeEvents(this.componentConfig["hide_on"], self.hide)
-    self.removeEvents(this.componentConfig["rerender_on"], self.rerender)
+    self.removeEvents(this.props["show_on"], self.show)
+    self.removeEvents(this.props["hide_on"], self.hide)
+    self.removeEvents(this.props["rerender_on"], self.rerender)
   },
   components: {
     VRuntimeTemplate: VRuntimeTemplate

data/lib/matestack/ui/vue_js/components/async.rb

@@ -0,0 +1,84 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Async < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-async'
+
+          required :id
+          optional :show_on, :hide_on, :rerender_on, :defer
+
+          # register itself as an async component in the context
+          def initialize(html_tag = nil, text = nil, options = {}, &block)
+            super(html_tag, text, options, &block)
+            Matestack::Ui::Core::Context.async_components = {} if Matestack::Ui::Core::Context.async_components.nil?
+            Matestack::Ui::Core::Context.async_components[self.ctx.id] = self
+          end
+
+          def create_children(&block)
+            self.response &block
+          end
+
+          def response
+            if params[:component_key] && !is_not_requested?
+              div async_attributes do
+                yield
+              end
+            else
+              vue_component do
+                div class: 'matestack-async-component-container', 'v-bind:class': '{ "loading": loading === true }' do
+                  div class: 'matestack-async-component-wrapper', 'v-if': 'asyncTemplate == null', 'v-bind:class': '{ "loading": loading === true }' do
+                    div async_attributes do
+                      if params[:component_key]
+                        # we need to yield if a request is looking for a async component, indicated through present params[:component_key]
+                        # the requested component could be hidden within this deferred async!
+                        yield
+                      else
+                        yield unless is_deferred?
+                      end
+                    end
+                  end
+                  div class: 'matestack-async-component-wrapper', 'v-if': 'asyncTemplate != null', 'v-bind:class': '{ "loading": loading === true }' do
+                    Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'asyncTemplate')
+                  end
+                end
+              end
+            end
+          end
+
+          def async_attributes
+            options.merge({
+              id: ctx.id, 
+              class: 'matestack-async-component-root', 
+              'v-if': 'showing'
+            })
+          end
+
+          def vue_props
+            {
+              component_key: ctx.id,
+              show_on: ctx.show_on,
+              hide_on: ctx.hide_on,
+              rerender_on: ctx.rerender_on,
+              defer: ctx.defer,
+              parent_class: isolated_parent ? isolated_parent.class.to_s : nil,
+            }
+          end
+
+          def is_deferred?
+            ctx.defer
+          end
+
+          def is_not_requested?
+            params[:component_key].present? && params[:component_key] != ctx.id
+          end
+
+          def isolated_parent
+            Matestack::Ui::Core::Context.isolated_parent
+          end
+
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/cable → lib/matestack/ui/vue_js/components}/cable.js

@@ -1,7 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -47,7 +47,7 @@ const componentDef = {
       var html = this.formatPayload(payload)
       html.forEach(function(elem){
         var dom_elem = document.createElement('div')
-        dom_elem.innerHTML = elem
+        dom_elem.innerHTML = elem.replace(/^\s+|\s+$/g, '')
         var id = dom_elem.firstChild.id
         var old_elem = self.cableTemplateDomElement.querySelector('#' + id)
         old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem)
@@ -73,22 +73,22 @@ const componentDef = {
     const self = this
     var dom_elem = document.createElement('div')
     dom_elem.innerHTML = this.initialTemplate
-    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.componentConfig["id"])
+    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.props["id"])
     this.cableTemplate = this.cableTemplateDomElement.outerHTML
-    this.registerEvents(this.componentConfig['append_on'], self.append)
-    this.registerEvents(this.componentConfig['prepend_on'], self.prepend)
-    this.registerEvents(this.componentConfig['delete_on'], self.delete)
-    this.registerEvents(this.componentConfig['update_on'], self.update)
-    this.registerEvents(this.componentConfig['replace_on'], self.replace)
+    this.registerEvents(this.props['append_on'], self.append)
+    this.registerEvents(this.props['prepend_on'], self.prepend)
+    this.registerEvents(this.props['delete_on'], self.delete)
+    this.registerEvents(this.props['update_on'], self.update)
+    this.registerEvents(this.props['replace_on'], self.replace)
   },
   beforeDestroy: function() {
     const self = this
     this.cableTemplate = null
-    this.removeEvents(this.componentConfig['append_on'], self.append)
-    this.removeEvents(this.componentConfig['prepend_on'], self.prepend)
-    this.removeEvents(this.componentConfig['delete_on'], self.delete)
-    this.removeEvents(this.componentConfig['update_on'], self.update)
-    this.removeEvents(this.componentConfig['replace_on'], self.replace)
+    this.removeEvents(this.props['append_on'], self.append)
+    this.removeEvents(this.props['prepend_on'], self.prepend)
+    this.removeEvents(this.props['delete_on'], self.delete)
+    this.removeEvents(this.props['update_on'], self.update)
+    this.removeEvents(this.props['replace_on'], self.replace)
   },
   components: {
     VRuntimeTemplate: VRuntimeTemplate

data/lib/matestack/ui/vue_js/components/cable.rb

@@ -0,0 +1,69 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Cable < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-cable'
+
+          attr_accessor :block_content
+
+          required :id
+          optional :append_on, :prepend_on, :delete_on, :update_on, :replace_on
+
+          def create_children(&block)
+            # first render block content
+            self.block_content = content(&block).render_content if block_given?
+            super
+          end
+
+          def content(&block)
+            Matestack::Ui::Core::Base.new(:without_parent, nil, nil) do
+              div(class: 'matestack-cable-component-root', id: ctx.id, &block)
+            end
+          end
+
+          def component_attributes
+            super.merge('v-bind:initial-template': "#{self.block_content.to_json}")
+          end
+
+          def response
+            div container_attributes do
+              div wrapper_attributes do
+                Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'cableTemplate')
+              end
+            end
+          end
+
+          def container_attributes
+            {
+              class: 'matestack-cable-component-container',
+              'v-bind:class': '{ loading: loading === true }'
+            }
+          end
+
+          def wrapper_attributes
+            {
+              class: 'matestack-cable-component-wrapper',
+              'v-if': 'cableTemplate != null', 
+              'v-bind:class': '{ loading: loading === true }'
+            }
+          end
+
+          def vue_props
+            {
+              id: ctx.id,
+              component_key: ctx.id,
+              # events
+              append_on: ctx.append_on,
+              prepend_on: ctx.prepend_on,
+              delete_on: ctx.delete_on,
+              update_on: ctx.update_on,
+              replace_on: ctx.replace_on,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/collection/content → lib/matestack/ui/vue_js/components/collection}/content.js

@@ -1,8 +1,7 @@
 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'
-// import asyncMixin from '../../async/async'
+import matestackEventHub from '../../event_hub'
+import queryParamsHelper from '../../helpers/query_params_helper'
+import componentMixin from '../mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -18,9 +17,9 @@ const componentDef = {
     next: function(){
       if (this.currentTo() < this.currentCount()){
         this.currentOffset += this.currentLimit
-        var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+        var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
         window.history.pushState({matestackApp: true, url: url}, null, url);
-        matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+        matestackEventHub.$emit(this.props["id"] + "-update")
       }
     },
     previous: function(){
@@ -30,9 +29,9 @@ const componentDef = {
         } else {
           this.currentOffset -= this.currentLimit
         }
-        var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+        var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
         window.history.pushState({matestackApp: true, url: url}, null, url);
-        matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+        matestackEventHub.$emit(this.props["id"] + "-update")
       }
     },
     currentTo: function(){
@@ -52,40 +51,40 @@ const componentDef = {
     },
     goToPage: function(page){
       this.currentOffset = parseInt(this.currentLimit) * (parseInt(page)-1)
-      var url = queryParamsHelper.updateQueryParams(this.componentConfig["id"] + "-offset", this.currentOffset)
+      var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
       window.history.pushState({matestackApp: true, url: url}, null, url);
-      matestackEventHub.$emit(this.componentConfig["id"] + "-update")
+      matestackEventHub.$emit(this.props["id"] + "-update")
     }
   },
   mounted: function(){
-    if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset") != null){
-        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-offset"))
+    if(queryParamsHelper.getQueryParam(this.props["id"] + "-offset") != null){
+        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.props["id"] + "-offset"))
     } else {
-      if(this.componentConfig["init_offset"] != undefined){
-        this.currentOffset = this.componentConfig["init_offset"]
+      if(this.props["init_offset"] != undefined){
+        this.currentOffset = this.props["init_offset"]
       } else {
         this.currentOffset = 0
       }
     }
 
-    if(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit") != null){
-        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.componentConfig["id"] + "-limit"))
+    if(queryParamsHelper.getQueryParam(this.props["id"] + "-limit") != null){
+        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.props["id"] + "-limit"))
     } else {
-      if(this.componentConfig["init_limit"] != undefined){
-        this.currentLimit = this.componentConfig["init_limit"]
+      if(this.props["init_limit"] != undefined){
+        this.currentLimit = this.props["init_limit"]
       } else {
         this.currentLimit = 10
       }
     }
 
-    if(this.componentConfig["filtered_count"] != undefined){
-      this.currentFilteredCount = this.componentConfig["filtered_count"]
+    if(this.props["filtered_count"] != undefined){
+      this.currentFilteredCount = this.props["filtered_count"]
       if(this.currentOffset >= this.currentFilteredCount){
         this.previous()
       }
     }
-    if(this.componentConfig["base_count"] != undefined){
-      this.currentBaseCount = this.componentConfig["base_count"]
+    if(this.props["base_count"] != undefined){
+      this.currentBaseCount = this.props["base_count"]
       if(this.currentOffset >= this.currentBaseCount){
         this.previous()
       }

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

@@ -0,0 +1,32 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Collection
+          class Content < Matestack::Ui::VueJs::Vue
+            vue_name 'matestack-ui-core-collection-content'
+
+            required :id
+            optional :init_limit, :filtered_count, :base_count
+
+            def response
+              div class: "matestack-ui-core-collection-content" do
+                yield
+              end
+            end
+
+            def vue_props
+              {
+                id: ctx.id,
+                init_limit: ctx.init_limit,
+                filtered_count: ctx.filtered_count,
+                base_count: ctx.base_count
+              }
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,45 @@
+import Vue from 'vue/dist/vue.esm'
+import matestackEventHub from '../../event_hub'
+import queryParamsHelper from '../../helpers/query_params_helper'
+
+import formMixin from '../form/form'
+
+const componentDef = {
+  mixins: [formMixin],
+  methods: {
+    perform: function(){
+      var url;
+      var filter = this.data
+      for (var key in this.data) {
+        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.$forceUpdate();
+      }
+      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-", "")] = queryParamsObject[key]
+      }
+    })
+  }
+}
+
+let component = Vue.component('matestack-ui-core-collection-filter', componentDef)
+
+export default componentDef