Merge branch 'develop' into add_template_component

Author: pascalwengerter

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

@@ -14,32 +14,55 @@ const componentDef = {
   methods: {
     perform: function(){
       const self = this
-      axios({
-        method: self.componentConfig["method"],
-        url: self.componentConfig["action_path"],
-        data: self.componentConfig["data"],
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        }
-      })
-      .then(function(response){
-        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) {
-          let path = self.componentConfig["success"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-        }
-      })
-      .catch(function(error){
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
-        }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["failure"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-        }
-      })
+      if (
+        (self.componentConfig["confirm"] == undefined) || confirm(self.componentConfig["confirm_text"])
+      )
+      {
+        axios({
+          method: self.componentConfig["method"],
+          url: self.componentConfig["action_path"],
+          data: self.componentConfig["data"],
+          headers: {
+            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+          }
+        })
+        .then(function(response){
+          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.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"] || response.request.responseURL;
+            self.$store.dispatch('navigateTo', {url: path, backwards: false});
+            return;
+          }
+        })
+        .catch(function(error){
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+          }
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
+            let path = self.componentConfig["failure"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          }
+        })
+      }
     }
   }
 }

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

@@ -19,6 +19,9 @@ def setup
       if options[:notify].nil?
         @component_config[:notify] = true
       end
+      if @component_config[:confirm] = options[:confirm]
+        @component_config[:confirm_text] = options[:confirm].try(:[], :text) || "Are you sure?"
+      end
     end
 
     def action_path

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

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

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

@@ -0,0 +1,9 @@
+module Matestack::Ui::Core::Dialog
+  class Dialog < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        "open": options[:open] ||= nil
+      })
+    end
+  end
+end

docs/components/README.md

@@ -25,6 +25,7 @@ You can build your [own components](/docs/extend/README.md) as well, both static
 - [dl](/docs/components/dl.md)
   - dd
   - dt
+- [dialog](/docs/components/dialog.md)
 - [div](/docs/components/div.md)
 - [em](/docs/components/em.md)
 - [fieldset](/docs/components/fieldset.md)

docs/components/action.md

@@ -38,6 +38,22 @@ data: {
 }
 ```
 
+### Confirm
+
+When specified, a [browser-native confirm dialog](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) is shown before the action is actually performed. The action only is performed after the user confirms. The action is not performed if the user declines to confirm dialog.
+
+```ruby
+confirm: {
+  text: "Do you really want to delete this item?"
+}
+```
+
+If no `text` is given, the default text "Are you sure?" will be used.
+
+```ruby
+confirm: true
+```
+
 ### 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.
@@ -62,6 +78,33 @@ success: {
 }
 ```
 
+When the server redirects to a url, for example after creating a new record, the transition needs to be configured to follow this redirect of the server response.
+
+```ruby
+success: {
+  emit: 'my_action_success',
+  transition: {
+    follow_response: true
+  }
+}
+```
+
+A controller action that would create a record and then respond with the url the page should transition to, could look like this:
+
+```ruby
+class TestModelsController < ApplicationController
+  include Matestack::Ui::Core::ApplicationHelper
+
+  def create
+    @test_model = TestModel.create(test_model_params)
+
+    render json: {
+      transition_to: test_model_path(@test_model)
+    }, status: :ok
+  end
+end
+```
+
 ### Failure
 
 As counterpart to the success part of the action component, there is also the possibility to define the failure behavior. This is what gets triggered after the response to our action returns a failure code, usually in the range of `400` or `500` HTTP status codes.

docs/components/dialog.md

@@ -0,0 +1,48 @@
+# matestack core component: Dialog
+
+Show [specs](/spec/usage/components/dialog_spec.rb)
+
+The HTML `<dialog>` tag implemented in Ruby.
+
+## Parameters
+
+This component can take 3 optional configuration params and either yield content or display what gets passed to the `text` configuration param.
+
+#### # id (optional)
+Expects a string with all ids the `<dialog>` should have.
+
+#### # class (optional)
+Expects a string with all classes the `<dialog>` should have.
+
+#### # open (optional)
+Expects a boolean. If set to true, the `<dialog>` will be visible.
+
+## Example 1: Yield a given block
+
+```ruby
+dialog id: 'foo', class: 'bar' do
+  plain 'Dialog example 1' # optional content
+end
+```
+
+returns
+
+```html
+<dialog id="foo" class="bar">
+  Dialog example 1
+</dialog>
+```
+
+## Example 2: Render `options[:text]` param
+
+```ruby
+dialog id: 'foo', class: 'bar', text: 'Dialog example 2', open: true
+```
+
+returns
+
+```html
+<dialog id="foo" class="bar" open="open">
+  Dialog example 2
+</dialog>
+```

lib/generators/matestack/core/component/templates/docs/components/%file_name%.md.tt

@@ -42,3 +42,4 @@ returns
 <<%= file_name.underscore %> id="foo" class="bar">
   <%= file_name.camelcase %> example 2
 </<%= file_name.underscore %>>
+```