Skip to content

Commit 9713cc1

Browse files
committed
added general form params docs and form reset param docs
1 parent 4e29945 commit 9713cc1

File tree

1 file changed

+258
-0
lines changed

1 file changed

+258
-0
lines changed

docs/components/form.md

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,266 @@
22

33
Show [specs](/spec/usage/components/form_spec.rb)
44

5+
The `form` core component is a vue.js driven dynamic component. It enables you to implement dynamic forms without writing javascript. It relies on child components to collect and submit user input: `form_input`, `form_select` and `form_submit`. They are described within this documentation page.
6+
57
## Parameters
68

9+
The core form component accepts the following parameters. Pass them in as a hash like so:
10+
11+
```ruby
12+
class ExamplePage < Matestack::Ui::Page
13+
14+
def response
15+
components {
16+
form some_form_config, :include do
17+
#...
18+
end
19+
}
20+
end
21+
22+
def some_form_config
23+
{
24+
for: :my_object,
25+
method: :post,
26+
path: :success_form_test_path,
27+
#...
28+
}
29+
end
30+
31+
end
32+
```
33+
34+
Don't forget to add the special keyword `:include`! This enables the form_* child components to access the configuration of ther parent `form` component.
35+
36+
### For
37+
38+
The `form` component wraps the input in an object. The name of this object can be set in multiple ways:
39+
40+
#### set as a symbol
41+
42+
```ruby
43+
for: :my_object
44+
```
45+
46+
```ruby
47+
form some_form_config, :include do
48+
form_input key: :some_input_key, type: :text
49+
end
50+
```
51+
52+
When submitting this form, the `form` component will perform a request with a payload like this:
53+
54+
```ruby
55+
my_object: {
56+
some_input_key: "foo"
57+
}
58+
```
59+
60+
61+
#### set by Active Record class name
62+
63+
```ruby
64+
@my_model = MyActiveRecordModel.new
65+
#...
66+
for: @my_model
67+
```
68+
69+
```ruby
70+
form some_form_config, :include do
71+
form_input key: :some_model_attribute, type: :text
72+
end
73+
```
74+
75+
When submitting this form, the `form` component will perform a request with a payload like this:
76+
77+
```ruby
78+
my_active_record_model: {
79+
some_model_attribute: "foo"
80+
}
81+
```
82+
83+
Please be aware that if you use an Active Record model, the keys of the input components should match a model attribute/method. The form automatically tries to prefill the form inputs through calling the keys as methods on the model.
84+
85+
### Method
86+
87+
This specifies which kind of HTTP method should get triggered. It accepts a symbol like so:
88+
89+
```ruby
90+
method: :post
91+
```
92+
93+
### Path
94+
95+
This parameter accepts a classic Rails path, usually in the form of a symbol like so:
96+
97+
```ruby
98+
path: :action_test_path
99+
```
100+
101+
### Params
102+
103+
Using the standard Rails params, we can pass information to our route!
104+
105+
```ruby
106+
params: { id: 42 }
107+
```
108+
109+
110+
### Success
111+
112+
The success part of the `form` component gets triggered once the controller action we wanted to call returns a success code, usually the `2xx` HTTP status code.
113+
114+
115+
#### Emit event
116+
117+
To trigger further behavior, we can configure the success part of a `form` to emit a message like so:
118+
119+
```ruby
120+
success: {
121+
emit: 'my_action_success'
122+
}
123+
```
124+
125+
#### Perform transition
126+
127+
We can also perform a transition that only gets triggered on success and also accepts further params:
128+
129+
```ruby
130+
success: {
131+
emit: 'my_action_success',
132+
transition: {
133+
path: :action_test_page2_path,
134+
params: { id: 42 }
135+
}
136+
}
137+
```
138+
139+
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.
140+
141+
```ruby
142+
success: {
143+
emit: 'my_action_success',
144+
transition: {
145+
follow_response: true
146+
}
147+
}
148+
```
149+
150+
A controller action that would create a record and then respond with the url the page should transition to, could look like this:
151+
152+
```ruby
153+
class TestModelsController < ApplicationController
154+
include Matestack::Ui::Core::ApplicationHelper
155+
156+
def create
157+
@test_model = TestModel.create(test_model_params)
158+
159+
render json: {
160+
transition_to: test_model_path(@test_model)
161+
}, status: :ok
162+
end
163+
end
164+
```
165+
166+
#### Reset form
167+
168+
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:
169+
170+
```ruby
171+
method: :post
172+
success: {
173+
emit: 'my_action_success',
174+
reset: false #default true when using the :post method when submitted successfully
175+
}
176+
```
177+
178+
```ruby
179+
method: :put
180+
success: {
181+
emit: 'my_action_success',
182+
reset: true #default false when using the :put method when submitted successfully
183+
}
184+
```
185+
186+
187+
### Failure
188+
189+
As counterpart to the success part of the `form` component, there is also the possibility to define the failure behavior. This is what gets triggered after the response to our `form` submit returns a failure code, usually in the range of `400` or `500` HTTP status codes.
190+
191+
#### Emit event
192+
193+
To trigger further behavior, we can configure the failure part of an action to emit a message like so:
194+
195+
```ruby
196+
failure: {
197+
emit: 'my_action_failure'
198+
}
199+
```
200+
201+
202+
#### Perform transition
203+
204+
We can also perform a transition that only gets triggered on failure:
205+
206+
```ruby
207+
failure: {
208+
emit: 'my_action_failure',
209+
transition: {
210+
path: :root_path
211+
}
212+
}
213+
```
214+
215+
#### Reset form
216+
217+
The `form` component does not reset its state by default when not submitted successfully. You may control this behavior explictly by using the `reset` option:
218+
219+
```ruby
220+
method: :post
221+
failure: {
222+
emit: 'my_action_failure',
223+
reset: true #default false when using the :post method and not successful
224+
}
225+
```
226+
227+
```ruby
228+
method: :put
229+
failure: {
230+
emit: 'my_action_failure',
231+
reset: true #default false when using the :put method and not successful
232+
}
233+
```
234+
235+
236+
### ID (optional)
237+
238+
This parameter accepts a string of ids that the action component should have:
239+
240+
```ruby
241+
id: 'my-action-id'
242+
```
243+
244+
which renders as an HTML `id` attribute, like so:
245+
246+
```html
247+
<a id="my-action-id">...</a>
248+
```
249+
250+
### Class (optional)
251+
252+
This parameter accepts a string of classes that the action component should have:
253+
254+
```ruby
255+
class: 'my-action-class'
256+
```
257+
258+
which renders as an HTML `class` attribute, like so:
259+
260+
```html
261+
<a class="my-action-class">...</a>
262+
```
263+
264+
7265
## Examples
8266

9267
These examples show generic use cases and can be used as a guideline of what is possible with the form core component.

0 commit comments

Comments
 (0)