refactored event and delay utilities on action, async, form and transition, addeds specs and docs

Author: jonasjabari

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

@@ -20,10 +20,10 @@ const componentDef = {
         if (self.componentConfig["emit"] != undefined) {
           matestackEventHub.$emit(self.componentConfig["emit"]);
         }
-        if (self.componentConfig["min_defer"] != undefined) {
+        if (self.componentConfig["delay"] != undefined) {
           setTimeout(function () {
             self.sendRequest()
-          }, parseInt(self.componentConfig["min_defer"]));
+          }, parseInt(self.componentConfig["delay"]));
         } else {
           this.sendRequest()
         }

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

@@ -108,10 +108,10 @@ const componentDef = {
       if (self.componentConfig["emit"] != undefined) {
         matestackEventHub.$emit(self.componentConfig["emit"]);
       }
-      if (self.componentConfig["min_defer"] != undefined) {
+      if (self.componentConfig["delay"] != undefined) {
         setTimeout(function () {
           self.sendRequest()
-        }, parseInt(self.componentConfig["min_defer"]));
+        }, parseInt(self.componentConfig["delay"]));
       } else {
         this.sendRequest()
       }

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

@@ -16,13 +16,11 @@ const componentDef = {
   methods: {
     navigateTo: function(url){
       const self = this
-      if (self.componentConfig["emit"] != undefined) {
-        matestackEventHub.$emit(self.componentConfig["emit"]);
-      }
-      if (self.componentConfig["min_defer"] != undefined) {
+      matestackEventHub.$emit("page_loading_triggered", url);
+      if (self.componentConfig["delay"] != undefined) {
         setTimeout(function () {
           self.performNavigation(url)
-        }, parseInt(self.componentConfig["min_defer"]));
+        }, parseInt(self.componentConfig["delay"]));
       } else {
         this.performNavigation(url)
       }

docs/components/action.md

@@ -54,6 +54,22 @@ If no `text` is given, the default text "Are you sure?" will be used.
 confirm: true
 ```
 
+### Emit
+
+This event gets emitted right after triggering the action. In contrast to the `sucsess` or `failure` events, it will be emitted regardless of the server response.
+
+```ruby
+emit: "action_submitted"
+```
+
+### Delay
+
+You can use this attribute if you want to delay the actual action submit request. It will not delay the event specified with the `emit` attribute.
+
+```ruby
+delay: 1000 # means 1000 ms
+```
+
 ### Success
 
 The success part of the action component gets triggered once the action we wanted to perform returns a success code, usually the `200` HTTP status code.

docs/components/async.md

@@ -28,6 +28,12 @@ Lazy (or defered) loading can be configured like shown  [here](#defer).
 
 If you want to simply hide the async component on initial pageload and display it later on, read below how to use `show_on`, which can be combined with `rerender_on`.
 
+You can pass in multiple, comma-separated events on which the component should rerender.
+
+```ruby
+async rerender_on: 'my_event, some_other_event'
+```
+
 ### Show_on
 
 The `show_on` option lets us define an event on which the component gets shown. The content is still rendered on init pageload, but simply hidden in the browser until the event is emitted. If you want to have proper deferred loading, please refer to [defer](#defer)
@@ -40,6 +46,12 @@ async show_on: 'my_event' do
 end
 ```
 
+You can pass in multiple, comma-separated events on which the component should be shown.
+
+```ruby
+async show_on: 'my_event, some_other_event'
+```
+
 ### Hide_on
 
 The `hide_on` option lets us define an event on which the component gets hidden.
@@ -52,6 +64,13 @@ async hide_on: 'my_event' do
 end
 ```
 
+You can pass in multiple, comma-separated events on which the component should be hidden.
+
+```ruby
+async hide_on: 'my_event, some_other_event'
+```
+
+
 ### Hide_after
 
 The `hide_after` option lets us define a timespan in milliseconds after which the component gets hidden.

docs/components/form.md

@@ -106,6 +106,21 @@ Using the standard Rails params, we can pass information to our route!
 params: { id: 42 }
 ```
 
+### Emit
+
+This event gets emitted right after form submit. In contrast to the `sucsess` or `failure` events, it will be emitted regardless of the server response.
+
+```ruby
+emit: "form_submitted"
+```
+
+### Delay
+
+You can use this attribute if you want to delay the actual form submit request. It will not delay the event specified with the `emit` attribute.
+
+```ruby
+delay: 1000 # means 1000 ms
+```
 
 ### Success
 
@@ -1348,4 +1363,4 @@ datalist id: 'datalist-id' do
   option value: 10
   option value: 20
 end
-```
+```

docs/components/transition.md

@@ -30,6 +30,27 @@ transition path: :page1_path, text: 'Click me for a transition'
 
 If no text is present, the transition component expects a block that it then *yields* the usual way.
 
+
+### Delay
+
+You can use this attribute if you want to delay the actual transition. It will not delay the `page_loading_triggered` event
+
+```ruby
+delay: 1000 # means 1000 ms
+```
+
+### Events
+
+The `transition` component automatically emits events on:
+
+* transition triggered by user action -> "page_loading_triggered"
+* *optional client side delay via `delay` attribute*
+* start to get new page from server -> "page_loading"
+* *server side/network delay*
+* successfully received new page from server -> "page_loaded"
+* failed to receive new page from server -> "page_loading_error"
+
+
 ## Examples
 
 The transition core component renders the HTML `<a>` tag and performs a page transition

spec/support/test_controller.rb

@@ -0,0 +1,12 @@
+class TestController < ActionController::Base
+
+  before_action :check_params
+
+  def check_params
+    expect_params(params.permit!.to_h)
+  end
+
+  def expect_params(params)
+  end
+
+end

spec/usage/components/action/delay.rb

@@ -0,0 +1,79 @@
+require_relative "../../../support/utils"
+require_relative "../../../support/test_controller"
+include Utils
+
+describe "Action Component", type: :feature, js: true do
+
+  before :each do
+
+    class ActionTestController < TestController
+
+      def test
+        receive_timestamp = DateTime.now.strftime('%Q')
+        render json: { received_at: receive_timestamp }, status: 200
+      end
+
+    end
+
+    allow_any_instance_of(ActionTestController).to receive(:expect_params)
+
+  end
+
+  describe "delay attribute" do
+
+    it "if set, delays action submit" do
+
+      Rails.application.routes.append do
+        post '/action_test', to: 'action_test#test', as: 'action_delay_test'
+      end
+      Rails.application.reload_routes!
+
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def response
+          components {
+            action action_config do
+              button text: "Click me!"
+            end
+            div id: "timestamp" do
+              async show_on: "action_submitted_successfully" do
+                plain "{{event.data.received_at}}"
+              end
+            end
+          }
+        end
+
+        def action_config
+          return {
+            method: :post,
+            path: :action_delay_test_path,
+            data: {
+              foo: DateTime.now.strftime('%Q')
+            },
+            delay: 1000,
+            success: {
+              emit: "action_submitted_successfully"
+            }
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      submit_timestamp = DateTime.now.strftime('%Q').to_i
+      click_button "Click me!"
+
+      sleep 1.5
+
+      element = page.find("#timestamp")
+      receive_timestamp = element.text.to_i
+
+      expect(receive_timestamp - submit_timestamp).to be > 1000
+
+    end
+
+  end
+
+end

spec/usage/components/action/emit.rb

@@ -0,0 +1,69 @@
+require_relative "../../../support/utils"
+require_relative "../../../support/test_controller"
+include Utils
+
+describe "Action Component", type: :feature, js: true do
+
+  before :each do
+
+    class ActionTestController < TestController
+
+      def test
+        render json: { }, status: 200
+      end
+
+    end
+
+    allow_any_instance_of(ActionTestController).to receive(:expect_params)
+
+  end
+
+  describe "emit attribute" do
+
+    it "if set, emits event directly when action is submitted (not waiting for success or failure)" do
+
+      Rails.application.routes.append do
+        post '/action_test', to: 'action_test#test', as: 'action_emit'
+      end
+      Rails.application.reload_routes!
+
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def response
+          components {
+            action action_config do
+              button text: "Click me!"
+            end
+            async show_on: "action_submitted" do
+              plain "action submitted!"
+            end
+          }
+        end
+
+        def action_config
+          return {
+            method: :post,
+            path: :action_emit_path,
+            data: {
+              foo: "bar"
+            },
+            emit: "action_submitted"
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      expect_any_instance_of(ActionTestController).to receive(:expect_params)
+        .with(hash_including(:foo => "bar"))
+
+      click_button "Click me!"
+
+      expect(page).to have_content("action submitted!")
+    end
+
+  end
+
+end