Merge branch 'develop' into issue-255

Author: pascalwengerter

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

@@ -104,9 +104,27 @@ const componentDef = {
         if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
           matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
         }
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && (
+            self.componentConfig["success"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
           let path = self.componentConfig["success"]["transition"]["path"]
           self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && self.componentConfig["success"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["transition_to"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
         }
         self.setProps(self.data, null);
         self.initValues()

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

@@ -0,0 +1 @@
+%object{@tag_attributes}

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

@@ -0,0 +1,15 @@
+module Matestack::Ui::Core::Object
+  class Object < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        width: options[:width],
+        height: options[:height],
+        data: options[:data],
+        form: options[:form],
+        name: options[:name],
+        type: options[:type],
+        usemap: options[:usemap]
+      })
+    end
+  end
+end

docs/components/form.md

@@ -275,6 +275,49 @@ We then get displayed our nice success message (`server says: form submitted suc
 
 If we fill in the the input field there and hit the submit button, we not only see the failure messages (`server says: form had errors` and `'foo': [ 'seems to be invalid' ]`), we also get transferred back to the first page, just the way we specified this behavior in the page definition above!
 
+### Example 3.1: Async submit request with success transition - dynamically determined by server
+
+In the example shown above, the `success` `transition` is statically defined. Sometimes the `transition` needs to be dynamically controlled within the server action.
+Imagine creating a new Active Record instance with a `form`. If you want to show the fresh instance on another page and therefore want to define a `transition` after successful form submission, you would need to know the ID of the fresh instance! That is not possible, as the ID is auto-generated and depends on the current environment/state. Therefore you can tell the `form` component to follow a transition, which the server action defines after creating the new instance (and now knowing the ID):
+
+On the `page`:
+```ruby
+#...
+
+def form_config
+  return {
+    for: :my_object,
+    method: :post,
+    path: :success_form_test_path,
+    success: {
+      emit: 'my_form_success',
+      transition: {
+        follow_response: true # follow the serverside transition
+      }
+    }
+  }
+end
+```
+On the `controller` `action`:
+
+```ruby
+#...
+def model_submit
+  @test_model = TestModel.create(model_params)
+  if @test_model.errors.any?
+    render json: {
+      message: 'server says: something went wrong!',
+      errors: @test_model.errors
+    }, status: :unproccessable_entity
+  else
+    render json: {
+      message: 'server says: form submitted successfully!',
+      transition_to: some_other_path(id: @test_model.id) #tell the form component where to transition to with the id, which was not available before
+    }, status: :ok
+  end
+end
+```
+
 ### Example 4: Multiple input fields of different types
 
 Of course, our input core component accepts not only 'text', but very different input types: In this example, we will introduce 'password', 'number', 'email', 'textarea' types!

docs/components/object.md

@@ -0,0 +1,61 @@
+# matestack core component: Object
+
+Show [specs](/spec/usage/components/object_spec.rb)
+
+The HTML `<object>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 9 optional configuration params, but at least one of the `data` or `type` attribute **MUST** be defined.
+
+#### # class (optional)
+Expects a string with all classes the `<object>` should have.
+
+#### # data (optional)
+Expects a string that specifies the URL of the resource to be used by the `<object`.
+
+#### # form (optional)
+Expects a string that contains one or more *form_id*-s to specify one or more forms the `<object>` belongs to.
+
+#### # height (optional)
+Expects a number to specify the height of the `<object>`.
+
+#### # id (optional)
+Expects a string with all ids the `<object>` should have.
+
+#### # name (optional)
+Expects a string that specifies a name for the `<object>`.
+
+#### # type (optional)
+Expects a string to specify the media type of data specified in the data attribute.
+
+#### # usemap (optional)
+Expects a string to specify the name of a client-side image map to be used with the `<object>`.
+
+#### # width (optional)
+Expects a number to specify the width of the `<object>`.
+
+
+## Example 1
+
+```ruby
+object width: 400, height: 400, data: 'helloworld.swf'
+```
+
+returns
+
+```html
+<object width="400" height="400" data="helloworld.swf"></object>
+```
+
+## Example 2
+
+```ruby
+object id: 'my-id', class: 'my-class', width: 400, height: 400, data: 'helloworld.swf'
+```
+
+returns
+
+```html
+<object id="my-id" class="my-class" width="400" height="400" data="helloworld.swf"></object>
+```

spec/usage/components/form_spec.rb

@@ -24,6 +24,13 @@ def success_submit
         render json: { message: "server says: form submitted successfully" }, status: 200
       end
 
+      def success_submit_with_transition
+        render json: {
+          message: "server says: form submitted successfully",
+          transition_to: form_test_page_4_path(id: 42)
+        }, status: 200
+      end
+
       def failure_submit
         render json: {
           message: "server says: form had errors",
@@ -35,6 +42,7 @@ def failure_submit
 
     Rails.application.routes.append do
       post '/success_form_test/:id', to: 'form_test#success_submit', as: 'success_form_test'
+      post '/success_form_test_with_transition/:id', to: 'form_test#success_submit_with_transition', as: 'success_form_test_with_transition'
       post '/failure_form_test/:id', to: 'form_test#failure_submit', as: 'failure_form_test'
     end
     Rails.application.reload_routes!
@@ -376,6 +384,108 @@ def page2
 
   end
 
+  it "Example 5 - Async submit request with success transition determined by server response" do
+    class Apps::ExampleApp < Matestack::Ui::App
+
+      def response
+        components {
+          heading size: 1, text: "My Example App Layout"
+          main do
+            page_content
+          end
+          async show_on: "my_form_success", hide_after: 300 do
+            plain "{{event.data.message}}"
+          end
+          async show_on: "my_form_failure", hide_after: 300 do
+            plain "{{event.data.message}}"
+            plain "{{event.data.errors}}"
+          end
+        }
+      end
+
+    end
+
+    module Pages::ExampleApp
+
+    end
+
+    class Pages::ExampleApp::ExamplePage3 < Matestack::Ui::Page
+
+      def response
+        components {
+          heading size: 2, text: "This is Page 3"
+          form form_config, :include do
+            form_input id: "my-test-input-on-page-3", key: :foo, type: :text
+            form_submit do
+              button text: "Submit me!"
+            end
+          end
+        }
+      end
+
+      def form_config
+        return {
+          for: :my_object,
+          method: :post,
+          path: :success_form_test_with_transition_path,
+          params: {
+            id: 42
+          },
+          success: {
+            emit: "my_form_success",
+            transition: {
+              follow_response: true
+            }
+          }
+        }
+      end
+
+    end
+
+    class Pages::ExampleApp::ExamplePage4 < Matestack::Ui::Page
+
+      def response
+        components {
+          heading size: 2, text: "This is Page 4"
+        }
+      end
+
+    end
+
+    class ExampleAppPagesController < ExampleController
+      include Matestack::Ui::Core::ApplicationHelper
+
+      def page3
+        responder_for(Pages::ExampleApp::ExamplePage3)
+      end
+
+      def page4
+        responder_for(Pages::ExampleApp::ExamplePage4)
+      end
+
+    end
+
+    Rails.application.routes.append do
+      scope :form_test do
+        get 'page3', to: 'example_app_pages#page3', as: 'form_test_page_3'
+        get 'page4/:id', to: 'example_app_pages#page4', as: 'form_test_page_4'
+      end
+    end
+    Rails.application.reload_routes!
+
+    visit "form_test/page3"
+
+    expect(page).to have_content("This is Page 3")
+
+    fill_in "my-test-input-on-page-3", with: "bar"
+    click_button "Submit me!"
+
+    expect(page).to have_content("server says: form submitted successfully")
+
+    expect(page).to have_content("This is Page 4")
+
+  end
+
   describe "Form Input Component" do
 
     it "Example 1 - Supports 'text', 'password', 'number', 'email', 'textarea' type" do

spec/usage/components/object_spec.rb

@@ -0,0 +1,38 @@
+require_relative '../../support/utils'
+include Utils
+
+describe 'Object Component', type: :feature, js: true do
+
+  it 'Example 1' do
+
+    class ExamplePage < Matestack::Ui::Page
+
+      def response
+        components {
+          # simple object
+          object width: 400, height: 400, data: 'helloworld.swf'
+
+          # enhanced object
+          object id: 'my-id', class: 'my-class', width: 400, height: 400, data: 'helloworld.swf'
+
+          # using all attributes
+          object id: 'my-id', class: 'my-class', width: 400, height: 400, form: '#my_form', data: 'helloworld.swf', name: 'my_object', type: 'application/vnd.adobe.flash-movie', usemap: '#my_map'
+        }
+      end
+
+    end
+
+    visit '/example'
+
+    static_output = page.html
+
+    expected_static_output = <<~HTML
+    <object data="helloworld.swf" height="400" width="400"></object>
+    <object data="helloworld.swf" height="400" id="my-id" width="400" class="my-class"></object>
+    <object data="helloworld.swf" form="#my_form" height="400" id="my-id" name="my_object" type="application/vnd.adobe.flash-movie" usemap="#my_map" width="400" class="my-class"></object>
+    HTML
+
+    expect(stripped(static_output)).to include(stripped(expected_static_output))
+  end
+
+end