[WIP] marked ID as required for async components, added update_on to async components, modified component helper in order to be used within controllers, added demo use case to dummy app

Author: jonasjabari

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

@@ -9,6 +9,7 @@ const componentDef = {
   data: function(){
     return {
       asyncTemplate: null,
+      asyncTemplateDOMelement: null,
       showing: true,
       loading: false,
       hideAfterTimeout: null,
@@ -47,6 +48,29 @@ const componentDef = {
         self.rerender()
       }, parseInt(this.componentConfig["defer"]));
     },
+    update: function(payload){
+      let position = "beforeend"
+
+      if(this.componentConfig["position"] === "begin"){
+        position = "afterbegin"
+      }
+      if(this.componentConfig["position"] === "end"){
+        position = "beforeend"
+      }
+
+      if(payload.new_element != undefined){
+        this.asyncTemplateDOMelement.insertAdjacentHTML(
+          position,
+          payload.new_element
+        )
+      }
+
+      if(payload.remove_element_by_id != undefined){
+        this.asyncTemplateDOMelement.querySelector('#' + payload.remove_element_by_id).remove()
+      }
+
+      this.asyncTemplate = this.asyncTemplateDOMelement.outerHTML
+    },
     rerender: function(){
       var self = this;
       self.loading = true;
@@ -69,12 +93,15 @@ const componentDef = {
         self.asyncTemplate = template;
       })
       .catch(function(error){
-        console.log(error)
         matestackEventHub.$emit('async_rerender_error', { id: self.componentConfig["component_key"] })
       })
     }
   },
   created: function () {
+
+    this.asyncTemplateDOMelement = document.querySelector("#" + this.componentConfig["id"])
+    this.asyncTemplate = this.asyncTemplateDOMelement.outerHTML;
+
     const self = this
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
@@ -89,6 +116,10 @@ const componentDef = {
       var rerender_events = this.componentConfig["rerender_on"].split(",")
       rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
     }
+    if(this.componentConfig["update_on"] != undefined){
+      var update_events = this.componentConfig["update_on"].split(",")
+      update_events.forEach(update_event => matestackEventHub.$on(update_event.trim(), self.update));
+    }
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }

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

@@ -2,7 +2,7 @@ module Matestack::Ui::Core::Async
   class Async < Matestack::Ui::Core::Component::Rerender
     vue_js_component_name "matestack-ui-core-async"
 
-    optional :id # will be required in 1.0.0
+    requires :id # will be required in 1.0.0
 
     def initialize(*args)
       super

app/helpers/matestack/ui/core/application_helper.rb

@@ -14,7 +14,7 @@ module ApplicationHelper
         def self.included(base)
           base.extend(ClassMethods)
         end
-        
+
         module ClassMethods
           def matestack_app _class
             @matestack_app_class = _class
@@ -99,7 +99,7 @@ def responder_for(*args)
         end
 
         def matestack_component(component, options = {}, &block)
-          context = (options[:matestack_context] ||= {}).merge(controller: @_controller)
+          context = (options[:matestack_context] ||= {}).merge(controller: @_controller || self)
           Matestack::Ui::Core::Component::Base.new(options.merge(matestack_context: context)).send(component, options.merge(matestack_context: context), &block)
         end
       end

spec/dummy/app/assets/javascripts/application.js

@@ -20,6 +20,6 @@
 
 App.cable.subscriptions.create("MatestackUiCoreChannel", {
   received(data) {
-    MatestackUiCore.matestackEventHub.$emit('MatestackUiCoreChannel', data)
+    MatestackUiCore.matestackEventHub.$emit(data.message, data)
   }
 });

spec/dummy/app/controllers/my_app_controller.rb

@@ -1,7 +1,7 @@
 class MyAppController < ApplicationController
 
   include Matestack::Ui::Core::ApplicationHelper
-  
+
   include Components::Registry
   include Demo::Components::Registry
 
@@ -56,7 +56,10 @@ def form_action
         message: "Test Model could not be saved!"
       }, status: :unprocessable_entity
     else
