|
2 | 2 |
|
3 | 3 | Show [specs](/spec/usage/components/form_spec.rb)
|
4 | 4 |
|
| 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 | + |
5 | 7 | ## Parameters
|
6 | 8 |
|
| 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 | + |
7 | 265 | ## Examples
|
8 | 266 |
|
9 | 267 | 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