Skip to content

Commit 87cb091

Browse files
jonasjabarijonasjabari
committed
implemented form redirects, including specs and docs
1 parent 9f44a75 commit 87cb091

File tree

7 files changed

+600
-14
lines changed

7 files changed

+600
-14
lines changed

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

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ const componentDef = {
119119
if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
120120
matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
121121
}
122+
// transition handling
122123
if (self.componentConfig["success"] != undefined
123124
&& self.componentConfig["success"]["transition"] != undefined
124125
&& (
@@ -141,6 +142,30 @@ const componentDef = {
141142
self.$store.dispatch('navigateTo', {url: path, backwards: false})
142143
return;
143144
}
145+
// redirect handling
146+
if (self.componentConfig["success"] != undefined
147+
&& self.componentConfig["success"]["redirect"] != undefined
148+
&& (
149+
self.componentConfig["success"]["redirect"]["follow_response"] == undefined
150+
||
151+
self.componentConfig["success"]["redirect"]["follow_response"] === false
152+
)
153+
&& self.$store != undefined
154+
) {
155+
let path = self.componentConfig["success"]["redirect"]["path"]
156+
window.location.href = path
157+
return;
158+
}
159+
if (self.componentConfig["success"] != undefined
160+
&& self.componentConfig["success"]["redirect"] != undefined
161+
&& self.componentConfig["success"]["redirect"]["follow_response"] === true
162+
&& self.$store != undefined
163+
) {
164+
let path = response.data["redirect_to"] || response.request.responseURL
165+
window.location.href = path
166+
return;
167+
}
168+
144169
if (self.shouldResetFormOnSuccessfulSubmit())
145170
{
146171
self.setProps(self.data, null);
@@ -155,9 +180,60 @@ const componentDef = {
155180
if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
156181
matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
157182
}
158-
if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
183+
// if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
184+
// let path = self.componentConfig["failure"]["transition"]["path"]
185+
// self.$store.dispatch('navigateTo', {url: path, backwards: false})
186+
// }
187+
// if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["redirect"] != undefined && self.$store != undefined) {
188+
// let path = self.componentConfig["failure"]["redirect"]["path"]
189+
// window.location.href = path
190+
// }
191+
192+
// transition handling
193+
if (self.componentConfig["failure"] != undefined
194+
&& self.componentConfig["failure"]["transition"] != undefined
195+
&& (
196+
self.componentConfig["failure"]["transition"]["follow_response"] == undefined
197+
||
198+
self.componentConfig["failure"]["transition"]["follow_response"] === false
199+
)
200+
&& self.$store != undefined
201+
) {
159202
let path = self.componentConfig["failure"]["transition"]["path"]
160203
self.$store.dispatch('navigateTo', {url: path, backwards: false})
204+
return;
205+
}
206+
if (self.componentConfig["failure"] != undefined
207+
&& self.componentConfig["failure"]["transition"] != undefined
208+
&& self.componentConfig["failure"]["transition"]["follow_response"] === true
209+
&& self.$store != undefined
210+
) {
211+
let path = error.response.data["transition_to"] || response.request.responseURL
212+
self.$store.dispatch('navigateTo', {url: path, backwards: false})
213+
return;
214+
}
215+
// redirect handling
216+
if (self.componentConfig["failure"] != undefined
217+
&& self.componentConfig["failure"]["redirect"] != undefined
218+
&& (
219+
self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
220+
||
221+
self.componentConfig["failure"]["redirect"]["follow_response"] === false
222+
)
223+
&& self.$store != undefined
224+
) {
225+
let path = self.componentConfig["failure"]["redirect"]["path"]
226+
window.location.href = path
227+
return;
228+
}
229+
if (self.componentConfig["failure"] != undefined
230+
&& self.componentConfig["failure"]["redirect"] != undefined
231+
&& self.componentConfig["failure"]["redirect"]["follow_response"] === true
232+
&& self.$store != undefined
233+
) {
234+
let path = error.response.data["redirect_to"] || response.request.responseURL
235+
window.location.href = path
236+
return;
161237
}
162238
})
163239
}

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,18 @@ def setup
1313
unless options[:success][:transition].nil?
1414
@component_config[:success][:transition][:path] = transition_path options[:success]
1515
end
16+
unless options[:success][:redirect].nil?
17+
@component_config[:success][:redirect][:path] = redirect_path options[:success]
18+
end
1619
end
1720
@component_config[:failure] = options[:failure]
1821
unless options[:failure].nil?
1922
unless options[:failure][:transition].nil?
2023
@component_config[:failure][:transition][:path] = transition_path options[:failure]
2124
end
25+
unless options[:failure][:redirect].nil?
26+
@component_config[:failure][:redirect][:path] = redirect_path options[:failure]
27+
end
2228
end
2329
@tag_attributes.merge!({"@submit.prevent": true})
2430
rescue => e
@@ -53,6 +59,21 @@ def transition_path callback_options
5359
end
5460
end
5561

62+
def redirect_path callback_options
63+
begin
64+
if callback_options[:redirect][:path].is_a?(Symbol)
65+
return ::Rails.application.routes.url_helpers.send(
66+
callback_options[:redirect][:path],
67+
callback_options[:redirect][:params]
68+
)
69+
else
70+
return callback_options[:redirect][:path]
71+
end
72+
rescue
73+
raise "Redirect path not found"
74+
end
75+
end
76+
5677
def form_wrapper
5778
case options[:for]
5879
when Symbol

‎docs/components/form.md

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,53 @@ class TestModelsController < ApplicationController
163163
end
164164
```
165165

166+
Same applies for the `failure` configuration.
167+
168+
#### Perform redirect
169+
170+
We can also perform a redirect (full page load) that only gets triggered on success and also accepts further params:
171+
172+
Please be aware, that emiting a event doen't have an effect when performing a redirect instead of a transition, as the whole page (including the surrounding app) gets reloaded!
173+
174+
```ruby
175+
success: {
176+
emit: 'my_action_success', # doesn't have an effect when using redirect
177+
redirect: {
178+
path: :action_test_page2_path,
179+
params: { id: 42 }
180+
}
181+
}
182+
```
183+
184+
When the server redirects to a url, for example after creating a new record, the redirect needs to be configured to follow this redirect of the server response.
185+
186+
```ruby
187+
success: {
188+
emit: 'my_action_success', # doesn't have an effect when using redirect
189+
redirect: {
190+
follow_response: true
191+
}
192+
}
193+
```
194+
195+
A controller action that would create a record and then respond with the url the page should redirect to, could look like this:
196+
197+
```ruby
198+
class TestModelsController < ApplicationController
199+
include Matestack::Ui::Core::ApplicationHelper
200+
201+
def create
202+
@test_model = TestModel.create(test_model_params)
203+
204+
render json: {
205+
redirect_to: test_model_path(@test_model)
206+
}, status: :ok
207+
end
208+
end
209+
```
210+
211+
Same applies for the `failure` configuration.
212+
166213
#### Reset form
167214

168215
If submitted successfully, the `form` component resets its state by default when using the "post" method. When using the "put" method, the state is not resetted by default. You may control this behavior explictly by using the `reset` option:
@@ -1348,4 +1395,4 @@ datalist id: 'datalist-id' do
13481395
option value: 10
13491396
option value: 20
13501397
end
1351-
```
1398+
```

0 commit comments

Comments
 (0)