matestack-ui-core 0.7.5 → 1.1.0

data/app/concepts/matestack/ui/core/action/action.rb

@@ -1,35 +1,45 @@
 module Matestack::Ui::Core::Action
   class Action < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-action'
+
+    optional :path, :success, :failure, :notify, :confirm, 
+      method: { as: :action_method }, params: { as: :action_params }
 
     def setup
       @component_config[:action_path] = action_path
-      @component_config[:method] = options[:method]
-      @component_config[:success] = options[:success]
-      unless options[:success].nil?
-        unless options[:success][:transition].nil?
-          @component_config[:success][:transition][:path] = transition_path options[:success]
+      @component_config[:method] = action_method
+      @component_config[:success] = success
+      unless success.nil?
+        unless success[:transition].nil?
+          @component_config[:success][:transition][:path] = transition_path success
+        end
+        unless success[:redirect].nil?
+          @component_config[:success][:redirect][:path] = redirect_path success
         end
       end
-      @component_config[:failure] = options[:failure]
-      unless options[:failure].nil?
-        unless options[:failure][:transition].nil?
-          @component_config[:failure][:transition][:path] = transition_path options[:failure]
+      @component_config[:failure] = failure
+      unless failure.nil?
+        unless failure[:transition].nil?
+          @component_config[:failure][:transition][:path] = transition_path failure
+        end
+        unless failure[:redirect].nil?
+          @component_config[:failure][:redirect][:path] = redirect_path failure
         end
       end
-      if options[:notify].nil?
+      if notify.nil?
         @component_config[:notify] = true
       end
-      if @component_config[:confirm] = options[:confirm]
-        @component_config[:confirm_text] = options[:confirm].try(:[], :text) || "Are you sure?"
+      if @component_config[:confirm] = confirm
+        @component_config[:confirm_text] = confirm.try(:[], :text) || "Are you sure?"
       end
     end
 
     def action_path
       begin