-      broadcast "test_model_created"
+      ActionCable.server.broadcast("matestack_ui_core", {
+        message: "test_model_created",
+        new_element: matestack_component(:my_list_item, item: @dummy_model).to_s
+      })
       render json: { transition_to: my_second_page_path }, status: :created
     end
   end
@@ -78,7 +81,10 @@ def inline_form_action
   def delete_dummy_model
     @dummy_model = DummyModel.find(params[:id])
     if @dummy_model.destroy
-      broadcast "test_model_deleted"
+      ActionCable.server.broadcast("matestack_ui_core", {
+        message: "test_model_deleted",
+        remove_element_by_id: "item-#{params[:id]}"
+      })
       render json: {}, status: :ok
     else
       render json: {
@@ -99,9 +105,10 @@ def dummy_model_params
     )
   end
 
-  def broadcast message
+  def broadcast message, item=nil
     ActionCable.server.broadcast("matestack_ui_core", {
-      message: message
+      message: message,
+      new_element: matestack_component(:my_list_item, item: item).to_s
     })
   end
 

spec/dummy/app/matestack/components/card.rb

@@ -1,11 +1,9 @@
 class Components::Card < Matestack::Ui::StaticComponent
 
   def response
-    components {
-      div id: "my-component" do
-        plain "card"
-      end
-    }
+    li id: "my-component" do
+      plain "card"
+    end
   end
 
 end

spec/dummy/app/matestack/components/my_list_item.rb

@@ -0,0 +1,14 @@
+class Components::MyListItem < Matestack::Ui::Component
+
+  requires :item
+
+  def response
+    li id: "item-#{item.id}" do
+      plain item.title
+      onclick emit: "test" do
+        button text: "test"
+      end
+    end
+  end
+
+end

spec/dummy/app/matestack/components/registry.rb

@@ -2,6 +2,7 @@ module Components::Registry
 
   Matestack::Ui::Core::Component::Registry.register_components(
     my_card: Components::Card,
+    my_list_item: Components::MyListItem,
     some_card: Components::Card,
     some_other_card: Components::Card,
     some_stupid_card: Components::Card,

spec/dummy/app/matestack/demo/pages/my_first_page.rb

@@ -2,6 +2,7 @@ class Demo::Pages::MyFirstPage < Matestack::Ui::Page
 
   def prepare
     @my_model = DummyModel.last
+
   end
 
   def response
@@ -16,6 +17,15 @@ def response
     my_demo_card
 
     foo_fancy_stuff title: 'Huhu'
+
+
+    ul do
+      async update_on: "test_model_created, test_model_deleted", position: "end", id: "my-list" do
+        DummyModel.all.each do |instance|
+          my_list_item item: instance
+        end
+      end
+    end
   end
 
 

vendor/assets/javascripts/dist/manifest.json

@@ -2,17 +2,21 @@
   "entrypoints": {
     "matestack-ui-core": {
       "css": [
-        "/dist/matestack-ui-core.min.css"
+        "/dist/matestack-ui-core.css"
       ],
       "js": [
-        "/dist/matestack-ui-core.min.js"
+        "/dist/matestack-ui-core.js"
+      ],
+      "css.map": [
+        "/dist/matestack-ui-core.css.map"
       ],
       "js.map": [
-        "/dist/matestack-ui-core.min.js.map"
+        "/dist/matestack-ui-core.js.map"
       ]
     }
   },
-  "matestack-ui-core.css": "/dist/matestack-ui-core.min.css",
-  "matestack-ui-core.js": "/dist/matestack-ui-core.min.js",
-  "matestack-ui-core.js.map": "/dist/matestack-ui-core.min.js.map"
+  "matestack-ui-core.css": "/dist/matestack-ui-core.css",
+  "matestack-ui-core.css.map": "/dist/matestack-ui-core.css.map",
+  "matestack-ui-core.js": "/dist/matestack-ui-core.js",
+  "matestack-ui-core.js.map": "/dist/matestack-ui-core.js.map"
 }