Merge branch 'add_loading_state_to_page_and_app' into next-release

Author: jonasjabari

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

@@ -1,3 +1,3 @@
 %component{"is": "matestack-ui-core-app", "inline-template": true}
-  %div{class: "matestack_app"}
+  %div{class: "matestack-app-wrapper"}
     = render_content

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'],
@@ -22,7 +23,11 @@ const componentDef = {
           pathName: self.currentPathName,
           search: self.currentSearch
         }, document.location)){
-        self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
+          matestackEventHub.$emit("page_loading_triggered", document.location.pathname + document.location.search);
+          this.$store.commit('setPageLoading', true);
+          this.$store.commit('setPageLoadingStart', true);
+          this.$store.commit('setPageLoadingEnd', false)
+          self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
       }
     })
   },

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

@@ -23,13 +23,29 @@ def response
       page_content
     end
 
-    def page_content
-      # TODO: Content probably needs/would benefit from a better name - like "DynamicWrapper" ?
-      add_child Matestack::Ui::Core::Page::Content do
+    # 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 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

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
@@ -27,6 +31,8 @@ const store = new Vuex.Store({
   },
   actions: {
     navigateTo ({ commit, state }, { url, backwards }) {
+      const self = this
+      commit('setPageLoading', true)
       matestackEventHub.$emit("page_loading", url);
       if (typeof matestackUiCoreTransitionStart !== 'undefined') {
         matestackUiCoreTransitionStart(url);
@@ -54,6 +60,7 @@ const store = new Vuex.Store({
             resolve(response["data"]);
             commit('setPageTemplate', response["data"])
             commit('setCurrentLocation', { path: url.split("?")[0], search: document.location.search, origin: document.location.origin })
+            commit('setPageLoading', false)
             matestackEventHub.$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);

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

@@ -56,7 +56,10 @@ const componentDef = {
         headers: {
           'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
         },
-        params: {"component_key": self.componentConfig["component_key"]}
+        params: {
+          "component_key": self.componentConfig["component_key"],
+          "component_class": self.componentConfig["parent_class"]
+        }
       })
       .then(function(response){
         var tmp_dom_element = document.createElement('div');

app/concepts/matestack/ui/core/component/base.rb

@@ -63,7 +63,7 @@ def initialize(model = nil, options = {})
       # it inbetween the super calls in the Dynamic super class.
       #
       # This is the configuration for the VueJS component
-      @component_config = @options.except(:context, :children, :url_params, :included_config, :matestack_context)
+      @component_config = @options.except(:context, :children, :url_params, :included_config, :matestack_context, :slots)
 
       # TODO: no idea why this is called `url_params` it contains
       # much more than this e.g. almost all params so maybe rename it?
@@ -159,7 +159,11 @@ def prepare
 
     # access params like you would do on rails views and controllers
     def params
-      context[:params]
+      if @matestack_context.present? && @matestack_context[:controller].present?
+        @matestack_context[:controller].params
+      else
+        context[:params]
+      end
     end
 
     ## ------------------ Rendering ----------------

app/concepts/matestack/ui/core/component/dynamic.rb

@@ -13,7 +13,7 @@ def show
 
     def dynamic_tag_attributes
       attrs = {
-        "is": self.class.vue_js_name,
+        "is": get_vue_js_name,
         "ref": component_id,
         ":params":  params.except(:controller, :action).to_json,
         ":component-config": @component_config.to_json,
@@ -23,6 +23,14 @@ def dynamic_tag_attributes
       attrs
     end
 
+    def get_vue_js_name
+      if @vue_js_component_name.present?
+        @vue_js_component_name
+      else
+        self.class.vue_js_name
+      end
+    end
+
     class << self
       def vue_js_component_name(name)
         @vue_js_name = name.to_s

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

@@ -1,13 +1,15 @@
 module Matestack::Ui::Core::Isolate
   class Isolate < Matestack::Ui::Core::Component::Dynamic
 
-    def vuejs_component_name
-      "matestack-ui-core-isolate"
-    end
+    vue_js_component_name "matestack-ui-core-isolate"
 
     def initialize(*args)
       super
       @public_options = args.map { |hash| hash[:public_options] }[0]
+      # using this instance var here as users inherit from this class and would need
+      # to use `vue_js_component_name "matestack-ui-core-isolate"` in their components
+      # which is not convinient
+      @vue_js_component_name = "matestack-ui-core-isolate"
     end
 
     def public_options

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

@@ -4,8 +4,8 @@ import { turbolinksAdapterMixin } from 'vue-turbolinks';
 // Import from app/concepts/matestack/ui/core:
 import app from '../app/app'
 import async from '../async/async'
+import pageContent from '../page/content/content'
 import toggle from '../toggle/toggle'
-import pageContent from '../page/content'
 import store from '../app/store'
 import component from '../component/component'
 import anonymDynamicComponent from '../component/anonym-dynamic-component'
@@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // if they were present on the first page, which was loaded and activated turbolinks
   // the mixin does not impact the app when turbolinks is disabled
   matestackUiApp = new Vue({
-      el: "#matestack_ui",
+      el: "#matestack-ui",
       mixins: [turbolinksAdapterMixin],
       store: store
   })
@@ -45,7 +45,7 @@ document.addEventListener('turbolinks:load', () => {
   matestackUiApp.$destroy();
   // and recreate it right afterwards in order to work when used with turbolinks
   matestackUiApp = new Vue({
-      el: "#matestack_ui",
+      el: "#matestack-ui",
       mixins: [turbolinksAdapterMixin],
       store: store
   })