-        if options[:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+        if path.is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(path, action_params)
         else
-          return options[:path]
+          return path
         end
       rescue
         raise "Action path not found"
@@ -51,5 +61,20 @@ module Matestack::Ui::Core::Action
       end
     end
 
+    def redirect_path callback_options
+      begin
+        if callback_options[:redirect][:path].is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(
+            callback_options[:redirect][:path],
+            callback_options[:redirect][:params]
+          )
+        else
+          return callback_options[:redirect][:path]
+        end
+      rescue
+        raise "Redirect path not found"
+      end
+    end
+
   end
 end

data/app/concepts/matestack/ui/core/actionview/dynamic.haml

@@ -1,6 +1,6 @@
-%component{dynamic_tag_attributes}
+%component{ dynamic_tag_attributes }
   %div
-    %div{"v-if": "asyncTemplate == null"}
+    %div{ "v-if": "asyncTemplate == null" }
       = render_content
-    %div{"v-if": "asyncTemplate != null"}
-      %v-runtime-template{":template":"asyncTemplate"}
+    %div{ "v-if": "asyncTemplate != null" }
+      %v-runtime-template{ ":template":"asyncTemplate" }

data/app/concepts/matestack/ui/core/address/address.haml

@@ -1,5 +1,5 @@
-%address{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%address{ html_attributes }
+  - if text.blank? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

data/app/concepts/matestack/ui/core/address/address.rb

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Address
   class Address < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

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

@@ -1,4 +1,3 @@
 %component{"is": "matestack-ui-core-app", "inline-template": true}
-  %div{"class": "matestack_app"}
-    - @cells.each do |key, cell|
-      = cell.call(:show)
+  %div{class: "matestack-app-wrapper"}
+    = render_content

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

@@ -2,6 +2,7 @@ import Vue from 'vue/dist/vue.esm'
 import VRuntimeTemplate from "v-runtime-template"
 import Vuex from 'vuex'
 import isNavigatingToAnotherPage from "./location"
+import matestackEventHub from '../js/event-hub'
 
 const componentDef = {
   props: ['appConfig', 'params'],
@@ -16,15 +17,17 @@ const componentDef = {
   }),
   mounted: function(){
     const self = this;
-    window.onpopstate = (event) => {
+    window.addEventListener("popstate", (event) => {
       if (isNavigatingToAnotherPage({
           origin: self.currentOrigin,
           pathName: self.currentPathName,
           search: self.currentSearch
         }, document.location)){
-        self.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+          matestackEventHub.$emit("page_loading_triggered", document.location.pathname + document.location.search);
+          this.$store.commit('setPageLoading', true);
+          self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
       }
-    }
+    })
   },
   components: {
     VRuntimeTemplate: VRuntimeTemplate

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

@@ -1,74 +1,51 @@
 module Matestack::Ui::Core::App
-  class App < Trailblazer::Cell
-
+  # TODO: Similar to page, App doesn't need everything base offers atm
+  class App < Matestack::Ui::Core::Component::Base
     include Matestack::Ui::Core::Cell
     include Matestack::Ui::Core::ApplicationHelper
-    include Matestack::Ui::Core::ToCell
-
-    view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
-
-    extend ViewName::Flat
-
-    def self.prefixes
-      _prefixes = super
-      modified_prefixes = _prefixes.map do |prefix|
-        prefix_parts = prefix.split("/")
-
-        if prefix_parts.last.include?(self.name.split("::")[-1].downcase)
-          prefix_parts[0..-2].join("/")
-        else
-          prefix
-        end
-
-      end
-
-      return modified_prefixes
-    end
-
-    def self.views_dir
-      return ""
-    end
-
-    def initialize(model=nil, options={})
-      super
-      @nodes = {}
-      @cells = {}
-      @page_block = nil
-      @page_id = ""
-      setup
-    end
+    # include Matestack::Ui::Core::ToCell
+    include Matestack::Ui::Core::HasViewContext
 
-    def setup
-      true
-    end
+    def initialize(page_class, controller_instance, context)
+      super(nil, context: context)
 
-    def prepare
-      true
+      @page_class = page_class
+      @controller_instance = controller_instance
     end
 
-    def show(page_id, page_nodes, &block)
-      @page_id = page_id
-      @page_nodes = page_nodes
-      prepare
-      response
-      render(view: :app, &block)
+    def show
+      render :app
     end
 
-    def page_nodes
-      @page_nodes
+    # Default "response" for just rendering the page without a more
+    # sophisticated app being supplied
+    def response
+      page_content
     end
 
-    def components(&block)
-      @nodes = Matestack::Ui::Core::AppNode.build(self, &block)
-
-      @nodes.each do |key, node|
-        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"], nil, node["cached_params"])
+    # new alternative method name to be used in app defentions
+    # slots may contain a loading state element will be rendered during form start to finish of a transition
+    def yield_page slots: {}
+      page_content_wrapper slots: slots do
+        add_child @page_class,
+                  controller_instance: @controller_instance,
+                  context: context
       end
     end
 
-    def partial(&block)
-      Matestack::Ui::Core::AppNode.build(self, &block)
+    def page_content slots: {}
+      yield_page slots: slots
     end
 
+
+    # def page_content loading_state_element_slot: nil
+    #   # TODO: Content probably needs/would benefit from a better name - like "DynamicWrapper" ?
+    #   context[:loading_state_element_slot] = loading_state_element_slot
+    #   add_child Matestack::Ui::Core::Page::Content, context: context do
+    #     add_child @page_class,
+    #               controller_instance: @controller_instance,
+    #               context: context
+    #   end
+    # end
   end
 end

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

@@ -8,6 +8,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   state: {
     pageTemplate: null,
+    pageLoading: false,
     currentPathName: document.location.pathname,
     currentSearch: document.location.search,
     currentOrigin: document.location.origin
@@ -16,6 +17,9 @@ const store = new Vuex.Store({
     setPageTemplate (state, serverResponse){
       state.pageTemplate = serverResponse
     },
+    setPageLoading (state, boolean){
+      state.pageLoading = boolean
+    },
     setCurrentLocation (state, current){
       state.currentPathName = current.path
       state.currentSearch = current.search
@@ -23,10 +27,30 @@ const store = new Vuex.Store({
     },
     resetPageTemplate (state) {
       state.pageTemplate = null;
+    },
+    pageScrollTop (state) {
+      //https://stackoverflow.com/a/35940276/13886137
+      const getScrollParent = function(node) {
+        if (node == null) {
+          return null
+        }
+        if (node.scrollHeight > node.clientHeight) {
+          return node
+        } else {
+          return getScrollParent(node.parentNode)
+        }
+      }
+      var scrollParent = getScrollParent(document.getElementsByClassName("matestack-page-root")[0])
+      if(scrollParent){
+        scrollParent.scrollTop = 0;
+      }
+      // getScrollParent(document.getElementsByClassName("matestack-page-root")[0]).scrollTop = 0
     }
   },
   actions: {
     navigateTo ({ commit, state }, { url, backwards }) {
+      const self = this
+      commit('setPageLoading', true)
       matestackEventHub.$emit("page_loading", url);
       if (typeof matestackUiCoreTransitionStart !== 'undefined') {
         matestackUiCoreTransitionStart(url);
@@ -51,9 +75,11 @@ const store = new Vuex.Store({
             window.history.pushState({matestackApp: true, url: url}, null, url);
           }
           setTimeout(function () {
-            resolve(response["data"])
+            resolve(response["data"]);
             commit('setPageTemplate', response["data"])
-            commit('setCurrentLocation', { path: url, search: document.location.search, origin: document.location.origin })
+            commit('setCurrentLocation', { path: url.split("?")[0], search: document.location.search, origin: document.location.origin })
+            commit('setPageLoading', false)
+            commit('pageScrollTop')
             matestackEventHub.$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);

data/app/concepts/matestack/ui/core/area/area.haml

@@ -1 +1 @@
-%area{@tag_attributes}
+%area{ html_attributes, "coords": coords.join(',') }

data/app/concepts/matestack/ui/core/area/area.rb

@@ -1,18 +1,6 @@
 module Matestack::Ui::Core::Area
   class Area < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        alt: options[:alt],
-        coords: options[:coords].join(','),
-        download: options[:download],
-        href: options[:href],
-        hreflang: options[:hreflang],
-        media: options[:media],
-        rel: options[:rel],
-        shape: options[:shape],
-        target: options[:target],
-        type: options[:type]
-      })
-    end
+    html_attributes :alt, :download, :href, :hreflang, :media, :rel, :shape, :target, :type
+    optional :coords
   end
 end

data/app/concepts/matestack/ui/core/article/article.haml

@@ -1,5 +1,5 @@
-%article{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%article{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

data/app/concepts/matestack/ui/core/article/article.rb

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Article
   class Article < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

data/app/concepts/matestack/ui/core/aside/aside.haml

@@ -1,3 +1,3 @@
-%aside{@tag_attributes}
+%aside{ html_attributes }
   - if block_given?
     = yield

data/app/concepts/matestack/ui/core/aside/aside.rb

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Aside
   class Aside < Matestack::Ui::Core::Component::Static
-
   end
 end

data/app/concepts/matestack/ui/core/async/async.haml

@@ -1,2 +1,6 @@
-%div{@tag_attributes}
-  = yield
+%component{dynamic_tag_attributes}
+  %div{class: "matestack-async-component-container", "v-bind:class": "{ 'loading': loading === true }"}
+    %div{class: "matestack-async-component-wrapper", "v-if": "asyncTemplate == null", "v-bind:class": "{ 'loading': loading === true }"}
+      = render_content
+    %div{class: "matestack-async-component-wrapper", "v-if": "asyncTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
+      %v-runtime-template{":template":"asyncTemplate"}

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

@@ -1,4 +1,6 @@
 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'
 
@@ -6,8 +8,10 @@ const componentDef = {
   mixins: [componentMixin],
   data: function(){
     return {
+      asyncTemplate: null,
       showing: true,
-      hide_after_timeout: null,
+      loading: false,
+      hideAfterTimeout: null,
       event: {
         data: {}
       }
@@ -27,7 +31,7 @@ const componentDef = {
         }
       }
       if(this.componentConfig["hide_after"] != undefined){
-        self.hide_after_timeout = setTimeout(function () {
+        self.hideAfterTimeout = setTimeout(function () {
           self.hide()
         }, parseInt(this.componentConfig["hide_after"]));
       }
@@ -38,16 +42,43 @@ const componentDef = {
     },
     startDefer: function(){
       const self = this
+      self.loading = true;
       setTimeout(function () {
         self.rerender()
       }, parseInt(this.componentConfig["defer"]));
+    },
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      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"],
+          "component_class": self.componentConfig["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;
+        self.loading = false;
+        self.asyncTemplate = template;
+      })
+      .catch(function(error){
+        console.log(error)
+        matestackEventHub.$emit('async_rerender_error', { id: self.componentConfig["component_key"] })
+      })
     }
   },
   created: function () {
     const self = this
-    matestackEventHub.$on(this.componentConfig["rerender_on"], self.rerender)
-    matestackEventHub.$on(this.componentConfig["show_on"], self.show)
-    matestackEventHub.$on(this.componentConfig["hide_on"], self.hide)
+    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){
       this.showing = false
     }
@@ -64,11 +95,14 @@ const componentDef = {
   },
   beforeDestroy: function() {
     const self = this
-    clearTimeout(self.hide_after_timeout)
-    matestackEventHub.$off(this.componentConfig["rerender_on"], self.rerender);
-    matestackEventHub.$off(this.componentConfig["show_on"], self.show);
-    matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
+    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)
   },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
 }
 
 let component = Vue.component('matestack-ui-core-async', componentDef)